/* =========================================================
   RuralGestión — Tema STITCH (override)
   Capa visual por encima del tema clásico.
   Objetivo: más moderno, tarjetas, fondo suave, tipografía,
   sin romper layout ni flujos.
   ========================================================= */

:root {
  --rg-bg: #0b1220;
  --rg-bg2: #0f1a33;
  --rg-surface: rgba(255,255,255,.06);
  --rg-surface2: rgba(255,255,255,.10);
  --rg-border: rgba(255,255,255,.10);
  --rg-text: rgba(255,255,255,.92);
  --rg-muted: rgba(255,255,255,.70);
  --rg-accent: #7dd3fc; /* azul suave */
  --rg-accent2: #a78bfa; /* lila suave */
  --rg-shadow: 0 18px 50px rgba(0,0,0,.35);
  --rg-radius: 16px;
  --rg-radius2: 22px;
  --rg-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* Fondo global */
html, body {
  background: radial-gradient(1200px 900px at 20% 10%, rgba(125, 211, 252, .20), transparent 55%),
              radial-gradient(1000px 800px at 85% 15%, rgba(167, 139, 250, .18), transparent 55%),
              linear-gradient(180deg, var(--rg-bg), var(--rg-bg2));
  color: var(--rg-text) !important;
  font-family: var(--rg-font) !important;
}

/* Contenedores típicos */
main, .container, .wrap, .page, .content {
  color: var(--rg-text);
}

/* Header/topbar */
header, .topbar, .app-header {
  background: rgba(0,0,0,.18) !important;
  border: 1px solid var(--rg-border) !important;
  border-radius: var(--rg-radius2) !important;
  box-shadow: var(--rg-shadow) !important;
  backdrop-filter: blur(14px);
}

header h1, header .title, header .brand-title, header .rg-title {
  font-size: 22px !important;
  line-height: 1.15 !important;
  letter-spacing: .2px !important;
  color: var(--rg-text) !important;
}

header img, header svg { max-height: 34px !important; }

/* Tarjetas genéricas */
.card, .tile, .box, .panel, .rg-card, .app-card, .module-card,
section, article {
  background: var(--rg-surface) !important;
  border: 1px solid var(--rg-border) !important;
  border-radius: var(--rg-radius2) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(10px);
}

/* Links */
a { color: var(--rg-accent) !important; }
a:hover { opacity: .9; }

/* Botones */
button, .btn, input[type="button"], input[type="submit"] {
  border-radius: 14px !important;
  border: 1px solid var(--rg-border) !important;
  background: linear-gradient(135deg, rgba(125,211,252,.22), rgba(167,139,250,.18)) !important;
  color: var(--rg-text) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
  transition: transform .06s ease, filter .15s ease;
}

button:hover, .btn:hover { filter: brightness(1.05); }
button:active, .btn:active { transform: translateY(1px); }

/* Inputs */
input, select, textarea {
  background: rgba(0,0,0,.22) !important;
  color: var(--rg-text) !important;
  border: 1px solid var(--rg-border) !important;
  border-radius: 14px !important;
  outline: none !important;
}

input::placeholder, textarea::placeholder { color: rgba(255,255,255,.55) !important; }

input:focus, select:focus, textarea:focus {
  border-color: rgba(125,211,252,.55) !important;
  box-shadow: 0 0 0 3px rgba(125,211,252,.12) !important;
}

/* Tablas */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  border-radius: var(--rg-radius2) !important;
  border: 1px solid var(--rg-border) !important;
  background: rgba(0,0,0,.16) !important;
}
th, td {
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  color: var(--rg-text) !important;
}
th { color: rgba(255,255,255,.85) !important; }

/* Modales */
.modal, .dialog, .overlay .content, .rg-modal {
  background: rgba(10,16,30,.75) !important;
  border: 1px solid var(--rg-border) !important;
  border-radius: var(--rg-radius2) !important;
  box-shadow: var(--rg-shadow) !important;
  backdrop-filter: blur(14px);
}

/* Textos “muted” */
.muted, .hint, .help, .subtle {
  color: var(--rg-muted) !important;
}

/* Etiquetas estado */
.badge, .tag, .pill {
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.85) !important;
}