/* ==========================================================================
   Pangea OS · tokens y piezas de la casa
   Un solo fichero para todos los modulos. Si un modulo necesita un color
   nuevo, se anade AQUI como token: nunca un hex suelto dentro de una pagina.

   Paleta: la misma de Pangea OS y de los informes de la casa
   (skill pangea-informes-html, orden de Carlos 17-ago-2026).

   Pase de diseño del 13-sep-2026 (brief punto 2, firmado en el gate 3):
   - UNA tipografia (Inter) para todo. Los tres tokens --serif/--sans/--mono
     CONSERVAN su nombre (decenas de paginas los usan) pero ahora dicen el
     PAPEL, no la letra: --serif = titulos (peso 800), --sans = cuerpo,
     --mono = datos y etiquetas (numeros tabulares).
   - Rejilla de 8px: separaciones y rellenos en multiplos de 8 (4 de medio
     paso). Los tamaños de letra no son de la rejilla y no se tocan.
   - Iconos de UNA familia: trazos de 2px enmascarados por CSS sobre los
     tiles de la portada (data-tile), sin tocar ni una linea de JS.
   - Movil primero y modo oscuro ya estaban: el oscuro solo redefine tokens.
   ========================================================================== */

:root{
  --tinta:#1D211F;  --gris:#5F6662;  --linea:#DDE1DB;  --superficie:#FFFFFF;
  --fondo:#F5F6F3;  --tenue:#8A918C; --rail:#C9D1CA;
  --teal:#2F6B58;   --teal-suave:#E3EEE9;
  --ambar:#96660F;  --ambar-suave:#F4EAD5;
  --rojo:#A32D2D;   --rojo-suave:#FCEBEB;

  --serif:"Inter","Helvetica Neue",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --sans:"Inter","Helvetica Neue",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --mono:"Inter","Helvetica Neue",-apple-system,BlinkMacSystemFont,Arial,sans-serif;

  --papel:0 1px 0 var(--linea), 0 12px 28px -22px rgba(29,33,31,.35);
  --radio:10px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --tinta:#E8EBE7; --gris:#A2AAA4; --linea:#2C3230; --superficie:#191D1B;
    --fondo:#111413; --tenue:#7B837D; --rail:#39413D;
    --teal:#6FBFA0;  --teal-suave:#1B302A;
    --ambar:#D9A441; --ambar-suave:#312716;
    --rojo:#E0736F;  --rojo-suave:#31191A;
    --papel:0 1px 0 var(--linea), 0 12px 28px -22px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --tinta:#E8EBE7; --gris:#A2AAA4; --linea:#2C3230; --superficie:#191D1B;
  --fondo:#111413; --tenue:#7B837D; --rail:#39413D;
  --teal:#6FBFA0;  --teal-suave:#1B302A;
  --ambar:#D9A441; --ambar-suave:#312716;
  --rojo:#E0736F;  --rojo-suave:#31191A;
  --papel:0 1px 0 var(--linea), 0 12px 28px -22px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--teal);color:var(--fondo)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}

/* ---------- estructura (rejilla 8px) ---------- */
.os-wrap{max-width:720px;margin:0 auto;padding:24px 16px 40px}
@media(min-width:700px){ .os-wrap{padding:48px 24px 64px} }

/* ---------- rotulos ---------- */
.os-eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal); font-weight:600; margin:0 0 8px;
}
.os-h1{
  font-family:var(--serif); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(26px,6vw,38px); line-height:1.1; margin:0 0 12px; text-wrap:balance;
}
.os-h2{
  font-family:var(--serif); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(20px,4.6vw,26px); line-height:1.2; margin:0 0 8px; text-wrap:balance;
}
.os-sub{color:var(--gris);margin:0 0 24px;max-width:60ch}
.os-mono{
  font-family:var(--mono);font-size:12px;color:var(--tenue);
  letter-spacing:.04em;font-variant-numeric:tabular-nums;
}

/* ---------- tarjeta de papel ---------- */
.os-papel{
  background:var(--superficie); border:1px solid var(--linea);
  border-left:3px solid var(--teal); border-radius:var(--radio);
  padding:16px 16px; box-shadow:var(--papel); margin:0 0 16px;
}
.os-papel.ambar{border-left-color:var(--ambar)}
.os-papel p{margin:0 0 12px;color:var(--gris)}
.os-papel p:last-child{margin-bottom:0}
.os-papel b{color:var(--tinta)}

/* ---------- chips ---------- */
.os-chip{
  display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; padding:4px 8px; border-radius:999px;
}
.os-chip.vivo{background:var(--teal-suave);color:var(--teal)}
.os-chip.pendiente{background:var(--ambar-suave);color:var(--ambar)}
.os-chip.decision{background:var(--rojo-suave);color:var(--rojo)}

/* ---------- botones ---------- */
.os-btn{
  font-family:var(--sans); font-size:17px; font-weight:700;
  background:var(--tinta); color:var(--fondo); border:1px solid var(--tinta);
  border-radius:var(--radio); padding:16px 24px; width:100%;
  cursor:pointer; transition:opacity .14s ease; -webkit-appearance:none;
}
a.os-btn{display:inline-block;text-decoration:none;text-align:center}
.os-btn:hover{opacity:.87}
.os-btn:disabled{opacity:.42;cursor:not-allowed}
.os-btn.fantasma{background:transparent;color:var(--tinta);border-color:var(--rail);font-weight:600}
.os-btn.fantasma:hover{border-color:var(--tinta);opacity:1}
.os-btn.auto{width:auto}
.os-link{
  background:none;border:none;padding:8px 2px;cursor:pointer;
  font-family:var(--mono);font-size:12.5px;color:var(--teal);
  text-decoration:underline;text-underline-offset:3px;
}
.os-link:hover{color:var(--tinta)}

/* ---------- campos ---------- */
.os-campo{
  width:100%; font-family:var(--sans); font-size:16.5px; line-height:1.55;
  color:var(--tinta); background:var(--superficie);
  border:1px solid var(--rail); border-radius:var(--radio);
  padding:12px 16px; -webkit-appearance:none;
}
textarea.os-campo{min-height:152px;resize:vertical}
.os-campo:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--teal-suave)}
.os-campo::placeholder{color:var(--tenue)}

.os-ops{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.os-op{
  font-family:var(--sans); font-size:15px; cursor:pointer;
  background:var(--superficie); color:var(--tinta);
  border:1px solid var(--rail); border-radius:999px; padding:8px 16px;
  transition:background .13s ease,border-color .13s ease,color .13s ease;
}
.os-op:hover{border-color:var(--teal)}
.os-op[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--fondo)}
.os-op.num{min-width:56px;text-align:center;font-family:var(--mono);font-size:16px;font-variant-numeric:tabular-nums}
.os-pies{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--tenue);margin:0 0 16px}

/* ---------- lista de personas ---------- */
.os-lista{border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;background:var(--superficie);margin:0 0 16px}
.os-fila{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:16px 16px;background:none;border:none;border-bottom:1px solid var(--linea);
  cursor:pointer;font-family:var(--sans);font-size:16.5px;font-weight:600;color:var(--tinta);
  text-decoration:none;
}
.os-fila:last-child{border-bottom:none}
.os-fila:hover{background:var(--teal-suave)}
.os-fila .marca{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--tenue);font-weight:400}

/* ---------- barra de avance ---------- */
.os-barra{display:flex;gap:4px;margin:0 0 20px}
.os-barra i{flex:1;height:4px;border-radius:2px;background:var(--linea);display:block;transition:background .2s ease}
.os-barra i.hecha{background:var(--teal)}
.os-barra i.aqui{background:var(--tinta)}
.os-cuenta{font-family:var(--mono);font-size:12px;color:var(--tenue);font-variant-numeric:tabular-nums;margin:0 0 8px;display:flex;justify-content:space-between}

/* ---------- estado ---------- */
.os-estado{font-family:var(--mono);font-size:12px;color:var(--tenue);min-height:20px;margin:8px 0 0;text-align:center}
.os-estado.ok{color:var(--teal)}
.os-estado.mal{color:var(--rojo)}

/* ---------- pie ---------- */
.os-pie{margin-top:32px;padding-top:16px;border-top:1px solid var(--linea);font-family:var(--mono);font-size:11.5px;color:var(--tenue);line-height:1.6}

/* ---------- iconos de la casa (pase de diseño 13-sep-2026) ----------
   UNA familia: trazo 2px, puntas redondas, 24x24. Van como mascaras CSS
   sobre los tiles de la portada, elegidas por [data-tile] (el JS no cambia:
   ya escribia ese atributo). El color sale de var(--teal): claro y oscuro
   solos. Un tile sin icono propio usa el generico (--os-icono de .os-tile). */
.os-tile::before{
  content:""; width:24px; height:24px; flex:0 0 auto;
  background:var(--teal);
  -webkit-mask:var(--os-icono) center/contain no-repeat;
          mask:var(--os-icono) center/contain no-repeat;
}
.os-tile{
  /* generico: cuadricula de app */
  --os-icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
}
.os-tile[data-tile="perfil"]{
  --os-icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-3.9 3.6-6.5 8-6.5s8 2.6 8 6.5'/%3E%3C/svg%3E");
}
.os-tile[data-tile="avisos"]{
  --os-icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 5 2 6.5 2 6.5H4S6 14 6 9'/%3E%3Cpath d='M10 19.5a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
}
.os-tile[data-tile="tareas"]{
  --os-icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpolyline points='8 12.5 11 15.5 16 9'/%3E%3C/svg%3E");
}
.os-tile[data-tile="marcaciones"]{
  --os-icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15.5 13.5'/%3E%3C/svg%3E");
}
.os-tile[data-tile="cuestionario"]{
  --os-icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4a3 3 0 0 1 6 0'/%3E%3Cline x1='9' y1='11' x2='15' y2='11'/%3E%3Cline x1='9' y1='15' x2='13' y2='15'/%3E%3C/svg%3E");
}
.os-tile[data-tile="mi-pagina"]{
  --os-icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='10' y1='10' x2='10' y2='20'/%3E%3C/svg%3E");
}
.os-tile[data-tile="sede"]{
  --os-icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.2 7-11a7 7 0 1 0-14 0c0 5.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}
.os-tile[data-tile="equipo"]{
  --os-icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.5 2.9-5.7 6.5-5.7s6.5 2.2 6.5 5.7'/%3E%3Cpath d='M16 4.8a3.5 3.5 0 0 1 0 6.4'/%3E%3Cpath d='M18.2 14.7c2 .8 3.3 2.5 3.3 5.3'/%3E%3C/svg%3E");
}
.os-tile[data-tile="dinero"]{
  --os-icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6.5' width='19' height='11' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cline x1='6' y1='12' x2='6.01' y2='12'/%3E%3Cline x1='18' y1='12' x2='18.01' y2='12'/%3E%3C/svg%3E");
}
.os-tile.externo{
  /* manual: libro abierto */
  --os-icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6c-1.5-1.6-3.8-2.2-9-2v14c5.2-.2 7.5.4 9 2 1.5-1.6 3.8-2.2 9-2V4c-5.2-.2-7.5.4-9 2z'/%3E%3Cline x1='12' y1='6' x2='12' y2='20'/%3E%3C/svg%3E");
}

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