/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Arial,sans-serif;font-size:14px;background:#f0f4f8;color:#1a1a2e;min-height:100vh}
a{color:#0058A3;text-decoration:none}
details summary{list-style:none}
details summary::-webkit-details-marker{display:none}

/* ── Variables ── */
:root{
  --azul:#003B6F;--azul-mid:#0058A3;--azul-light:#E6F1FB;
  --naranja:#E87722;--naranja-l:#FAEEDA;
  --verde:#0F6E56;--verde-l:#EAF3DE;
  --rojo:#A32D2D;--rojo-l:#FCEBEB;
  --amarillo-l:#FFFBEA;
  --gris:#6b7280;--borde:#d1d5db;--card:#ffffff;--radius:10px
}

/* ── Layout ── */
.wrap{max-width:940px;margin:0 auto;padding:20px 16px}

/* ── Header ── */
.header{background:var(--azul);color:#fff;padding:14px 22px;border-radius:var(--radius);margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.header h1{font-size:17px;font-weight:700}
.header-sub{font-size:11px;opacity:.72;margin-bottom:2px}
.header-badge{background:var(--naranja);color:#fff;font-size:11px;padding:3px 12px;border-radius:20px;white-space:nowrap;font-weight:700}

/* ── Nav ── */
.nav-tabs{display:flex;gap:3px;margin-bottom:16px;background:#fff;padding:5px;border-radius:var(--radius);border:1px solid var(--borde);flex-wrap:wrap}
.nav-tabs a{flex:1;min-width:70px;text-align:center;padding:6px 6px;border-radius:7px;font-size:11px;font-weight:600;color:var(--gris);transition:background .15s,color .15s;white-space:nowrap}
.nav-tabs a:hover{background:var(--azul-light);color:var(--azul-mid)}
.nav-tabs a.active{background:var(--azul);color:#fff}

/* ── Card ── */
.card{background:var(--card);border:1px solid var(--borde);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.card-title{font-size:14px;font-weight:700;color:var(--azul);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--borde);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.badge{font-size:11px;padding:2px 10px;border-radius:20px;font-weight:600;background:var(--azul-light);color:var(--azul-mid)}

/* ── Grids ── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.grid1{margin-bottom:12px}

/* ── Campos ── */
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:0}
.field label{font-size:12px;color:var(--gris);font-weight:600}
.field input,.field select,.field textarea{
  padding:8px 10px;border:1px solid var(--borde);border-radius:7px;
  font-size:13px;font-family:inherit;background:#fff;color:#1a1a2e;width:100%;transition:border .15s}
.field input[type="date"]{cursor:pointer}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--azul-mid)}
.field textarea{resize:vertical;min-height:56px}

/* ── Criterio ── */
.criterio{padding:12px 0;border-bottom:1px solid var(--borde)}
.criterio:last-child{border-bottom:none;padding-bottom:0}
.criterio-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:4px}
.criterio-name{font-weight:600;font-size:13px}
.criterio-peso{font-size:11px;color:var(--gris);white-space:nowrap}
.criterio-desc{font-size:12px;color:var(--gris);margin-bottom:8px;line-height:1.5}

/* ── Estrellas ── */
.stars{display:flex;gap:5px;flex-direction:row-reverse;justify-content:flex-end;margin-bottom:8px}
.stars input[type=radio]{display:none}
.stars label{
  width:34px;height:34px;border-radius:7px;border:1px solid var(--borde);
  background:#f9fafb;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;cursor:pointer;color:var(--gris);transition:background .1s,border .1s,color .1s}
.stars input[type=radio]:checked ~ label,
.stars label:hover,.stars label:hover ~ label{background:var(--naranja);border-color:var(--naranja);color:#fff}

/* ── Progress ── */
.progress-bar{height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden;margin:8px 0 3px}
.progress-fill{height:100%;background:var(--naranja);border-radius:3px;transition:width .3s}
.progress-label{display:flex;justify-content:space-between;font-size:11px;color:var(--gris)}

/* ── Info box ── */
.info-box{background:var(--azul-light);border:1px solid #B5D4F4;border-radius:8px;padding:12px 14px;margin-bottom:14px;font-size:12px;color:#0C447C;line-height:1.7}
.info-box strong{font-weight:700;display:block;margin-bottom:3px;font-size:13px}

/* ── Botones ── */
.btn{display:inline-block;padding:8px 16px;border-radius:7px;border:none;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;text-align:center;transition:opacity .15s}
.btn:hover{opacity:.85}
.btn-primary  {background:var(--azul);color:#fff}
.btn-secondary{background:#f3f4f6;color:#374151;border:1px solid var(--borde)}
.btn-success  {background:var(--verde);color:#fff}
.btn-danger   {background:var(--rojo);color:#fff}
.btn-sm{padding:4px 10px;font-size:12px}
.btn-block{width:100%;margin-top:8px;display:block}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}

/* ── Tabla ── */
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:var(--azul);color:#fff;padding:8px 10px;text-align:left;font-size:12px;font-weight:600}
td{padding:8px 10px;border-bottom:1px solid var(--borde);vertical-align:middle}
tr:hover td{background:#fafbff}

/* ── Pills ── */
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.pill-verde  {background:var(--verde-l);color:var(--verde)}
.pill-naranja{background:var(--naranja-l);color:#854F0B}
.pill-rojo   {background:var(--rojo-l);color:var(--rojo)}
.pill-gris   {background:#f3f4f6;color:var(--gris)}
.pill-azul   {background:var(--azul-light);color:var(--azul-mid)}

/* ── Resultado ── */
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.metric{background:#f9fafb;border:1px solid var(--borde);border-radius:8px;padding:12px;text-align:center}
.metric-label{font-size:11px;color:var(--gris);margin-bottom:4px}
.metric-val{font-size:24px;font-weight:700;color:var(--azul)}
.metric-sub{font-size:10px;color:var(--gris)}
.nota-big{font-size:48px;font-weight:800;color:var(--azul);line-height:1}

.concepto-card{border-radius:8px;border:1px solid;padding:12px 16px;display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.concepto-card.apto   {background:var(--verde-l);border-color:var(--verde)}
.concepto-card.cond   {background:var(--naranja-l);border-color:var(--naranja)}
.concepto-card.espera {background:var(--amarillo-l);border-color:#d97706}
.concepto-card.no-apto{background:var(--rojo-l);border-color:var(--rojo)}
.concepto-icon{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;font-weight:700;color:#fff}
.apto    .concepto-icon{background:var(--verde)}
.cond    .concepto-icon{background:var(--naranja)}
.espera  .concepto-icon{background:#d97706}
.no-apto .concepto-icon{background:var(--rojo)}
.concepto-titulo{font-weight:700;font-size:14px;margin-bottom:2px}
.concepto-texto{font-size:12px;line-height:1.5}

/* ── Alerts ── */
.alert{padding:10px 14px;border-radius:7px;margin-bottom:12px;font-size:13px;font-weight:500}
.alert-ok {background:var(--verde-l);color:var(--verde);border:1px solid var(--verde)}
.alert-err{background:var(--rojo-l);color:var(--rojo);border:1px solid var(--rojo)}

/* ── Radar ── */
.radar-wrap{display:flex;justify-content:center;padding:8px 0}

/* ── Login ── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{width:100%;max-width:400px}
.login-header{background:var(--azul);color:#fff;padding:24px;border-radius:var(--radius) var(--radius) 0 0;text-align:center}
.login-header h1{font-size:20px;font-weight:700;margin-bottom:4px}
.login-header p{font-size:12px;opacity:.75}
.login-body{background:#fff;padding:24px;border:1px solid var(--borde);border-top:none;border-radius:0 0 var(--radius) var(--radius)}
.login-badge{display:inline-block;background:var(--naranja);color:#fff;font-size:11px;padding:3px 12px;border-radius:20px;font-weight:700;margin-bottom:12px}

/* ── Responsive ── */
@media(max-width:640px){
  .grid2,.grid3,.result-grid,.btn-row{grid-template-columns:1fr}
  .nav-tabs a{font-size:10px;padding:6px 2px;min-width:60px}
  .header h1{font-size:14px}
}

/* ── Admin dropdown ── */
.nav-admin-wrap{position:relative}
.nav-admin-btn{padding:7px 12px;border-radius:7px;border:none;background:var(--azul-light);
  color:var(--azul);font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap}
.nav-admin-btn.active,.nav-admin-btn:hover{background:var(--azul);color:#fff}
.nav-admin-dd{display:none;position:absolute;top:calc(100% + 4px);right:0;
  background:#fff;border:1px solid var(--borde);border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);z-index:100;min-width:160px;padding:4px}
.nav-admin-dd.show{display:block}
.nav-admin-dd a{display:block;padding:8px 14px;font-size:12px;font-weight:600;
  color:var(--gris);border-radius:6px;transition:background .1s}
.nav-admin-dd a:hover,.nav-admin-dd a.active{background:var(--azul);color:#fff}