/* GLIDE · Tema compartido entre todas las páginas de la app.
   Define la paleta del manual de marca + componentes base (botones, cards,
   inputs, badges, page-headers y subtabs en pill).
   Cada página solo agrega los estilos específicos de su pantalla. */

:root {
  /* Paleta GLIDE (manual de marca) */
  --azul: #004AAD;
  --azul-d: #003580;
  --azul-l: #1A66C7;
  --celeste: #5DE0E6;
  --celeste-d: #2BB6BD;

  /* Tinta (texto/UI) */
  --tinta: #053E5C;
  --tinta-2: #4A7A95;
  --tinta-3: #8FB0C2;

  /* Superficies */
  --bg: #F4FAFD;
  --surface: #ffffff;
  --surface-2: #F7FBFD;
  --surface-3: #EBF4F9;
  --border: #D5E6F0;
  --border-2: #B8D2E0;

  /* Estados */
  --rojo: #E63946;
  --rojo-bg: #FDECEE;
  --verde: #2BB673;
  --verde-bg: #E1F5EE;
  --naranja: #F4A261;
  --naranja-bg: #FFF2DB;
  --violeta: #9333EA;
  --violeta-bg: #F1E5FA;

  /* Errores / advertencias */
  --err-bg: #FCEBEB;
  --err-text: #791F1F;
  --err-border: #A32D2D;
  --warn-bg: #FAEEDA;
  --warn-text: #633806;
  --warn-border: #BA7517;
  --ok-bg: #E1F5EE;
  --ok-text: #085041;

  /* Sombras (capas suaves — dan profundidad sin ensuciar) */
  --shadow-sm: 0 1px 2px rgba(5, 62, 92, 0.05), 0 1px 6px rgba(5, 62, 92, 0.05);
  --shadow-md: 0 2px 6px rgba(5, 62, 92, 0.06), 0 8px 24px rgba(5, 62, 92, 0.07);
  --shadow-lg: 0 4px 12px rgba(5, 62, 92, 0.08), 0 16px 48px rgba(5, 62, 92, 0.12);

  /* Gradientes de marca (azul → celeste del manual) */
  --grad-azul: linear-gradient(135deg, #004AAD 0%, #0B5FD0 100%);
  --grad-marca: linear-gradient(90deg, var(--azul) 0%, var(--celeste-d) 100%);

  /* Anillo de foco accesible */
  --focus-ring: 0 0 0 3px rgba(0, 74, 173, 0.16);

  /* Radios */
  --r-sm: 6px;
  --r: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
}

/* ── Reset ─────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: 'Public Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: var(--tinta);
  /* Fondo con un degradé MUY sutil (celeste arriba → base) para sacar lo "plano". */
  background: linear-gradient(180deg, #EEF7FC 0%, var(--bg) 220px);
  background-color: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Selección de texto con el celeste de marca */
::selection { background: rgba(93, 224, 230, 0.35); }

/* Scrollbars finas y tintadas (Chrome/Edge + Firefox) */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--tinta-3); }

/* Foco visible para navegación con teclado (no afecta el click) */
:focus-visible { outline: 2px solid var(--azul-l); outline-offset: 2px; border-radius: 4px; }

/* Respetar usuarios con animaciones reducidas */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

h1, h2, h3, h4, h5 {
  font-family: 'Raleway', 'Public Sans', system-ui, sans-serif;
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: -0.01em;
}
h1 { font-size: 22px; }
h2 { font-size: 17px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Page header unificado ─────────────────────────────────── */
/* Header consistente entre todos los módulos: título + subtabs pill + acciones. */
.glide-page-hdr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.glide-page-hdr h1 {
  font-size: 19px;
  font-weight: 700;
  color: var(--tinta);
  margin-right: 4px;
}
.glide-page-hdr .hdr-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .glide-page-hdr { padding: 12px 14px; gap: 8px; }
  .glide-page-hdr h1 { font-size: 16px; }
  .glide-page-hdr .hdr-actions { gap: 6px; }
}

/* ── Subtabs (pill style, dentro del page-hdr) ─────────────── */
.glide-subtabs {
  display: inline-flex;
  gap: 4px;
  background: var(--surface-3);
  padding: 3px;
  border-radius: var(--r-md);
}
.glide-subtabs button {
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: 7px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-2);
  cursor: pointer;
  transition: all 0.15s;
}
.glide-subtabs button:hover { color: var(--tinta); background: rgba(0, 74, 173, 0.06); }
.glide-subtabs button.active {
  background: var(--grad-azul);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 74, 173, 0.30);
}
@media (max-width: 640px) {
  /* En el celular las pestañas que no entran pasan a otra línea (no estiran la página). */
  .glide-subtabs { display: flex; flex-wrap: wrap; max-width: 100%; }
  .glide-subtabs button { padding: 5px 10px; font-size: 12px; }
}

/* ── Cards ─────────────────────────────────────────────────── */
.glide-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.glide-card-lg {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px 26px;
  box-shadow: var(--shadow-md);
}

/* ── Buttons ───────────────────────────────────────────────── */
.glide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r);
  border: 1px solid var(--border-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
  text-decoration: none;
}
.glide-btn:hover { background: var(--surface-2); border-color: var(--azul-l); }
.glide-btn:active { transform: translateY(1px); }
.glide-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.glide-btn-primary {
  background: var(--grad-azul);
  color: #fff;
  border-color: var(--azul);
  box-shadow: 0 1px 3px rgba(0, 74, 173, 0.30);
}
.glide-btn-primary:hover {
  background: linear-gradient(135deg, var(--azul-d) 0%, var(--azul) 100%);
  border-color: var(--azul-d);
  box-shadow: 0 3px 10px rgba(0, 74, 173, 0.30);
  transform: translateY(-1px);
}
.glide-btn-primary:active { transform: translateY(0); }

.glide-btn-celeste {
  background: var(--celeste);
  color: var(--tinta);
  border-color: var(--celeste);
}
.glide-btn-celeste:hover { background: var(--celeste-d); border-color: var(--celeste-d); color: #fff; }

.glide-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--tinta-2);
}
.glide-btn-ghost:hover { background: var(--surface-3); color: var(--tinta); }

.glide-btn-danger {
  background: var(--rojo-bg);
  color: var(--rojo);
  border-color: var(--rojo);
}
.glide-btn-danger:hover { background: var(--rojo); color: #fff; }

.glide-btn-sm { padding: 5px 10px; font-size: 12px; }
.glide-btn-xs { padding: 3px 8px; font-size: 11px; }
.glide-btn-block { width: 100%; padding: 11px 16px; }

/* ── Inputs ────────────────────────────────────────────────── */
.glide-input, .glide-select, .glide-textarea,
input[type=text].gi, input[type=email].gi, input[type=password].gi,
input[type=number].gi, input[type=date].gi, input[type=tel].gi,
input[type=search].gi, select.gi, textarea.gi {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-family: inherit;
  font-size: 13px;
  color: var(--tinta);
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.glide-input:hover, .glide-select:hover, .glide-textarea:hover, .gi:hover {
  border-color: var(--border-2);
}
.glide-input:focus, .glide-select:focus, .glide-textarea:focus,
.gi:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: var(--focus-ring);
}
.glide-textarea, textarea.gi { resize: vertical; min-height: 60px; line-height: 1.5; }

.glide-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--tinta-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}

.glide-fg { margin-bottom: 12px; }
.glide-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.glide-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 600px) {
  .glide-row2, .glide-row3 { grid-template-columns: 1fr; }
}

/* ── Badges ────────────────────────────────────────────────── */
.glide-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-3);
  color: var(--tinta);
}
.glide-badge-ok    { background: var(--ok-bg);     color: var(--ok-text); }
.glide-badge-err   { background: var(--err-bg);    color: var(--err-text); }
.glide-badge-warn  { background: var(--warn-bg);   color: var(--warn-text); }
.glide-badge-info  { background: #E6F1FB;          color: #0C447C; }
.glide-badge-azul  { background: var(--azul);      color: #fff; }

/* ── Alerts ────────────────────────────────────────────────── */
.glide-alert {
  padding: 10px 14px;
  border-radius: var(--r);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.glide-alert.ok   { background: var(--ok-bg);   color: var(--ok-text);   border-left: 3px solid #0F6E56; }
.glide-alert.err  { background: var(--err-bg);  color: var(--err-text);  border-left: 3px solid var(--err-border); }
.glide-alert.warn { background: var(--warn-bg); color: var(--warn-text); border-left: 3px solid var(--warn-border); }
.glide-alert.info { background: #E6F1FB;        color: #0C447C;          border-left: 3px solid var(--azul); }

/* ── Pills (filtros) ───────────────────────────────────────── */
.glide-pill {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--surface);
  color: var(--tinta-2);
  white-space: nowrap;
  transition: all 0.1s;
}
.glide-pill:hover { border-color: var(--azul-l); color: var(--tinta); }
.glide-pill.active {
  background: var(--azul);
  color: #fff;
  border-color: var(--azul);
}

/* ── Tablas ───────────────────────────────────────────────── */
.glide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--surface);
}
.glide-table th {
  text-align: left;
  padding: 9px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-2);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.glide-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.glide-table tr:hover td { background: var(--surface-2); }

/* ── Drop zone (uploads) ───────────────────────────────────── */
.glide-dropzone {
  border: 2px dashed var(--border-2);
  border-radius: var(--r-lg);
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--surface);
  transition: all 0.15s;
  color: var(--tinta-2);
}
.glide-dropzone:hover, .glide-dropzone.dragover {
  border-color: var(--azul);
  background: var(--surface-3);
  color: var(--tinta);
}

/* ── Spinner ───────────────────────────────────────────────── */
.glide-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--azul);
  border-radius: 50%;
  animation: glide-spin 0.6s linear infinite;
}
@keyframes glide-spin { to { transform: rotate(360deg); } }

/* ── Progress bar ──────────────────────────────────────────── */
.glide-progress {
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
  margin: 8px 0;
}
.glide-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--azul), var(--celeste));
  transition: width 0.4s ease;
}

/* ── Step indicator (wizards) ──────────────────────────────── */
.glide-steps {
  display: flex;
  gap: 0;
  margin-bottom: 18px;
  background: var(--surface);
  border-radius: var(--r);
  padding: 4px;
  border: 1px solid var(--border);
}
.glide-step {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--tinta-3);
  border-radius: var(--r-sm);
  position: relative;
}
.glide-step.active { color: #fff; background: var(--azul); }
.glide-step.done   { color: var(--ok-text); background: var(--ok-bg); }

/* ── Layout helpers ────────────────────────────────────────── */
.glide-container { max-width: 1280px; margin: 0 auto; padding: 20px 22px; }
.glide-container-sm { max-width: 840px; margin: 0 auto; padding: 20px 22px; }
.glide-spacer { flex: 1; }
.glide-mt-1 { margin-top: 8px; }
.glide-mt-2 { margin-top: 14px; }
.glide-mt-3 { margin-top: 20px; }
.glide-mb-1 { margin-bottom: 8px; }
.glide-mb-2 { margin-bottom: 14px; }
.glide-mb-3 { margin-bottom: 20px; }

/* ── Hint/subtitle ─────────────────────────────────────────── */
.glide-hint {
  font-size: 11px;
  color: var(--tinta-3);
  margin-top: 4px;
  line-height: 1.5;
}
.glide-subtitle {
  font-size: 13px;
  color: var(--tinta-2);
  margin-top: 2px;
}

/* ── Animación de entrada (opt-in con la clase) ────────────── */
@keyframes glide-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.glide-fade-up { animation: glide-fade-up 0.35s ease both; }

/* ── Móvil ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* iOS hace zoom automático al enfocar inputs con fuente <16px.
     Subimos los inputs del theme a 16px en pantallas chicas para evitarlo. */
  .glide-input, .glide-select, .glide-textarea, .gi { font-size: 16px; }
  /* (M20) El fix anterior solo cubría clases del theme; los módulos (contable .mv-lines,
     producción .edit-grid, crm .crm-fg, intake .lines-row) usan inputs propios <16px que
     SEGUÍAN disparando el auto-zoom de iOS. Blanket a 16px con !important para ganar a la
     especificidad de esos selectores. En móvil un input de 16px es siempre lo deseado. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea { font-size: 16px !important; }
}
@media (pointer: coarse) {
  /* (M21) Targets táctiles más cómodos sin romper layouts densos de desktop */
  .glide-btn { min-height: 44px; }
  .glide-pill { padding: 7px 13px; }
  /* Botones ícono-only "×" / borrar: hitbox mínima de 44px (los módulos usan la clase .x) */
  .x, button.x, .icon-btn, [data-icon-btn] {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}