@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,500&display=swap');

:root{
  /* Paleta mas viva que la version anterior (mismo sistema ChileNormas
     Gestión, pero con mas saturacion - la version anterior se sentia
     apagada/gris). Se mantiene la misma familia de tonos (teal, ambar,
     naranja, verde, morado) para no perder identidad, solo mas intensos. */
  --paper:#F2F6F8; --surface:#FFFFFF;
  --ink:#132030; --ink-soft:#44586A; --ink-faint:#7E92A3;
  --line:#D6E0E7; --line-soft:#E6EDF1;
  --accent:#0D8C82; --accent-strong:#0A6D65; --accent-tint:#D3F3EE; --accent-tint-line:#9FE1D6;

  --tag-laboral:#B8790A; --tag-laboral-bg:#FBEBD0; --tag-laboral-line:#F0CD8E;
  --tag-sso:#D8481F; --tag-sso-bg:#FBE1D6; --tag-sso-line:#F3B79B;
  --tag-ambiental:#189A56; --tag-ambiental-bg:#D6F5E3; --tag-ambiental-line:#9EE2BE;
  --tag-otro:#7139D6; --tag-otro-bg:#EBE2FA; --tag-otro-line:#CBB8F2;

  --ok:#189A56; --pending:#DE8A16; --danger:#D93D2B;

  --font-display:"Poppins","Segoe UI",system-ui,sans-serif;
  --font-body:"Poppins","Segoe UI",system-ui,sans-serif;
  --font-mono:"Poppins","Segoe UI",system-ui,sans-serif;

  --radius:10px; --radius-sm:8px;
  --shadow-card:0 1px 2px rgba(28,43,57,0.06), 0 4px 16px rgba(28,43,57,0.06);
  --shadow-modal:0 12px 40px rgba(28,43,57,0.25);
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;font-family:var(--font-body);background:var(--paper);color:var(--ink);line-height:1.55;font-size:15.5px;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
h1,h2{font-family:var(--font-display)}

header.top{
  background:var(--surface);
  color:var(--ink);padding:1rem 1.7rem;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);
}
header.top a.brand{display:flex;align-items:center;text-decoration:none}
header.top .brand-logo{height:30px;width:auto;display:block}
header.top nav{display:flex;align-items:center}
header.top nav a{margin-left:1.4rem;color:var(--accent);opacity:0.85;font-weight:600;text-decoration:none;font-size:0.9rem}
header.top nav a:hover{opacity:1}
header.top nav .nav-usuario{margin-left:1.4rem;color:var(--ink-soft);font-size:0.85rem}

/* --- campana de notificaciones (normas pendientes en la bandeja) --- */
header.top nav a.nav-bell{position:relative;display:inline-flex;align-items:center;gap:0.35rem}
header.top nav a.nav-bell .badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:1.35em;height:1.35em;padding:0 0.3em;
  background:var(--danger);color:#fff;border-radius:99px;font-size:0.72rem;font-weight:700;
  font-family:var(--font-mono);line-height:1;
}
header.top nav a.nav-matriz{display:inline-flex;align-items:center;gap:0.3rem}

main{max-width:1150px;margin:0 auto;padding:2rem 1.6rem 4.5rem}
h1{font-size:1.7rem;font-weight:600;margin:0 0 0.3rem;letter-spacing:-0.01em}
h2{font-size:1.15rem;font-weight:600;margin:1.7rem 0 0.6rem}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.5rem;margin-bottom:1.3rem;box-shadow:var(--shadow-card)}

table{width:100%;border-collapse:collapse;background:var(--surface);font-size:0.9rem}
th,td{text-align:left;padding:0.65rem 0.85rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{background:#FAFAF7;font-family:var(--font-mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft);font-weight:600}
tbody tr:hover{background:#FBFBF8}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);transition:opacity 0.15s}

tr.fila-clic{cursor:pointer}
tr.fila-clic:hover{background:var(--accent-tint)}

/* --- paginacion de la matriz --- */
.pagination-info{color:var(--ink-soft);font-size:0.85rem;margin:0.8rem 0 0}
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;padding:0.9rem 0 0;flex-wrap:wrap}
.pagination button{font-family:inherit;font-size:0.8rem;padding:0.4em 0.75em;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--ink)}
.pagination button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.pagination button:disabled{opacity:0.4;cursor:default}
.pagination button.actual{background:var(--accent);color:#fff;border-color:var(--accent)}
.pagination .elipsis{color:var(--ink-faint);padding:0 0.2em}
.tam-selector{display:flex;align-items:center;gap:0.5rem;font-size:0.85rem;color:var(--ink-soft);justify-content:center;margin-top:0.7rem}
.tam-selector select{width:auto;padding:0.3em 1.6em 0.3em 0.6em}

.fecha{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:0.85rem;white-space:nowrap;color:var(--ink-soft)}

.pill{display:inline-block;padding:0.2em 0.7em;border-radius:99px;font-size:0.72rem;font-weight:600;letter-spacing:0.01em;border:1px solid transparent;white-space:nowrap}
.pill-laboral{background:var(--tag-laboral-bg);color:var(--tag-laboral);border-color:var(--tag-laboral-line)}
.pill-sso{background:var(--tag-sso-bg);color:var(--tag-sso);border-color:var(--tag-sso-line)}
.pill-ambiental{background:var(--tag-ambiental-bg);color:var(--tag-ambiental);border-color:var(--tag-ambiental-line)}
.pill-otro{background:var(--tag-otro-bg);color:var(--tag-otro);border-color:var(--tag-otro-line)}
.pill-sin{background:var(--line-soft);color:var(--ink-faint);border-color:var(--line)}
.pill-categoria{background:var(--accent-tint);color:var(--accent-strong);border-color:var(--accent-tint-line)}
.pill-pendiente{background:#F6E9D2;color:var(--pending);border-color:#E8D2A3}
.pill-confirmado{background:var(--tag-ambiental-bg);color:var(--ok);border-color:var(--tag-ambiental-line)}
.pill-descartado{background:var(--line-soft);color:var(--ink-faint);border-color:var(--line)}
.pill-no-cumple{background:var(--tag-sso-bg);color:var(--tag-sso);border-color:var(--tag-sso-line)}
.pill-evaluar{background:var(--tag-otro-bg);color:var(--tag-otro);border-color:var(--tag-otro-line)}

.btn{display:inline-block;background:var(--accent);color:#fff;border:none;padding:0.6em 1.2em;border-radius:var(--radius-sm);font-size:0.9rem;font-weight:600;cursor:pointer;text-decoration:none;transition:background 0.15s,transform 0.05s}
.btn:hover{background:var(--accent-strong)}
.btn:active{transform:translateY(1px)}
.btn-secondary{background:var(--surface);color:var(--accent);border:1px solid var(--accent)}
.btn-secondary:hover{background:var(--accent-tint)}
.ia-btn{background:linear-gradient(135deg,var(--accent),#2E7A73)}
.ia-btn:hover{background:linear-gradient(135deg,var(--accent-strong),var(--accent))}
.btn-danger{background:var(--danger)}
.btn-danger:hover{background:#8F3A30}

form.stack label,.modal label,form label{display:block;font-size:0.82rem;color:var(--ink-soft);font-weight:600;margin:0.85rem 0 0.3rem}
form.stack input,form.stack select,form.stack textarea,
.modal input,.modal select,.modal textarea{
  width:100%;padding:0.55em 0.7em;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font-size:0.92rem;font-family:inherit;background:var(--surface);color:var(--ink);
  transition:border-color 0.15s,box-shadow 0.15s;
}
form.stack input:focus,form.stack select:focus,form.stack textarea:focus,
.modal input:focus,.modal select:focus,.modal textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint);
}
.muted{color:var(--ink-soft);font-size:0.88rem}

.stat-row{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:1.4rem;box-shadow:var(--shadow-card)}
.stat{background:var(--surface);padding:0.85rem 1.1rem;flex:1}
.stat .n{font-family:var(--font-mono);font-size:1.35rem;font-weight:600;display:block;color:var(--accent-strong);font-variant-numeric:tabular-nums}
.stat .l{font-size:0.74rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.05em}
.stat-row.secundario{margin-bottom:1.3rem}
.stat-row.secundario .stat .n{font-size:1.1rem}

.notice{border-left:3px solid var(--accent);background:var(--accent-tint);padding:0.75rem 1.05rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:0.9rem}
.notice.warn{border-left-color:var(--pending);background:var(--tag-laboral-bg)}
.empty{padding:2.5rem;text-align:center;color:var(--ink-soft)}

/* --- dashboard de cumplimiento --- */
.dashboard{display:flex;gap:1.8rem;align-items:center;flex-wrap:wrap;margin-bottom:1.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.6rem;box-shadow:var(--shadow-card)}
.gauge{--pct:0;width:126px;height:126px;border-radius:50%;flex:none;
  background:conic-gradient(var(--accent) calc(var(--pct)*1%), var(--line-soft) 0);
  display:flex;align-items:center;justify-content:center;position:relative;
  box-shadow:inset 0 0 0 1px var(--line);
}
.gauge::before{content:'';position:absolute;inset:12px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(28,43,57,0.08)}
.gauge .valor{position:relative;font-family:var(--font-mono);font-size:1.55rem;font-weight:600;line-height:1.1;text-align:center;color:var(--accent-strong)}
.gauge .valor small{display:block;font-size:0.62rem;font-weight:500;color:var(--ink-faint);text-transform:uppercase;letter-spacing:0.04em;font-family:var(--font-body);margin-top:0.2rem}
.dashboard-cards{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;flex:1;min-width:280px}
.dashboard-cards .stat{text-align:center}

/* --- badges de evidencia --- */
.evi-count{font-size:0.78rem;color:var(--ink-faint);font-family:var(--font-mono)}

/* --- modal de detalle --- */
.modal-overlay{position:fixed;inset:0;background:rgba(28,43,57,0.45);display:none;
  align-items:flex-start;justify-content:center;padding:3rem 1rem;overflow-y:auto;z-index:50;
  backdrop-filter:blur(2px);
}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border-radius:14px;max-width:760px;width:100%;padding:1.9rem 2.1rem 2.1rem;position:relative;box-shadow:var(--shadow-modal)}
.modal-cerrar{position:absolute;top:1rem;right:1.2rem;background:var(--line-soft);border:none;width:2rem;height:2rem;border-radius:50%;font-size:1.2rem;line-height:1;cursor:pointer;color:var(--ink-soft)}
.modal-cerrar:hover{background:var(--line);color:var(--ink)}
.modal h2{margin:0 0 0.25rem;font-size:1.3rem;padding-right:2.4rem;font-weight:600}
.modal .meta{margin:0 0 1.4rem;font-family:var(--font-mono);font-size:0.82rem}
.modal section{margin-bottom:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line-soft)}
.modal section:first-of-type{border-top:none;padding-top:0}
.modal section h3{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-faint);margin:0 0 0.6rem;font-weight:600}
.modal .fila-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.evidencia-item{display:flex;justify-content:space-between;align-items:center;gap:0.6rem;padding:0.55rem 0;border-bottom:1px solid var(--line-soft);font-size:0.87rem}
.evidencia-item:last-child{border-bottom:none}
.evidencia-item a{font-weight:600;text-decoration:none}
.evidencia-item a:hover{text-decoration:underline}
.progreso-ia{font-size:0.85rem;color:var(--ink-soft);margin:0.6rem 0 0}
.progreso-barra{height:6px;background:var(--line-soft);border-radius:99px;overflow:hidden;margin-top:0.45rem}
.progreso-barra .relleno{height:100%;background:var(--accent);width:0%;transition:width 0.2s}

/* --- correos de aviso por empresa --- */
.correos-lista{list-style:none;padding:0;margin:0 0 0.9rem}
.correos-lista li{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;padding:0.4rem 0;border-bottom:1px solid var(--line-soft);font-size:0.88rem}
.correos-lista li:last-child{border-bottom:none}
.correos-lista form{margin:0}
.correo-quitar{background:none;border:none;color:var(--ink-faint);font-size:1.1rem;line-height:1;cursor:pointer;padding:0.1rem 0.4rem;border-radius:4px}
.correo-quitar:hover{background:var(--tag-sso-bg);color:var(--tag-sso)}

/* ---------- Login ---------- */
/* El fondo (login-bg.jpg) es una foto clara/brumosa, no oscura - un overlay
   navy fuerte la aplanaba a un degrade gris sin detalle. Se deja casi sin
   overlay y el texto en tono oscuro (no blanco) para que se lea sobre ella. */
.login-body{
  display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0;
  background:#EEF2F6 url('../img/login-bg.jpg') center / cover no-repeat fixed;
  position:relative;
}
.login-body::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(160deg, rgba(28,43,57,0.12) 0%, rgba(28,43,57,0.02) 45%, rgba(28,43,57,0.12) 100%);
}
.login-wrap{position:relative;z-index:1;width:400px;max-width:calc(100vw - 40px);text-align:center}
.login-logo{width:100%;max-width:260px;margin:0 auto 6px;display:block;filter:drop-shadow(0 2px 8px rgba(28,43,57,0.18))}
.login-sub{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-strong);margin:0 0 28px;text-shadow:0 0 10px rgba(255,255,255,0.8),0 0 20px rgba(255,255,255,0.6)}
.login-form{
  background:rgba(255,255,255,0.92);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,0.5);border-radius:16px;
  box-shadow:0 20px 60px rgba(8,20,35,0.35), 0 2px 8px rgba(8,20,35,0.15);
  padding:32px;text-align:left;
}
.login-form .field{margin-bottom:16px}
.login-form label{margin:0 0 6px}
.login-form input{
  width:100%;padding:0.65em 0.85em;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font-size:0.95rem;font-family:inherit;background:var(--surface);color:var(--ink);
  transition:border-color 0.15s,box-shadow 0.15s;
  -webkit-appearance:none;appearance:none;
}
.login-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
.login-form input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--surface) inset;-webkit-text-fill-color:var(--ink)}
.login-btn{width:100%;margin-top:6px;padding:0.75em 1em;font-size:0.95rem}
.login-error{background:#FBE9E7;border:1px solid var(--danger);color:var(--danger);font-size:13px;padding:10px 12px;border-radius:8px;margin-bottom:16px}

/* ================================================================
   Responsive (telefono / pantallas angostas)
   ================================================================ */
@media (max-width: 760px){
  body{font-size:15px}

  header.top{flex-wrap:wrap;row-gap:0.6rem;padding:0.85rem 1rem}
  header.top a.brand{flex:1 1 auto}
  header.top .brand-logo{height:26px}
  header.top nav{flex-wrap:wrap;row-gap:0.5rem;width:100%;justify-content:flex-start}
  header.top nav a{margin-left:0;margin-right:1rem;font-size:0.84rem}
  header.top nav .nav-usuario{margin-left:0;width:100%;order:9;font-size:0.8rem}

  main{padding:1.2rem 1rem 3rem}
  h1{font-size:1.4rem}
  h2{font-size:1.05rem;margin-top:1.3rem}
  .card{padding:1.05rem 1.1rem}

  /* dashboard: el medidor circular y las tarjetas de resumen pasan a
     apilarse en vez de competir por el mismo ancho */
  .dashboard{flex-direction:column;align-items:stretch;padding:1.1rem 1.2rem;gap:1.1rem}
  .gauge{margin:0 auto}
  .dashboard-cards{min-width:0;flex-wrap:wrap;border-radius:var(--radius-sm)}
  .dashboard-cards .stat{flex:1 1 45%}

  /* filas de estadisticas (stat-row) y de agrupadores: de 1 fila apretada
     a una grilla de 2 columnas, texto legible */
  .stat-row{flex-wrap:wrap}
  .stat-row .stat{flex:1 1 45%}
  .stat .n{font-size:1.15rem}

  /* formularios de filtro con varios campos en linea (ej. empresa.php):
     cada campo pasa a ocupar todo el ancho para que sea tocable */
  form[method="get"].card{flex-direction:column;align-items:stretch !important}
  form[method="get"].card > div{width:100%;min-width:0 !important}
  form[method="get"].card select,
  form[method="get"].card input[type="text"]{width:100%}

  /* pestanas de la bandeja de revision */
  .bandeja-tabs{flex-wrap:wrap;row-gap:0.3rem}
  .bandeja-tabs a{padding:0.5rem 0.7rem;font-size:0.82rem}
  .revision-item .acciones{flex-wrap:wrap}
  .revision-item .acciones .btn,.revision-item .acciones .btn-secondary{flex:1 1 auto;text-align:center}

  /* tabla: sigue con scroll horizontal (table-wrap), pero mas compacta */
  table{font-size:0.82rem}
  th,td{padding:0.5rem 0.55rem}

  /* modal de detalle: ocupa casi toda la pantalla y las grillas de 2
     columnas pasan a 1, para que los campos no queden angostisimos */
  .modal-overlay{padding:0.8rem}
  .modal{padding:1.3rem 1.1rem 1.5rem;width:100%;max-width:100%;border-radius:12px}
  .modal h2{font-size:1.12rem;padding-right:2.2rem}
  .modal .fila-2{grid-template-columns:1fr;gap:0}

  .login-wrap{width:100%}
  .login-form{padding:24px 20px}
}

/* --- Obras / responsables (Hito 1 - roadmap "Obras y Cumplimiento") --- */
.obras-resumen{list-style:none;margin:0.9rem 0 0;padding:0;display:flex;flex-direction:column;gap:0.6rem}
.obras-resumen li{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.5rem;padding:0.55rem 0;border-top:1px solid var(--line-soft)}
.obras-resumen li:first-child{border-top:none;padding-top:0}
.obra-nombre{font-weight:600;font-size:0.92rem}
.obra-responsables{display:flex;flex-wrap:wrap;gap:0.4rem}

.obra-card{margin-bottom:1.3rem}
.obra-card-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.6rem;margin-bottom:0.9rem}
.obra-card-head h2{margin:0;font-size:1.05rem;display:flex;align-items:center;gap:0.5rem}
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.area-item{border:1px solid var(--line);border-radius:var(--radius-sm);padding:0.9rem 1rem;background:var(--paper)}
.area-item .area-titulo{display:block;margin-bottom:0.6rem}
.area-grid{align-items:start}
.area-item .resp-item{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:0.7rem 0.8rem;margin-bottom:0.7rem}
.area-item .resp-resumen{display:flex;flex-direction:column;gap:0.1rem;margin-bottom:0.4rem;word-break:break-word}
.area-item .resp-resumen .muted{font-size:0.8rem}
.area-item .resp-agregar summary{list-style:none}
.area-item .resp-agregar summary::-webkit-details-marker{display:none}
.area-item .area-acceso{margin-top:0.6rem;font-size:0.8rem;display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}

@media (max-width: 900px){
  .area-grid{grid-template-columns:1fr}
}

/* --- Hito 2: alcance, frecuencia, responsable y edicion masiva --- */
.alcance-opciones{display:flex;flex-wrap:wrap;gap:0.8rem 1.2rem;align-items:end;margin:0.7rem 0 0.2rem}
.alcance-opciones > div{min-width:170px}
.alcance-opciones label{display:block;margin-bottom:0.25rem;font-size:0.8rem}
.fieldset-alcance{border:1px solid var(--line);border-radius:var(--radius-sm);padding:0.8rem 1rem 1rem;margin:0.4rem 0 0.8rem;background:var(--paper)}
.fieldset-alcance legend{padding:0 0.4rem;font-family:var(--font-mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft)}
.fieldset-alcance[disabled]{opacity:0.75}
.obras-check{display:flex;flex-wrap:wrap;gap:0.4rem 1.1rem;margin:0.3rem 0 0.8rem}
.obras-check label{display:inline-flex;flex-direction:row;align-items:center;gap:0.4rem;font-size:0.9rem;margin:0;font-weight:400;width:auto}
.obras-check input[type=checkbox],.barra-masiva input[type=checkbox]{width:auto;margin:0;flex:0 0 auto}
.alcance-opciones select,.masivo-campos select,.masivo-campos input[type=text]{width:100%}
.celda-sel{width:2.2rem;padding-right:0;text-align:center}
.barra-masiva{border-color:var(--line)}
.masivo-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0.8rem 1rem}
.masivo-campos label{display:block;margin-bottom:0.25rem;font-size:0.8rem}
.btn-tiny{font-size:0.78rem;padding:0.3em 0.8em}

/* ---- Hito 3: periodos de cumplimiento ---- */
.pill-vencido{background:#FBE1DD;color:var(--danger);border-color:#F1B5AD}
.aviso-vencido{margin-top:0.25rem;font-size:0.75rem;font-weight:600;color:var(--danger);white-space:nowrap}
.periodo-mini{font-size:0.78rem;line-height:1.2;margin-top:0.15rem}
.seccion-periodos{margin-top:1.4rem}
.periodo-card{border:1px solid var(--line);border-left:4px solid var(--pending);border-radius:var(--radius-sm);padding:0.65rem 0.85rem;margin-bottom:0.55rem;background:var(--surface)}
.periodo-card.periodo-cumple{border-left-color:var(--ok)}
.periodo-card.periodo-vencido{border-left-color:var(--danger);background:#FEF6F5}
.periodo-cab{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap}
.periodo-info{font-size:0.82rem;margin-top:0.2rem}
.periodo-form{display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;margin-top:0.5rem}
.periodo-form input[type=text]{flex:1 1 200px;width:auto;min-width:160px;padding:0.35rem 0.6rem;font-size:0.85rem}
#periodos-historial-det summary{cursor:pointer;font-weight:600;font-size:0.9rem;color:var(--ink-soft)}
.periodo-hist{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;padding:0.4rem 0;border-bottom:1px solid var(--line-soft);font-size:0.86rem}
.periodo-hist:last-child{border-bottom:none}
.periodo-hist > span:first-child{min-width:9.5rem;font-weight:600}
#evi-periodo{min-width:15rem}

/* ---- Vista publica de solo lectura (ver.php) y panel del QR (empresa.php, admin) ---- */
.banner-lectura{margin-top:0.2rem}
.ficha-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.8rem 1.4rem}
.ficha-grid .ficha-item.ancho{grid-column:1 / -1}
.ficha-item .k{font-size:0.78rem;color:var(--ink-soft);font-weight:600;margin-bottom:0.15rem}
.ficha-item .v{font-size:0.92rem;word-break:break-word}
.texto-largo{white-space:pre-wrap;margin:0}
.qr-panel{display:flex;gap:1.6rem;align-items:flex-start;flex-wrap:wrap}
.qr-canvas-wrap{border:1px solid var(--line);border-radius:var(--radius-sm);padding:0.4rem;background:#fff;line-height:0}
.qr-canvas-wrap canvas{width:220px;height:220px}
.qr-datos{flex:1;min-width:260px}
.qr-botones{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;margin-top:0.7rem}
.qr-botones form{margin:0}
@media(max-width:760px){.ficha-grid{grid-template-columns:1fr}}
.qr-datos input[type=text]{width:100%}

/* --- Dashboard (Hito 4) --- */
.dash-hero{display:flex;gap:2rem;align-items:center;flex-wrap:wrap}
.dash-hero-pct{flex:1 1 300px;min-width:260px}
.dash-pct-num{font-family:var(--font-mono);font-size:3.2rem;font-weight:600;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.dash-pct-num small{font-size:1.6rem;color:var(--ink-soft);margin-left:0.1em}
.dash-pct-lab{font-size:0.78rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-soft);margin:0.3rem 0 0.7rem}
.dash-bar{display:flex;gap:2px;height:12px;border-radius:6px;overflow:hidden;background:var(--line-soft)}
.dash-bar-vacia{background:var(--line-soft)}
.dash-bar .seg{display:block;min-width:3px}
.seg-ok{background:var(--ok)}
.seg-pen{background:var(--pending)}
.dash-leyenda{display:flex;gap:1rem;flex-wrap:wrap;font-size:0.78rem;color:var(--ink-soft);margin-top:0.6rem}
.dash-leyenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:0.3rem;vertical-align:-1px}
.dash-venc{color:var(--danger);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.dash-tiles{flex:2 1 420px;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0.8rem}
.dash-tile{border:1px solid var(--line);border-radius:var(--radius-sm);padding:0.75rem 0.9rem;background:var(--paper)}
.dash-tile .n{display:block;font-family:var(--font-mono);font-size:1.6rem;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.dash-tile .l{display:block;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-soft);margin-top:0.25rem}
.dash-t-ok{color:var(--ok)}.dash-t-pen{color:var(--pending)}.dash-t-venc{color:var(--danger)}
.dash-fuera{margin:-0.4rem 0 0.4rem;font-size:0.85rem}
.dash-card-tabla{padding:0.6rem 0.9rem}
.dash-tabla{width:100%;border-collapse:collapse}
.dash-tabla th,.dash-tabla td{padding:0.55rem 0.5rem;vertical-align:middle}
.dash-tabla th.num,.dash-tabla td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dash-col-barra{min-width:150px;width:26%}
.dash-sub{font-size:0.76rem}
.dash-sin-resp td{background:#FFF6E8}
.dash-dos{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.dash-card-lista{display:flex;flex-direction:column;gap:0.9rem}
.dash-fila-cab{display:flex;justify-content:space-between;align-items:center;gap:0.6rem;margin-bottom:0.35rem;flex-wrap:wrap}
.dash-fila-num{font-size:0.82rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.dash-dias{display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;margin-bottom:0.7rem}
.dash-metodo summary{cursor:pointer}
.dash-metodo p{font-size:0.88rem;color:var(--ink-soft);margin:0.6rem 0 0}
@media (max-width:760px){
  .dash-dos{grid-template-columns:1fr}
  .dash-pct-num{font-size:2.6rem}
  .dash-col-area{display:none}
  .dash-col-barra{min-width:100px}
}

/* ---- Informe PDF del dashboard (Hito 6) ---- */
.dash-informe{padding:14px 18px;margin:14px 0}
.dash-informe-form{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end}
.dash-informe-tit{flex:1 1 100%;display:flex;flex-direction:column;gap:2px}
.dash-informe-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--ink-soft)}
.dash-informe-form select{min-width:170px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-weight:400;background:var(--surface);color:var(--ink)}
@media (max-width:640px){.dash-informe-form label,.dash-informe-form select,.dash-informe-form .btn{width:100%}}