@charset "UTF-8";
/* ============================================================
   SICOST v0.6 — Componentes de interfaz
   ACOSTA IPS · depende de theme-v06.css (tokens)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--tamano-base);
  line-height: var(--alto-linea-texto);
  color: var(--texto-principal);
  background: var(--fondo-app);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  line-height: var(--alto-linea-titulo);
  color: var(--azul-navy);
  margin: 0;
}
h1 { font-size: var(--tamano-h1); font-weight: var(--peso-bold); letter-spacing: -0.01em; }
h2 { font-size: var(--tamano-h2); font-weight: var(--peso-semibold); }
h3 { font-size: var(--tamano-h3); font-weight: var(--peso-medium); }
p  { margin: 0; }

/* ============================================================
   1. LOGIN
   ============================================================ */
#loginView {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(75,0,130,.30), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(212,175,55,.18), transparent 55%),
    var(--azul-navy);
}
/* Escenario interno: el layout no depende del display de #loginView,
   porque el JS de la aplicación lo alterna con estilos en línea. */
.loginStage {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--esp-5);
}
#loginView::before {
  content: "";
  position: fixed; inset: 0;
  background: var(--logo-sicost-blanco) no-repeat center;
  background-size: min(520px, 60vw);
  opacity: .05;
  pointer-events: none;
}
.loginCard {
  position: relative;
  width: min(420px, 100%);
  background: var(--fondo-superficie);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg);
  padding: var(--esp-7) var(--esp-6) var(--esp-6);
  border-top: 4px solid var(--dorado);
}
.loginCard::before {
  content: "";
  display: block;
  height: 54px;
  margin: 0 auto var(--esp-5);
  background: var(--logo-sicost) no-repeat center;
  background-size: contain;
}
.loginCard h1 { font-size: 1.5rem; text-align: center; }
.loginCard > p {
  text-align: center;
  color: var(--texto-secundario);
  font-size: var(--tamano-small);
  margin: var(--esp-2) 0 var(--esp-5);
}
.loginCard .input { margin-bottom: var(--esp-3); }
.loginCard .primary { margin-top: var(--esp-2); }
.loginError {
  margin-top: var(--esp-3);
  min-height: 1.2em;
  font-size: var(--tamano-small);
  color: var(--estado-riesgo-critico);
  text-align: center;
}
.loginFoot {
  margin-top: var(--esp-6);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--borde-sutil);
  display: flex; align-items: center; justify-content: center; gap: var(--esp-3);
}
.loginFoot img { height: 26px; width: auto; }
.loginFoot span { font-size: var(--tamano-micro); color: var(--texto-secundario); letter-spacing: .04em; }

/* ============================================================
   2. ESTRUCTURA DE LA APLICACIÓN
   ============================================================ */
/* Igual que en el login: la rejilla vive en un contenedor interno para que
   el JS pueda mostrar u ocultar #appView sin romper el layout. */
.appLayout, .loginStage { width: 100%; flex: 1 1 auto; }

.appLayout {
  display: grid;
  grid-template-columns: var(--ancho-sidebar) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  display: flex;
  flex-direction: column;
  background: linear-gradient(175deg, var(--morado-institucional) 0%, #33005A 100%);
  color: var(--texto-sobre-oscuro);
  position: sticky; top: 0;
  height: 100vh;
}
.sidebar__brand {
  padding: var(--esp-5) var(--esp-4) var(--esp-4);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.sidebar__brand img { width: 100%; max-width: 168px; height: auto; display: block; }

.sidebar__nav { flex: 1; overflow-y: auto; padding: var(--esp-4) var(--esp-3); }
.sidebar__group {
  font-family: var(--fuente-titulo);
  font-size: var(--tamano-micro);
  font-weight: var(--peso-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  padding: var(--esp-4) var(--esp-3) var(--esp-2);
}
.sidebar__foot {
  padding: var(--esp-4);
  border-top: 1px solid rgba(255,255,255,.12);
  text-align: center;
}
.sidebar__foot::before {
  content: "";
  display: block; height: 2px; width: 44px;
  margin: 0 auto var(--esp-4);
  background: var(--dorado);
}
.sidebar__quote {
  font-family: var(--fuente-premium);
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(255,255,255,.82);
  margin-bottom: var(--esp-4);
}
.sidebar__foot img { width: 132px; height: auto; opacity: .95; }

/* Navegación (reutiliza .tabs / .tab del marcado original) */
.tabs { display: flex; flex-direction: column; gap: 2px; }
.tab, .tab--soon {
  display: flex; align-items: center; gap: var(--esp-3);
  width: 100%;
  padding: 10px var(--esp-3);
  border: 0; border-radius: var(--radio-md);
  background: transparent;
  color: rgba(255,255,255,.86);
  font-family: var(--fuente-titulo);
  font-size: 0.875rem;
  font-weight: var(--peso-medium);
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.tab::before, .tab--soon::before {
  content: "";
  width: 18px; height: 18px; flex: 0 0 18px;
  background: currentColor;
  -webkit-mask: var(--ico) no-repeat center / contain;
          mask: var(--ico) no-repeat center / contain;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}
.tab[data-nav="dashboard"]::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E"); }
.tab[data-nav="costing"]::before  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 7h8M8 11h8M8 15h4'/%3E%3C/svg%3E"); }
.tab[data-nav="clients"]::before  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3Cpath d='M16 11a3 3 0 100-6'/%3E%3Cpath d='M18 20c0-2.2-.9-4.2-2.3-5.6'/%3E%3C/svg%3E"); }

.tab:hover { background: rgba(255,255,255,.10); color: #fff; }
.tab.active {
  background: var(--fondo-superficie);
  color: var(--morado-institucional);
  font-weight: var(--peso-semibold);
  box-shadow: var(--sombra-sm);
}
.tab:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }

.tab--soon {
  opacity: .45;
  cursor: not-allowed;
}
.tab--soon:hover { background: transparent; color: rgba(255,255,255,.86); }
.tab--soon::after {
  content: "pronto";
  margin-left: auto;
  font-family: var(--fuente-texto);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--radio-full);
  padding: 1px 7px;
}

/* ---------- Columna derecha ---------- */
.shell { display: flex; flex-direction: column; min-width: 0; }

header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--esp-4);
  height: var(--alto-header);
  padding: 0 var(--esp-5);
  background: var(--fondo-header);
  border-bottom: 1px solid var(--borde-sutil);
}
.brand {
  font-family: var(--fuente-marca);
  font-weight: var(--peso-bold);
  font-size: 0.9375rem;
  letter-spacing: var(--tracking-marca);
  text-transform: uppercase;
  color: var(--azul-navy);
  display: flex; align-items: baseline; gap: var(--esp-3);
}
.brand small {
  font-family: var(--fuente-texto);
  font-weight: var(--peso-regular);
  font-size: var(--tamano-small);
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto-secundario);
}
.user {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--esp-3);
}
#userName {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-semibold);
  font-size: var(--tamano-small);
  color: var(--azul-navy);
}
#userName::before {
  content: "";
  display: inline-block;
  width: 28px; height: 28px;
  margin-right: var(--esp-2);
  vertical-align: -9px;
  border-radius: var(--radio-full);
  background: var(--lila-suave);
  border: 1px solid var(--borde-sutil);
}

.workspace {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ancho-panel-acosti);
  gap: var(--esp-5);
  align-items: start;
  padding: var(--esp-5);
  max-width: var(--ancho-maximo-contenido);
  width: 100%;
}
main { min-width: 0; }

/* ============================================================
   3. VISTAS Y CABECERAS DE PÁGINA
   ============================================================ */
.view { display: none; }
.view.active { display: block; animation: aparecer .18s ease both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.pageTitle { margin-bottom: var(--esp-5); }
.pageTitle h1 { font-size: 1.625rem; }
.pageTitle p { color: var(--texto-secundario); margin-top: var(--esp-1); }

.sectionTitle {
  font-family: var(--fuente-titulo);
  font-size: var(--tamano-micro);
  font-weight: var(--peso-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--morado-institucional);
  margin: var(--esp-6) 0 var(--esp-3);
  padding-bottom: var(--esp-2);
  border-bottom: 1px solid var(--borde-sutil);
}

/* ============================================================
   4. REJILLAS Y TARJETAS
   ============================================================ */
.grid { display: grid; gap: var(--esp-4); margin-bottom: var(--esp-4); }
.grid.two  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpiGrid   { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  background: var(--fondo-superficie);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
  padding: var(--esp-5);
  margin-bottom: var(--esp-4);
}
.card h2 { font-size: var(--tamano-h3); font-weight: var(--peso-semibold); }
.card > p { color: var(--texto-secundario); font-size: var(--tamano-small); margin-top: var(--esp-1); }
.card > h2 + p { margin-bottom: var(--esp-4); }

.kpi {
  position: relative;
  background: var(--fondo-superficie);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
  padding: var(--esp-4) var(--esp-4) var(--esp-4) var(--esp-5);
  overflow: hidden;
}
.kpi::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--morado-institucional);
}
.kpi:nth-child(4n+2)::before { background: var(--azul-navy); }
.kpi:nth-child(4n+3)::before { background: var(--turquesa-medico); }
.kpi:nth-child(4n)::before   { background: var(--dorado); }
.kpi .label {
  font-size: var(--tamano-micro);
  font-weight: var(--peso-semibold);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--texto-secundario);
}
.kpi .value {
  font-family: var(--fuente-titulo);
  font-size: 1.75rem;
  font-weight: var(--peso-bold);
  color: var(--azul-navy);
  margin-top: var(--esp-2);
  line-height: 1.1;
}

.miniStats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); margin-bottom: var(--esp-4); }
.mini {
  background: var(--gris-claro);
  border-radius: var(--radio-md);
  padding: var(--esp-3) var(--esp-4);
}
.sub { color: var(--texto-secundario); font-size: var(--tamano-small); }
.notice {
  background: var(--lila-suave);
  border-left: 3px solid var(--morado-institucional);
  border-radius: var(--radio-sm);
  padding: var(--esp-3) var(--esp-4);
  font-size: var(--tamano-small);
  margin-bottom: var(--esp-4);
}

/* ============================================================
   5. ANÁLISIS / RESULTADOS
   ============================================================ */
.hidden { display: none !important; }
#analysisBox:not(.hidden) { display: block; }

.analysisHero {
  background: linear-gradient(135deg, var(--azul-navy) 0%, #16305F 100%);
  color: var(--texto-sobre-oscuro);
  border-radius: var(--radio-lg);
  padding: var(--esp-5);
  margin-bottom: var(--esp-4);
  border-top: 3px solid var(--dorado);
}
.analysisHero h2 { color: #fff; }
.analysisHero strong { color: var(--dorado); font-family: var(--fuente-titulo); }
.analysisHero .label, .analysisHero .sub { color: rgba(255,255,255,.72); }

.analysisGrid { display: grid; gap: var(--esp-4); }
.analysisMetric {
  background: var(--fondo-superficie);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-md);
  padding: var(--esp-4);
}
.analysisMetric .value {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-bold);
  font-size: 1.25rem;
  color: var(--azul-navy);
}
.value.mini { font-size: 1.05rem; background: none; padding: 0; }

.scenarios { width: 100%; border-collapse: collapse; font-size: var(--tamano-small); }
.scenarios th, .scenarios td {
  padding: 10px var(--esp-3);
  text-align: left;
  border-bottom: 1px solid var(--borde-sutil);
}
.scenarios th {
  font-family: var(--fuente-titulo);
  font-size: var(--tamano-micro);
  font-weight: var(--peso-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-secundario);
  background: var(--gris-claro);
}
.scenarios tbody tr:hover { background: var(--gris-claro); }

/* ============================================================
   6. FORMULARIOS
   ============================================================ */
.formGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--esp-4); }
.formGroup { display: flex; flex-direction: column; gap: 6px; }
.label {
  font-size: var(--tamano-small);
  font-weight: var(--peso-semibold);
  color: var(--azul-navy);
}
.input, select, textarea {
  width: 100%;
  font-family: var(--fuente-texto);
  font-size: var(--tamano-base);
  color: var(--texto-principal);
  background: var(--fondo-superficie);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-md);
  padding: 10px var(--esp-3);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 90px; resize: vertical; }
.input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--morado-institucional);
  box-shadow: 0 0 0 3px rgba(75,0,130,.14);
}
.input::placeholder { color: #9AA4B2; }

.saveBar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-5);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--borde-sutil);
}

button {
  font-family: var(--fuente-titulo);
  font-size: 0.875rem;
  font-weight: var(--peso-semibold);
  border-radius: var(--radio-md);
  border: 1px solid var(--borde-sutil);
  background: var(--fondo-superficie);
  color: var(--azul-navy);
  padding: 10px var(--esp-4);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
button:hover { border-color: var(--azul-grisaceo); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--morado-institucional); outline-offset: 2px; }

.primary {
  background: var(--morado-institucional);
  border-color: var(--morado-institucional);
  color: #fff;
}
.primary:hover { background: #3B0068; border-color: #3B0068; }
.full { width: 100%; }

.logout {
  background: transparent;
  border-color: var(--borde-sutil);
  color: var(--texto-secundario);
  padding: 7px var(--esp-3);
  font-size: var(--tamano-small);
}
.logout:hover { color: var(--estado-riesgo-critico); border-color: var(--estado-riesgo-critico); }

/* ============================================================
   7. CLIENTES
   ============================================================ */
.clientGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--esp-4); }
.clientGrid > * {
  background: var(--fondo-superficie);
  border: 1px solid var(--borde-sutil);
  border-left: 3px solid var(--morado-institucional);
  border-radius: var(--radio-md);
  padding: var(--esp-4);
  box-shadow: var(--sombra-sm);
}
.clientGrid strong { font-family: var(--fuente-titulo); color: var(--azul-navy); }

/* ============================================================
   8. PANEL COPILOTO — PERCIVAL
   ============================================================ */
.copilot {
  position: sticky; top: calc(var(--alto-header) + var(--esp-5));
  background: var(--fondo-superficie);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md);
  overflow: hidden;
}
.copilot__head {
  background: linear-gradient(160deg, var(--morado-institucional), #3B0068);
  padding: var(--esp-5) var(--esp-4) var(--esp-4);
  text-align: center;
  color: #fff;
}
.copilot__avatar {
  width: 92px; height: 92px;
  margin: 0 auto var(--esp-3);
  border-radius: var(--radio-full);
  background: #fff var(--percival-avatar) center/86% no-repeat;
  border: 3px solid var(--dorado);
}
.copilot__head h2 { color: #fff; font-size: var(--tamano-h3); }
.copilot__head p { color: rgba(255,255,255,.80); font-size: var(--tamano-small); margin-top: var(--esp-2); }
.copilot__body { padding: var(--esp-4); }
.copilot__label {
  font-family: var(--fuente-titulo);
  font-size: var(--tamano-micro);
  font-weight: var(--peso-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-secundario);
  margin-bottom: var(--esp-3);
}
.copilot__links { display: flex; flex-direction: column; gap: var(--esp-2); }
.copilot__links button {
  width: 100%;
  text-align: left;
  background: var(--gris-claro);
  border-color: transparent;
}
.copilot__links button:hover { background: var(--lila-suave); border-color: var(--morado-institucional); }
.copilot__note {
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--borde-sutil);
  font-size: var(--tamano-micro);
  color: var(--texto-secundario);
}
.copilot__foot {
  padding: var(--esp-3) var(--esp-4) var(--esp-4);
  text-align: center;
}
.copilot__foot img { height: 22px; width: auto; opacity: .8; }

/* ============================================================
   9. PIE INSTITUCIONAL
   ============================================================ */
.appFoot {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--esp-3);
  margin-top: var(--esp-4);
  padding: var(--esp-4) 0 0;
  border-top: 1px solid var(--borde-sutil);
  font-size: var(--tamano-micro);
  color: var(--texto-secundario);
}
.appFoot img { height: 24px; width: auto; }

/* ============================================================
   10. RESPONSIVO
   ============================================================ */
@media (max-width: 1280px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .copilot { position: static; }
}
@media (max-width: 1024px) {
  .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .appLayout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .sidebar__foot { display: none; }
  .tabs { flex-direction: row; flex-wrap: wrap; }
  .tab { width: auto; }
  .tab--soon { display: none; }
  .sidebar__group { display: none; }
  .workspace { padding: var(--esp-4); }
  .grid.two, .grid.four { grid-template-columns: minmax(0, 1fr); }
  header { padding: 0 var(--esp-4); }
  .brand small { display: none; }
}


/* ============================================================
   11. COMPONENTES GENERADOS POR EL JS
   (rankings, tarjetas de cliente, anillo de margen)
   ============================================================ */

/* ---------- Rankings ---------- */
.rankRow {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--borde-sutil);
}
.rankRow:last-child { border-bottom: 0; }
.rankNum {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--radio-full);
  background: var(--lila-suave);
  color: var(--morado-institucional);
  font-family: var(--fuente-titulo);
  font-size: var(--tamano-micro);
  font-weight: var(--peso-bold);
}
.rankRow > div:nth-child(2) { min-width: 0; flex: 1; }
.rankName {
  font-size: var(--tamano-small);
  font-weight: var(--peso-semibold);
  color: var(--azul-navy);
  line-height: 1.3;
}
.rankCode {
  font-size: var(--tamano-micro);
  color: var(--texto-secundario);
  letter-spacing: .04em;
  margin-top: 2px;
}
.margin {
  flex: 0 0 auto;
  font-family: var(--fuente-titulo);
  font-size: 0.9375rem;
  font-weight: var(--peso-bold);
  padding: 3px 10px;
  border-radius: var(--radio-full);
  white-space: nowrap;
}
.margin.good    { color: var(--verde-salud);            background: rgba(46,112,50,.10); }
.margin.warning { color: #8A6100;                        background: rgba(212,175,55,.18); }
.margin.bad     { color: var(--estado-riesgo-critico);   background: rgba(198,40,40,.10); }

/* ---------- Tarjetas de cliente ---------- */
.clientCard {
  display: flex; flex-direction: column;
  background: var(--fondo-superficie);
  border: 1px solid var(--borde-sutil);
  border-left: 3px solid var(--morado-institucional);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-sm);
  padding: var(--esp-4);
  transition: box-shadow .15s ease, transform .15s ease;
}
.clientCard:hover { box-shadow: var(--sombra-md); transform: translateY(-2px); }
.clientCard > button, .clientCard .primary { margin-top: auto; }
.clientTop { display: flex; align-items: center; gap: var(--esp-3); min-height: 34px; }
.clientLogo { height: 26px; width: auto; max-width: 92px; object-fit: contain; }
.clientName {
  font-family: var(--fuente-titulo);
  font-size: var(--tamano-small);
  font-weight: var(--peso-semibold);
  color: var(--azul-navy);
  line-height: 1.25;
}

/* ---------- Anillo de margen ---------- */
.ringWrap { display: flex; justify-content: center; margin: var(--esp-4) 0; }
.ring {
  --p: 0;
  position: relative;
  width: 88px; height: 88px;
  border-radius: var(--radio-full);
  display: grid; place-items: center;
  background: conic-gradient(var(--morado-institucional) calc(var(--p) * 1%), var(--gris-claro) 0);
}
.ring::before {
  content: "";
  position: absolute; inset: 9px;
  border-radius: var(--radio-full);
  background: var(--fondo-superficie);
}
.ring > span {
  position: relative;
  font-family: var(--fuente-titulo);
  font-size: 1rem;
  font-weight: var(--peso-bold);
  color: var(--azul-navy);
}

/* ---------- Mini estadísticas ---------- */
.mini { display: flex; flex-direction: column; gap: 2px; }
.mini label {
  font-size: var(--tamano-micro);
  font-weight: var(--peso-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-secundario);
}
.mini strong {
  font-family: var(--fuente-titulo);
  font-size: 0.9375rem;
  color: var(--azul-navy);
}

/* ---------- Campos de costeo generados ---------- */
.costField {
  width: 100%;
  font-family: var(--fuente-texto);
  font-size: var(--tamano-base);
  color: var(--texto-principal);
  background: var(--fondo-superficie);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-md);
  padding: 10px var(--esp-3);
}
.costField:focus {
  outline: none;
  border-color: var(--morado-institucional);
  box-shadow: 0 0 0 3px rgba(75,0,130,.14);
}

/* ---------- Percival en la cabecera del tablero ---------- */
@media (min-width: 1100px) {
  #dashboard .pageTitle {
    position: relative;
    min-height: 104px;
    padding-right: 180px;
  }
  #dashboard .pageTitle::after {
    content: "";
    position: absolute; right: 8px; bottom: -8px;
    width: 160px; height: 132px;
    background: var(--percival) no-repeat right bottom / contain;
    pointer-events: none;
  }
}

/* ============================================================
   12. MÓDULOS DE CONSULTA v0.7
   Tablas, filtros, chips de estado y paginación
   ============================================================ */

.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3);
  margin-bottom: var(--esp-4);
}
.toolbar .input, .toolbar select { width: auto; min-width: 170px; max-width: 260px; flex: 0 1 210px; }
.toolbar .buscar { flex: 2 1 260px; min-width: 220px; max-width: none; }
.toolbar__count {
  margin-left: auto;
  font-size: var(--tamano-small);
  font-weight: var(--peso-semibold);
  color: var(--texto-secundario);
  white-space: nowrap;
}

.tablaWrap {
  overflow-x: auto;
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-md);
  background: var(--fondo-superficie);
}
.tabla { width: 100%; border-collapse: collapse; font-size: var(--tamano-small); }
.tabla th {
  position: sticky; top: 0; z-index: 1;
  background: var(--gris-claro);
  font-family: var(--fuente-titulo);
  font-size: var(--tamano-micro);
  font-weight: var(--peso-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-secundario);
  text-align: left;
  padding: 10px var(--esp-3);
  border-bottom: 1px solid var(--borde-sutil);
  white-space: nowrap;
}
.tabla td {
  padding: 10px var(--esp-3);
  border-bottom: 1px solid var(--borde-sutil);
  vertical-align: top;
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: #FAFBFC; }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla .fuerte { font-family: var(--fuente-titulo); font-weight: var(--peso-semibold); color: var(--azul-navy); }
.tabla--compacta td, .tabla--compacta th { padding: 8px var(--esp-3); }

.celdaNombre {
  font-weight: var(--peso-semibold);
  color: var(--azul-navy);
  line-height: 1.3;
  max-width: 420px;
}
.celdaSub {
  font-size: var(--tamano-micro);
  color: var(--texto-secundario);
  margin-top: 2px;
}
.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--tamano-micro);
  letter-spacing: .02em;
}

.chip {
  display: inline-block;
  font-family: var(--fuente-titulo);
  font-size: 10px;
  font-weight: var(--peso-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radio-full);
  white-space: nowrap;
}
.chip--neutro    { background: var(--gris-claro);            color: var(--texto-secundario); }
.chip--ok        { background: rgba(46,112,50,.10);          color: var(--verde-salud); }
.chip--aviso     { background: rgba(212,175,55,.18);         color: #8A6100; }
.chip--riesgo    { background: rgba(198,40,40,.10);          color: var(--estado-riesgo-critico); }
.chip--pendiente { background: var(--lila-suave);            color: var(--morado-institucional); }

.pager {
  display: flex; align-items: center; gap: var(--esp-3);
  margin-top: var(--esp-4);
}
.pager__info {
  font-size: var(--tamano-small);
  color: var(--texto-secundario);
  margin-right: auto;
}
.pager__btn { padding: 7px var(--esp-4); font-size: var(--tamano-small); }
.pager__btn[disabled] { opacity: .4; cursor: not-allowed; }

.vacio {
  padding: var(--esp-7) var(--esp-4);
  text-align: center;
  color: var(--texto-secundario);
  font-size: var(--tamano-small);
  background: var(--fondo-superficie);
  border: 1px dashed var(--borde-sutil);
  border-radius: var(--radio-md);
}
.vacio--error {
  color: var(--estado-riesgo-critico);
  border-color: rgba(198,40,40,.35);
  background: rgba(198,40,40,.04);
}

/* Íconos de los módulos nuevos en el sidebar */
.tab[data-nav="services"]::before   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M4 7.5l8 4.5 8-4.5M12 12v9'/%3E%3C/svg%3E"); }
.tab[data-nav="tariffs"]::before    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4L12 22l-9-9V4h9z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.4'/%3E%3C/svg%3E"); }
.tab[data-nav="analytics"]::before  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); }
.tab[data-nav="parameters"]::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1'/%3E%3C/svg%3E"); }
.tab[data-nav="audit"]::before      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h8l4 4v14H9z'/%3E%3Cpath d='M17 3v4h4'/%3E%3Cpath d='M3 8v13h6'/%3E%3Cpath d='M12 12h5M12 16h5'/%3E%3C/svg%3E"); }

@media (max-width: 860px) {
  .toolbar .input, .toolbar select { min-width: 0; width: 100%; }
  .toolbar__count { margin-left: 0; }
  .celdaNombre { max-width: 220px; }
}

/* ============================================================
   13. ACCIONES EN LA TARJETA DE CLIENTE
   ============================================================ */
.clientCard__acciones {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-2);
  margin-top: auto;
  padding-top: var(--esp-2);
}
.clientCard__acciones > button {
  width: 100%;
  font-size: var(--tamano-small);
}
.btnTarifas {
  background: var(--gris-claro);
  border-color: transparent;
  color: var(--azul-navy);
}
.btnTarifas:hover:not([disabled]) {
  background: var(--lila-suave);
  border-color: var(--morado-institucional);
  color: var(--morado-institucional);
}
.btnTarifas[disabled] {
  opacity: .45;
  cursor: not-allowed;
  background: transparent;
  border-color: var(--borde-sutil);
}