:root{
  --fondo:#f4f6f9; --papel:#fff; --tinta:#16232e; --tinta-suave:#5b6b7a;
  --linea:#dbe2ea; --azul:#0f5e8c; --azul-claro:#e6f0f7; --verde:#177245;
  --ambar:#b06f00; --rojo:#b3261e; --sombra:0 1px 2px rgba(16,35,50,.06),0 4px 14px rgba(16,35,50,.06);
  --radio:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--fondo); color:var(--tinta);
}
h1,h2,h3{margin:0 0 .5rem; line-height:1.25}
h1{font-size:1.4rem} h2{font-size:1.15rem} h3{font-size:1rem}
a{color:var(--azul)}
button{font:inherit; cursor:pointer}

/* ---------- Login ---------- */
.pantalla-login{display:grid; place-items:center; min-height:100svh; padding:1.5rem}
.tarjeta-login{
  background:var(--papel); border:1px solid var(--linea); border-radius:14px;
  box-shadow:var(--sombra); padding:2rem; width:min(400px,100%);
}
.tarjeta-login .sub{color:var(--tinta-suave); margin:.25rem 0 1.5rem; font-size:.9rem}
.tarjeta-login label{display:block; margin-bottom:1rem; font-size:.86rem; color:var(--tinta-suave)}
.tarjeta-login input{
  width:100%; margin-top:.3rem; padding:.6rem .7rem; font:inherit; color:var(--tinta);
  border:1px solid var(--linea); border-radius:8px; background:#fbfcfd;
}
.tarjeta-login input:focus{outline:2px solid var(--azul); outline-offset:1px}
.tarjeta-login button{
  width:100%; padding:.7rem; background:var(--azul); color:#fff; border:0; border-radius:8px; font-weight:600;
}
.aviso-error{background:#fdecea; color:var(--rojo); padding:.6rem .8rem; border-radius:8px; font-size:.88rem}

/* ---------- Barra ---------- */
.barra{
  display:flex; align-items:center; gap:1.2rem; padding:.6rem 1.2rem;
  background:var(--papel); border-bottom:1px solid var(--linea); position:sticky; top:0; z-index:20;
}
.marca{font-weight:700; letter-spacing:-.01em; cursor:pointer; white-space:nowrap}
.marca span{color:var(--azul)}
.barra nav{display:flex; gap:.2rem; flex:1; flex-wrap:wrap}
.barra nav button{
  background:transparent; border:0; padding:.45rem .8rem; border-radius:8px; color:var(--tinta-suave);
}
.barra nav button:hover{background:var(--azul-claro); color:var(--azul)}
.barra nav button.activo{background:var(--azul-claro); color:var(--azul); font-weight:600}
.usuario{display:flex; align-items:center; gap:.8rem; font-size:.85rem; color:var(--tinta-suave)}

main{padding:1.2rem; max-width:1400px; margin:0 auto}

/* ---------- Tarjetas y utilidades ---------- */
.tarjeta{background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra); padding:1.1rem; margin-bottom:1rem}
.rejilla{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.dato{font-size:1.9rem; font-weight:700; letter-spacing:-.02em}
.etiqueta{font-size:.8rem; color:var(--tinta-suave); text-transform:uppercase; letter-spacing:.04em}
.barra-progreso{height:10px; background:var(--azul-claro); border-radius:99px; overflow:hidden; margin:.6rem 0}
.barra-progreso i{display:block; height:100%; background:var(--azul)}
.acciones{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.8rem}
.btn{background:var(--azul); color:#fff; border:0; padding:.55rem 1rem; border-radius:8px; font-weight:600}
.btn.sec{background:var(--papel); color:var(--azul); border:1px solid var(--linea)}
.btn.peligro{background:var(--papel); color:var(--rojo); border:1px solid #f0c5c2}
.btn:disabled{opacity:.5; cursor:not-allowed}
.nota{color:var(--tinta-suave); font-size:.85rem}
.aviso{background:#fff7e6; border:1px solid #f0d9a8; color:#7a4b00; padding:.6rem .8rem; border-radius:8px; font-size:.86rem; margin:.6rem 0}
select,input[type=text],textarea{font:inherit; color:var(--tinta); border:1px solid var(--linea); border-radius:8px; padding:.45rem .6rem; background:#fbfcfd}
textarea{width:100%; resize:vertical}

/* ---------- Tablas ---------- */
/* El envoltorio es el que hace scroll (en los dos ejes), así que la cabecera
   se fija respecto a ÉL: con top:52px quedaba flotando y tapaba la fila 1. */
.tabla-envoltorio{overflow:auto; max-height:calc(100svh - 230px)}
/* sin relleno arriba: si no, las filas se ven pasar por encima de la cabecera */
.tarjeta.tabla-envoltorio{padding:0}
.tabla-envoltorio th:first-child,.tabla-envoltorio td:first-child{padding-left:1.1rem}
.tabla-envoltorio th:last-child,.tabla-envoltorio td:last-child{padding-right:1.1rem}
.tabla-envoltorio tbody tr:last-child td{border-bottom:0}
table{border-collapse:collapse; width:100%; font-size:.9rem}
th,td{text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--linea)}
th{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:var(--tinta-suave);
  font-weight:600; position:sticky; top:0; z-index:2; background:var(--papel);
  box-shadow:inset 0 -1px 0 var(--linea);
}
tbody tr:hover{background:#f8fafc; cursor:pointer}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
.estado{display:inline-block; padding:.1rem .5rem; border-radius:99px; font-size:.75rem; font-weight:600}
.estado.pendiente{background:#eef1f4; color:var(--tinta-suave)}
.estado.parcial{background:#fff3d6; color:var(--ambar)}
.estado.completa{background:#e3f3e9; color:var(--verde)}
.estado.conflicto{background:#fdecea; color:var(--rojo)}

/* ---------- Pantalla de valoración ---------- */
.cabecera-valoracion{display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; margin-bottom:.6rem}
.cabecera-valoracion .pos{font-variant-numeric:tabular-nums; color:var(--tinta-suave); font-size:.86rem}
.valoracion{display:grid; grid-template-columns:1fr 460px; gap:1rem; align-items:start}
.ficha{background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra); padding:1.1rem; max-height:calc(100svh - 190px); overflow-y:auto}
.campo{padding:.7rem 0; border-bottom:1px dashed var(--linea)}
.campo:last-child{border-bottom:0}
.campo h3{color:var(--tinta-suave); font-size:.82rem; text-transform:uppercase; letter-spacing:.03em}
.campo p{margin:.35rem 0; white-space:pre-wrap}
.campo.resaltado{background:#fffdf3; border-left:3px solid var(--ambar); padding-left:.7rem; margin-left:-.7rem; border-radius:4px}
.campo.resaltado h3::after{content:" ★"; color:var(--ambar)}
.campo.vacio p{color:var(--tinta-suave); font-style:italic}

.rubrica{position:sticky; top:64px; background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra); padding:1.1rem; max-height:calc(100svh - 190px); overflow-y:auto}
.criterio{border:1px solid transparent; border-radius:10px; padding:.6rem; margin-bottom:.5rem}
.criterio.foco{border-color:var(--azul); background:#fafcfe}
.criterio header{display:flex; justify-content:space-between; gap:.5rem; align-items:baseline}
.criterio h3{font-size:.92rem; margin:0}
.criterio .peso{color:var(--tinta-suave); font-size:.8rem; white-space:nowrap}
.niveles{display:flex; gap:.3rem; margin:.5rem 0 .3rem; flex-wrap:wrap}
.niveles button{
  width:2.1rem; height:2.1rem; border-radius:8px; border:1px solid var(--linea);
  background:var(--papel); color:var(--tinta); font-weight:600;
}
.niveles button[aria-pressed=true]{background:var(--azul); color:#fff; border-color:var(--azul)}
.niveles .puntos{margin-left:auto; align-self:center; font-weight:700; font-variant-numeric:tabular-nums}
.descriptor{font-size:.82rem; color:var(--tinta-suave); min-height:1.1rem}
.criterio textarea{margin-top:.4rem; font-size:.86rem}
.criterio .aviso{margin:.4rem 0 0; font-size:.8rem}
/* Propuesta de la IA dentro de cada criterio */
.ia{background:#f5f8fb; border:1px solid #d8e6f0; border-left:3px solid var(--azul); border-radius:8px; padding:.55rem .65rem; margin:.5rem 0}
.ia.ia-ok{background:#f2faf5; border-color:#c3e5d1; border-left-color:var(--verde)}
.ia-cab{display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-size:.85rem; flex-wrap:wrap}
.ia-cab strong{font-variant-numeric:tabular-nums}
.ia-btn{padding:.25rem .7rem; font-size:.82rem}
.ia-just{margin:.4rem 0 0; font-size:.85rem; line-height:1.45}
.ia-ev{margin-top:.4rem; font-size:.82rem}
.ia-ev summary{cursor:pointer; color:var(--azul)}
.ia-ev ul{margin:.35rem 0 0; padding-left:1.1rem; color:var(--tinta-suave)}
.ia-ev li{margin:.25rem 0}

.total{display:flex; justify-content:space-between; align-items:baseline; border-top:2px solid var(--linea); margin-top:.8rem; padding-top:.7rem; font-weight:700}
.total .cifra{font-size:1.5rem; font-variant-numeric:tabular-nums}

.guardado{position:fixed; right:1rem; bottom:1rem; background:var(--tinta); color:#fff; padding:.45rem .8rem; border-radius:99px; font-size:.82rem; z-index:50; box-shadow:var(--sombra)}
.guardado.error{background:var(--rojo)}
.guardado.ok{background:var(--verde)}

dialog{border:0; border-radius:14px; box-shadow:0 10px 40px rgba(16,35,50,.25); padding:1.4rem; max-width:460px}
dialog::backdrop{background:rgba(16,35,50,.45)}
dialog ul{padding-left:1.1rem; margin:.5rem 0 1rem}
dialog li{margin:.3rem 0; font-size:.9rem}
kbd{background:#eef1f4; border:1px solid var(--linea); border-bottom-width:2px; border-radius:5px; padding:0 .3rem; font-size:.82em}

.histograma{display:flex; align-items:flex-end; gap:3px; height:90px; margin-top:.6rem}
.histograma div{flex:1; background:var(--azul-claro); border-radius:3px 3px 0 0; position:relative}
.histograma div span{position:absolute; bottom:-1.2rem; left:0; right:0; text-align:center; font-size:.68rem; color:var(--tinta-suave)}

@media (max-width:900px){
  .valoracion{grid-template-columns:1fr}
  .rubrica,.ficha{position:static; max-height:none}
  .pestanas{display:flex; gap:.3rem; margin-bottom:.6rem}
  .pestanas button{flex:1; padding:.5rem; border:1px solid var(--linea); background:var(--papel); border-radius:8px}
  .pestanas button.activo{background:var(--azul); color:#fff; border-color:var(--azul)}
  .oculto-movil{display:none}
  th{top:0}
}

/* ============ Lavado de cara: cabeceras, selector y ranking ============ */

.portada{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin:.2rem 0 1.1rem;
}
.portada h1{font-size:1.55rem; letter-spacing:-.02em; margin:0}
.sobretitulo{
  margin:0 0 .15rem; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--tinta-suave); font-weight:600;
}

/* Conmutador de modalidad */
.segmentado{display:inline-flex; background:#e9eef3; border-radius:10px; padding:3px; gap:2px}
.segmentado button{
  border:0; background:transparent; color:var(--tinta-suave); font-weight:600;
  padding:.45rem .9rem; border-radius:8px; display:flex; align-items:center; gap:.4rem;
  transition:background .12s ease, color .12s ease;
}
.segmentado button small{
  font-size:.72rem; font-weight:700; background:#dbe3ea; color:var(--tinta-suave);
  padding:.05rem .35rem; border-radius:99px;
}
.segmentado button[aria-selected="true"]{background:var(--papel); color:var(--azul); box-shadow:var(--sombra)}
.segmentado button[aria-selected="true"] small{background:var(--azul-claro); color:var(--azul)}
.segmentado button:disabled{opacity:.45; cursor:not-allowed}
.segmentado.pequeno button{padding:.35rem .7rem; font-size:.88rem}

/* Métricas del panel */
.tarjeta.metrica .dato{font-size:2.1rem; line-height:1.1}
.tarjeta.metrica .de{font-size:1rem; font-weight:600; color:var(--tinta-suave)}
.barra-progreso i.ia{background:linear-gradient(90deg,var(--azul),#5aa9d6)}

.cab-tarjeta{display:flex; align-items:baseline; justify-content:space-between; gap:1rem}
.enlace{background:none; border:0; color:var(--azul); font-weight:600; font-size:.86rem; padding:0}
.enlace:hover{text-decoration:underline}

/* Podio del panel */
.podio{list-style:none; margin:.8rem 0 0; padding:0}
.podio li{
  display:flex; align-items:center; gap:.7rem; padding:.55rem .2rem;
  border-bottom:1px solid var(--linea); cursor:pointer;
}
.podio li:last-child{border-bottom:0}
.podio li:hover{background:#f8fafc}
.podio .puesto{
  width:1.6rem; height:1.6rem; flex:none; display:grid; place-items:center;
  background:var(--azul-claro); color:var(--azul); border-radius:50%;
  font-size:.8rem; font-weight:700;
}
.podio li:first-child .puesto{background:var(--azul); color:#fff}
.podio .titulo{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.podio .puntos{font-weight:700; font-variant-numeric:tabular-nums; min-width:2.2rem; text-align:right}

/* Distintivos de procedencia de la nota */
.chip{
  display:inline-block; padding:.1rem .5rem; border-radius:99px;
  font-size:.72rem; font-weight:700; letter-spacing:.02em; white-space:nowrap;
}
.chip.ia{background:var(--azul-claro); color:var(--azul)}
.chip.confirmada{background:#e3f3e9; color:var(--verde)}
.chip.sin_datos{background:#eef1f4; color:var(--tinta-suave)}
.chip.empate{background:#fff3d6; color:var(--ambar)}

.filtros{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap}
.filtros input{flex:1; min-width:200px}

.resumen-rank{display:flex; gap:1.4rem; flex-wrap:wrap; margin:.8rem 0 .2rem; font-size:.88rem; color:var(--tinta-suave)}
.resumen-rank strong{color:var(--tinta); font-variant-numeric:tabular-nums}

td.ia-col{color:var(--tinta-suave); font-variant-numeric:tabular-nums}
tr.fila-confirmada td:last-child strong{color:var(--verde)}

@media (max-width:700px){
  .portada{align-items:flex-start}
  .portada h1{font-size:1.25rem}
  .segmentado{width:100%}
  .segmentado button{flex:1; justify-content:center}
}