/* ===========================================================
   CRM Vanu — shell de la aplicación
   Base blanca, un acento alegre y todo lo táctil redondeado.

   Reemplaza a v2.css, que era el sistema del dashboard de Polino ("carta
   náutica nocturna"): 3.434 líneas de containers y navieras de las que este
   CRM usaba 33 clases. Lo que sigue es sólo esas 33, retematizadas.

   El tema no es una preferencia estética suelta, sale de dos hechos:

     1. Lo que pidió Vani el 7-08-2026, mirando la app en vivo: base blanca,
        colores alegres, botones redondeados. Textual sobre lo que había:
        "de momento con que no sea marrón me conformo". La carta de color de
        tintura que inspiraba la paleta anterior era del rubro pero leía
        terrosa; los nombres de los tokens (--cobre, --salvia, --ladrillo)
        quedaron por contrato con `brand.accent` y con vanu.css, pero los
        valores ya no son ésos: el acento es un fucsia y las señales son
        verde, rojo y azul plenos.
     2. El uso real. Vani abre esto parada en la vereda, con sol y con una
        mano. Un tablero oscuro es lo peor que se puede leer al sol, y de ahí
        el fondo claro. Por la misma razón, TODO par de colores de este
        archivo cumple WCAG AA (4.5:1 para texto): está verificado, no
        estimado, y conviene volver a verificar antes de tocar un valor.

   Las pantallas del vendedor (el día, la cartera, la ficha) viven en
   vanu.css, que hereda estos tokens y no define ninguno propio salvo --zona.
   =========================================================== */

:root {
  /* Papel — el fondo. Tres profundidades: la página, lo que se eleva sobre
     ella (fichas, campos) y lo que se hunde (barras, hovers). La página no es
     #FFFFFF exacto para que la ficha elevada todavía se despegue del fondo;
     a ojo es blanco, que es lo que se pidió. */
  --papel:        #FDFDFF;
  --papel-alto:   #FFFFFF;
  --papel-hondo:  #F2F4F9;

  /* Tinta — tres pesos de texto, ahora en gris neutro frío en vez del pardo
     anterior. El tercero es el más claro que todavía pasa AA sobre papel
     (4.75:1); por debajo de esto el dato deja de leerse al sol, que es donde
     se lee. */
  --tinta:        #1E2430;
  --tinta-media:  #4C5566;
  --tinta-tenue:  #6B7385;

  /* Líneas. La suave es para separar filas de una misma lista; la otra,
     para cerrar una caja o una sección. */
  --linea:        #DCE1EA;
  --linea-suave:  #EDF0F5;

  /* El acento. Lo pisa `brand.accent` desde la base en el layout, así que no
     inlinear el hex en ningún lado: usar var(--cobre). Fucsia a 5.4:1 sobre
     papel, que es lo que permite usarlo relleno con texto papel encima. */
  --cobre:        #C2185B;
  /* Sin consumidores directos desde que los tintes del acento pasaron a
     color-mix(). Se queda porque el layout lo inyecta igual (brand.accent_rgb)
     y sacarlo de acá dejaría al :root del template pisando algo no declarado. */
  --cobre-rgb:    194, 24, 91;
  --cobre-lavado: #FDE7F0;

  /* Señales. Sólo tres, y ninguna comunica sola: siempre van con texto.
     salvia = pasó / hay canal · ladrillo = alerta / baja · pizarra = dato
     de referencia (mapa, inactivo). Verde 5.4:1, rojo 4.8:1, azul 5.3:1. */
  --salvia:       #14794A;
  --ladrillo:     #D93025;
  --pizarra:      #1667D5;

  /* Radios. Lo táctil va en pastilla completa (botones, chips, estados) y lo
     que contiene, con esquina blanda. Antes no había ninguno: la app era toda
     de esquina viva. */
  --radio:          12px;
  --radio-chico:    8px;
  --radio-pastilla: 999px;

  /* Tipografía. Fraunces es una serif de contraste alto que se usa SÓLO en
     los tres o cuatro títulos que anclan cada pantalla; en cuerpo se vuelve
     ruido. Inter Tight es todo lo demás, incluidos los números. */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --texto:   'Inter Tight', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;

  /* Breakpoints, como referencia — las media queries los escriben literales
     porque var() no funciona dentro de @media. */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
}

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

html, body {
  height: 100%;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 14px;
  line-height: 1.5;
  /* Las cifras se comparan en columna (cartera, panel, recuentos del día):
     sin tabular-nums los dígitos bailan de fila a fila. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  /* El shell es de alto fijo y scrollea por dentro (main.detail). Abajo de
     1023px esto se libera: ver el @media del final. */
  overflow: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* --- Armazón -------------------------------------------------------------- */

/* El body reparte el alto entre las bandas de arriba y el armazón.

   Arriba de `.app` hay dos cintas que no siempre están: la de la instancia
   ("Instancia dev · en construcción") y la del modo «ver como». Con `.app` en
   100vh fijos, cada cinta empujaba la app entera hacia abajo y el armazón
   terminaba tantos píxeles por debajo del borde de la ventana como midiera la
   cinta —27 la de instancia—, así que el pie de cada pantalla quedaba cortado.
   En la mayoría no se notaba porque `main` scrollea por dentro; en el mapa, que
   se planta en el hueco que le dejan, era el borde de abajo comido. */
body { display: flex; flex-direction: column; }

.app {
  display: flex;
  flex-direction: column;
  /* El hueco que quede después de las cintas, no la ventana entera. Abajo de
     1023px el body deja de tener alto fijo y esto vuelve a ser el 100vh de
     antes: ver el @media del final. */
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

header.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
  flex-shrink: 0;
}

.brand {
  font-family: var(--display);
  font-size: clamp(15px, 3.6vw, 19px);
  font-weight: 600;
  /* Fraunces ya viene ancha; el tracking negativo es lo que la hace ver
     compuesta y no estirada. */
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--tinta);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Marca de la casa mientras no haya logo: dos barras de color, la muestra
   más chica que existe en una carta de color. Reemplaza al rombo que venía
   del dashboard náutico. */
.brand .lozenge {
  width: 14px;
  height: 20px;
  flex: none;
  border-radius: var(--radio-chico);
  background: linear-gradient(
    to bottom,
    var(--cobre) 0 50%,
    var(--tinta) 50% 100%
  );
}

.brand .brand-logo {
  height: 22px;
  width: auto;
  display: block;
}

.top-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 11px;
  color: var(--tinta-media);
  letter-spacing: 0.04em;
}

.top-meta strong { color: var(--tinta); font-weight: 600; }
.top-meta .sep { color: var(--linea); }

.logout-btn {
  background: transparent;
  border: 0;
  color: var(--tinta-media);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  transition: color 140ms;
}

.logout-btn:hover { color: var(--cobre); }

/* --- Navegación ----------------------------------------------------------- */

nav.sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 40px;
  border-bottom: 1px solid var(--linea);
  background: var(--papel-hondo);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

nav.sub ul { list-style: none; display: flex; gap: 26px; }

nav.sub a {
  color: var(--tinta-media);
  padding: 12px 0;
  position: relative;
  transition: color 140ms;
}

nav.sub a:hover { color: var(--tinta); }
nav.sub a.active { color: var(--tinta); font-weight: 600; }

/* La sección donde estoy se subraya con un trazo grueso del acento: es la
   única marca de color permanente de la barra, así que tiene que ganar sin
   depender del peso de la fuente. */
nav.sub a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--cobre);
}

/* --- Contenido ------------------------------------------------------------ */

main.detail {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 32px 48px;
}

.detail-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 24px;
  align-items: end;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 20px;
  margin-bottom: 28px;
}

/* El título de la pantalla. `.cn` es el nombre que traía el sistema viejo
   (container number); acá es el nombre del salón o el de la sección. */
.detail-header .cn {
  font-family: var(--display);
  font-size: clamp(24px, 7vw, 32px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--tinta);
}

.detail-header .cn.cn--page { font-size: clamp(20px, 5vw, 25px); }

/* Rótulo de ubicación ("Admin · Usuarios"). Va en versalita porque es
   señalización, no lectura: se mira una vez para saber dónde se está. */
.detail-header .breadcrumb {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-bottom: 9px;
}

.detail-header .breadcrumb a { color: var(--tinta-tenue); }
.detail-header .breadcrumb a:hover { color: var(--cobre); }

.detail-header .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  font-size: 12px;
  color: var(--tinta-media);
  margin-top: 10px;
}

.detail-header .meta b { color: var(--tinta); font-weight: 600; }

.detail-header .actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
}

/* --- Fichas --------------------------------------------------------------- */

.facts-card {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel-alto);
  padding: 18px;
  margin-bottom: 18px;
  position: relative;
}

.facts-title {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-bottom: 14px;
}

/* Las marcas de corte en las esquinas de la ficha (.cropmark) se fueron acá:
   eran instrumental heredado del dashboard náutico y leían como marcas de
   imprenta, pero son cuadradas y se ubicaban a 8px de una esquina que ahora
   curva — quedaban flotando fuera del filete. El markup salió de los ocho
   templates junto con esta regla; no dejar el CSS "por si acaso". */

/* --- Controles ------------------------------------------------------------ */

/* Los botones dicen lo que hacen, en la caja que corresponde: sentence case,
   sin versalita. "Guardar" es una palabra; GUARDAR es un comando de consola,
   que es justamente de dónde venía este CSS. */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid var(--cobre);
  border-radius: var(--radio-pastilla);
  color: var(--cobre);
  font-size: 12.5px;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 140ms;
}

.btn-ghost:hover { background: var(--cobre-lavado); }

.btn-ghost.btn-solid {
  background: var(--cobre);
  color: var(--papel);
  border-color: var(--cobre);
}

/* Oscurecer, no aclarar: sobre papel, un botón que se aclara al pasar por
   encima parece que se apaga. */
.btn-ghost.btn-solid:hover { background: var(--tinta); border-color: var(--tinta); }

.btn-ghost.btn-danger { border-color: var(--ladrillo); color: var(--ladrillo); }
/* color-mix y no un rgba() literal: el hex de --ladrillo se toca acá arriba y
   un literal en una regla suelta es exactamente lo que queda desincronizado. */
.btn-ghost.btn-danger:hover { background: color-mix(in srgb, var(--ladrillo) 9%, transparent); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-pastilla);
  background: var(--papel-alto);
  font-size: 12px;
  color: var(--tinta-media);
  cursor: pointer;
  transition: all 140ms;
  font-family: inherit;
  text-decoration: none;
}

.chip:hover { color: var(--tinta); border-color: var(--tinta-tenue); }

/* Sólido, no teñido: el acento sobre su propio lavado da 4.2:1 y no llega
   a AA. Relleno lleno con texto papel, que da 5.0:1. */
.chip.active {
  color: var(--papel);
  background: var(--cobre);
  border-color: var(--cobre);
}

.chip .count { font-size: 11px; opacity: 0.75; }

/* --- Pastillas de estado -------------------------------------------------- */

.status-pill {
  display: inline-block;
  padding: 4px 11px;
  font-size: 11px;
  letter-spacing: 0.02em;
  border: 1px solid var(--linea);
  border-radius: var(--radio-pastilla);
  color: var(--tinta-media);
  background: var(--papel-alto);
  white-space: nowrap;
}

.status-pill.unknown { color: var(--tinta-tenue); }

/* --- Tablas --------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.table-scroll > table { min-width: 100%; }

.health-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.health-table th {
  text-align: left;
  padding: 7px 8px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  border-bottom: 1px solid var(--linea);
  font-weight: 600;
}

.health-table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--linea-suave);
  color: var(--tinta);
  vertical-align: top;
}

.health-table td.danger { color: var(--ladrillo); }
.health-table td.warn   { color: var(--cobre); }
.health-table td.dim    { color: var(--tinta-tenue); }

/* --- Campos --------------------------------------------------------------- */

input[type="date"],
input[type="file"] {
  max-width: 100%;
  min-width: 0;
}

/* --- Mapa (Leaflet, sólo en la ficha del salón) --------------------------- */

/* El mapa no usa popups: sólo un marcador y los controles de zoom. Todo lo
   demás que traía el CSS viejo para Leaflet se fue con el dashboard. */
.leaflet-control-zoom a {
  background: var(--papel-alto) !important;
  color: var(--tinta) !important;
  border-color: var(--linea) !important;
}

.leaflet-control-zoom a:hover {
  background: var(--papel-hondo) !important;
  color: var(--cobre) !important;
}

/* --- Modal de ficha ------------------------------------------------------- */

/* El único modal del CRM: la ficha del salón encima del mapa, para que tocar un
   pin no la saque de la pantalla y le tire el zoom, la posición y los filtros.
   Es un `<dialog>` nativo, así que acá no hay nada de overlay ni de z-index a
   mano — sólo la caja y el fondo. Adentro van las `.facts-card` de siempre, que
   ya están estiladas más arriba. */
.ficha-modal {
  width: min(680px, 100%);
  max-width: 100%;
  /* Explícito porque el reset de arriba (`* { margin: 0 }`) le gana al
     `margin: auto` que el browser le da al dialog: sin esto el panel queda
     pegado arriba a la izquierda en vez de centrado. */
  margin: auto;
  max-height: 92dvh;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--tinta);
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(30, 36, 48, 0.22);
}

.ficha-modal::backdrop {
  background: rgba(30, 36, 48, 0.42);
}

/* Cabecera y pie quietos, y el scroll sólo en el medio: el cerrar y el botón de
   WhatsApp tienen que estar donde el pulgar los dejó, no doce visitas más
   abajo. `grid` con la fila del medio en 1fr es lo que hace que las tres partes
   se reparta el alto del dialog sin JS. */
.ficha-modal #ficha-modal-cuerpo {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
  max-height: 92dvh;
}

.ficha-modal-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 10px 12px 18px;
  border-bottom: 1px solid var(--linea);
  background: var(--papel-alto);
}

.ficha-modal-titulo {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

/* 44px de lado: es el mínimo táctil, y este botón se aprieta con el pulgar de
   la mano que sostiene el teléfono. */
.ficha-modal-cerrar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  font-size: 24px;
  line-height: 1;
  color: var(--tinta-media);
  background: transparent;
  border: 0;
  border-radius: var(--radio-pastilla);
  cursor: pointer;
}

.ficha-modal-cerrar:hover {
  background: var(--papel-hondo);
  color: var(--cobre);
}

.ficha-modal-datos {
  padding: 16px 18px 4px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* El header de la ficha adentro del modal no necesita su línea de abajo: ya la
   pone la cabecera del panel dos dedos más arriba. */
.ficha-modal-datos .detail-header {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 14px;
}

.ficha-modal-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--linea);
  background: var(--papel-alto);
}

.ficha-modal-cargando {
  padding: 28px 18px;
  text-align: center;
  color: var(--tinta-tenue);
}

/* En el celular el modal es una hoja pegada abajo y no una caja centrada: con
   una sola mano, lo que importa tiene que empezar cerca del borde de abajo. */
@media (max-width: 560px) {
  .ficha-modal {
    width: 100%;
    max-height: 88dvh;
    margin: auto auto 0;
    border-radius: var(--radio) var(--radio) 0 0;
    border-bottom: 0;
  }

  .ficha-modal #ficha-modal-cuerpo { max-height: 88dvh; }
}

/* --- Foco ----------------------------------------------------------------- */

/* Un solo tratamiento de foco para toda la app, visible sobre papel y sobre
   los rellenos de acento. Si algo necesita otro, es que el componente está
   mal, no el foco. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.chip:focus-visible {
  outline: 2px solid var(--cobre);
  outline-offset: 2px;
}

/* --- Escala ---------------------------------------------------------------- */

@media (max-width: 1023px) {
  /* El alto fijo del shell es de escritorio. En mano, la página scrollea
     entera: con overflow oculto, el teclado virtual tapa los campos y no hay
     forma de subir. */
  html, body { overflow: visible; height: auto; min-height: 100%; }
  .app { height: auto; min-height: 100vh; display: block; }
}

@media (max-width: 960px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-grid > * { min-width: 0; }
  .detail-header { grid-template-columns: 1fr; }
  main.detail { padding: 16px 18px 32px; }
}

@media (max-width: 720px) {
  header.top {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 14px;
    gap: 8px;
    row-gap: 6px;
  }
  nav.sub {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 14px;
    gap: 8px;
  }
  nav.sub ul { gap: 18px; flex-wrap: wrap; }

  .detail-header { grid-template-columns: 1fr; row-gap: 12px; }
  .detail-header .actions { flex-wrap: wrap; gap: 8px; width: 100%; }
  .detail-header .actions > * { flex: 1 1 calc(50% - 4px); min-width: 0; }

  /* 44px de alto mínimo en todo lo táctil — la misma regla que gobierna
     vanu.css, acá aplicada a los controles del armazón. */
  .chip { min-height: 40px; padding: 8px 12px; align-items: center; }
  .logout-btn { min-height: 40px; padding: 8px 12px; }
  .btn-ghost { min-height: 44px; }

  main.detail, main.admin, main.list, main.account { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 540px) {
  /* En pantalla chica la barra de arriba se queda con lo único que no está
     en otro lado: la marca y el reloj. */
  header.top .top-meta > span:not(:last-of-type) { display: none; }
  header.top .top-meta .sep,
  header.top .top-meta .email { display: none; }
  header.top .top-meta { gap: 0; }

  .detail-header .actions > * { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}