/* =====================================================================
   NTS CRM · Hoja de estilos
   ===================================================================== */

:root{
  /* Colores de marca. Estos son los de fábrica (NTS Consulting); si en
     Ajustes → Identidad visual se configuran otros, header.php imprime un
     bloque <style> justo después de esta hoja que reemplaza estas variables.
     Nunca escribir un color de marca a mano fuera de aquí: se pierde la
     personalización de la instalación del cliente. */
  --azul:#082755; --azul-osc:#051a3a; --azul-med:#123a75;
  --azul-claro:#e8eef7; --azul-tenue:#c3cfe2; --azul-suave:#8fa3c2;
  --naranja:#f59108; --naranja-osc:#d97d05; --naranja-bg:#fff6e8;
  /* ------------------------------------------------------------------
     Superficies: sin blanco puro
     ------------------------------------------------------------------
     El fondo era #f8fafc y las tarjetas #ffffff. Dos problemas juntos:

     · Casi no se distinguían entre sí, así que la pantalla se leía como
       una sola superficie blanca y las tarjetas no se despegaban.
     · El blanco puro a brillo de monitor cansa la vista después de un
       par de horas, que es justo como se usa un CRM.

     Ahora ninguna superficie es #ffffff, y el tinte pasó de azulado a
     cálido: el azul es la parte del espectro que más pesa en la vista
     con luz sostenida.

     Los papeles de las cotizaciones impresas siguen en blanco: eso se
     controla en la hoja de impresión, no acá.
     ------------------------------------------------------------------ */
  --texto:#1c1a17; --texto-2:#5a5348; --texto-3:#8a8377;
  --borde:#dcd8d0; --fondo:#d6d0c4; --panel:#faf9f7;
  /* El texto del menú lateral. Arrancó igual que `--fondo` pero es una
     decisión aparte: ver el comentario de `.nav-item`. */
  --menu-texto:#eceae6;
  /* El tinte de los huecos: encabezados de tabla, campos de búsqueda,
     renglones de totales. Van *dentro* de una tarjeta blanca y tienen que
     verse apenas hundidos.

     No usan `--fondo` aunque nacieron del mismo color. Ese es el fondo de
     la página, es configurable, y cuando se puso más oscuro estos huecos
     se oscurecieron con él: el encabezado de una tabla quedaba casi tan
     marcado como la tarjeta que lo contiene, y el borde del buscador
     desapareció porque el relleno pasó a ser más oscuro que su propio
     borde. Un color, un trabajo. */
  --hueco:#eceae6;
  --verde:#047857; --verde-bg:#e9f5ef;
  --rojo:#c2410c;  --rojo-bg:#fbeee7;
  --ambar:#a16207; --ambar-bg:#faf3e3;
  --gris-bg:#eeece8;
  /* Las sombras también dejan el azul: sobre un fondo cálido, una sombra
     azulada se ve sucia. */
  --sombra:0 1px 2px rgba(40,32,20,.06), 0 1px 3px rgba(40,32,20,.04);
  --sombra-md:0 4px 12px rgba(40,32,20,.08);
  --radio:8px;
}

/* =====================================================================
   Tipografía
   ---------------------------------------------------------------------
   Plus Jakarta Sans, alojada en el servidor y no traída de Google Fonts.

   Alojarla acá cuesta unos 200 KB una sola vez y evita dos problemas:
   una petición a un tercero en cada carga, y que el CRM se vea distinto
   el día que alguien entre por el túnel sin salida a internet.

   Si los archivos todavía no están en assets/fonts/, esto no rompe nada:
   el navegador cae al respaldo del sistema y el CRM se ve como antes.
   Ver assets/fonts/LEEME.md para bajarlos.

   `font-display:swap` hace que el texto se vea desde el primer momento
   con la tipografía de respaldo y cambie cuando la propia termine de
   cargar. La alternativa —esperar— deja la pantalla en blanco un
   instante, que se nota mucho más que el cambio.
   ===================================================================== */
/* La regla `@font-face` NO va acá.
   La escribe `tipografiaEstilos()` en includes/marca.php, que mira cuál
   archivo existe de verdad y declara solo ese.

   Por qué: la primera versión listaba cuatro fuentes —dos `.woff2` y dos
   `.ttf`— confiando en que el navegador probaría en orden hasta acertar.
   No funciona así. Chrome elige la **primera** que reconoce, y si esa da
   404 abandona la regla entera en vez de seguir con la siguiente. Como el
   `.woff2` no existía, la tipografía no cargaba nunca — y lo peor es que
   fallaba en silencio: la pantalla se veía bien porque caía al respaldo
   del sistema.

   Declarar solo el archivo que está evita el problema de raíz. */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Jakarta',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; color:var(--texto); background:var(--fondo); line-height:1.6;
  /* Suaviza el trazo en pantallas normales. Sin esto, una tipografía de
     trazo fino como esta se ve más pesada en Windows que en Mac. */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Los números en cifras de ancho fijo, en todo el CRM.
   Sin esto, una columna de montos baila: el 1 ocupa menos que el 8 y los
   decimales dejan de estar alineados. En un sistema donde casi todas las
   tablas terminan en una columna de dinero, se nota en cada pantalla. */
table,input[type=number],.num,.kpi .val,.mono{font-variant-numeric:tabular-nums}

a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em}

/* ---------- Layout ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:230px;flex-shrink:0;background:var(--azul);color:var(--azul-tenue);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.marca{display:flex;align-items:center;gap:11px;padding:16px;border-bottom:1px solid rgba(255,255,255,.12)}
.marca-logo{
  width:40px;height:40px;flex-shrink:0;object-fit:contain;
  border-radius:7px;background:#fff;padding:3px
}
.marca strong{display:block;color:#fff;font-size:13px;line-height:1.25}
.marca span{font-size:10.5px;color:var(--naranja);letter-spacing:.1em;text-transform:uppercase;font-weight:600}

.sidebar nav{padding:10px 8px;flex:1;overflow-y:auto}
/* El texto del menú va en el tono del área de trabajo de la derecha. No
   es capricho: el azul tenue de antes era un tercer color suelto en la
   pantalla, y en negrita se veía apagado.

   Tiene variable propia y no `--fondo` a propósito. Se escribió así al
   principio y el día que se oscureció el fondo para que resaltaran las
   tarjetas, el menú se oscureció con él y perdió contraste contra el
   azul. Son dos decisiones distintas aunque hayan arrancado del mismo
   color. */
.nav-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;
  color:var(--menu-texto);font-size:13.5px;font-weight:700;margin-bottom:1px;
  /* La separación se queda en 1px y no se agranda por el crecimiento.
     Al 4%, un renglón de 35px gana 1.4px repartidos arriba y abajo: 0.7px
     de cada lado, que caben. Subirla a 3px se veía mejor en el papel pero
     estiraba el menú 30px y, con una ventana de 855px de alto —la que hay
     en esta máquina—, aparecía una barra de desplazamiento en la columna.
     Un menú que hay que rodar para llegar a Configuración es peor negocio
     que dos píxeles de aire. */
  transition:transform .14s cubic-bezier(.2,.8,.3,1),
             background .14s ease, color .14s ease
}

/* ------------------------------------------------------------------
   El menú habla el mismo idioma que los botones
   ------------------------------------------------------------------
   Ámbar y un poco más grande al pasar por encima. Sirve para dos cosas
   distintas: dice «esto se puede apretar» —que en una lista de texto
   plano no era evidente— y marca sin ambigüedad cuál de los quince
   renglones está debajo del puntero.

   El crecimiento es de 4% y no de 5% como en los botones: acá el
   renglón ocupa casi todo el ancho de la columna y solo hay 8px de aire
   a cada lado. Con 5% se salía.

   Texto azul sobre el ámbar: blanco sobre #f59108 queda en 2.2:1 y a
   13.5px no se lee bien.
   ------------------------------------------------------------------ */
.nav-item:hover,.nav-item:focus-visible{
  background:var(--naranja);color:var(--azul);
  transform:scale(1.04);text-decoration:none
}
.nav-item:hover svg,.nav-item:focus-visible svg{opacity:1}
.nav-item:active{transform:scale(.99);transition-duration:.05s}

/* El que ya está abierto nace en ámbar, y crece un poco menos que el que
   se está señalando: si los dos midieran igual, pasar el ratón por la
   sección actual no daría ninguna señal. */
.nav-item.activo{
  background:var(--naranja);color:var(--azul);font-weight:700;
  transform:scale(1.02)
}
.nav-item.activo:hover{background:var(--naranja-osc);transform:scale(1.05)}
.nav-item.activo svg{opacity:1}

@media (prefers-reduced-motion:reduce){
  .nav-item,.nav-item:hover,.nav-item:focus-visible,
  .nav-item:active,.nav-item.activo,.nav-item.activo:hover{transform:none}
}
.nav-item svg{width:17px;height:17px;flex-shrink:0;opacity:.85}
.nav-item .pill{
  margin-left:auto;background:var(--rojo);color:#fff;font-style:normal;
  font-size:11px;font-weight:600;padding:1px 6px;border-radius:9px
}

/* =====================================================================
   MODO CAMPO · la pantalla de la tablet
   =====================================================================
   Se usa parado, con una mano sosteniendo y la otra con el S-Pen, a
   veces con sol de frente. Tres reglas que mandan sobre la estética:

   1. Nada que haya que tocar mide menos de 48 px. Es el mínimo que las
      guías de accesibilidad dan para el dedo, y con guantes hace falta
      más, no menos.
   2. El texto arranca en 16 px. Menos que eso, además de no leerse, hace
      que los navegadores móviles hagan zoom solos al enfocar un campo, y
      la pantalla salta.
   3. Cada renglón es una tarjeta separada. Una tabla de seis columnas en
      una tablet vertical obliga a apuntar fino, y apuntar fino con una
      mano ocupada es cómo se marca «no aplica» en el renglón de al lado.
   ===================================================================== */

body.campo{
  margin:0;background:var(--fondo,#F3F1EC);color:var(--texto,#1A1A1A);
  font-size:16px;line-height:1.45;
  /* El pulgar que sostiene no arrastra la página al tocar un botón. */
  touch-action:manipulation;
  -webkit-text-size-adjust:100%
}

.campo-barra{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;
  padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));
  background:#0F2A4E;color:#fff
}
.campo-salir{
  flex:none;min-height:44px;display:flex;align-items:center;padding:0 14px;
  border-radius:8px;background:rgba(255,255,255,.14);color:#fff;
  text-decoration:none;font-weight:600
}
.campo-titulo{flex:1;min-width:0;line-height:1.25}
.campo-titulo strong{display:block;font-size:17px}
.campo-titulo span{
  display:block;font-size:13px;color:rgba(255,255,255,.72);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.campo-progreso{
  flex:none;font-weight:700;font-size:15px;padding:6px 12px;
  border-radius:20px;background:rgba(255,255,255,.14)
}
.campo-progreso.completo{background:#1E7B34}

.campo-cuerpo{
  padding:12px 12px calc(24px + env(safe-area-inset-bottom));
  max-width:820px;margin:0 auto
}
.campo-grupo{font-size:15px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--texto-3,#888);margin:22px 0 8px}
.campo-sub{margin:14px 0 8px;font-size:14px;color:var(--texto-3,#888)}
.campo-vacio{padding:40px 16px;text-align:center;color:var(--texto-2,#555)}

.campo-item{
  background:var(--panel,#FBFAF7);border:1px solid var(--borde,#E3DFD6);
  border-radius:12px;padding:14px;margin-bottom:10px
}
/* Contestado: una línea verde al costado. Es lo que deja ver de un
   vistazo, bajando con el pulgar, qué falta — sin leer nada. */
.campo-item[data-estado="anotado"]{border-left:5px solid #1E7B34}
.campo-item[data-estado="pendiente"]{border-left:5px solid #C79A2E}
.campo-item.es-na{opacity:.55}
.campo-item.es-na .campo-stepper,.campo-item.es-na .campo-opciones{opacity:.4}

.campo-item-cab{display:flex;align-items:flex-start;gap:10px}
.campo-item h3{margin:0;font-size:17px;line-height:1.3;flex:1}
.campo-marca{flex:none;font-size:13px;font-weight:700;color:#1E7B34;min-height:18px}
.campo-marca.error{color:#9C0006}
.campo-ayuda{margin:6px 0 0;font-size:14px;color:var(--texto-2,#555)}

.campo-fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}

.campo-stepper{display:flex;align-items:stretch;gap:0}
.campo-mas-menos{
  width:56px;min-height:56px;font-size:26px;font-weight:700;line-height:1;
  border:1px solid var(--borde,#E3DFD6);background:#fff;color:var(--texto,#1A1A1A);
  cursor:pointer;-webkit-user-select:none;user-select:none
}
.campo-mas-menos:first-child{border-radius:10px 0 0 10px}
.campo-mas-menos:last-child{border-radius:0 10px 10px 0}
.campo-mas-menos:active{background:var(--borde,#E3DFD6)}
.campo-num{
  width:104px;min-height:56px;text-align:center;font-size:22px;font-weight:700;
  border:1px solid var(--borde,#E3DFD6);border-left:0;border-right:0;
  background:#fff;color:var(--texto,#1A1A1A)
}
.campo-unidad{font-size:16px;color:var(--texto-2,#555);min-width:44px}

.campo-opciones{display:flex;gap:0}
.campo-op{
  min-width:88px;min-height:56px;font-size:18px;font-weight:700;
  border:1px solid var(--borde,#E3DFD6);background:#fff;color:var(--texto,#1A1A1A);
  cursor:pointer
}
.campo-op:first-child{border-radius:10px 0 0 10px}
.campo-op:last-child{border-radius:0 10px 10px 0;border-left:0}
.campo-op.activo{background:#0F2A4E;color:#fff;border-color:#0F2A4E}

.campo-na{
  min-height:56px;padding:0 18px;font-size:16px;font-weight:600;
  border:1px dashed var(--borde,#E3DFD6);border-radius:10px;
  background:transparent;color:var(--texto-2,#555);cursor:pointer;margin-left:auto
}
.campo-na.activo{background:var(--texto-3,#888);color:#fff;border-style:solid}

.campo-notas{
  width:100%;min-height:52px;margin-top:10px;font-size:16px;padding:12px;
  border:1px solid var(--borde,#E3DFD6);border-radius:10px;background:#fff;
  box-sizing:border-box
}

/* En una condición de valor el campo ocupa la línea y «No aplica» queda
   a su derecha: la pregunta primero, la salida después. */
.campo-valor{flex:1;min-width:200px;margin-top:0}
.campo-fila .campo-na{margin-top:0}

.campo-pie{margin-top:24px;text-align:center}
.campo-terminar{min-height:56px;font-size:17px;padding:0 32px;display:inline-flex;
  align-items:center}

/* Vertical y angosta: el «no aplica» baja a su propia línea en vez de
   apretujarse al lado del stepper. */
@media (max-width:520px){
  .campo-na{margin-left:0;width:100%}
}

/* =====================================================================
   FOTOS DEL SITIO · misma galería en inspecciones y en visitas
   =====================================================================
   La miniatura es cuadrada y recortada a propósito. Una grilla con fotos
   de proporciones distintas —vertical, horizontal, la del rack— queda
   dentada y cuesta recorrerla; el recorte pierde un poco de encuadre en
   la miniatura, pero la foto entera está a un toque de distancia.
   ===================================================================== */

.fotos-grilla{
  display:grid;gap:10px;margin-bottom:12px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))
}
.foto{margin:0;background:var(--panel,#FBFAF7);border:1px solid var(--borde,#E3DFD6);
  border-radius:10px;overflow:hidden}
.foto img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#E8E4DC}
.foto figcaption{padding:8px;display:flex;flex-direction:column;gap:6px}
.foto-leyenda{display:flex;gap:6px}
.foto-leyenda input{flex:1;min-width:0;font-size:13px;padding:6px 8px;
  border:1px solid var(--borde,#E3DFD6);border-radius:6px}

/* Quitar no puede verse igual que Guardar: uno corrige un texto y el otro
   borra una foto que nadie va a poder volver a sacar. Queda en segundo
   plano y se pinta solo cuando el dedo ya está encima. */
/* `.btn.foto-quitar` y no `.foto-quitar` a secas: con una sola clase pierde
   por orden de aparición contra `.btn`, que se define más abajo, y el botón
   destructivo terminaba pintado igual que el de guardar. */
.btn.foto-quitar{background:transparent;border:1px solid #9C0006;
  color:#9C0006;font-weight:600;box-shadow:none}
.btn.foto-quitar:hover,.btn.foto-quitar:active{background:#9C0006;border-color:#9C0006;color:#fff}

.fotos-subir{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fotos-subir input[type=file]{flex:1;min-width:200px;font-size:14px}

/* En el modo campo, todo más grande: se toca con el S-Pen o con el dedo,
   y el botón de subir abre la cámara directamente en Android. */
.campo-fotos .fotos-grilla{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.campo-fotos .foto figcaption{padding:10px;gap:8px}
/* En la tablet la leyenda se apila: al ancho de una miniatura, el campo y
   el botón lado a lado dejan el texto en cuatro caracteres. */
.campo-fotos .foto-leyenda{flex-direction:column}
.campo-fotos .foto-leyenda input{font-size:16px;min-height:48px;width:100%}
.campo-fotos .foto-leyenda .btn,.campo-fotos .foto-quitar{min-height:48px;padding:0 14px;width:100%}
.campo-fotos .fotos-subir{
  background:var(--panel,#FBFAF7);border:1px solid var(--borde,#E3DFD6);
  border-radius:12px;padding:14px;gap:14px
}
.campo-fotos .fotos-subir input[type=file]{font-size:16px}
.campo-fotos .fotos-subir .btn{min-height:56px;padding:0 28px;font-size:17px}

/* =====================================================================
   CROQUIS · pantalla de dibujo
   =====================================================================
   El lienzo ocupa todo lo que sobra entre la barra y el pie. `touch-action:
   none` sobre el lienzo es obligatorio: sin eso, arrastrar la pluma hace
   que el navegador desplace la página en vez de dibujar.
   ===================================================================== */

body.croquis-pag{
  margin:0;height:100vh;height:100dvh;display:flex;flex-direction:column;
  background:var(--fondo,#F3F1EC);font-size:16px;overflow:hidden;
  -webkit-text-size-adjust:100%
}

.croquis-barra{
  flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 12px;background:var(--panel,#FBFAF7);
  border-bottom:1px solid var(--borde,#E3DFD6)
}
.croquis-grupo{display:flex}
.croquis-op{
  min-height:48px;padding:0 16px;font-size:15px;font-weight:600;cursor:pointer;
  border:1px solid var(--borde,#E3DFD6);background:#fff;color:var(--texto,#1A1A1A)
}
.croquis-op:first-child{border-radius:9px 0 0 9px}
.croquis-op:last-child{border-radius:0 9px 9px 0;border-left:0}
.croquis-op.activo{background:#0F2A4E;color:#fff;border-color:#0F2A4E}

.croquis-color{
  width:48px;height:48px;border-radius:50%;margin-right:8px;cursor:pointer;
  border:3px solid transparent;box-shadow:0 0 0 1px var(--borde,#E3DFD6)
}
.croquis-color.activo{border-color:#fff;box-shadow:0 0 0 3px #0F2A4E}
.croquis-accion{min-height:48px;padding:0 16px}
.croquis-aviso{margin-left:auto;font-size:14px;color:#9C0006;font-weight:600}

/* Centrado: con una foto de fondo el lienzo toma la proporción de la
   imagen, así que casi nunca llena la caja exacta. */
.croquis-lienzo-caja{flex:1;min-height:0;padding:10px;position:relative;
  display:flex;align-items:center;justify-content:center}
#croquis-lienzo{
  display:block;max-width:100%;max-height:100%;background:#fff;
  border:1px solid var(--borde,#E3DFD6);border-radius:10px;
  /* Sin esto la pluma desplaza la página en lugar de dibujar. */
  touch-action:none;cursor:crosshair
}

.croquis-pie{
  flex:none;display:flex;gap:10px;align-items:center;
  padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:var(--panel,#FBFAF7);border-top:1px solid var(--borde,#E3DFD6)
}
.croquis-leyenda{
  flex:1;min-width:0;min-height:48px;font-size:16px;padding:0 12px;
  border:1px solid var(--borde,#E3DFD6);border-radius:9px;background:#fff
}
.croquis-guardar{min-height:48px;padding:0 22px;white-space:nowrap}

/* Un croquis se distingue de una foto en la galería: no valen lo mismo. */
.foto.es-croquis img{background:#fff}
.foto .etq-croquis{
  display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;
  border-radius:9px;background:#0F2A4E;color:#fff;text-transform:uppercase;
  letter-spacing:.3px
}

@media (max-width:560px){
  .croquis-pie{flex-wrap:wrap}
  .croquis-leyenda{width:100%;flex:none}
  .croquis-guardar{width:100%}
}

/* Etiqueta chica al lado de un texto: «clave», «falta medir».
   `.pill` no sirve fuera del menú —está definida como `.nav-item .pill`—
   y usada suelta no pinta nada, que es como se veía «clave». */
.etq{
  display:inline-block;font-size:10.5px;font-weight:700;line-height:1.6;
  padding:0 6px;border-radius:9px;vertical-align:1px;margin-left:4px;
  background:var(--borde);color:var(--texto-2);text-transform:uppercase;
  letter-spacing:.3px
}
.etq-falta{background:#9C6500;color:#fff}

.sidebar-pie{padding:12px;border-top:1px solid rgba(255,255,255,.12)}
.usuario{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--naranja);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
.usuario-info strong{display:block;color:#fff;font-size:12.5px}
/* El rol y los dos enlaces del pie van en el ámbar de «CRM», arriba del
   menú. Con esto la columna queda amarrada por sus dos extremos y los
   enlaces dejan de verse como texto apagado que no se puede tocar: el
   azul suave de antes se leía como algo deshabilitado. */
.usuario-info span{font-size:11px;color:var(--naranja);font-weight:600}
.salir{display:block;font-size:12px;color:var(--naranja);font-weight:600;padding:5px 0}
.salir:hover{color:#fff;text-decoration:none}
.salir:hover{color:#fca5a5}

.contenido{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:14px;padding:12px 22px;background:var(--panel);
  border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:20
}
.topbar h1{font-size:17px;white-space:nowrap}
.menu-btn{display:none;background:none;border:0;font-size:19px;cursor:pointer;color:var(--texto-2)}
.buscador{margin-left:auto;flex:0 1 320px}
.buscador input{
  width:100%;padding:7px 12px;border:1px solid var(--borde);border-radius:20px;
  font-size:13px;background:var(--hueco);outline:none
}
.buscador input:focus{border-color:var(--azul);background:var(--panel)}
.cuerpo{padding:22px;flex:1}
.pie{padding:14px 22px;font-size:12px;color:var(--texto-3);border-top:1px solid var(--borde)}

/* ---------- Flash ---------- */
.flash{margin:14px 22px -6px;padding:10px 14px;border-radius:var(--radio);font-size:13.5px;border:1px solid}
.flash-ok{background:var(--verde-bg);border-color:#a7f3d0;color:#065f46}
.flash-error{background:var(--rojo-bg);border-color:#fecaca;color:#991b1b}
.flash-aviso{background:var(--ambar-bg);border-color:#fde68a;color:#92400e}

/* ---------- Paneles y tarjetas ---------- */
/* ---------- Paneles ----------
   Sin borde. Antes llevaban borde Y sombra: dos énfasis para separar la
   misma tarjeta del fondo, y el resultado eran líneas por todos lados.
   Con una sombra en dos capas —una de contacto y una difusa— la tarjeta
   se despega igual y la pantalla queda mucho más tranquila. */
.panel{
  background:var(--panel);border-radius:16px;margin-bottom:18px;
  box-shadow:0 1px 3px rgba(40,32,20,.05), 0 12px 32px rgba(40,32,20,.06);
}
.panel-cab{display:flex;align-items:center;gap:11px;padding:18px 22px 14px}
/* La barrita naranja delante del título. Reemplaza a la línea divisoria
   que separaba cabecera de cuerpo: marca dónde empieza la sección sin
   cortar la tarjeta en dos. */
.panel-cab h2{
  font-size:16.5px;font-weight:700;letter-spacing:-.02em;
  display:flex;align-items:center;gap:10px
}
.panel-cab h2::before{
  content:"";width:4px;height:17px;flex:none;
  background:var(--naranja);border-radius:2px
}
.panel-cab .der{margin-left:auto;display:flex;gap:8px}
.panel-cuerpo{padding:6px 22px 20px}

/* ---------- Accesos rápidos ----------
   Van arriba del panel y sin tarjeta que los envuelva: son botones, no
   información. Metidos en un panel con título pesaban lo mismo que un
   indicador y competían por atención con los números. */
/* El hueco entre botones es más ancho que el resto de los `gap` de la
   hoja a propósito: al agrandarse, un botón invade el espacio del
   vecino. Con 9px se tocaban; con 14px el crecimiento se ve y no
   atropella. */
.accesos{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 20px}
.acceso{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:12px;
  background:var(--azul);color:#fff;
  font-size:14px;font-weight:700;letter-spacing:.005em;white-space:nowrap;
  box-shadow:0 1px 3px rgba(8,39,85,.18), 0 6px 18px rgba(8,39,85,.14);
  /* `transform` y `background` juntos en la transición: si solo se anima
     el tamaño, el cambio de color salta de golpe y el botón parpadea. */
  transition:transform .14s cubic-bezier(.2,.8,.3,1),
             background .14s ease, box-shadow .14s ease, color .14s ease
}

/* ------------------------------------------------------------------
   El estado elegido: ámbar y más grande
   ------------------------------------------------------------------
   Dos señales, no una. El color solo no alcanza para quien distingue
   mal los colores —uno de cada doce hombres—, y el tamaño solo no se
   nota si el botón está aislado. Juntas, el botón activo se reconoce
   de reojo.

   El texto sobre el ámbar va en azul, no en blanco. Blanco sobre
   #f59108 da un contraste de 2.2:1, por debajo de lo legible para un
   texto de 14px; el azul de la marca da más de 8:1 y además amarra los
   dos colores del sistema.
   ------------------------------------------------------------------ */
.acceso:hover,
.acceso:focus-visible{
  text-decoration:none;
  background:var(--naranja);color:var(--azul);
  transform:scale(1.06);
  box-shadow:0 3px 8px rgba(217,125,5,.28), 0 12px 30px rgba(217,125,5,.22)
}
.acceso:hover .acceso-mas,
.acceso:focus-visible .acceso-mas{background:rgba(8,39,85,.16);color:var(--azul)}

/* Al soltar el clic queda medio segundo de nada mientras carga la página
   siguiente. Sin esto no hay señal de que el clic entró. */
.acceso:active{transform:scale(.99);transition-duration:.05s}

/* El signo de más en un círculo: da un punto de entrada visual a cada
   botón sin necesidad de iconos, que habría que traer de algún lado. */
.acceso-mas{
  display:grid;place-items:center;width:21px;height:21px;flex:none;
  border-radius:50%;background:rgba(255,255,255,.18);color:#fff;
  font-size:15px;font-weight:700;line-height:1;
  transition:background .14s ease, color .14s ease
}

/* Uno solo destacado de entrada. Si todos gritan, ninguno guía: la
   cotización es la acción que más se repite y la que conviene tener
   siempre a un clic. Va en el mismo ámbar del elegido y ya nace un poco
   más grande, para que se lea como «este es el que buscabas». */
.acceso-primario{
  background:var(--naranja);color:var(--azul);
  transform:scale(1.04);
  box-shadow:0 3px 8px rgba(217,125,5,.26), 0 12px 30px rgba(217,125,5,.20)
}
.acceso-primario .acceso-mas{background:rgba(8,39,85,.16);color:var(--azul)}
.acceso-primario:hover,
.acceso-primario:focus-visible{
  background:var(--naranja-osc);color:var(--azul);transform:scale(1.09)
}

/* Quien pidió menos movimiento en su sistema operativo conserva el color
   —que es la información— y pierde solo la animación. */
@media (prefers-reduced-motion:reduce){
  .acceso,.acceso-mas{transition:background .14s ease, color .14s ease}
  .acceso:hover,.acceso:focus-visible,.acceso:active{transform:none}
  .acceso-primario,.acceso-primario:hover{transform:none}
}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.kpi{
  background:var(--panel);border-radius:16px;padding:20px 22px;
  box-shadow:0 1px 3px rgba(40,32,20,.05), 0 12px 32px rgba(40,32,20,.06);
}
/* La etiqueta deja las mayúsculas con espaciado.
   Se usaban acá y en los encabezados de tabla a la vez, y dos elementos
   gritando en la misma pantalla terminan compitiendo en lugar de
   ordenar. Acá alcanza con el contraste de tamaño contra el número. */
.kpi .etq{font-size:13px;color:var(--texto-2);font-weight:600;letter-spacing:0;text-transform:none}
.kpi .val{font-size:32px;font-weight:700;margin-top:7px;letter-spacing:-.035em;line-height:1.1;color:var(--azul)}
.kpi .sub{font-size:13px;color:var(--texto-3);margin-top:5px}
/* El destacado ya no es una línea al costado sino el color del número.
   Un borde de 3 px en una tarjeta sin bordes se veía como un resto. */
.kpi.acento .val{color:var(--naranja-osc)}

/* ---------- Tablas ---------- */
.tabla-wrap{overflow-x:auto}
table.tabla{width:100%;border-collapse:collapse;font-size:14px}
/* El encabezado deja el fondo gris y las mayúsculas.
   El fondo separaba la fila de títulos de las demás, pero adentro de una
   tarjeta sin bordes se leía como una banda extra. Con el texto más claro
   y una sola línea abajo se distingue igual y pesa mucho menos. */
table.tabla th{
  text-align:left;padding:8px 14px;border-bottom:1px solid var(--borde);
  font-size:12.5px;color:var(--texto-3);font-weight:600;
  letter-spacing:0;text-transform:none;white-space:nowrap;background:none
}
/* Filas más altas: de 9 a 14 px arriba y abajo.
   Es el cambio que más hace por la sensación de «cargado». Una tabla de
   quince filas apretadas se lee como una planilla; con aire, se lee. */
table.tabla td{padding:14px;border-bottom:1px solid var(--borde);vertical-align:middle}

/* Franjas alternadas.
   Es lo que más ayuda a no perder el renglón al recorrer una tabla ancha
   con la vista: el ojo salta de fila sin darse cuenta, y una línea sola
   —por marcada que sea— no lo evita porque todas las líneas son iguales.
   La franja da un patrón que el ojo puede seguir.

   El tono está calibrado para verse sin gritar. Más suave no se percibe
   —que era el problema del primer intento— y más fuerte convierte la
   tabla en un tablero de ajedrez que se lee peor que sin nada. */
table.tabla tbody tr:nth-child(even){background:rgba(40,32,20,.055)}

/* El resaltado al pasar el ratón tiene que ganarle a la franja, así que
   va después. Con el tinte de la marca en vez de un gris: deja claro que
   es una fila señalada y no otra franja. */
table.tabla tbody tr:hover{background:rgba(245,145,8,.10)}
table.tabla tbody tr:last-child td{border-bottom:0}

/* ---------- Listas de fichas ----------
   Para las listas que no son tablas —«Mi día», y cualquier otra armada
   con divs— para que separen los renglones igual que una tabla. */
.lista-items{display:flex;flex-direction:column}
.item-fila{
  display:grid;grid-template-columns:3px 1fr auto;gap:11px;align-items:center;
  padding:11px 10px;border-bottom:1px solid var(--borde);
  margin:0 -10px;   /* el fondo llega al borde del panel, el texto no */
  transition:background .12s ease
}
.item-fila:nth-child(even){background:rgba(40,32,20,.055)}
.item-fila:hover{background:rgba(245,145,8,.10)}
.item-fila:last-child{border-bottom:0}
.item-titulo{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-sub{font-size:12.5px;color:var(--texto-3);margin-top:1px}
.item-marca{width:3px;height:30px;border-radius:2px}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.acc{white-space:nowrap;text-align:right}
.vacio{padding:42px 16px;text-align:center;color:var(--texto-3);font-size:14px}

/* ---------- Badges ---------- */
/* Píldoras completas en vez de rectángulos redondeados. Es un detalle
   chico y es de los que más cambian la impresión: un radio a medias se
   lee como «no lo pensé». */
.badge{display:inline-block;padding:4px 11px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap}
.b-verde{background:var(--verde-bg);color:var(--verde)}
.b-rojo{background:var(--rojo-bg);color:var(--rojo)}
.b-azul{background:var(--azul-claro);color:var(--azul)}
.b-ambar{background:var(--ambar-bg);color:var(--ambar)}
.b-gris{background:var(--gris-bg);color:var(--texto-2)}

/* ---------- Botones ----------
   Mismo idioma que los accesos rápidos del panel, en todo el sistema:

     azul   = se puede hacer
     ámbar  = es esto / está elegido, y además crece

   Dos señales para el estado elegido, no una. El color solo no le sirve
   a quien no distingue el azul del ámbar —uno de cada doce hombres—, y
   el tamaño solo no se nota en un botón aislado.

   El texto sobre el ámbar va en azul y no en blanco: blanco sobre
   #f59108 da 2.2:1, por debajo de lo legible a este tamaño. */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:10px;
  border:1px solid var(--azul);background:var(--azul);color:#fff;font-size:14px;
  font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit;
  /* El interlineado tiene que estar escrito.
     Sin esta línea, un `<button>` y un `<a class="btn">` con el mismo texto
     salen de distinto alto: el navegador le da al botón `line-height:normal`
     (unos 17px) y el enlace hereda el 1.6 del cuerpo (22px). Cuatro píxeles
     de diferencia, que es justo lo que se veía entre «Filtrar» y «Limpiar».
     No había ningún motivo: era el arrastre de dos valores de fábrica
     distintos. */
  line-height:1.25;
  transition:transform .14s cubic-bezier(.2,.8,.3,1),
             background .14s ease, border-color .14s ease, color .14s ease
}
.btn:hover{
  background:var(--naranja);border-color:var(--naranja);color:var(--azul);
  transform:scale(1.05);text-decoration:none
}
.btn:focus-visible{
  outline:2px solid var(--naranja);outline-offset:2px
}
/* Al soltar el clic queda un momento de nada mientras carga la página o
   se envía el formulario. Sin esto no hay señal de que el clic entró. */
.btn:active{transform:scale(.98);transition-duration:.05s}

/* El elegido: ámbar y ya nacido más grande. Es el que marca la pestaña
   activa en los filtros de estado, etapa y tipo, y el botón de acción
   principal de cada pantalla. */
.btn-primario{
  background:var(--naranja);border-color:var(--naranja);color:var(--azul);
  transform:scale(1.04)
}
.btn-primario:hover{
  background:var(--naranja-osc);border-color:var(--naranja-osc);
  color:var(--azul);transform:scale(1.08)
}

/* `.btn-azul` era el azul cuando el resto era blanco. Ahora todo es azul,
   así que queda como alias para no romper las plantillas que lo usan. */
.btn-azul{background:var(--azul);border-color:var(--azul);color:#fff}

/* Borrar no se parece a lo demás a propósito.
   El rojo va en el texto y el borde, no en el fondo: un botón rojo sólido
   pesa más que la acción que lo rodea e invita a hacer clic. Se llena de
   rojo recién al pasar por encima, cuando ya hay intención.
   El tono es claro —#fca5a5, no el rojo de las alertas— porque sobre el
   azul oscuro el rojo fuerte queda en 2.8:1 y no se lee. */
.btn-peligro{color:#fca5a5;border-color:rgba(252,165,165,.45)}
.btn-peligro:hover{
  background:var(--rojo);border-color:var(--rojo);color:#fff
}

.btn-sm{padding:4px 9px;font-size:12px}
.btn:disabled,.btn[disabled]{
  opacity:.45;cursor:not-allowed;transform:none
}
.btn:disabled:hover,.btn[disabled]:hover{
  background:var(--azul);border-color:var(--azul);color:#fff;transform:none
}

@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover,.btn:active,.btn-primario,.btn-primario:hover{transform:none}
}

/* ---------- Formularios ---------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.campo{display:flex;flex-direction:column;gap:4px}
.campo.ancho{grid-column:1/-1}
.campo label{font-size:13.5px;font-weight:600;color:var(--texto-2)}
.campo input,.campo select,.campo textarea{
  padding:10px 13px;border:1px solid var(--borde);border-radius:10px;font-size:14.5px;
  font-family:inherit;color:var(--texto);background:#fffdfa;outline:none;width:100%;
  transition:border-color .12s ease, box-shadow .12s ease
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--azul);box-shadow:0 0 0 3px rgba(29,78,216,.10)}
.campo textarea{resize:vertical;min-height:78px}
.campo .ayuda{font-size:12.5px;color:var(--texto-3);line-height:1.5}
.form-acciones{display:flex;gap:9px;margin-top:18px;padding-top:16px;border-top:1px solid var(--borde)}
.req::after{content:" *";color:var(--rojo)}
.chk{display:flex;align-items:center;gap:7px;font-size:13.5px}
.chk input{width:auto}

/* ---------- Filtros ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:9px;align-items:flex-end;padding:13px 16px;border-bottom:1px solid var(--borde);background:#fcfdff}
.filtros .campo{min-width:135px}
.filtros label{font-size:11.5px}
.filtros input,.filtros select{padding:6px 9px;font-size:13px}

/* ---------- Pipeline kanban ---------- */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}
.kb-col{flex:0 0 258px;background:var(--gris-bg);border-radius:var(--radio);display:flex;flex-direction:column}
.kb-cab{padding:10px 12px;border-bottom:1px solid var(--borde);position:sticky;top:0}
.kb-cab strong{font-size:12.5px;display:block}
.kb-cab span{font-size:11.5px;color:var(--texto-2);font-variant-numeric:tabular-nums}
.kb-items{padding:9px;display:flex;flex-direction:column;gap:8px;min-height:60px}
.kb-card{background:var(--panel);border:1px solid var(--borde);border-radius:6px;padding:10px;box-shadow:var(--sombra);display:block;color:inherit}
.kb-card:hover{box-shadow:var(--sombra-md);text-decoration:none;border-color:#cbd5e1}
.kb-card .t{font-size:13px;font-weight:600;margin-bottom:3px;line-height:1.35}
.kb-card .c{font-size:11.5px;color:var(--texto-2)}
.kb-card .m{font-size:13.5px;font-weight:650;color:var(--verde);margin-top:5px;font-variant-numeric:tabular-nums}
.kb-card .p{font-size:11px;color:var(--texto-3);margin-top:2px}

/* ---------- Barras de progreso / gráfico ---------- */
.progreso{height:6px;background:var(--gris-bg);border-radius:3px;overflow:hidden;min-width:70px}
.progreso i{display:block;height:100%;background:var(--azul);border-radius:3px}
.barras{display:flex;flex-direction:column;gap:10px}
.barra-fila{display:grid;grid-template-columns:130px 1fr 92px;align-items:center;gap:11px;font-size:13px}
.barra-pista{height:20px;background:var(--gris-bg);border-radius:4px;overflow:hidden}
.barra-pista i{display:block;height:100%;background:var(--azul);border-radius:4px;min-width:2px}

/* ---------- Detalle ---------- */
.detalle-cab{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.detalle-cab .tit h2{font-size:20px}
.detalle-cab .tit p{margin:3px 0 0;color:var(--texto-2);font-size:13px}
.detalle-cab .der{margin-left:auto;display:flex;gap:8px}
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:13px}
.dl div span{display:block;font-size:11.5px;color:var(--texto-3);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.dl div strong{font-weight:500;font-size:13.5px}
.cols-2{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:start}

/* ---------- Login ---------- */
.login-fondo{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,var(--azul-osc) 0%,var(--azul) 55%,var(--azul-med) 100%);padding:20px}
.login-caja{background:var(--panel);border-radius:12px;padding:34px;width:100%;max-width:376px;box-shadow:0 18px 45px rgba(0,0,0,.35)}
.login-caja .marca-logo{display:block;width:120px;height:auto;padding:0;margin:0 auto 16px;border-radius:0;background:none}
.login-caja h1{text-align:center;font-size:19px;margin-bottom:4px;color:var(--azul)}
.login-caja .sub{text-align:center;color:var(--texto-2);font-size:13px;margin-bottom:22px}
/* Un botón que ya ocupa todo el ancho no puede crecer: se saldría de la
   caja. Acá el color solo alcanza, porque es el único botón en pantalla. */
.login-caja .btn{width:100%;justify-content:center;padding:9px}
.login-caja .btn,.login-caja .btn:hover,.login-caja .btn:active{transform:none}

/* ---------- Paginación ---------- */
.paginacion{display:flex;gap:5px;padding:12px 16px;align-items:center;font-size:13px;color:var(--texto-2);flex-wrap:wrap}
.paginacion a,.paginacion span.pg{padding:4px 9px;border:1px solid var(--borde);border-radius:5px;color:var(--texto-2)}
.paginacion a:hover{background:var(--hueco);text-decoration:none}
.paginacion .actual{background:var(--azul);border-color:var(--azul);color:#fff}
.paginacion .info{margin-left:auto}

/* ---------- Items de documento ---------- */
table.items{width:100%;border-collapse:collapse;font-size:13px}
table.items th{padding:7px 8px;background:var(--hueco);border-bottom:1px solid var(--borde);font-size:11.5px;text-transform:uppercase;color:var(--texto-2);text-align:left}
table.items td{padding:5px 6px;border-bottom:1px solid var(--borde)}
table.items input,table.items select{padding:5px 7px;font-size:13px;border:1px solid var(--borde);border-radius:5px;width:100%;font-family:inherit}
table.items .btn-quitar{background:none;border:0;color:var(--rojo);cursor:pointer;font-size:16px;padding:0 5px;line-height:1}
.totales{margin-left:auto;width:280px;font-size:13.5px}
.totales div{display:flex;justify-content:space-between;padding:5px 0}
.totales .gran{border-top:1px solid var(--borde);margin-top:5px;padding-top:9px;font-size:16px;font-weight:650}

/* ---------- Impresión ---------- */
.doc-print{max-width:800px;margin:0 auto;background:#fff;padding:40px;border:1px solid var(--borde);border-radius:var(--radio)}
.doc-cab{display:flex;justify-content:space-between;gap:26px;border-bottom:3px solid var(--azul);padding-bottom:18px;margin-bottom:22px}
.doc-cab h2{font-size:23px;letter-spacing:.03em;color:var(--azul)}
.doc-partes{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:22px;font-size:13px}
.doc-partes h4{margin:0 0 5px;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-3)}

/* Cuerpo de los documentos generados con IA (Markdown convertido a HTML) */
.doc-cuerpo{font-size:13.5px;line-height:1.65;color:var(--texto)}
.doc-cuerpo h2{font-size:16px;color:var(--azul);margin:26px 0 10px;padding-bottom:5px;
  border-bottom:1px solid var(--borde)}
.doc-cuerpo h2:first-child{margin-top:0}
.doc-cuerpo h3{font-size:14px;margin:18px 0 7px}
.doc-cuerpo h4,.doc-cuerpo h5,.doc-cuerpo h6{font-size:13px;margin:14px 0 5px}
.doc-cuerpo p{margin:0 0 10px}
.doc-cuerpo ul,.doc-cuerpo ol{margin:0 0 12px;padding-left:22px}
.doc-cuerpo li{margin-bottom:4px}
.doc-cuerpo table{margin:12px 0 16px;font-size:12.5px}
.doc-cuerpo table th{background:var(--gris-bg);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.03em}
.doc-cuerpo blockquote{margin:12px 0;padding:9px 14px;border-left:3px solid var(--ambar);
  background:var(--gris-bg);font-size:13px}
.doc-cuerpo code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;
  background:var(--gris-bg);padding:1px 4px;border-radius:3px}
.doc-cuerpo hr{border:0;border-top:1px solid var(--borde);margin:20px 0}

/* Membrete que solo existe en el papel: en pantalla el logo y el nombre
   de la empresa ya están en el menú, y repetirlos sería ruido. Al
   imprimir un informe, en cambio, sin membrete la hoja no dice de quién
   es ni de qué período habla. */
.solo-print{display:none}

@media print{
  .solo-print{display:block!important}
  /* Los botones también se van. Antes eran claros y en papel casi no se
     notaban; ahora son azul pleno y saldrían como manchas de tinta en
     una cotización. No se pierde nada: un botón impreso no se puede
     apretar. */
  .sidebar,.topbar,.pie,.no-print,.flash,.btn,.accesos{display:none!important}
  .cuerpo{padding:0}
  .panel{break-inside:avoid;box-shadow:none}
  .kpis{break-inside:avoid}
  .doc-print{border:0;padding:0;max-width:100%}
  body{background:#fff}
  /* Que las tablas y los títulos no se partan entre páginas */
  .doc-cuerpo table,.doc-cuerpo blockquote{page-break-inside:avoid}
  .doc-cuerpo h2,.doc-cuerpo h3{page-break-after:avoid}
  .doc-cuerpo tr{page-break-inside:avoid}
}

/* ---------------------------------------------------------------------
   Calendario de actividades

   Una rejilla de siete columnas. Las celdas tienen alto mínimo pero
   crecen si el día está cargado: recortar a «+3 más» obliga a un clic
   para ver lo que ya se podía mostrar.

   Los colores de los tipos son fijos y no de marca, a propósito. La
   identidad visual del cliente cambia el azul y el naranja del CRM; si
   los tipos dependieran de eso, una instalación con marca azul dejaría
   de distinguir una llamada de una reunión. Acá el color es un dato, no
   una decoración.
   --------------------------------------------------------------------- */
/* Los cinco tipos, en relleno pleno y letra blanca.
   Antes eran fondos pastel con letra oscura y el calendario se veía
   descolorido al lado del resto del CRM, que es azul marino profundo y
   naranja fuerte. Con relleno pleno la actividad se lee como una etiqueta
   y no como una nota al margen.

   Son tonos de la familia «700»: saturados pero profundos, que es lo que
   pega con el azul #082755 de la barra lateral. Un pastel se veía lavado;
   un neón se vería de otra aplicación.

   Cada tono trae su versión oscura para la barra de la izquierda, que le
   da relieve al bloque y lo separa del de al lado cuando dos del mismo
   tipo quedan pegados.

   Todos pasan 4.5:1 de contraste con blanco: son etiquetas de once o doce
   píxeles y hay que poder leerlas. */
:root{
  --cal-llamada:#0e7490; --cal-llamada-osc:#164e63;   /* cian */
  --cal-reunion:#1d4ed8; --cal-reunion-osc:#1e3a8a;   /* azul, la familia de la marca */
  --cal-email:#6d28d9;   --cal-email-osc:#4c1d95;     /* violeta */
  --cal-tarea:#047857;   --cal-tarea-osc:#064e3b;     /* verde */
  --cal-visita:#c2410c;  --cal-visita-osc:#7c2d12;    /* naranja quemado */
}

/* minmax(0,1fr) y no 1fr: con `1fr` la columna nunca baja del ancho de
   su contenido, así que un asunto largo se comía media rejilla y dejaba
   el sábado y el domingo en dos centímetros. */
.cal{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;padding:6px;background:var(--hueco);
  border:1px solid var(--borde);border-radius:12px;
}

.cal-cab{
  padding:9px 10px;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;text-align:center;color:#fff;border-radius:7px;
  background:linear-gradient(135deg,var(--azul),var(--azul-med));
}
.cal-cab.finde{background:linear-gradient(135deg,var(--azul-med),#4a6da8)}

.cal-dia{
  background:var(--panel);min-height:118px;padding:8px;border-radius:9px;min-width:0;
  display:flex;flex-direction:column;gap:4px;
  border:1px solid var(--borde);transition:box-shadow .12s,border-color .12s;
}
.cal-dia:hover{box-shadow:var(--sombra-md);border-color:var(--azul-tenue)}
.cal-dia.finde{background:#fbfcfe}
.cal-dia.otro{background:repeating-linear-gradient(45deg,#fafbfd,#fafbfd 6px,#f4f6fa 6px,#f4f6fa 12px);
              border-style:dashed}
.cal-dia.otro .cal-num{color:var(--texto-3);font-weight:500}

/* Hoy: se marca con el color de acento de la marca, que es el que el
   ojo ya asocia con «lo importante» en el resto del CRM. */
.cal-dia.hoy{border-color:var(--naranja);box-shadow:0 0 0 2px var(--naranja-bg);
              background:linear-gradient(180deg,#fffaf0,#fff 70px)}

.cal-fecha{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.cal-num{
  font-size:14px;font-weight:650;color:var(--texto-2);
  font-variant-numeric:tabular-nums;line-height:1
}
.cal-num .mes{font-size:10.5px;font-weight:600;color:var(--texto-3);margin-left:3px;
              text-transform:uppercase;letter-spacing:.04em}
/* El número de hoy va en un círculo lleno: es la referencia que se busca
   primero al abrir un calendario. */
.cal-dia.hoy .cal-num{
  background:var(--naranja);color:#fff;width:24px;height:24px;border-radius:50%;
  display:inline-grid;place-items:center;font-size:12.5px
}
.cal-mas{
  opacity:0;text-decoration:none;color:var(--azul);font-size:17px;line-height:1;
  width:21px;height:21px;display:grid;place-items:center;border-radius:6px;
  transition:opacity .12s,background .12s
}
.cal-dia:hover .cal-mas{opacity:.55}
.cal-mas:hover{opacity:1;background:var(--azul-claro);text-decoration:none}

/* El tipo solo define dos variables; el relleno, la barra y la letra los
   ponen las reglas de abajo. Así el color de una clase se cambia en un
   solo lugar y vale a la vez para la píldora del mes, el bloque de la
   semana y el botón de la barra de filtros. */
.llamada{--c:var(--cal-llamada);--c-osc:var(--cal-llamada-osc)}
.reunion{--c:var(--cal-reunion);--c-osc:var(--cal-reunion-osc)}
.email  {--c:var(--cal-email);  --c-osc:var(--cal-email-osc)}
.tarea  {--c:var(--cal-tarea);  --c-osc:var(--cal-tarea-osc)}
.visita {--c:var(--cal-visita); --c-osc:var(--cal-visita-osc)}

/* Cada actividad, en el color pleno de su tipo. */
.cal-chip{
  display:block;text-decoration:none;font-size:12.5px;line-height:1.4;
  padding:4px 8px 4px 9px;border-radius:6px;font-weight:600;
  background:var(--c,#64748b);color:#fff;
  border-left:3px solid var(--c-osc,#475569);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:transform .1s,filter .1s,box-shadow .1s
}
.cal-chip:hover{
  text-decoration:none;color:#fff;transform:translateX(1px);
  filter:brightness(1.12);box-shadow:var(--sombra)
}
/* La hora, en blanco a media tinta: se lee sin competir con el asunto. */
.cal-chip b{
  font-weight:700;margin-right:5px;font-variant-numeric:tabular-nums;
  font-size:11px;opacity:.72
}

/* Lo hecho se apaga, no se borra: sigue ocupando su lugar en el día. */
.cal-chip.hecha{opacity:.42;text-decoration:line-through;font-weight:500}
/* Lo que había que hacer y no se hizo, en el rojo de alerta del CRM. */
.cal-chip.vencida{--c:var(--rojo);--c-osc:#7f1d1d}
/* Lo que ya pasó y no era una tarea del CRM se apaga, no se alarma. */
.cal-chip.pasada{opacity:.7}

/* ---------------------------------------------------------------------
   Semana por horas

   Dos rejillas alineadas: una fija arriba —encabezados de día y la franja
   de todo el día— y una con scroll propio abajo, con las 24 horas. Las
   dos usan la misma primera columna de 58px para que las líneas coincidan.

   El alto de la hora vive en una variable: cambiarlo acá cambia la
   densidad de toda la vista sin tocar el PHP, que posiciona todo en
   porcentaje del día y no en píxeles.
   --------------------------------------------------------------------- */
:root{ --h-hora:46px; --col-horas:64px }

.sem-caja{padding:0}
.sem{
  display:grid;grid-template-columns:var(--col-horas) repeat(7,minmax(0,1fr));
  border-bottom:1px solid var(--borde);
  /* Pegada arriba mientras se recorren las horas: sin esto uno baja a las
     seis de la tarde y ya no sabe qué columna es cuál. */
  position:sticky;top:0;z-index:8;background:var(--panel)
}
.sem-esq{border-right:1px solid var(--borde)}

.sem-cab{
  padding:8px 6px;text-align:center;border-left:1px solid var(--borde);
  display:flex;flex-direction:column;align-items:center;gap:2px
}
.sem-cab.finde{background:#fbfcfe}
.sem-cab .dia{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--texto-3)
}
.sem-cab .num{
  font-size:19px;font-weight:650;color:var(--texto-2);line-height:1.1;
  font-variant-numeric:tabular-nums
}
.sem-cab.hoy .dia{color:var(--naranja)}
.sem-cab.hoy .num{
  background:var(--naranja);color:#fff;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-size:15px
}

.sem-etq.todo{
  grid-column:1;font-size:9.5px;color:var(--texto-3);text-align:right;
  padding:7px 7px 6px 0;border-right:1px solid var(--borde);border-top:1px solid var(--borde);
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;line-height:1.25
}
.sem-todo{
  border-left:1px solid var(--borde);border-top:1px solid var(--borde);
  padding:5px;min-height:34px;display:flex;flex-direction:column;gap:3px;min-width:0
}
.sem-todo.hoy{background:#fffaf0}
.sem-todo .cal-chip{font-size:11.5px;padding:2px 7px}

/* Cuerpo con scroll: la altura es lo que se ve, no lo que hay. */
.sem-cuerpo{max-height:620px;overflow-y:auto;overflow-x:hidden;position:relative}
.sem-rejilla{
  display:grid;grid-template-columns:var(--col-horas) repeat(7,minmax(0,1fr));
  height:calc(var(--h-hora) * 24)
}

.sem-horas{border-right:1px solid var(--borde)}
.sem-hora{
  height:var(--h-hora);position:relative;
  font-size:10.5px;color:var(--texto-3);font-variant-numeric:tabular-nums
}
/* La etiqueta se sienta sobre la línea, no dentro de la franja: así «09:00»
   señala el instante y no la hora entera. La primera no se sube, porque
   quedaría cortada arriba de la rejilla. */
.sem-hora span{position:absolute;top:-6px;right:7px;background:var(--panel);padding:0 2px}
.sem-hora:first-child span{top:1px}

.sem-col{position:relative;border-left:1px solid var(--borde);min-width:0}
.sem-col.finde{background:#fcfdff}
.sem-col.hoy{background:#fffdf7}

/* Las franjas de una hora, clicables. La línea de las medias horas es más
   tenue: ayuda a estimar sin competir con la de la hora. */
.sem-franja{
  display:block;height:var(--h-hora);border-top:1px solid var(--borde);
  background-image:linear-gradient(var(--borde),var(--borde));
  background-size:100% 1px;background-position:0 50%;background-repeat:no-repeat;
  opacity:.55;transition:background-color .1s
}
.sem-franja:hover{background-color:var(--azul-claro);opacity:1}
.sem-franja:first-child{border-top:0}

/* La línea de ahora. Vive por encima de las franjas y por debajo de los
   bloques: sirve de referencia, no de obstáculo. */
.sem-ahora{
  position:absolute;left:0;right:0;height:2px;background:var(--rojo);z-index:3;
  pointer-events:none
}
.sem-ahora::before{
  content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--rojo)
}

/* Cada actividad, ubicada en su hora y con el alto de su duración.
   El borde blanco no es adorno: cuando dos bloques del mismo tipo quedan
   pegados, es lo único que dice que son dos y no uno largo. */
.sem-ev{
  position:absolute;z-index:4;overflow:hidden;text-decoration:none;
  border-radius:6px;padding:3px 7px;font-size:11.5px;line-height:1.3;
  background:var(--c,#64748b);color:#fff;
  border:1px solid rgba(255,255,255,.85);border-left:3px solid var(--c-osc,#475569);
  box-shadow:0 1px 3px rgba(15,23,42,.18);
  min-height:17px;transition:filter .1s,box-shadow .1s
}
.sem-ev:hover{
  text-decoration:none;color:#fff;filter:brightness(1.12);
  box-shadow:var(--sombra-md);z-index:6
}
.sem-ev b{display:block;font-size:10.5px;font-weight:700;opacity:.72;
          font-variant-numeric:tabular-nums}
.sem-ev span{display:block;font-weight:600}

.sem-ev.vencida{--c:var(--rojo);--c-osc:#7f1d1d}
.sem-ev.hecha{opacity:.45}
.sem-ev.hecha span{text-decoration:line-through;font-weight:500}
.sem-ev.pasada{opacity:.7}

/* Un bloque de media hora o menos no tiene alto para dos renglones: la
   hora y el asunto pasan a la misma línea. La clase la pone el PHP, que
   es quien sabe la duración; deducirla del alto en el selector funciona
   pero se rompe el día que alguien toque una cifra. */
.sem-ev.corto{padding:2px 6px;white-space:nowrap;text-overflow:ellipsis}
.sem-ev.corto b{display:inline;margin-right:4px}
.sem-ev.corto span{display:inline}

@media (max-width:900px){
  :root{ --col-horas:50px }
  .sem,.sem-rejilla{grid-template-columns:var(--col-horas) repeat(7,minmax(72px,1fr))}
  .sem-caja{overflow-x:auto}
  .sem-cab .num{font-size:16px}
}

.cal-nav{display:flex;align-items:center;gap:8px}
.cal-nav .titulo-mes{
  font-size:19px;font-weight:650;letter-spacing:-.02em;min-width:180px;color:var(--texto)
}
/* Solo la primera letra: `capitalize` ponía «Agosto De 2026». */
.cal-nav .titulo-mes::first-letter{text-transform:uppercase}
/* ---------- Los controles del mes ----------
   Cuando los botones eran claros, dos cuadrados de 30px al lado del
   título no molestaban. Con el relleno azul pleno pasaron a competir con
   «Agosto de 2026», que es lo que uno viene a leer.

   Tres correcciones, todas de tamaño:

   · Las flechas se hacen redondas y de 28px. Un círculo pesa menos que
     un cuadrado del mismo tamaño porque tiene menos superficie, y para
     un control que solo dice «anterior» y «siguiente» eso alcanza.
   · «Hoy» se alinea a esa misma altura. Antes cada uno calculaba la suya
     con su propio `padding` y quedaban desparejos.
   · La flecha en sí sube a 17px pero en peso normal. Antes era el 700
     de `.btn`, y una flecha en negrita se ve como un borrón. */
/* Se apunta a `.flecha`, no a `.cal-nav .btn` en general.
   La regla anterior alcanzaba a los tres botones y después intentaba
   rescatar a «Hoy» con `.cal-nav .btn.hoy` — una clase que el HTML no
   tenía. Resultado: «Hoy» metido a la fuerza en un círculo de 28px.
   Ahora cada uno tiene su clase y ninguna regla depende de deshacer
   lo que hizo la anterior. */
.cal-nav .flecha{
  width:28px;height:28px;padding:0;
  justify-content:center;align-items:center;
  border-radius:50%;
  font-size:17px;font-weight:400;line-height:1
}
.cal-nav .hoy{
  height:28px;padding:0 14px;
  border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.01em;line-height:1
}
/* El crecimiento de `.btn` es del 5%. En un botón de 28px eso es un
   píxel y medio: no se percibe como respuesta. Acá conviene un poco
   más, que en un control tan chico sigue siendo un gesto discreto. */
.cal-nav .flecha:hover{transform:scale(1.12)}
.cal-nav .hoy:hover{transform:scale(1.06)}

/* La barra de tipos: leyenda y filtro a la vez. Cada píldora enciende o
   apaga esa clase de actividad; las apagadas se vacían de color en vez de
   desaparecer, porque el hueco es lo que recuerda que hay algo escondido. */
.cal-leyenda{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.cal-leyenda .cal-chip{
  padding:3px 10px;font-size:11.5px;font-weight:600;cursor:pointer;
  border:1px solid transparent;transition:opacity .12s,filter .12s
}
.cal-leyenda .cal-chip:hover{text-decoration:none;filter:brightness(.95);transform:none}
.cal-leyenda .cal-chip i{
  font-style:normal;margin-left:6px;font-size:10.5px;opacity:.62;
  font-variant-numeric:tabular-nums
}
/* Apagada: el relleno se va y queda el contorno con un punto del color.
   Sin ese punto, cinco botones grises son cinco palabras y hay que leer
   cuál es cuál. */
.cal-leyenda .cal-chip.apagado{
  background:var(--panel);color:var(--texto-2);border:1px solid var(--borde);
  border-left:3px solid var(--c);padding-left:9px
}
.cal-leyenda .cal-chip.apagado:hover{
  color:var(--texto);filter:none;background:var(--hueco)
}
.cal-leyenda .cal-chip.apagado i{opacity:.75}

.cal-leyenda .cal-chip.todas{
  background:var(--panel);border:1px solid var(--borde);border-left-width:3px;
  border-left-color:var(--texto-3);color:var(--texto-2)
}
.cal-leyenda .cal-chip.todas.activo{
  background:var(--azul);border-color:var(--azul);color:#fff
}

@media (max-width:900px){
  .cal{grid-template-columns:repeat(7,minmax(96px,1fr));overflow-x:auto}
  .cal-dia{min-height:88px}
  .cal-nav .titulo-mes{font-size:16px;min-width:130px}
}

@media print{
  /* En papel no hay scroll: la semana se imprime entera o no se entiende. */
  .sem-cuerpo{max-height:none;overflow:visible}
  .sem{position:static}
  .sem-franja{background-image:none}
  .sem-ev,.sem-cab.hoy .num,.sem-todo.hoy{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  .cal{background:var(--panel);border:0;gap:2px}
  .cal-dia{min-height:92px;box-shadow:none}
  .cal-mas{display:none}
  .cal-cab{background:var(--azul);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cal-chip{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .cols-2{grid-template-columns:1fr}
  .sidebar{position:fixed;left:-230px;z-index:60;transition:left .2s}
  .sidebar.abierto{left:0;box-shadow:0 0 42px rgba(0,0,0,.35)}
  .menu-btn{display:block}
  .buscador{flex-basis:150px}
  .cuerpo{padding:14px}
  .barra-fila{grid-template-columns:96px 1fr 78px}
}

/* ---------------------------------------------------------------------
   Diálogo del PIN de eliminación

   Se usa <dialog> del navegador en vez de una capa propia: trae el foco
   atrapado, el cierre con Escape y el fondo inerte sin JavaScript.
   --------------------------------------------------------------------- */
.dlg-pin{
  border:1px solid var(--borde);
  border-radius:var(--radio);
  box-shadow:var(--sombra-md);
  padding:22px 24px;
  max-width:420px;
  width:calc(100% - 32px);
  color:var(--texto);
}
.dlg-pin::backdrop{background:rgba(15,23,42,.45)}
.dlg-pin .campo{margin:0}

/* ---------------------------------------------------------------------
   Diálogo de formulario

   El mismo <dialog> del navegador, pero más ancho: acá adentro entra una
   rejilla de campos, no cuatro dígitos. Lo usan el alta de contactos
   desde la ficha del cliente y el alta rápida desde los otros módulos.
   --------------------------------------------------------------------- */
.dlg{
  border:1px solid var(--borde);
  border-radius:var(--radio);
  box-shadow:var(--sombra-md);
  padding:22px 24px;
  max-width:560px;
  width:calc(100% - 32px);
  color:var(--texto);
}
.dlg::backdrop{background:rgba(15,23,42,.45)}
.dlg h3{font-size:16px}


/* ---------- ITBMS · procedimiento mensual ----------
   Portado de la calculadora que Mario armó aparte. Los bloques van
   plegados porque son instrucciones largas que se leen una vez al mes;
   plegados dejan ver de un vistazo los cinco pasos. */
.valor-inline{
  background:var(--hueco); border:1px solid var(--borde); border-radius:4px;
  padding:1px 6px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap;
}
details.bloque{border:1px solid var(--borde);border-radius:var(--radio);margin-bottom:10px;background:var(--panel)}
details.bloque>summary{
  cursor:pointer;padding:11px 15px;font-weight:700;font-size:14px;color:var(--azul);
  list-style:none;display:flex;align-items:center;gap:8px;border-radius:var(--radio)
}
details.bloque>summary::-webkit-details-marker{display:none}
details.bloque>summary::before{content:'\25B8';color:var(--azul);font-size:12px;transition:transform .15s}
details.bloque[open]>summary::before{transform:rotate(90deg)}
details.bloque>summary:hover{background:var(--hueco)}
.bloque-cuerpo{padding:0 16px 14px;font-size:13.5px}
.bloque-cuerpo ul,.bloque-cuerpo ol{padding-left:20px;margin:8px 0}
.bloque-cuerpo li{margin-bottom:7px}
.bloque-cuerpo p{margin:8px 0}
/* Al imprimir, un bloque plegado saldría como un título suelto sin nada
   debajo: en papel se abren todos. */
@media print{
  details.bloque>summary::before{display:none}
  .bloque-cuerpo{display:block !important}
}

/* --- Firma del acta ---------------------------------------------------
   Vive dentro de `body.campo`, así que hereda la pantalla despejada del
   modo campo. Lo propio es el recuadro de firmar y el resumen de arriba. */

.firma-cuerpo { max-width: 860px; margin: 0 auto; }

.firma-resumen {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.firma-resumen h2 { margin: 0 0 10px; font-size: 16px; }
.firma-resumen dl { margin: 0; }
.firma-resumen dt {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-3);
  margin-top: 10px;
}
.firma-resumen dt:first-of-type { margin-top: 0; }
.firma-resumen dd { margin: 2px 0 0; font-size: 15px; line-height: 1.45; }

.firma-form { padding-bottom: 40px; }

/* El recuadro. Alto fijo y generoso: firmar en una franja de 80 px con la
   tablet apoyada en el mostrador de un cliente sale mal siempre. */
.firma-lienzo {
  background: #fff;
  border: 2px dashed var(--borde);
  border-radius: 12px;
  padding: 4px;
  height: 240px;
}
.firma-lienzo canvas {
  display: block;
  border-radius: 8px;
  /* Sin esto el navegador interpreta el trazo como un gesto de scroll y
     la firma sale cortada, o directamente no se dibuja. */
  touch-action: none;
}

.firma-acciones {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.firma-acciones .btn { min-height: 48px; padding: 0 22px; font-size: 16px; }
.firma-acciones .btn-primario { margin-left: auto; }

.firma-aviso {
  margin: 10px 0 0;
  color: var(--rojo);
  font-weight: 600;
}

/* La firma ya guardada, en la ficha de la visita. */
.firma-hecha {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.firma-hecha img {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 8px;
  max-width: 320px;
  height: auto;
}
.firma-datos { font-size: 13.5px; line-height: 1.6; }
.firma-datos strong { font-size: 15px; }

/* El bloque de firmas del acta no se parte entre páginas.
   Se vio impreso: la línea de firma quedaba en la hoja 1 y «Cédula ___
   Cargo ___» caía sola en la hoja 2. Un formulario que se firma partido
   en dos hojas no es un detalle estético — es una hoja que el cliente
   tiene que firmar sin ver la mitad de lo que está completando. */
.acta-firmas{break-inside:avoid;page-break-inside:avoid}
@media print{
  .acta-firmas{break-inside:avoid;page-break-inside:avoid}
}