/* =====================================================================
   Dystopia Seguimiento — cards, botones, KPIs, gráficos, tablas, inputs,
   badges, modal, toast, login y página pública de formularios.
   Parte de la hoja de estilos partida. ORDEN DE CARGA (no cambiarlo,
   la cascada depende de él): base, layout, componentes, responsive,
   vistas, ficha, vistas-fase4, formularios. index.html los carga todos en
   ese orden; form.html (página pública) carga solo base, componentes y
   formularios, que son las únicas que usa.
   ===================================================================== */
/* ===== CARDS / GRIDS ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow);min-width:0;}
.card-list{padding:var(--sp-2);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-3);}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr;} .grid-5{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.grid-5{grid-template-columns:1fr;}}

.list-clean{margin:0;padding:0;list-style:none;}
.list-clean li{position:relative;padding:var(--sp-1) 0 var(--sp-1) var(--sp-4);font-size:var(--fs-body);color:var(--text);line-height:1.5;}
.list-clean li::before{content:'';position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:var(--accent-line);}
.muted-empty{color:var(--text-faint);font-size:var(--fs-meta);font-style:italic;}
.marca-opps{color:var(--text-faint);font-size:var(--fs-micro);font-weight:400;cursor:help;}
.field-label{font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-bottom:var(--sp-2);}
.link-list{display:flex;flex-direction:column;gap:var(--sp-2);}
.link-list a{font-size:var(--fs-body);font-weight:600;}
.divider-soft{height:1px;background:var(--border-soft);margin:var(--sp-4) 0;}

/* ===== BOTONES ===== */
.btn{background:var(--surface-2);border:1px solid transparent;border-radius:999px;padding:0 var(--sp-4);min-height:var(--control-h);cursor:pointer;font-weight:700;font-size:var(--fs-meta);color:var(--ink);display:inline-flex;align-items:center;gap:var(--sp-2);white-space:nowrap;}
.btn:hover{background:var(--border-soft);}
.btn:disabled{opacity:.6;cursor:default;}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn-accent:hover{background:#4338CA;border-color:#4338CA;}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-dim);}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink);}
.btn-danger{background:var(--danger-soft);border-color:transparent;color:var(--danger);}
.btn-sm{padding:0 var(--sp-3);min-height:var(--control-h-sm);font-size:var(--fs-micro);}

/* ===== STATS / KPI CARDS ===== */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-6);}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-4);box-shadow:var(--shadow);min-width:0;}
.stat-num{font-family:var(--font-mono);font-size:var(--fs-kpi);line-height:1.1;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);}
.stat-label{font-size:var(--fs-meta);line-height:1.35;color:var(--text-dim);margin-top:var(--sp-1);font-weight:600;}
.stat-alerta{border-color:var(--danger) !important;}
.stat-alerta .stat-num{color:var(--danger);}
.stat-link{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline dotted;text-decoration-thickness:2px;text-underline-offset:4px;}
.stat-link:hover{opacity:.8;}

/* Contadores destacados con franja de color a la izquierda */
.pipeline-row{grid-template-columns:repeat(3,1fr);gap:var(--sp-4);}
.stat-pipeline{position:relative;padding:var(--sp-5) var(--sp-5) var(--sp-4);border-radius:var(--radius-lg);overflow:hidden;}
.stat-pipeline::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pipe-color,var(--accent));}
.stat-pipeline.kpi-card::before{display:none;}
.stat-pipeline.kpi-card .stat-num{color:var(--ink);}
.stat-pipeline:nth-child(1){--pipe-color:var(--accent);}
.stat-pipeline:nth-child(2){--pipe-color:var(--cyan);}
.stat-pipeline:nth-child(3){--pipe-color:var(--danger);}
.stat-pipeline .stat-num{font-size:var(--fs-kpi-lg);letter-spacing:-.5px;color:var(--pipe-color);}
.stat-pipeline .stat-label{font-size:var(--fs-body);color:var(--text);margin-top:var(--sp-2);}
@media(max-width:760px){.pipeline-row{grid-template-columns:1fr;}}

/* KPI card: ícono tenue + número + sparkline + variación */
.kpi-card{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);}
.kpi-top{display:flex;align-items:center;gap:var(--sp-3);min-width:0;}
.kpi-icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;color:var(--kpi-color);background:color-mix(in srgb, var(--kpi-color) 12%, white);}
.kpi-main{flex:1;min-width:0;}
.kpi-card .stat-num{font-size:var(--fs-kpi);letter-spacing:-.5px;line-height:1.1;}
.kpi-card.stat-pipeline .stat-num{font-size:var(--fs-kpi-lg);}
.kpi-card .stat-label{margin-top:2px;font-size:var(--fs-meta);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.kpi-card.stat-pipeline .stat-label{font-size:var(--fs-meta);color:var(--text-dim);margin-top:2px;}
.kpi-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-2);border-top:1px solid var(--border-soft);padding-top:var(--sp-2);min-height:36px;}
.kpi-foot-txt{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-micro);min-width:0;padding-bottom:4px;}
.kpi-spark{flex-shrink:0;display:block;}
.kpi-delta{font-weight:800;font-variant-numeric:tabular-nums;padding:1px 7px;border-radius:999px;white-space:nowrap;}
.delta-bien{color:#15803D;background:#DCFCE7;}
.delta-mal{color:#B91C1C;background:#FEE2E2;}
.delta-neutra{color:var(--text-dim);background:var(--surface-2);}
.kpi-delta-sub{color:var(--text-faint);font-weight:600;white-space:nowrap;}
.kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.stat-card.stat-alerta{border-color:color-mix(in srgb, var(--danger) 45%, white) !important;}

/* Barras horizontales simples (tarjetas por programa) */
.ops-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-2);}
.ops-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-4);box-shadow:var(--shadow);border-top:3px solid var(--card-color,var(--accent));cursor:pointer;min-width:0;}
.ops-card:hover{box-shadow:var(--shadow-md);}
.ops-card h3{margin:0;font-size:var(--fs-card);line-height:1.3;font-weight:700;color:var(--ink);}
.ops-card .niche{font-size:var(--fs-micro);font-weight:500;color:var(--text-faint);margin-bottom:var(--sp-3);}
.ops-bars{display:flex;flex-direction:column;gap:var(--sp-2);}
.ops-bar-row{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-micro);color:var(--text-dim);font-weight:600;font-variant-numeric:tabular-nums;}
.ops-bar-row > span:last-child{min-width:20px;text-align:right;}
.ops-bar-track{flex:1;height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden;}
.ops-bar-fill{height:100%;border-radius:4px;}

/* Filas de listado compacto (próximos vencimientos, etc.) */
.upcoming-row{display:grid;grid-template-columns:72px 8px minmax(96px,128px) minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;min-height:var(--row-h);padding:0 var(--sp-3);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-body);}
.upcoming-row:hover{background:var(--accent-soft);}
.upcoming-date{font-family:var(--font-mono);font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-dim);font-size:var(--fs-meta);}
.upcoming-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink);}
.upcoming-client{color:var(--text-dim);font-size:var(--fs-meta);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ===== GRÁFICOS SVG (mismo método que Dystopia: SVG armado a mano) ===== */
.chart-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--sp-4);margin-bottom:var(--sp-6);}
.chart-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.chart-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.chart-card{padding:var(--sp-4) var(--sp-5);min-width:0;}
.chart-title{font-weight:800;font-size:var(--fs-card);color:var(--ink);line-height:1.3;}
.chart-sub{font-size:var(--fs-meta);color:var(--text-faint);font-weight:500;margin:2px 0 var(--sp-3);}
.chart-svg{display:block;max-width:100%;height:auto;margin:0 auto;overflow:visible;}
.chart-svg text{font-family:var(--font-sans);}
.chart-axis{stroke:var(--border);stroke-width:1;}
.chart-gridline{stroke:var(--border-soft);stroke-width:1;}
.chart-tick{font-size:11px;fill:var(--text-faint);font-weight:600;}
.bar-val{font-size:13px;font-weight:800;fill:var(--ink);font-variant-numeric:tabular-nums;}
.bar-lab{font-size:12px;fill:var(--text-dim);font-weight:600;}
.bar-g:hover path{opacity:.85;}
.line-last{font-size:13px;font-weight:800;fill:var(--ink);}
.line-hit:hover{fill:rgba(79,70,229,.05);}
.donut-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);}
.donut-svg{display:block;max-width:100%;height:auto;}
.donut-svg circle[stroke-dasharray]:hover{opacity:.85;}
.donut-total{font-family:var(--font-mono);font-size:24px;font-weight:800;fill:var(--ink);}
.donut-sub{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;fill:var(--text-faint);}
.donut-legend{width:100%;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-meta);}
.donut-legend-item{display:grid;grid-template-columns:10px minmax(0,1fr) auto 38px;gap:var(--sp-2);align-items:center;}
.donut-legend .dot{width:10px;height:10px;border-radius:3px;}
.donut-legend-label{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.donut-legend-val{color:var(--text-dim);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;}
.donut-legend-pct{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums;text-align:right;}
@media(max-width:1180px){
  .chart-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .chart-grid-3 > :last-child{grid-column:1 / -1;}
}
@media(max-width:900px){ .chart-grid,.chart-grid-2,.chart-grid-3,.kpi-grid{grid-template-columns:1fr;} }

/* ===== TABLAS / LISTADOS ===== */
.table-card{padding:0;overflow-x:auto;}
.table-foot{margin-top:var(--sp-2);font-size:var(--fs-meta);font-weight:500;color:var(--text-faint);}
.data-table{width:100%;border-collapse:collapse;font-size:var(--fs-body);font-variant-numeric:tabular-nums;}
.data-table th{text-align:left;font-weight:700;font-size:var(--fs-micro);letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);height:var(--control-h);padding:0 var(--sp-3);vertical-align:middle;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--thead-bg);}
/* Filas de altura pareja: una línea por celda, lo largo se corta con "…" (el texto completo está en el modal). */
.data-table td{height:var(--row-h);padding:0 var(--sp-3);vertical-align:middle;border-bottom:1px solid var(--border-soft);line-height:1.3;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis;}
.data-table th:first-child,.data-table td:first-child{padding-left:var(--sp-4);}
.data-table th:last-child,.data-table td:last-child{padding-right:var(--sp-4);}
.data-table tbody tr:last-child td{border-bottom:none;}
.data-table tbody tr:hover td{background:var(--surface-2);}
.data-table tr.total-row td{font-weight:800;color:var(--ink);background:var(--tfoot-bg);border-top:1px solid var(--border);border-bottom:none;}
.data-table td.num, .data-table th.num{text-align:right;font-family:var(--font-mono);white-space:nowrap;font-variant-numeric:tabular-nums;}
.data-table td.num{font-weight:600;color:var(--ink);}
.data-table tbody tr[data-action]{cursor:pointer;}
.data-table tbody tr[data-action]:hover td{background:var(--accent-soft);}
.data-table tbody tr[data-action]:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent);}
.th-sort{cursor:pointer;user-select:none;white-space:nowrap;}
.th-sort:hover{color:var(--ink);}
.th-sort-on{color:var(--accent);}
.data-table.data-table-dense{font-size:var(--fs-meta);}
.data-table.data-table-dense th,.data-table.data-table-dense td{padding:0 6px;}

/* Días restantes / vencidos (mismas clases que "días parada" en Dystopia) */
.dias-parada{font-weight:700;font-variant-numeric:tabular-nums;}
.dias-media{color:#B9832E;}
.dias-alta{color:var(--danger);}

/* ===== FILTROS / INPUTS / SELECTS ===== */
.filter-row{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;margin-bottom:var(--sp-3);}
.filter-row select,.filter-row input[type="date"]{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);height:var(--control-h);padding:0 var(--sp-3);color:var(--ink);font-size:var(--fs-meta);font-weight:600;box-shadow:0 1px 1px rgba(16,24,40,.03);}
.filter-row .flabel{font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);font-weight:700;margin-left:var(--sp-1);}
.search-input{flex:1;min-width:180px;background:var(--surface-2);border:1px solid transparent;border-radius:999px;height:var(--control-h);padding:0 var(--sp-4);color:var(--ink);}
.search-input:focus{background:var(--surface);border-color:var(--accent-line);}

.form-row{margin-bottom:var(--sp-3);min-width:0;}
.form-row label{display:block;font-size:var(--fs-micro);font-weight:600;color:var(--text-dim);margin-bottom:var(--sp-1);}
.form-row input[type=text],.form-row input[type=email],.form-row input[type=password],.form-row input[type=tel],.form-row input[type=url],.form-row input[type=date],.form-row input[type=number],.form-row select,.form-row textarea{width:100%;background:var(--surface-2);border:1px solid transparent;border-radius:var(--radius-sm);min-height:var(--control-h);padding:var(--sp-2) var(--sp-3);color:var(--ink);}
.form-row input[type=number]{font-variant-numeric:tabular-nums;text-align:right;}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{background:var(--surface);border-color:var(--accent-line);outline:none;}
.form-row textarea{resize:vertical;min-height:64px;line-height:1.5;}
.form-row .hint{font-size:var(--fs-micro);color:var(--text-faint);margin-top:var(--sp-1);}
.form-error{color:var(--danger);font-size:var(--fs-meta);font-weight:600;min-height:16px;margin-bottom:var(--sp-3);overflow-wrap:anywhere;}
.form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);}
.form-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);}
@media(max-width:600px){.form-grid4{grid-template-columns:repeat(2,1fr);}}
.check-row{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-body);font-weight:600;color:var(--text-dim);margin-top:var(--sp-1);}
.check-row input{width:16px;height:16px;}
.calc-field{min-height:var(--control-h);display:flex;align-items:center;padding:0 10px;border:1px dashed var(--border);border-radius:var(--radius-sm);background:var(--surface-2);font-variant-numeric:tabular-nums;font-weight:700;color:var(--text-dim);}

/* ===== BADGES ===== */
.badge{display:inline-flex;align-items:center;gap:var(--sp-1);font-weight:600;font-size:var(--fs-micro);line-height:16px;padding:2px var(--sp-2);border-radius:999px;color:var(--badge-color, var(--text-dim));background:color-mix(in srgb, var(--badge-color, var(--text-dim)) 14%, white);white-space:nowrap;vertical-align:middle;}
.badge-status{font-weight:700;}
.badge-status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
/* Contorno = sin avance / no aplica; sólido = cerrado. Igual criterio que Dystopia. */
.badge-outline{background:transparent;color:var(--text-dim);font-weight:600;box-shadow:inset 0 0 0 1px var(--border);}
.badge-outline::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--text-faint);}
.badge-solid{background:var(--badge-color);color:#fff;}
.badge-solid::before{background:#fff;}

/* Semáforo */
.sem-verde{--badge-color:var(--sem-verde);}
.sem-amarillo{--badge-color:var(--sem-amarillo);color:var(--sem-amarillo-text);}
.sem-rojo{--badge-color:var(--sem-rojo);}
.sem-gris{--badge-color:var(--text-faint);}
.sem-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--badge-color,var(--text-faint));}

.empty-state{text-align:center;padding:var(--sp-10) var(--sp-5);color:var(--text-faint);}
.empty-state .big{font-weight:700;font-size:var(--fs-card);color:var(--ink);margin-bottom:var(--sp-1);}
.empty-state .small{font-size:var(--fs-meta);}
.empty-state .btn{margin-top:var(--sp-4);}

/* ===== MODAL ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(23,26,33,.45);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:100;padding:var(--sp-5);}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:560px;max-height:88vh;overflow-y:auto;padding:var(--sp-6);box-shadow:var(--shadow-md);}
.modal-box.wide{max-width:760px;}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4);}
.modal-head h2{font-weight:800;font-size:var(--fs-section);line-height:1.25;margin:0;color:var(--ink);}
.modal-close{background:var(--surface-2);border:none;border-radius:999px;width:28px;height:28px;color:var(--text-faint);cursor:pointer;font-size:15px;line-height:1;padding:0;flex-shrink:0;}
.modal-close:hover{background:var(--border-soft);color:var(--ink);}
.modal-box .subhead{padding-top:var(--sp-4);border-top:1px solid var(--border-soft);}
.modal-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--border-soft);}
.modal-foot .right{display:flex;gap:var(--sp-2);}

/* ===== TOAST ===== */
.toast{position:fixed;bottom:var(--sp-5);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:999px;padding:var(--sp-3) var(--sp-5);font-size:var(--fs-body);font-weight:600;z-index:200;box-shadow:var(--shadow-md);}
.toast.toast-error{background:var(--danger);}

/* ===== LOGIN / CARGA (en Dystopia son estilos inline; acá, clases con los mismos valores) ===== */
.login-wrap{flex:1;min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px;overflow:auto;}
.login-card{width:100%;max-width:360px;}
.login-card .brand-mark{margin-bottom:20px;}
.login-card .form-row input{padding:9px 12px;}
.login-error{color:var(--danger);font-size:12px;font-weight:600;min-height:16px;margin-bottom:10px;}
.login-card .btn{width:100%;justify-content:center;}
.loading{flex:1;padding:40px;color:var(--text-dim);background:var(--bg);min-height:100vh;}

/* ===== PÁGINA PÚBLICA DE FORMULARIOS ===== */
.public-wrap{min-height:100vh;display:flex;justify-content:center;padding:var(--sp-8) var(--sp-4);}
.public-card{width:100%;max-width:640px;align-self:flex-start;}