/* ==========================================================================
   APROT — Sistema de color y tema (compartido por todas las herramientas)
   Marca APROT · Asesoría en Prevención de Riesgos (Osvaldo Torres).
   Paleta oficial: navy #0F1720 · teal #2AA7BB · gris #6E6E6E · claro #E6ECF0 · naranja #FF9F1C.
   Solo TOKENS de diseño (variables) + modo claro/oscuro. Sin layout: cada
   herramienta mantiene su CSS propio. Cambiar un token aquí re-viste todo.
   ========================================================================== */

:root{
  /* Teal de marca, con tono legible para botones/encabezados (texto blanco encima) */
  --brand:#17707f; --brand-700:#0f5866; --brand-050:#e8f4f6; --brand-100:#cbe7ec;
  --accent:#e8901f; --accent-050:#fff3e0;   /* naranja APROT (#FF9F1C) atenuado para superficies */
  --ink:#0F1720; --muted:#6E6E6E; --line:#E6ECF0; --bg:#f2f5f8; --white:#ffffff;
  --ok:#1f8a5b; --ok-bg:#e6f5ee; --warn:#c0392b; --warn-bg:#fbeae8; --pend:#b9770a; --pend-bg:#fbf1de;
  --radius:14px; --shadow:0 10px 30px rgba(15,23,32,.12);
}

[data-theme="dark"]{
  /* En oscuro el navy #0F1720 es el fondo y el teal brillante #2AA7BB es la marca */
  --brand:#2AA7BB; --brand-700:#4fc0d2; --brand-050:#12303a; --brand-100:#1c4451;
  --accent:#FF9F1C; --accent-050:#2a2213;
  --ink:#eef3f8; --muted:#a3b3bf; --line:#26333f; --bg:#0F1720; --white:#16212b;
  --ok:#4cc38a; --ok-bg:#123026; --warn:#f08a7f; --warn-bg:#37201d; --pend:#e3b35c; --pend-bg:#352c14;
  --shadow:0 10px 30px rgba(0,0,0,.5);
}

/* Placeholder legible en oscuro (aplica a todas las herramientas) */
[data-theme="dark"] ::placeholder{ color:#93a1ae; opacity:1; }

/* Marca APROT: cuando el recuadro del logo (.brand .mk) contiene la imagen del isotipo,
   fondo navy + sin recorte (el borde redondeado del recuadro recorta la imagen). */
.brand .mk:has(img){ background:#0F1720; overflow:hidden; padding:0; }
.brand .mk img{ width:100%; height:100%; object-fit:contain; display:block; }

/* Tipografía de marca: Sora (bundle local en core/fonts/, sin CDN). La regla html body
   gana por especificidad sobre el font-family propio de cada herramienta → se aplica en
   todas sin tocar sus archivos. Si falta core/, cada herramienta cae a su fuente de sistema. */
@font-face{ font-family:"Sora"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/sora-400.woff2") format("woff2"); }
@font-face{ font-family:"Sora"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/sora-600.woff2") format("woff2"); }
@font-face{ font-family:"Sora"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/sora-700.woff2") format("woff2"); }
html body{ font-family:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }

/* Adjuntos (📎 foto/PDF por documento) — UI compartida por todas las herramientas.
   El archivo vive en IndexedDB (ver APR.att en apr-core.js); esto es solo el look. */
.apr-att{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
.apr-att .att-add{font-family:inherit;font-size:12px;font-weight:700;padding:6px 12px;border-radius:8px;border:1px dashed var(--brand);background:transparent;color:var(--brand);cursor:pointer}
.apr-att .att-add:hover{background:var(--brand-050)}
.apr-att .att-chip{display:inline-flex;align-items:center;gap:6px;max-width:250px;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:16px;background:var(--brand-050);color:var(--brand-700);cursor:pointer;border:1px solid var(--brand-100)}
.apr-att .att-chip:hover{filter:brightness(.97)}
.apr-att .att-chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apr-att .att-chip .rm{border:0;background:transparent;color:var(--warn);cursor:pointer;font-size:12px;padding:0 2px;font-family:inherit}
@media print{ .apr-att{display:none !important} }

/* Impresión: en modo oscuro, volver a la paleta CLARA de APROT (gana por especificidad sobre
   el override inline de cada herramienta, para no imprimir con el teal viejo #12546a). */
@media print{
  html[data-theme="dark"]{
    --brand:#17707f; --brand-700:#0f5866; --brand-050:#e8f4f6; --brand-100:#cbe7ec;
    --accent:#e8901f; --accent-050:#fff3e0;
    --ink:#0F1720; --muted:#6E6E6E; --line:#E6ECF0; --bg:#ffffff; --white:#ffffff;
    --ok:#1f8a5b; --ok-bg:#e6f5ee; --warn:#c0392b; --warn-bg:#fbeae8; --pend:#b9770a; --pend-bg:#fbf1de;
  }
}