/* Soluciones DS44 — sistema de diseño real (mismas clases que ya usa app.js) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink-900:#0B1F33; --ink-800:#122A44; --ink-700:#1C3A57; --ink-600:#2C4F70;
  --amber-500:#E8A33D; --amber-600:#C97F1E; --amber-100:#FBEBD2;
  --paper-50:#F6F7F5; --paper-100:#EFF1EC; --paper-0:#FFFFFF;
  --success-600:#2F8F5B; --success-100:#E1F1E8;
  --danger-600:#C4483A; --danger-100:#F8E4E1;
  --warn-600:#B8801F; --warn-100:#FBEED8;
  --line-200:#E1E4DE; --text-900:#111827; --text-600:#54606C; --text-400:#8A93A0;
  --radius:10px; --shadow-card:0 1px 2px rgba(11,31,51,.04), 0 4px 14px rgba(11,31,51,.06);
  --navy:var(--ink-900); --gold:var(--amber-500); --teal:var(--ink-600);
  --bg:var(--paper-50); --ok:var(--success-600); --warn:var(--warn-600); --bad:var(--danger-600); --muted:var(--text-600);
}
*{box-sizing:border-box;}
body{
  font-family:'IBM Plex Sans', -apple-system, sans-serif;
  margin:0;background:var(--paper-50);color:var(--text-900);-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Space Grotesk', sans-serif;}

.brandmark{display:flex;align-items:center;gap:10px;}
.brand-word{display:flex;flex-direction:column;line-height:1.05;}
.brand-word .b1{font-family:'Space Grotesk';font-weight:700;font-size:16px;letter-spacing:.2px;color:#fff;}
.brand-word .b2{font-family:'IBM Plex Mono';font-size:9px;letter-spacing:2px;color:var(--amber-500);text-transform:uppercase;margin-top:1px;}

#auth-outer{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(circle at 15% 20%, rgba(232,163,61,.10), transparent 40%),
             radial-gradient(circle at 85% 85%, rgba(28,58,87,.10), transparent 45%), var(--ink-900);
}
.login-card{width:100%;max-width:420px;background:var(--paper-0);border-radius:16px;padding:36px 32px;box-shadow:0 20px 60px rgba(0,0,0,.35);}
.login-top{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:22px;text-align:center;}
.login-top .brand-word{align-items:center;}
.login-top .b1{color:var(--ink-900);}
.login-tag{font-size:12px;color:var(--text-600);line-height:1.5;}

header{
  height:60px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;border-bottom:1px solid var(--line-200);background:var(--paper-0);
}
header h1{font-size:16px;margin:0;font-weight:600;font-family:'Space Grotesk';color:var(--ink-900);}
header .sub{font-size:11.5px;color:var(--text-400);margin-top:1px;}

#shell{display:flex;min-height:100vh;}
.sidebar{width:220px;flex:none;background:var(--ink-900);color:#fff;display:flex;flex-direction:column;padding:18px 12px;}
.sidebar .brandmark{padding:2px 8px 18px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:10px;}
.main-col{flex:1;min-width:0;}
.container{max-width:1120px;margin:24px auto;padding:0 20px 60px;}

.tab{display:block;padding:9px 12px;border-radius:8px;font-size:13px;color:rgba(255,255,255,.72);margin-bottom:2px;cursor:pointer;transition:background .12s,color .12s;}
.tab:hover{background:rgba(255,255,255,.06);color:#fff;}
.tab.active{background:var(--amber-500);color:var(--ink-900);font-weight:600;}
.tabs{display:flex;flex-direction:column;gap:0;margin-bottom:0;}
.authtab{flex:1;text-align:center;color:var(--text-600);border:1.5px solid var(--line-200);background:var(--paper-0);}
.authtab.active{background:var(--ink-900);color:#fff;border-color:var(--ink-900);}

.card{background:var(--paper-0);border:1px solid var(--line-200);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:20px;margin-bottom:16px;}
input,select,textarea,button{font-family:inherit;font-size:14px;}
input,select,textarea{width:100%;padding:9px 11px;border:1.5px solid var(--line-200);border-radius:7px;margin-bottom:10px;background:var(--paper-50);color:var(--text-900);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber-500);background:var(--paper-0);}
label{font-size:11.5px;color:var(--text-600);display:block;margin-bottom:5px;font-weight:600;letter-spacing:.2px;}
button{background:var(--ink-900);color:#fff;border:none;padding:9px 16px;border-radius:7px;cursor:pointer;font-weight:600;transition:background .15s;}
button:hover{background:var(--ink-700);}
button.secondary{background:transparent;color:var(--ink-900);border:1.5px solid var(--ink-900);}
button.secondary:hover{background:var(--ink-900);color:#fff;}
.row{display:flex;gap:20px;flex-wrap:wrap;}

table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--paper-100);vertical-align:top;}
th{color:var(--text-400);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;background:var(--paper-50);}
tr:hover td{background:var(--paper-50);}

.badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:10.5px;font-weight:700;color:#fff;letter-spacing:.2px;}
.badge.pendiente{background:var(--danger-600);}
.badge.en_proceso{background:var(--warn-600);}
.badge.cumple{background:var(--success-600);}
.badge.no_aplica{background:var(--text-400);}
.badge.obligacion{background:var(--ink-900);}
.badge.interpretacion{background:var(--ink-600);}
.badge.recomendacion{background:var(--text-400);}

.kpis{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap;}
.kpi{flex:1;min-width:150px;background:var(--paper-0);border:1px solid var(--line-200);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:16px 18px;}
.kpi .n{font-size:28px;font-weight:700;font-family:'Space Grotesk';color:var(--ink-900);}
.kpi .l{font-size:12px;color:var(--text-600);margin-top:2px;}

.err{color:var(--danger-600);font-size:12.5px;margin-bottom:8px;}
.muted{color:var(--text-400);font-size:12px;}
.art{font-family:'IBM Plex Mono';font-size:11px;color:var(--text-600);background:var(--paper-100);padding:2px 7px;border-radius:5px;}
select.estado-select{width:auto;margin:0;}

.ring-wrap{position:relative;width:130px;height:130px;flex:none;}
.ring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ring-num .n{font-size:26px;font-weight:700;font-family:'Space Grotesk';color:var(--ink-900);line-height:1;}
.ring-num .l{font-size:9.5px;color:var(--text-400);letter-spacing:.5px;text-transform:uppercase;margin-top:3px;}

.fase-card{border-left:4px solid var(--line-200);padding-left:16px;margin-bottom:18px;}
.fase-card.completa{border-left-color:var(--success-600);}
.fase-card.actual{border-left-color:var(--amber-500);}
.fase-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.fase-head h4{margin:0;font-size:14px;}
.fase-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--paper-100);color:var(--text-600);font-size:11px;font-weight:700;margin-right:8px;}
.fase-card.actual .fase-num{background:var(--amber-500);color:var(--ink-900);}
.fase-card.completa .fase-num{background:var(--success-600);color:#fff;}
.fase-desc{font-size:12px;color:var(--text-600);margin-bottom:10px;line-height:1.5;}

.semaforo{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:11px;font-weight:700;color:#fff;letter-spacing:.3px;}
.semaforo.verde{background:var(--success-600);}
.semaforo.amarillo{background:var(--warn-600);}
.semaforo.rojo{background:var(--danger-600);}
.semaforo-dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none;}

.kpi.rojo{border-left:4px solid var(--danger-600);}
.kpi.amarillo{border-left:4px solid var(--warn-600);}
.kpi.verde{border-left:4px solid var(--success-600);}

.centro-card{border:1px solid var(--line-200);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;}
.centro-card .ct-nombre{font-weight:600;font-size:14px;}
.centro-card .ct-tipo{display:inline-block;margin-top:3px;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-600);background:var(--paper-100);padding:2px 8px;border-radius:5px;}
.centro-card .ct-actions{display:flex;gap:8px;}
.centro-card.inactivo{opacity:.55;}

.tag-sucursal{font-size:10.5px;color:var(--text-600);background:var(--paper-100);padding:2px 8px;border-radius:5px;}