/* ============================================================================
   COMUN · Difarvet × Chamby
   Colores de marca, tipografia y piezas que se repiten en las tres pantallas.
   Teal Difarvet manda; el azul de Chamby solo aparece donde se habla de Chamby.
   ========================================================================== */
:root{
  --teal:#008280;          /* Difarvet */
  --teal-hondo:#00605E;
  --teal-claro:#DDEEEC;
  --tinta:#0F2E2D;         /* texto: casi negro con un poco de teal */
  --suave:#4D6664;
  --tenue:#7E9492;
  --papel:#EEF4F3;
  --hoja:#FFFFFF;
  --linea:#D4E1DF;
  --linea-2:#BFD1CE;
  --chamby:#0C55AD;        /* Chamby */
  --chamby-claro:#E3ECF8;
  --ok:#1D7A4C;   --ok-bg:#E1F2E8;
  --no:#B03A2E;   --no-bg:#F8E4E1;
  --pend:#9A6512; --pend-bg:#FBF0DC;
  --r:3px;                 /* contenedores y campos: recto */
  --titulo:'Bricolage Grotesque','Figtree',system-ui,sans-serif;
  --texto:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --tinta:#E6F0EF; --suave:#A4BAB8; --tenue:#789290;
  --papel:#0B1716; --hoja:#12211F; --linea:#1F3331; --linea-2:#2B4442;
  --teal-claro:#113A38; --chamby-claro:#14253D;
  --ok:#5CC98E; --ok-bg:#12301F; --no:#F08C7F; --no-bg:#3A1A16; --pend:#E9B45C; --pend-bg:#35270F;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--texto);color:var(--tinta);background:var(--papel);-webkit-font-smoothing:antialiased;
  font-size:15px;line-height:1.45;font-feature-settings:"tnum" 1}
h1,h2,h3{font-family:var(--titulo);letter-spacing:-.015em;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.oculto{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --- botones --- */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;
  border-radius:999px;border:1.5px solid var(--tinta);background:transparent;color:var(--tinta);
  font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s}
.b:hover{background:var(--tinta);color:var(--papel)}
.b:disabled{opacity:.5;cursor:default}
.b-teal{background:var(--teal);border-color:var(--teal);color:#fff}
.b-teal:hover{background:var(--teal-hondo);border-color:var(--teal-hondo)}
.b-ok{background:var(--ok);border-color:var(--ok);color:#fff}
.b-ok:hover{background:#155E3A;border-color:#155E3A;color:#fff}
.b-no{background:var(--hoja);border-color:var(--no);color:var(--no)}
.b-no:hover{background:var(--no);color:#fff}
.b-no.lleno{background:var(--no);color:#fff}
.b-chico{height:32px;padding:0 13px;font-size:13px}
.b-texto{border:0;background:none;padding:0;height:auto;color:var(--suave);text-decoration:underline;text-underline-offset:3px}
.b-texto:hover{color:var(--teal);background:none}
.b-icono{width:36px;padding:0}

/* --- campos --- */
.etq{display:block;font-size:13px;font-weight:600;color:var(--suave);margin-bottom:6px}
.campo{width:100%;height:44px;padding:0 13px;border:1px solid var(--linea-2);border-bottom:2px solid var(--suave);border-radius:var(--r);
  background:var(--hoja);font-size:15px;transition:border-color .15s}
textarea.campo{height:auto;min-height:92px;padding:11px 13px;resize:vertical;line-height:1.45}
select.campo{appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%234D6664' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.campo:focus{outline:none;border-color:var(--teal);border-bottom-color:var(--teal)}
.campo::placeholder{color:var(--tenue)}

/* --- estados de un reporte --- */
.estado{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:2px;
  font-size:12px;font-weight:700;white-space:nowrap}
.estado.PENDIENTE{color:var(--pend);background:transparent;box-shadow:inset 0 0 0 1.5px var(--pend)}
.estado.APROBADO{color:#fff;background:var(--ok)}
.estado.RECHAZADO{color:#fff;background:var(--no)}

.chip{display:inline-flex;align-items:center;padding:0 0 0 7px;border-left:2px solid var(--teal);
  font-size:13px;font-weight:600;color:var(--teal-hondo);white-space:nowrap;line-height:1.2}
:root[data-theme="dark"] .chip{color:#7FD3CF}
.chip-chamby{border-left-color:var(--chamby);color:var(--chamby)}
:root[data-theme="dark"] .chip-chamby{color:#8FB6EA}

.dist{font-size:12px;font-weight:600}
.dist.ok{color:var(--ok)} .dist.med{color:var(--pend)} .dist.lejos{color:var(--no)} .dist.nd{color:var(--tenue)}

.aviso{padding:10px 13px;border-radius:var(--r);font-size:13.5px;line-height:1.45}
.aviso-no{background:var(--no-bg);color:var(--no);border:1px solid color-mix(in srgb,var(--no) 25%,transparent)}
.aviso-info{background:var(--teal-claro);color:var(--teal-hondo)}
:root[data-theme="dark"] .aviso-info{color:#9FDAD6}


.demo-tira{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:80;
  background:var(--tinta);color:var(--papel);font-size:12.5px;padding:7px 14px;border-radius:var(--r);
  display:flex;gap:10px;align-items:center;white-space:nowrap}
.demo-tira button{background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;font-size:12.5px;padding:0}
@media (max-width:900px){
  .demo-tira{position:static;transform:none;margin:12px;white-space:normal;flex-wrap:wrap;justify-content:center;text-align:center;border-radius:var(--r)}
}

.girando{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;
  animation:gira .7s linear infinite;display:inline-block}
@keyframes gira{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}