@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --fondo: #0B0B1F;
  --superficie: #14142E;
  --superficie-alta: #1A1A38;
  --borde: #2A2A52;
  --texto: #EDEEF7;
  --texto-muted: #9091B5;
  --acento: #8B5CF6;
  --acento-azul: #4D89F5;
  --acento-suave: #241D42;
  --positivo: #4FAE8E;
  --error: #E2665A;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

h1, h2, h3, .display {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

a { color: var(--acento); text-decoration: none; }

/* ---------- Login ---------- */

.login-wrap {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 100vh;
}

.login-showcase {
  background: linear-gradient(160deg, #17173A 0%, #0B0B1F 100%);
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--borde);
}

.brand {
  display: flex;
  align-items: center;
}

.logo-mark {
  height: 38px;
  width: auto;
  display: block;
}

.logo-mark-lg {
  height: 64px;
}

.marca-texto {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--texto);
  letter-spacing: 0.01em;
}

.marca-texto .ai {
  color: var(--acento-azul);
}

.kpi-mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 40px 0;
}

.kpi-card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 20px;
}

.kpi-card .valor {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--acento);
}

.kpi-card .etiqueta {
  color: var(--texto-muted);
  font-size: 13px;
  margin-top: 4px;
}

.showcase-quote {
  color: var(--texto-muted);
  font-size: 14px;
  max-width: 380px;
}

.showcase-encabezado {
  text-align: center;
}

.showcase-slogan {
  display: inline-block;
  border: 1px solid var(--acento);
  border-radius: 16px;
  padding: 18px 28px;
  color: var(--texto);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.5;
  text-align: center;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 12px;
  margin: 32px 0;
}

.feature-item {
  text-align: center;
}

.feature-icono {
  width: 46px;
  height: 46px;
  margin: 0 auto 10px;
  border-radius: 12px;
  background: var(--acento-suave);
  color: var(--acento);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icono svg {
  width: 24px;
  height: 24px;
}

.feature-etiqueta {
  font-size: 12px;
  color: var(--texto-muted);
  line-height: 1.4;
}

.placeholder-proximamente {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-muted);
  font-size: 13px;
  text-align: center;
  border: 1px dashed var(--borde);
  border-radius: 6px;
}

/* ---------- Calendario tributario ---------- */

.calendario-encabezado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.calendario-controles {
  display: flex;
  align-items: center;
  gap: 10px;
}

.calendario-controles select {
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--texto);
  font-size: 13px;
  font-family: inherit;
}

#etiqueta-mes-actual {
  font-size: 14px;
  font-weight: 500;
  min-width: 130px;
  text-align: center;
}

.btn-nav-mes {
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: 6px;
  color: var(--texto);
  width: 30px;
  height: 30px;
  font-size: 16px;
  cursor: pointer;
}

.btn-nav-mes:hover { border-color: var(--acento); color: var(--acento); }

.calendario-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendario-dia-nombre {
  text-align: center;
  font-size: 12px;
  color: var(--texto-muted);
  text-transform: uppercase;
  padding-bottom: 6px;
}

.calendario-celda {
  min-height: 84px;
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calendario-celda.vacia {
  background: transparent;
  border: none;
}

.calendario-celda.hoy { border-color: var(--acento); }

.calendario-numero {
  font-size: 12px;
  color: var(--texto-muted);
  font-weight: 500;
}

.calendario-etiqueta {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendario-etiqueta.promapan-sas { background: var(--acento); }
.calendario-etiqueta.promapan-tulua-sas { background: var(--acento-azul); }

@media (max-width: 900px) {
  .calendario-celda { min-height: 60px; }
  .calendario-etiqueta { font-size: 9px; }
}

.logo-hero {
  display: block;
  height: 110px;
  width: auto;
  margin: 0 auto 20px;
}

.login-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.login-form {
  width: 100%;
  max-width: 360px;
}

.login-form h1 {
  font-size: 26px;
  margin-bottom: 6px;
}

.login-form .subtitulo {
  color: var(--texto-muted);
  font-size: 14px;
  margin-bottom: 32px;
}

.campo {
  margin-bottom: 18px;
}

.campo label {
  display: block;
  font-size: 13px;
  color: var(--texto-muted);
  margin-bottom: 6px;
}

.campo input {
  width: 100%;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 11px 14px;
  color: var(--texto);
  font-size: 14px;
  font-family: inherit;
}

.campo input:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}

.error-mensaje {
  color: var(--error);
  font-size: 13px;
  margin-top: -8px;
  margin-bottom: 16px;
  display: none;
}

.error-mensaje.visible { display: block; }
.error-mensaje.exito { color: var(--positivo); }

.btn-primario {
  width: 100%;
  background: var(--acento);
  color: #1A1305;
  border: none;
  border-radius: 6px;
  padding: 12px 14px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.btn-primario:hover { filter: brightness(1.08); }

.login-footer-link {
  margin-top: 20px;
  font-size: 13px;
  color: var(--texto-muted);
  text-align: center;
}

/* ---------- Dashboard shell ---------- */

.app-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}

.rail {
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
}

.rail .brand { margin-bottom: 32px; padding-left: 8px; }

.rail nav { display: flex; flex-direction: column; gap: 2px; }

.rail nav a {
  color: var(--texto-muted);
  font-size: 14px;
  padding: 9px 10px;
  border-radius: 6px;
}

.rail nav a.activo {
  background: var(--acento-suave);
  color: var(--acento);
  font-weight: 500;
}

.rail nav a:hover:not(.activo) { color: var(--texto); }

.nav-grupo-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--texto-muted);
  font-size: 14px;
  font-family: inherit;
  padding: 9px 10px;
  border-radius: 6px;
}

.nav-grupo-toggle:hover { color: var(--texto); }

.nav-grupo-toggle .chevron {
  font-size: 13px;
  transition: transform 0.15s ease;
}

.nav-grupo-toggle.abierto .chevron { transform: rotate(90deg); }

.nav-submenu {
  max-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-left: 14px;
  transition: max-height 0.2s ease;
}

.nav-submenu.abierto { max-height: 400px; }

.nav-submenu a {
  font-size: 13px;
  color: var(--texto-muted);
  padding: 7px 10px;
  border-radius: 6px;
}

.nav-submenu a:hover:not(.activo) { color: var(--texto); }

.nav-submenu a.activo {
  background: var(--acento-suave);
  color: var(--acento);
  font-weight: 500;
}

.rail-footer {
  margin-top: auto;
  font-size: 12px;
  color: var(--texto-muted);
  padding-left: 8px;
}

.main {
  padding: 28px 36px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.topbar h1 { font-size: 22px; }

.topbar .fecha { color: var(--texto-muted); font-size: 13px; }

.topbar-acciones {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn-actualizar {
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 8px 14px;
  color: var(--texto);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.btn-actualizar:hover:not(:disabled) { border-color: var(--acento); color: var(--acento); }
.btn-actualizar:disabled { opacity: 0.5; cursor: default; }

.topbar-resumen {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.topbar-resumen h1 { justify-self: start; }

.bienvenida-usuario {
  justify-self: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--texto);
}

.topbar-resumen .topbar-acciones { justify-self: end; }

@media (max-width: 900px) {
  .topbar-resumen {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
  }
  .topbar-resumen h1,
  .topbar-resumen .topbar-acciones { justify-self: center; }
}

.grid-widgets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.widget {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 20px;
}

.widget.span-2 { grid-column: span 2; }
.widget.span-4 { grid-column: span 4; }

.widget h3 {
  font-size: 13px;
  color: var(--texto-muted);
  font-weight: 500;
  margin-bottom: 12px;
}

.widget .valor-kpi {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 32px;
  font-weight: 700;
}

.widget .delta { font-size: 13px; color: var(--positivo); margin-top: 4px; }

/* ---------- Panel de usuarios ---------- */

.form-inline {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.form-inline input {
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--texto);
  font-size: 14px;
  font-family: inherit;
  flex: 1;
  min-width: 200px;
}

.form-inline input:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}

.btn-compacto {
  width: auto;
  padding: 10px 20px;
  white-space: nowrap;
}

.tabla-usuarios {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabla-usuarios th {
  text-align: left;
  color: var(--texto-muted);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
}

.tabla-usuarios td {
  padding: 12px;
  border-bottom: 1px solid var(--borde);
}

.tabla-usuarios tr:last-child td { border-bottom: none; }

.fila-total td {
  font-weight: 600;
  background: var(--superficie-alta);
  border-top: 2px solid var(--borde);
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.badge-activo { background: rgba(79, 174, 142, 0.15); color: var(--positivo); }
.badge-pendiente { background: rgba(232, 163, 61, 0.15); color: var(--acento); }

.tabla-usuarios input,
.tabla-usuarios select {
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 6px 8px;
  color: var(--texto);
  font-size: 13px;
  font-family: inherit;
  width: 100%;
}

/* ---------- Filtros e informes financieros ---------- */

.fila-filtros {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.campo-filtro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 160px;
}

.campo-filtro label {
  font-size: 12px;
  color: var(--texto-muted);
}

.campo-filtro input,
.campo-filtro select {
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 9px 10px;
  color: var(--texto);
  font-size: 14px;
  font-family: inherit;
}

.campo-filtro input:focus,
.campo-filtro select:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}

.delta-negativo { font-size: 13px; color: var(--error); margin-top: 4px; }

.tabs-nivel {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.tab-nivel {
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 7px 16px;
  color: var(--texto-muted);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.tab-nivel:hover { color: var(--texto); }

.tab-nivel.activo {
  background: var(--acento-suave);
  color: var(--acento);
  border-color: var(--acento);
  font-weight: 500;
}

/* ---------- Filtro multi-selección ---------- */

.multiselect {
  position: relative;
}

.multiselect-boton {
  width: 100%;
  text-align: left;
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 9px 10px;
  color: var(--texto);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

.multiselect-boton:hover { border-color: var(--acento); }

.multiselect-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 8px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.multiselect-panel.oculto { display: none; }

.multiselect-opcion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--texto);
  cursor: pointer;
}

.multiselect-opcion:hover { background: var(--superficie); }

.multiselect-opcion input { cursor: pointer; }

/* ---------- Estado de resultados ---------- */

.grid-3-columnas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.widget-destacado {
  border-top: 3px solid var(--acento);
}

@media (max-width: 900px) {
  .grid-3-columnas { grid-template-columns: 1fr; }
}

.boton-expandir {
  background: none;
  border: none;
  color: var(--acento);
  cursor: pointer;
  font-size: 13px;
  width: 18px;
  display: inline-block;
  padding: 0;
}

.espaciador-expandir {
  display: inline-block;
  width: 18px;
}

@media (max-width: 900px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-showcase { display: none; }
  .app-shell { grid-template-columns: 1fr; }
  .rail { display: none; }
  .grid-widgets { grid-template-columns: repeat(2, 1fr); }
  .widget.span-2, .widget.span-4 { grid-column: span 2; }
}