/* ===== VARIABLES: colores y sombra usados en todo el sitio (se cambian acá una sola vez) ===== */
:root{
  --blue-950:#082f6b;
  --blue-900:#0b3f8f;
  --blue-800:#0d4fa8;
  --blue-100:#eaf2fb;
  --blue-050:#f5f9fe;
  --green-500:#78e7ad;
  --green-600:#42c982;
  --green-700:#19965a;
  --ink:#152238;
  --muted:#6a778d;
  --line:#d8e2ef;
  --surface:#ffffff;
  --danger:#c13b3b;
  --warning:#a86b00;
  --shadow:0 12px 30px rgba(22,50,88,.08);
}
/* ===== BASE: reglas generales de la página ===== */
*{box-sizing:border-box}
html{min-height:100%;background:var(--blue-050)}
body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif;background:var(--blue-050);color:var(--ink)}
a{color:inherit}
svg{display:block;fill:currentColor}
/* ===== ESTRUCTURA: menú lateral (.sidebar) y área principal (.app-main) ===== */
.app-shell{min-height:100vh;display:grid;grid-template-columns:250px minmax(0,1fr)}
.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:#eef5fc;border-right:1px solid #cad8e8;padding:18px 16px;display:flex;flex-direction:column;z-index:30}
.sidebar-brand{display:flex;align-items:center;gap:12px;text-decoration:none;padding:4px 4px 16px;color:var(--blue-950)}
.brand-copy{min-width:0;line-height:1.13}
.brand-copy strong{display:block;font-size:14px;letter-spacing:-.2px}
.brand-copy small{display:block;font-size:11px;color:#5f728d;margin-top:3px}
.recycle-logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,var(--blue-900),var(--blue-800));color:white;display:grid;place-items:center;box-shadow:0 8px 18px rgba(11,63,143,.2);flex:0 0 auto}
.recycle-logo svg{width:26px;height:26px}
.recycle-logo.big{width:82px;height:82px;border-radius:22px;margin:0 auto 22px;background:white;color:var(--blue-900);box-shadow:0 12px 30px rgba(1,28,65,.18)}
.recycle-logo.big svg{width:52px;height:52px}
.sidebar-action{width:100%;text-align:center;margin-bottom:18px}
.side-nav{display:grid;gap:5px}
.side-nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:8px;text-decoration:none;color:#34465e;font-size:14px;font-weight:650;transition:.18s ease}
.side-nav a svg{width:18px;height:18px;color:#526780}
.side-nav a:hover{background:#dfeafa;color:var(--blue-900)}
.side-nav a.active{background:var(--green-500);color:#0b5634}
.side-nav a.active svg{color:#0b5634}
.sidebar-bottom{margin-top:auto;padding-top:16px;border-top:1px solid #d1deeb;display:grid;gap:10px}
.sidebar-bottom a{display:flex;align-items:center;gap:10px;padding:10px;text-decoration:none;color:#40536c;font-size:13px}
.sidebar-bottom a svg{width:18px;height:18px}
.prototype-chip{display:inline-flex;justify-content:center;align-items:center;width:max-content;padding:5px 10px;border-radius:999px;background:white;border:1px solid var(--line);font-size:11px;font-weight:800;color:var(--blue-900)}
.app-main{grid-column:2;min-width:0;min-height:100vh;display:flex;flex-direction:column}
/* ===== BARRA SUPERIOR y contenedor de cada pantalla ===== */
.workspace-bar{height:62px;background:#f8fbff;border-bottom:1px solid #d6e0ec;display:flex;align-items:center;padding:0 26px;gap:16px;position:sticky;top:0;z-index:20}
.workspace-search{margin-left:auto;width:min(310px,34vw);height:36px;border:1px solid #ccd9e8;background:#eef5fc;border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 12px;color:#758399;font-size:13px}
.workspace-search svg{width:16px;height:16px}
.workspace-user{display:flex;align-items:center;gap:10px;color:#42536a;font-size:13px}
.workspace-user b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--blue-800);color:white;font-size:12px}
.menu-toggle{display:none;border:0;background:transparent;font-size:22px;color:var(--blue-900);cursor:pointer}
.container{width:100%;max-width:1320px;margin:0 auto;padding:28px 30px 42px}
.page-title{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px}
.page-title h1{font-size:31px;line-height:1.1;letter-spacing:-.8px;margin:0 0 7px;color:#14233a}
.page-title p{margin:0;color:var(--muted);font-size:14px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:800;color:var(--blue-800)}
/* ===== INSIGNIAS, TARJETAS (.card) y cuadros de estadísticas (.stats) ===== */
.badge,.status{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:999px;background:#dff6e9;color:#147146;font-size:11px;font-weight:800;white-space:nowrap}
.badge.light{background:rgba(255,255,255,.9);color:var(--blue-900)}
.grid{display:grid;gap:18px}
.stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:22px}
.stats article,.card,.rank-card{background:var(--surface);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow)}
.stats article{padding:20px;position:relative;overflow:hidden}
.stats article:after{content:"";position:absolute;right:-18px;top:-18px;width:76px;height:76px;border-radius:50%;background:var(--blue-100)}
.stats article:nth-child(3):after{background:#d9f8e7}
.stats span{display:block;color:#63738a;font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:750}
.stats strong{display:block;font-size:29px;margin-top:13px;color:var(--blue-900);position:relative;z-index:1}
.stats article:nth-child(3) strong{color:var(--green-700)}
.two{grid-template-columns:1fr 1fr}.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{padding:20px;margin-bottom:20px}
.card h2{margin:0 0 16px;font-size:18px;color:#1c2c43}
.card h3{color:#1c2c43}
/* ===== BOTONES ===== */
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:39px;border:1px solid #b8c9dd;background:#fff;color:var(--blue-900);padding:9px 15px;border-radius:6px;text-decoration:none;cursor:pointer;font-weight:750;font-size:13px;transition:.15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(14,62,129,.12)}
.btn.primary{background:var(--blue-900);color:#fff;border-color:var(--blue-900)}
.btn.danger{background:#fff;color:var(--danger);border-color:#e8bcbc}
.full{width:100%;margin-top:18px}
.podium{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid #edf1f6;font-size:14px}
.podium:last-child{border-bottom:0}
.podium span{color:var(--green-700);font-weight:800}
/* ===== FORMULARIOS y campos ===== */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.form-grid label,.login-card label{font-size:12px;font-weight:750;color:#34445a}
.form-grid .wide{grid-column:1/-1}
input,select,textarea{width:100%;margin-top:6px;padding:11px 12px;border:1px solid #c7d4e3;border-radius:5px;background:#fff;color:var(--ink);font:inherit;outline:none;transition:.15s ease}
input:focus,select:focus,textarea:focus{border-color:var(--blue-800);box-shadow:0 0 0 3px rgba(13,79,168,.1)}
textarea{min-height:92px;resize:vertical}
.hidden{display:none!important}
/* ===== TABLAS y estados (pendiente / validado / rechazado) ===== */
.table-wrap{overflow:auto;border:1px solid #d6e1ed;border-radius:6px}
table{width:100%;border-collapse:collapse;background:white}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid #e4ebf3;font-size:13px;white-space:nowrap}
th{color:#52657c;background:#eaf2f9;text-transform:uppercase;font-size:10px;letter-spacing:.04em}
tbody tr:hover{background:#f8fbff}
.pendiente{background:#edf1f6;color:#5d6a7d}.validado{background:#d9f6e6;color:#147146}.rechazado{background:#f8dfdf;color:#922f2f}
.validation{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px;align-items:end}
.validation form{display:flex;gap:8px;align-items:end}
.note{font-size:12px;color:#6b778b;margin-top:16px;line-height:1.5}
/* ===== RANKING, recomendaciones, mensajes de IA y alertas ===== */
.ranking-list{display:grid;gap:12px}
.rank-card{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;padding:18px}
.rank-pos{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--blue-100);font-size:17px;font-weight:900;color:var(--blue-900)}
.rank-main h3{margin:0 0 9px}
.progress{height:8px;background:#e7edf4;border-radius:10px;overflow:hidden;margin-bottom:7px}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--green-500),var(--green-700))}
.rank-metrics{display:grid;grid-template-columns:repeat(4,auto);gap:18px;text-align:right;color:#617086}
.rank-metrics b{color:var(--blue-900)}
.rank-metrics span,.rank-metrics b{font-size:12px}
.recommend{padding:18px;background:#f7fbff;border-radius:8px;border:1px solid #d8e4f1;position:relative}
.recommend>span{position:absolute;right:14px;top:12px;font-weight:900;color:var(--blue-800)}
.recommend strong{color:var(--green-700)}
.ai-message{padding:18px;border-left:4px solid var(--green-600);background:#effbf5;margin-bottom:18px;line-height:1.58;border-radius:0 7px 7px 0}
.alert{padding:12px 15px;border-radius:6px;margin-bottom:15px;font-size:13px}
.alert.success,.success{background:#def5e8;color:#176b44}.alert.danger,.danger{background:#f6dddd;color:#8b2525}
.empty{color:var(--muted);text-align:center;padding:40px}
.app-footer{margin-top:auto;padding:18px 30px;text-align:center;color:#7a8798;font-size:11px;border-top:1px solid #dbe4ee;background:#f8fbff}
/* ===== INGRESO (login): tarjeta con panel azul y formulario ===== */
.login-container{max-width:none;padding:0}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:32px;background:radial-gradient(circle at top left,#eef6ff 0,#f6f9fc 43%,#edf3f8 100%)}
.login-card{width:min(900px,96vw);display:grid;grid-template-columns:1.05fr 1fr;background:#fff;border:1px solid #d6e1ed;border-radius:18px;overflow:hidden;box-shadow:0 22px 60px rgba(19,53,94,.16)}
.login-hero{background:linear-gradient(145deg,#0b3f8f,#0b2f68);color:#fff;padding:60px 48px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.login-hero h1{font-size:29px;line-height:1.17;margin:0 0 14px;letter-spacing:-.5px}
.login-hero p{margin:0 auto 20px;max-width:360px;line-height:1.5;color:#dbe9fb;font-size:14px}
.login-card form{padding:52px 48px;align-self:center}
.login-card form h2{font-size:27px;margin:8px 0 5px;color:#152238}
.form-intro{color:var(--muted);font-size:13px;margin:0 0 22px}
.login-card label{display:block;margin-top:14px}
.hint{font-size:11px;color:#738198;margin:12px 0 0}
/* ===== ADAPTACIÓN A PANTALLAS CHICAS (tablet y celular) ===== */
@media(max-width:1050px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .rank-metrics{grid-template-columns:repeat(2,auto)}
}
@media(max-width:900px){
  .app-shell{display:block}.app-main{grid-column:auto}.sidebar{transform:translateX(-100%);transition:.22s ease;box-shadow:20px 0 40px rgba(15,45,84,.15)}
  body.sidebar-open .sidebar{transform:translateX(0)}
  body.sidebar-open:after{content:"";position:fixed;inset:0;background:rgba(9,27,54,.35);z-index:25}
  .menu-toggle{display:block}.workspace-search{margin-left:0}.workspace-user{margin-left:auto}.workspace-user span{display:none}
  .two,.three{grid-template-columns:1fr}.validation{grid-template-columns:1fr}.rank-card{grid-template-columns:54px 1fr}.rank-metrics{grid-column:1/-1;margin-top:14px;text-align:left}
  .login-card{grid-template-columns:1fr}.login-hero{padding:38px}.login-card form{padding:38px}
}
@media(max-width:600px){
  .container{padding:22px 16px 34px}.workspace-bar{padding:0 14px}.workspace-search{display:none}.page-title{align-items:flex-start;flex-direction:column}.page-title h1{font-size:26px}.stats,.form-grid{grid-template-columns:1fr}.rank-metrics{grid-template-columns:1fr 1fr}.validation form{flex-direction:column;align-items:stretch}.login-wrap{padding:14px}.login-hero{padding:30px 22px}.login-card form{padding:30px 22px}.login-hero h1{font-size:24px}
}

/* ===== UTILIDADES: filtros, barras de herramientas, permisos, filas de edición ===== */
.config-link{text-decoration:none}.btn.small{min-height:30px;padding:5px 10px;font-size:11px}.filter-grid{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));gap:14px;align-items:end}.filter-actions{display:flex;gap:8px;align-items:end}.report-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:15px}.report-toolbar h2{margin:0}.permission-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.permission-grid article{border:1px solid var(--line);background:#f8fbff;border-radius:8px;padding:14px}.permission-grid b{display:block;color:var(--blue-900);margin-bottom:6px}.permission-grid span{font-size:12px;color:var(--muted);line-height:1.45}.check-label{display:flex;align-items:center;gap:8px}.check-label input{width:auto;margin:0}.inline-edit{padding:10px;background:#f7fbff}.alert.error{background:#f6dddd;color:#8b2525}
@media(max-width:1100px){.filter-grid{grid-template-columns:repeat(3,1fr)}.permission-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.filter-grid{grid-template-columns:1fr}.report-toolbar{align-items:flex-start;flex-direction:column}.permission-grid{grid-template-columns:1fr}}

/* Gestión, perfil y menú de usuario */
.workspace-spacer{flex:1}
.user-menu-wrap{position:relative;margin-left:auto}
.user-menu-button{border:0;background:transparent;cursor:pointer;padding:4px 0}
.user-menu-button:hover span{color:var(--blue-900)}
.user-dropdown{position:absolute;right:0;top:46px;width:230px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 16px 38px rgba(15,45,84,.18);padding:7px;z-index:60}
.user-dropdown-head{padding:10px 11px;border-bottom:1px solid #e8eef5;margin-bottom:5px}
.user-dropdown-head strong,.user-dropdown-head small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-dropdown-head strong{font-size:13px;color:#1d2d44}.user-dropdown-head small{font-size:11px;color:var(--muted);margin-top:3px}
.user-dropdown a{display:block;text-decoration:none;color:#34465e;padding:9px 11px;border-radius:6px;font-size:13px}
.user-dropdown a:hover{background:#eef5fc;color:var(--blue-900)}
.row-actions{display:flex;align-items:center;gap:7px}.row-actions form{margin:0}.edit-row>td{padding:0}.locked-label{font-size:10px;color:#78869a;white-space:normal}
.profile-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start}.profile-summary{text-align:center}.profile-avatar{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;margin:4px auto 15px;background:var(--blue-900);color:#fff;font-size:28px;font-weight:800}.profile-summary h2{margin-bottom:6px}.profile-summary>p{color:var(--muted);font-size:13px;line-height:1.45}.profile-summary dl{text-align:left;margin:22px 0 0;padding-top:16px;border-top:1px solid #e5ebf2}.profile-summary dt{font-size:10px;color:var(--muted);text-transform:uppercase;font-weight:800;margin-top:10px}.profile-summary dd{margin:3px 0 0;font-size:13px;color:#26384e}.password-section{border-top:1px solid #e1e9f1;padding-top:14px;margin-top:4px}.password-section h3{margin:0 0 4px}.password-section p{margin:0;color:var(--muted);font-size:12px}
@media(max-width:780px){.profile-layout{grid-template-columns:1fr}.workspace-user span{display:none}}

.filter-card{padding:16px 20px}.compact-filters{grid-template-columns:2fr repeat(5,minmax(125px,1fr)) auto}.material-filters{grid-template-columns:2fr repeat(7,minmax(120px,1fr));}.list-summary{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:12px;color:var(--muted);font-size:12px}.list-summary b{color:var(--blue-900);font-size:13px}.pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px}.pagination span{font-size:12px;color:var(--muted)}.btn.disabled{pointer-events:none;opacity:.45}.empty-cell{text-align:center!important;padding:30px!important;color:var(--muted)}.alert.info{background:#eaf3ff;color:#153c68;border:1px solid #c9dcf2;padding:13px 16px;border-radius:8px;margin-bottom:16px}.filter-grid label{min-width:0}.filter-grid input,.filter-grid select{width:100%}
@media(max-width:1400px){.compact-filters,.material-filters{grid-template-columns:repeat(4,minmax(140px,1fr))}}
@media(max-width:900px){.compact-filters,.material-filters{grid-template-columns:repeat(2,minmax(140px,1fr))}.list-summary,.pagination{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.compact-filters,.material-filters{grid-template-columns:1fr}}

/* Formularios de edición responsivos y acciones de cancelación */
.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}
.panel-heading h2,.panel-heading h3{margin:0 0 4px;color:var(--blue-900)}
.panel-heading p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}
.responsive-form{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.form-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.edit-row>td{padding:0!important;white-space:normal!important;background:#f7fbff}
.edit-panel{padding:20px 22px;border-top:1px solid #d9e4ef;border-bottom:1px solid #d9e4ef;background:#f7fbff}
.edit-panel-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px 20px;align-items:start}
.edit-panel-form label{display:flex;flex-direction:column;min-width:0;font-size:12px;font-weight:750;color:#34445a;white-space:normal}
.edit-panel-form input,.edit-panel-form select,.edit-panel-form textarea{min-width:0;width:100%;box-sizing:border-box}
.edit-panel-form .field-wide{grid-column:1/-1}
.edit-panel-form .check-label{display:flex;flex-direction:row;align-items:center;gap:9px;min-height:42px}
.edit-panel-form .check-label input{width:auto;flex:0 0 auto;margin:0}
.badge-button{border:0;cursor:pointer;font:inherit}
.badge-button:hover{filter:brightness(.96);box-shadow:0 0 0 3px rgba(42,178,112,.12)}
.ai-config-form{margin-top:4px}
.muted-inline{font-weight:400;color:var(--muted);font-size:11px}
input[readonly]{background:#eef3f8;color:#5f6e81;cursor:not-allowed}
@media(max-width:700px){.panel-heading{flex-direction:column}.edit-panel{padding:16px}.edit-panel-form,.responsive-form{grid-template-columns:1fr}.form-actions{align-items:stretch}.form-actions .btn{width:100%}}

/* Gráfico de barras horizontales (panel principal): una serie, marcas finas con extremo redondeado, valor directo */
.stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.stats em{display:block;margin-top:2px}
.hbars{display:grid;gap:10px;margin:14px 0 8px}
.hbar{display:grid;grid-template-columns:130px 1fr 96px;align-items:center;gap:12px;font-size:13px}
.hbar .name{color:var(--ink)}
.hbar .bar{display:block;height:14px}
.hbar .bar i{display:block;height:14px;min-width:2px;background:var(--blue-800);border-radius:0 4px 4px 0}
.hbar .val{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.chart-table{margin-top:12px;font-size:13px}.chart-table summary{cursor:pointer;color:var(--muted)}
@media(max-width:640px){.hbar{grid-template-columns:96px 1fr 76px;gap:8px}}

/* ===== Mejoras de interfaz (panel por rol, filtros plegables, tablas en tarjetas, gráficos) ===== */
.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stats>.stat-link{display:block;color:inherit;text-decoration:none;border-radius:9px}
.stats>.stat-link>article{height:100%;transition:border-color .15s}
.stats>a.stat-link:hover>article{border-color:var(--blue-800)}
.stats>a.stat-link:focus-visible{outline:2px solid var(--blue-800);outline-offset:2px}
.stats>.stat-link:nth-child(3)>article:after{background:#d9f8e7}
.stats>.stat-link:nth-child(3)>article strong{color:var(--green-700)}
.nav-badge{margin-left:auto;background:var(--danger);color:#fff;font-style:normal;font-size:11px;font-weight:700;min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:inline-grid;place-items:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.locked-label svg{width:16px;height:16px;fill:var(--muted);vertical-align:middle}
.empty-ok{color:var(--green-700);font-weight:600;margin:6px 0 14px}
.big-num{font-size:28px;color:var(--blue-900)}
.mini-list{list-style:none;padding:0;margin:10px 0 16px}
.mini-list li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.mini-list li em{font-style:normal;color:var(--muted);white-space:nowrap}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:10px 0 16px}
.mini-stats.four{grid-template-columns:repeat(2,1fr)}
.mini-stats b{display:block;font-size:24px;color:var(--blue-900)}
.mini-stats span{font-size:12px;color:var(--muted)}
.linechart{width:100%;height:auto;display:block}
.linechart .gl{stroke:var(--line);stroke-width:1}
.linechart .axis{fill:var(--muted);font-size:11px}
.linechart .area{fill:var(--blue-800);fill-opacity:.1;stroke:none}
.linechart .line{fill:none;stroke:var(--blue-800);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.linechart .dot{fill:var(--blue-800);stroke:var(--surface);stroke-width:2}
.linechart .endlabel{fill:var(--ink);font-size:12px;font-weight:700}
.linechart .hit{fill:transparent}
.linechart .hit:hover{fill:rgba(13,79,168,.12)}
.context-line{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
.warn-chip{display:inline-block;background:#fff4dc;color:var(--warning);border:1px solid #f0d9a8;border-radius:12px;padding:1px 9px;font-size:11.5px;font-weight:700;margin-left:4px}
.empty-state{text-align:center;padding:36px 20px}
.empty-state .check-big{width:56px;height:56px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:#def5e8;color:var(--green-700);font-size:28px;font-weight:700}
.filters-lite{display:grid;grid-template-columns:2fr 1fr auto;gap:14px;align-items:end}
.filters-lite .more-filters{grid-column:1/-1}
.more-filters summary{cursor:pointer;color:var(--blue-800);font-weight:650;font-size:13px}
.more-filters .inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:12px}
.filter-grid.auto{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.ia-hero .hero-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.ia-hero .meta{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.ia-hero .ai-message{font-size:15.5px;margin-bottom:12px}
@media(max-width:700px){
 .filters-lite{grid-template-columns:1fr}
 .table-cards thead{display:none}
 .table-cards,.table-cards tbody,.table-cards tr,.table-cards td{display:block;width:100%}
 .table-cards tr.hidden{display:none}
 .table-cards tr{border:1px solid var(--line);border-radius:8px;margin:0 0 12px;padding:6px 12px;background:var(--surface)}
 .table-cards td{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border:0;border-bottom:1px solid #eef2f8;text-align:right}
 .table-cards td:last-child{border-bottom:0}
 .table-cards td:before{content:attr(data-label);color:var(--muted);font-size:12px;font-weight:650;text-align:left;flex:0 0 38%}
 .table-cards td[colspan]{display:block;text-align:center}
 .table-cards td[colspan]:before{content:none}
 .table-cards .edit-row{padding:0;border:0}
}
.linechart .axis{font-size:14px}
.linechart .endlabel{font-size:15px}
@media(max-width:700px){.table-cards td{white-space:normal;overflow-wrap:anywhere}.table-cards td>*{max-width:100%}}

.meter{height:10px;background:#e6eef8;border-radius:5px;overflow:hidden;margin:8px 0 4px}
.meter i{display:block;height:100%;min-width:2px;background:var(--blue-800);border-radius:0 5px 5px 0}
.meter.done i{background:var(--green-700)}
.challenge{border:1px solid var(--line);border-radius:9px;padding:16px;margin:12px 0;background:var(--surface)}
.challenge h3{margin:0 0 6px}.challenge p{margin:4px 0}
.challenge .meta{font-size:12.5px;color:var(--muted)}
.chip{display:inline-block;background:var(--blue-100);color:var(--blue-900);border-radius:12px;padding:1px 9px;font-size:11.5px;font-weight:700}
.goal{margin:10px 0 14px}
.inline-form{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}.inline-form label{min-width:260px;flex:1}
.report-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:10px}
.report-facts span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.report-facts b{display:block;margin-top:3px}
.quiz{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.quiz ol{padding-left:20px}.quiz>ol>li{margin:0 0 16px}
.quiz-options{list-style:none;padding-left:4px;margin:6px 0}.quiz-options li{padding:2px 0}
.answer summary{cursor:pointer;color:var(--blue-800);font-weight:650;font-size:13px}
.hero-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
@media print{
 .sidebar,.workspace-bar,.app-footer,.no-print,.menu-toggle{display:none!important}
 .app-shell{display:block}.app-main{display:block;min-height:0}
 body{background:#fff}.container{max-width:none;padding:0}
 .card,.stats article{box-shadow:none;break-inside:avoid}
 details.answer{display:block}details.answer>summary{display:none}
 a{color:inherit;text-decoration:none}
}
.stats span{white-space:normal;line-height:1.3}

/* ===== Quizzes: panel del docente y página pública del alumno ===== */
.chip-muted{background:#eef1f5;color:var(--muted)}
.quiz-level{margin-top:6px}
.school-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:6px 18px;margin:10px 0 14px}
.linkbox{display:flex;gap:8px;align-items:center}.linkbox input{flex:1;min-width:0;font-size:12px}
.q-edit{border:0;padding:0;margin:0}.q-edit legend{font-weight:800;margin-bottom:8px}
.q-op{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;margin:6px 0}
.public-quiz{max-width:720px;margin:0 auto}
.public-quiz h1{font-size:24px;margin:0 0 6px}
.q-block{border:0;padding:0;margin:0 0 20px}.q-block legend{font-weight:800;font-size:16px;margin-bottom:10px;line-height:1.35}
.q-option{display:flex;gap:12px;align-items:center;padding:13px 14px;border:1px solid var(--line);border-radius:9px;margin:8px 0;cursor:pointer;font-size:15.5px;background:var(--surface)}
.q-option:hover{border-color:var(--blue-800)}.q-option input{width:20px;height:20px;flex:0 0 auto;margin:0}
.q-option:has(input:checked){border-color:var(--blue-800);background:var(--blue-050)}
.result-box{border-left:5px solid var(--warning)}.result-box.ok{border-left-color:var(--green-700)}
.review{padding-left:20px}.review li{margin:0 0 12px}
details.card>summary{cursor:pointer;font-weight:700;color:var(--blue-800)}
@media(max-width:700px){.linkbox{flex-direction:column;align-items:stretch}}

/* Recuperación de contraseña: mismo aspecto que el formulario de ingreso */
.login-form-side{padding:52px 48px;align-self:center}
.login-form-side h2{font-size:27px;margin:8px 0 14px;color:#152238}
.login-card .login-form-side form{padding:0}
.login-form-side .alert{margin-top:6px}
@media(max-width:1050px){.login-form-side{padding:38px}}
@media(max-width:700px){.login-form-side{padding:30px 22px}}

/* Página pública para la comunidad */
.comunidad{max-width:980px;margin:0 auto;padding:28px 16px 40px}
.com-hero{background:linear-gradient(145deg,#0b3f8f,#0b2f68);color:#fff;border-radius:16px;padding:40px 32px;margin-bottom:20px;text-align:center}
.com-hero .eyebrow{color:#b9d6ff}.com-hero h1{font-size:34px;margin:8px 0 10px;letter-spacing:-.5px}.com-hero p{max-width:560px;margin:0 auto;color:#dbe9fb;line-height:1.5}
.com-numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.com-numbers article{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 16px;text-align:center}
.com-numbers b{display:block;font-size:28px;color:var(--blue-900);line-height:1.1}.com-numbers span{display:block;margin-top:8px;color:#516176;font-size:13px}
.com-equiv{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.com-equiv li{background:#f3f8ff;border-radius:10px;padding:14px 16px;line-height:1.4}.com-equiv b{color:var(--blue-900);font-size:18px}.com-equiv small{color:#516176}
.com-bar{display:grid;grid-template-columns:130px 1fr 90px;gap:12px;align-items:center;margin:9px 0}.com-bar b{text-align:right}
.com-escuelas{list-style:none;margin:0;padding:0}.com-escuelas li{display:flex;gap:14px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}.com-escuelas li:first-child{border-top:0}
.com-escuelas .pos{font-weight:800;color:var(--blue-900);min-width:34px}
.com-camp{padding:12px 0;border-top:1px solid var(--line)}.com-camp:first-of-type{border-top:0}.com-camp h3{margin:0 0 4px}
.com-tips{margin:0;padding-left:20px;line-height:1.7}
.com-foot{text-align:center;color:#6a7a90;font-size:12px;margin-top:24px}
@media(max-width:700px){.com-numbers{grid-template-columns:repeat(2,1fr)}.com-equiv{grid-template-columns:1fr}.com-bar{grid-template-columns:1fr 70px;}.com-bar .meter{grid-column:1/3;order:3}.com-hero{padding:30px 20px}.com-hero h1{font-size:27px}}

/* Pestañas de las funciones con IA */
.sub-tabs{display:flex;gap:4px;margin:0 0 18px;border-bottom:1px solid var(--line);overflow-x:auto}
.sub-tabs a{padding:10px 18px;border-radius:8px 8px 0 0;color:#516176;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;border:1px solid transparent;border-bottom:0;margin-bottom:-1px}
.sub-tabs a:hover{color:var(--blue-900);background:#f3f8ff}
.sub-tabs a.active{color:var(--blue-900);background:#fff;border-color:var(--line)}

/* Ayuda (manual de usuario) */
.ayuda{max-width:900px}
.ayuda h2{margin-top:0}
.ayuda-indice{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:14px}
.ayuda-indice a{color:var(--blue-900)}
.ayuda .seccion-titulo{margin:26px 0 6px}.ayuda .subtitulo{margin:0 0 10px;color:#516176;font-size:15px}
.flujo{list-style:none;margin:14px 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.flujo li{background:#f3f8ff;border-radius:10px;padding:12px 14px;line-height:1.35}.flujo b{display:block;color:var(--blue-900);margin-bottom:4px}.flujo span{font-size:13px;color:#425468}
.pasos-lista{margin:0;padding-left:18px;line-height:1.65}
.guia{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:10px}
.guia>summary{cursor:pointer;padding:14px 16px;font-weight:700;display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.guia>summary small{font-weight:400;color:#6a7a90}
.guia-cuerpo{padding:0 18px 16px}.guia-cuerpo ol{margin:0 0 10px;padding-left:20px;line-height:1.65}.guia-cuerpo .nota{background:#fff8e6;border-radius:8px;padding:10px 12px;margin:10px 0;font-size:14px}
.guia-cuerpo figure{margin:12px 0 0}.guia-cuerpo img{max-width:100%;border:1px solid var(--line);border-radius:8px}.guia-cuerpo figcaption{font-size:12px;color:#6a7a90;margin-top:4px}
.otras>summary{cursor:pointer;font-weight:700}.otras .guia{margin-top:10px}
.matriz th,.matriz td{text-align:center}.matriz td:first-child,.matriz th:first-child{text-align:left}
.matriz .mi-perfil{background:#eaf3ff}.matriz .si{color:#176b44;font-weight:700}.matriz .no{color:#9aa8b8}
.faq dt{font-weight:700;margin-top:12px}.faq dd{margin:3px 0 0;line-height:1.55;color:#34465e}
@media(max-width:700px){.flujo{grid-template-columns:1fr 1fr}}
@media print{.ayuda .guia{break-inside:avoid}.ayuda .guia>summary{font-size:15px}.ayuda-indice{display:none}}


/* ===== Botón «Cerrar sesión»: es un formulario (POST) pero se ve como un enlace del menú ===== */
.logout-form{margin:0}
.link-button{width:100%;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer;color:inherit}
.sidebar-bottom .link-button{display:flex;align-items:center;gap:10px;padding:10px;color:#40536c;font-size:13px}
.sidebar-bottom .link-button svg{width:18px;height:18px}
.user-dropdown .link-button{display:block;color:#34465e;padding:9px 11px;border-radius:6px;font-size:13px}
.user-dropdown .link-button:hover{background:#eef5fc;color:var(--blue-900)}