/* CRM Web — base visual. Sin compilación. Colores en un solo lugar (:root); modo oscuro automático. */
:root {
  color-scheme: light dark;
  --fondo: light-dark(#f4f5f9, #0f1117);
  --papel: light-dark(#ffffff, #181b24);
  --papel-2: light-dark(#f0f2f7, #212532);
  --texto: light-dark(#161a23, #e8eaf0);
  --suave: light-dark(#5b6475, #9aa3b5);
  --linea: light-dark(#e2e6ee, #2b3040);
  --marca: light-dark(#4338ca, #8b93ff);
  --marca-fuerte: light-dark(#3730a3, #a5abff);
  --marca-texto: light-dark(#ffffff, #0f1117);
  --marca-suave: light-dark(#eef0ff, #232754);
  --ok: light-dark(#0f766e, #4fd1c0);
  --ok-fondo: light-dark(#e3f6f3, #12302d);
  --error: light-dark(#b42318, #ff8a80);
  --error-fondo: light-dark(#fdecea, #3a1a18);
  --aviso: light-dark(#92400e, #fbbf24);
  --aviso-fondo: light-dark(#fef3c7, #3a2c0b);
  --radio: 14px;
  --sombra: 0 1px 2px rgb(16 24 40 / .05), 0 4px 14px rgb(16 24 40 / .05);
  --objetivo: 24px; /* tamaño mínimo de controles con mouse (WCAG 2.5.8) */
}
@media (pointer: coarse) { :root { --objetivo: 44px; } /* táctil (WCAG 2.5.5) */ }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-block-size: 100dvh; display: flex; flex-direction: column;
  font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo); color: var(--texto);
}
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; border-radius: 6px; }
a { color: var(--marca); text-underline-offset: 2px; }
a:hover { color: var(--marca-fuerte); }

/* Cabecera fija: marca + usuario; las secciones van en una barra de pestañas (abajo en celular, arriba en escritorio) */
.cabecera { position: sticky; inset-block-start: 0; z-index: 20; background: var(--papel); border-block-end: 1px solid var(--linea); }
.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem max(1rem, env(safe-area-inset-right)) .55rem max(1rem, env(safe-area-inset-left));
}
.marca { font-weight: 700; letter-spacing: -.01em; }
.marca span { color: var(--suave); font-weight: 500; margin-inline-start: .5rem; font-size: .85em; }
.avatar { display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: var(--marca); color: var(--marca-texto); font-weight: 700; font-size: .85rem; text-transform: uppercase; }
.usuario { position: relative; }
.usuario > summary { list-style: none; cursor: pointer; display: grid; place-items: center; min-inline-size: var(--objetivo); min-block-size: var(--objetivo); }
.usuario > summary::-webkit-details-marker { display: none; }
.usuario-menu {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + .35rem); min-inline-size: 13rem; padding: .5rem;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: 0 8px 30px rgb(16 24 40 / .18);
}
.usuario-menu p { margin: .25rem .6rem .4rem; font-size: .85rem; }
.usuario-menu a, .usuario-menu button { display: flex; inline-size: 100%; align-items: center; min-block-size: var(--objetivo); padding: 0 .6rem; border-radius: 8px; color: var(--texto); text-decoration: none; background: none; font-weight: 500; justify-content: flex-start; }
.usuario-menu a:hover, .usuario-menu button:hover { background: var(--papel-2); }

nav.principal { display: flex; gap: .25rem; padding: 0 max(1rem, env(safe-area-inset-right)) .5rem max(1rem, env(safe-area-inset-left)); overflow-x: auto; scrollbar-width: none; }
nav.principal a {
  display: inline-flex; align-items: center; gap: .45rem; min-block-size: var(--objetivo); padding: 0 .9rem;
  border-radius: 999px; color: var(--suave); text-decoration: none; font-weight: 500; white-space: nowrap;
}
nav.principal a:hover { background: var(--papel-2); color: var(--texto); }
nav.principal a.activo { background: var(--marca-suave); color: var(--marca); font-weight: 600; }
.ico { inline-size: 1.35rem; block-size: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Celular: barra de pestañas fija abajo, como una app */
@media (max-width: 760px) {
  nav.principal {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30; justify-content: space-around; gap: 0; overflow: visible;
    padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); background: var(--papel); border-block-start: 1px solid var(--linea);
    box-shadow: 0 -4px 18px rgb(16 24 40 / .08);
  }
  nav.principal a { flex: 1 1 0; flex-direction: column; gap: .1rem; padding: .3rem .1rem; border-radius: 12px; font-size: .7rem; min-block-size: 3.2rem; justify-content: center; }
  nav.principal a span { line-height: 1.1; }
  body { padding-block-end: 4.5rem; }
}

.contenido {
  inline-size: 100%; max-inline-size: 1100px; margin: 0 auto; flex: 1;
  padding: clamp(1rem, 3vw, 2rem) max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left));
}
.pie { text-align: center; color: var(--suave); font-size: .85rem; padding: 1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom)); }

h1 { font-size: clamp(1.45rem, 1rem + 2vw, 2rem); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .75rem; text-wrap: balance; }
h2 { font-size: clamp(1.05rem, .95rem + .6vw, 1.25rem); letter-spacing: -.01em; margin: 1.75rem 0 .75rem; text-wrap: balance; }
p { text-wrap: pretty; }

/* Tarjetas y cifras */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: .75rem; }
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem; box-shadow: var(--sombra); container-type: inline-size; }
.tarjeta .num { font-size: clamp(1.4rem, 1rem + 2vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.tarjeta .etq { color: var(--suave); font-size: .88rem; }

/* Tablas: con desplazamiento propio y encabezado fijo */
.tabla-scroll {
  overflow: auto; max-inline-size: 100%; max-block-size: min(70dvh, 38rem);
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); box-shadow: var(--sombra);
  container-type: inline-size;
}
.tabla-scroll:focus-visible { outline-offset: -3px; }
table { inline-size: 100%; border-collapse: separate; border-spacing: 0; background: var(--papel); }
th, td { text-align: start; padding: .65rem .85rem; border-block-end: 1px solid var(--linea); vertical-align: top; }
tbody tr:last-child > * { border-block-end: 0; }
tbody tr:hover > * { background: var(--papel-2); }
thead th { position: sticky; inset-block-start: 0; z-index: 1; background: var(--papel-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); white-space: nowrap; }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Estados y avisos */
.estado { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--papel-2); color: var(--suave); }
.estado.ok { background: var(--ok-fondo); color: var(--ok); }
.estado.error, .estado.peligro { background: var(--error-fondo); color: var(--error); }
.estado.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.aviso { padding: .8rem 1rem; border-radius: 12px; margin: 0 0 1rem; border: 1px solid transparent; }
.aviso.ok { background: var(--ok-fondo); color: var(--ok); }
.aviso.error { background: var(--error-fondo); color: var(--error); }
.aviso.info { background: var(--aviso-fondo); color: var(--aviso); }
.aviso ul { margin: 0; padding-inline-start: 1.2rem; }

/* Formularios */
form.tarjeta { max-inline-size: 34rem; }
label { display: block; font-weight: 600; font-size: .92rem; margin: .9rem 0 .3rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], select, textarea {
  inline-size: 100%; min-block-size: max(var(--objetivo), 2.6rem); padding: .5rem .75rem;
  border: 1px solid var(--linea); border-radius: 10px; font: inherit; background: var(--papel); color: var(--texto);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--marca); outline-offset: 0; }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--error); }
input[type=file] { margin-block-start: .25rem; max-inline-size: 100%; }
button, .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-block-size: max(var(--objetivo), 2.6rem); padding: 0 1.15rem;
  border: 0; border-radius: 10px; background: var(--marca); color: var(--marca-texto); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background-color .15s, transform .05s;
}
button:hover, .boton:hover { background: var(--marca-fuerte); color: var(--marca-texto); }
button:active, .boton:active { transform: translateY(1px); }
.boton.sec, button.sec { background: var(--papel-2); color: var(--texto); border: 1px solid var(--linea); }
.boton.peligro, button.peligro { background: var(--error); color: #fff; }
button.enlace { background: none; color: var(--suave); padding: 0 .8rem; font-weight: 500; }
button.enlace:hover { background: var(--papel-2); color: var(--texto); }
.en-linea { display: inline; }
.acciones { display: flex; gap: .5rem; margin-block-start: 1rem; flex-wrap: wrap; }
.suave { color: var(--suave); }
.derecha { text-align: end; }
.validaciones li.ok::marker { content: "✔ "; color: var(--ok); }
.validaciones li.error::marker { content: "✖ "; color: var(--error); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .barra, .pie, nav { display: none; } body { background: #fff; color: #000; } }

/* Enlaces modernos: sin subrayado por defecto, con énfasis al pasar el cursor */
a { text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a.boton, nav a, .usuario-menu a, a.volver, .item-enlace { text-decoration: none !important; }
.volver { display: inline-flex; align-items: center; gap: .25rem; min-block-size: var(--objetivo); margin: 0 0 .5rem -.35rem; padding: 0 .75rem 0 .35rem; border-radius: 999px; color: var(--suave); }
.volver:hover { background: var(--papel-2); color: var(--texto); }
.boton .ico { inline-size: 1.1rem; block-size: 1.1rem; }

/* Pantallas de acceso (login, recuperar contraseña): tarjeta centrada con marca */
.marca-auth { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: clamp(1.5rem, 8vh, 4rem) 1rem 0; }
.marca-auth .logo { inline-size: 2.6rem; block-size: 2.6rem; flex: none; filter: drop-shadow(0 6px 14px rgb(67 56 202 / .35)); }
.marca-auth strong { font-size: 1.15rem; letter-spacing: -.01em; }
.marca-auth span { color: var(--suave); font-size: .9rem; }
body:has(.marca-auth) { background: radial-gradient(60rem 28rem at 50% -8rem, color-mix(in srgb, var(--marca) 16%, transparent), transparent 70%), var(--fondo); }
body:has(.marca-auth) .contenido { display: grid; justify-items: center; align-content: start; padding-block-start: 1.25rem; }
body:has(.marca-auth) form.tarjeta { inline-size: 100%; max-inline-size: 26rem; padding: 1.5rem; box-shadow: 0 10px 40px rgb(16 24 40 / .12); }
body:has(.marca-auth) form.tarjeta h1 { font-size: 1.6rem; margin-block-end: .25rem; }
body:has(.marca-auth) .acciones { flex-direction: column; align-items: stretch; gap: .75rem; margin-block-start: 1.25rem; }
.ancho { inline-size: 100%; }
.olvide { text-align: center; color: var(--suave); font-size: .92rem; }