/* Guadaluz CRM — sistema de diseño base
   Herramienta interna de gestión: prioriza densidad de información legible y
   profesionalismo sobre efectos visuales (sin sombras de card, sin animaciones). */

:root {
  --color-bg: #FBF5EA;
  --color-surface: #FFFFFF;
  --color-text: #2B3E44;
  --color-accent: #F2A81D;
  --color-success: #1F6B3B;
  --color-secondary: #3F9FB0;
  --color-danger: #8B3A3A;
  --color-border: rgba(43, 62, 68, 0.15);
  --color-border-strong: rgba(43, 62, 68, 0.3);

  --font-ui: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --sidebar-width: 15rem;
  --radius: 0.375rem;
  --focus-ring: 0 0 0 3px rgba(242, 168, 29, 0.45);
}

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

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.75rem;
  color: var(--color-text);
}

h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.15rem; margin-top: 2rem; }
h3 { font-size: 1rem; margin-top: 1.5rem; }

p { margin: 0 0 0.75rem; }

a {
  color: var(--color-secondary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* --- Foco de teclado: siempre visible, nunca solo un cambio de color --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.sidebar-nav a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

/* ============ Layout: sidebar + contenido ============ */

.app-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-text);
  color: var(--color-bg);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.25rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}

.sidebar-brand svg { flex-shrink: 0; }

.brand-wordmark {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--color-bg);
}

.brand-wordmark small {
  display: block;
  font-weight: 400;
  font-size: 0.7rem;
  opacity: 0.65;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.sidebar-nav a {
  color: rgba(251, 245, 234, 0.75);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  text-decoration: none;
}

.sidebar-nav a:hover {
  color: var(--color-bg);
  background: rgba(251, 245, 234, 0.08);
  text-decoration: none;
}

.sidebar-nav a.active {
  color: var(--color-text);
  background: var(--color-accent);
  font-weight: 600;
}

.sidebar-group {
  margin-top: 0.15rem;
}

.sidebar-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(251, 245, 234, 0.75);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;
}

.sidebar-group summary::-webkit-details-marker { display: none; }

.sidebar-group summary:hover {
  color: var(--color-bg);
  background: rgba(251, 245, 234, 0.08);
}

.sidebar-group summary::after {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
  opacity: 0.7;
}

.sidebar-group[open] summary::after {
  transform: rotate(-135deg);
}

.sidebar-group-links {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-left: 0.6rem;
  margin-top: 0.15rem;
}

.sidebar-group-links a {
  display: block;
  color: rgba(251, 245, 234, 0.75);
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
  text-decoration: none;
}

.sidebar-group-links a:hover {
  color: var(--color-bg);
  background: rgba(251, 245, 234, 0.08);
  text-decoration: none;
}

.sidebar-group-links a.active {
  color: var(--color-text);
  background: var(--color-accent);
  font-weight: 600;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(251, 245, 234, 0.15);
}

.sidebar-footer form { margin: 0; }

.sidebar-footer .btn {
  width: 100%;
  background: transparent;
  color: rgba(251, 245, 234, 0.75);
  border: 1px solid rgba(251, 245, 234, 0.25);
}

.sidebar-footer .btn:hover {
  color: var(--color-bg);
  border-color: rgba(251, 245, 234, 0.5);
  background: rgba(251, 245, 234, 0.08);
}

.main-content {
  flex: 1;
  min-width: 0;
  padding: 2.25rem 2.5rem 4rem;
}

.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.page-header h1 { margin-bottom: 0; }

/* Agrupa las acciones (enlaces/botones/formularios) de un .page-header en un único bloque
   flex, para que "justify-content: space-between" del .page-header siempre reparta
   exactamente dos grupos (título | acciones) — nunca cada acción suelta por separado. */
.page-header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* Utilidad genérica para que un <form> de una sola acción (p. ej. desactivar/reactivar) se
   coloque en línea junto a otros botones sin envolver el contenido en un bloque aparte. */
.inline-form {
  display: inline-block;
}

/* ============ Botones ============ */

button,
.btn {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.2;
}

button,
.btn-primary {
  background: var(--color-accent);
  color: var(--color-text);
  border-color: var(--color-accent);
}

button:hover,
.btn-primary:hover {
  background: #dc9414;
  border-color: #dc9414;
  text-decoration: none;
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn-secondary:hover {
  background: rgba(43, 62, 68, 0.05);
  text-decoration: none;
}

.btn-danger {
  background: transparent;
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.btn-danger:hover {
  background: var(--color-danger);
  color: var(--color-bg);
  text-decoration: none;
}

/* Acción terciaria, bajo énfasis: sin relleno ni borde, solo texto — para acciones que no
   deben competir visualmente con la primaria/secundaria de la misma pantalla. */
.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: transparent;
}

.btn-ghost:hover {
  background: rgba(43, 62, 68, 0.05);
  text-decoration: none;
}

button:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-ghost:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

button:disabled:hover,
.btn-primary:disabled:hover,
.btn-secondary:disabled:hover,
.btn-danger:disabled:hover,
.btn-ghost:disabled:hover {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-copy {
  background: transparent;
  color: var(--color-secondary);
  border-color: transparent;
  padding: 0.1rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 500;
  vertical-align: middle;
}

.btn-copy:hover {
  background: rgba(63, 159, 176, 0.1);
  border-color: rgba(63, 159, 176, 0.3);
}

.btn-copy:disabled {
  color: var(--color-success);
  cursor: default;
}

/* ============ Formularios ============ */

form {
  max-width: 34rem;
}

form.form-wide { max-width: 48rem; }

label {
  display: block;
  font-weight: 500;
  font-size: 0.85rem;
  margin-top: 1rem;
  margin-bottom: 0.3rem;
}

input,
select,
textarea {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: 0.5rem 0.65rem;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-accent);
}

input.campo-error,
select.campo-error {
  border-color: var(--color-danger);
}

input[readonly] {
  background: rgba(43, 62, 68, 0.05);
  color: rgba(43, 62, 68, 0.55);
  cursor: not-allowed;
}

.error {
  display: block;
  color: var(--color-danger);
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-top: 1.25rem;
  padding: 0.9rem 1rem 1.1rem;
}

legend {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0 0.4rem;
  color: var(--color-text);
}

form .btn,
form button[type="submit"] {
  margin-top: 1.5rem;
}

/* ============ Autocompletado de cliente ============ */

.autocomplete-wrap {
  position: relative;
}

.autocomplete-list {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0.25rem 0 0;
  padding: 0.25rem 0;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  max-height: 14rem;
  overflow-y: auto;
}

.autocomplete-list li {
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.autocomplete-list li:hover,
.autocomplete-list li:focus-visible {
  background: rgba(63, 159, 176, 0.1);
  outline: none;
}

/* ============ Tablas ============ */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

thead th {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(43, 62, 68, 0.6);
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--color-border-strong);
  white-space: nowrap;
}

/* Encabezados de columna ordenables (Bloque 2) — icono discreto, visible solo en la columna
   activa; el resto de columnas ordenables solo lo muestran al pasar el ratón. */
th[data-ordenar] {
  cursor: pointer;
  user-select: none;
}

th[data-ordenar]:hover {
  color: var(--color-text);
}

th[data-ordenar]::after {
  content: '\21C5';
  display: inline-block;
  margin-left: 0.35em;
  opacity: 0;
  font-size: 0.9em;
}

th[data-ordenar]:hover::after {
  opacity: 0.4;
}

th[data-ordenar].orden-asc::after,
th[data-ordenar].orden-desc::after {
  opacity: 1;
}

th[data-ordenar].orden-asc::after {
  content: '\2191';
}

th[data-ordenar].orden-desc::after {
  content: '\2193';
}

tbody td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

tbody tr:hover {
  background: rgba(63, 159, 176, 0.06);
}

/* Sub-fila de detalle anidado bajo una fila principal (p. ej. retrocomisiones/ajustes de un
   contrato) — fondo tenue para distinguirla visualmente sin un borde extra. */
tr.subfila td {
  background: rgba(43, 62, 68, 0.03);
  padding: 0.4rem 0.75rem 0.6rem 2rem;
  font-size: 0.8rem;
}

tr.subfila ul {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
}

tr.subfila li {
  margin-bottom: 0.2rem;
}

/* Celda de checkbox de selección múltiple: toda la celda es clicable (no solo el cuadradito),
   y el propio checkbox se agranda para facilitar marcarlo con precisión. */
td.checkbox-cell {
  padding: 0;
}

td.checkbox-cell label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
}

td.checkbox-cell input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  cursor: pointer;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.85em;
}

/* Transformación puramente visual (como los badges de estado, ver más abajo) — el dato
   almacenado y el valor del Enum siguen en minúsculas, sin ningún cambio. */
.mayusculas {
  text-transform: uppercase;
}

/* ============ Badges de estado ============ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2em 0.65em 0.2em 0.5em;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  white-space: nowrap;
}

.badge-dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Sistema de color unificado, por significado — no por pantalla ni por modelo concreto.
   `badge_estado(valor)` (_macros.html) genera `badge-{{ valor }}` directamente a partir del
   valor real del Enum/estado derivado que sea (EstadoCliente, EstadoSuministro,
   EstadoLiquidacionComercializadora, EstadoLiquidacionComercial, EstadoLineaLiquidacion, y los
   estado_comercializadora/estado_comercial derivados de comisiones_consolidado_service.py) —
   así que cada valor real que exista en el dominio necesita su propia regla aquí. Mismos 4
   cubos de significado que ya usa el resto de la app (mini-stats del dashboard incluidos, ver
   más abajo): dorado = fase inicial/pendiente de acción; teal = en curso, ya confirmado pero
   no cerrado; verde = completado/positivo; granate = bloqueado/inválido/requiere corrección.

   Nota: "liquidada" (estado_comercial derivado) representa "ya incluida en una
   LiquidacionComercial" — la fase MÁS TEMPRANA de ese ciclo (antes de pendiente_factura/
   pagada), no un estado intermedio pese a lo que su nombre pueda sugerir — de ahí que vaya en
   el grupo dorado, igual que el "liquidado" real de LiquidacionComercial. */

/* Fase inicial / pendiente de acción (dorado) */
.badge-pendiente,
.badge-liquidado,
.badge-en_revision,
.badge-liquidada,
.badge-pendiente_revision {
  color: var(--color-accent);
  border-color: rgba(242, 168, 29, 0.4);
  background: rgba(242, 168, 29, 0.08);
}

/* Badge "pendiente de confirmación" (alta de suministro): además del color dorado
   compartido con el resto de este grupo, lleva un icono de arco incompleto propio
   (inspirado en el trazo de la "G" del logo) en vez del punto plano del resto. */
.badge-pendiente .badge-icon {
  flex-shrink: 0;
}

/* En curso / confirmado pero aún no cerrado (teal) */
.badge-cerrada,
.badge-pendiente_factura,
.badge-pendiente_pago,
.badge-pendiente_renovar {
  color: var(--color-secondary);
  border-color: rgba(63, 159, 176, 0.35);
  background: rgba(63, 159, 176, 0.08);
}

/* Completado / positivo (verde) */
.badge-activo,
.badge-pagada,
.badge-cobrada,
.badge-revisado,
.badge-validado_automatico,
.badge-validado_manual {
  color: var(--color-success);
  border-color: rgba(31, 107, 59, 0.35);
  background: rgba(31, 107, 59, 0.08);
}

/* Bloqueado / inválido / requiere corrección (granate) */
.badge-inactivo,
.badge-sustituida,
.badge-error_cups_no_encontrado,
.badge-error_ya_liquidado,
.badge-bloqueado_alta_no_confirmada {
  color: var(--color-danger);
  border-color: rgba(139, 58, 58, 0.4);
  background: rgba(139, 58, 58, 0.08);
}

/* ============ Paneles / avisos ============ */

.panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  background: var(--color-surface);
}

.panel-notice {
  border-color: rgba(63, 159, 176, 0.35);
  background: rgba(63, 159, 176, 0.08);
}

.panel-notice p:last-child { margin-bottom: 0; }

/* Mismo granate que el grupo "bloqueado/inválido" de badge_estado() — para errores reales que
   requieren corregir el archivo, no solo un aviso informativo (panel-notice). */
.panel-error {
  border-color: rgba(139, 58, 58, 0.4);
  background: rgba(139, 58, 58, 0.08);
}

.panel-error p:last-child { margin-bottom: 0; }

.text-muted {
  color: rgba(43, 62, 68, 0.6);
  font-size: 0.85rem;
}

/* ============ Ficha de datos (lista campo/valor) ============ */

.field-list {
  display: grid;
  grid-template-columns: 9rem 1fr;
  row-gap: 0.5rem;
  column-gap: 0.75rem;
  max-width: 34rem;
  margin-bottom: 1.5rem;
}

/* Etiqueta de agrupación ligera para varios .field-list consecutivos (p. ej. Identidad / Datos
   del firmante / Contacto / Datos bancarios en la ficha de cliente) — deliberadamente más
   discreta que un <h2>/<h3> de sección, para señalar un subgrupo dentro de la misma ficha sin
   competir visualmente con los títulos de sección reales. */
.field-group-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(43, 62, 68, 0.55);
  margin: 0 0 0.5rem;
}

.field-list dt {
  font-weight: 500;
  font-size: 0.8rem;
  color: rgba(43, 62, 68, 0.6);
  padding-top: 0.15rem;
}

.field-list dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
  max-width: none;
}

.filter-bar label { margin-top: 0; }

.filter-bar > div { min-width: 11rem; }

.filter-bar .btn,
.filter-bar button { margin-top: 0; }

/* ============ Dashboard ============ */

.dashboard-section {
  margin-bottom: 2rem;
}

.dashboard-section h2 {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.dashboard-grid .dashboard-card { margin-bottom: 0; }

.dashboard-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}

.dashboard-card h2 {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.65rem;
}

.dashboard-card h3 {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(43, 62, 68, 0.6);
  margin: 0 0 0.35rem;
}

.dashboard-card .valor {
  font-size: 1.35rem;
  font-weight: 600;
}

.dashboard-card .sub {
  font-size: 0.8rem;
  color: rgba(43, 62, 68, 0.6);
  margin-top: 0.25rem;
}

.dashboard-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.dashboard-card-header h2 { margin-bottom: 0; }

.dashboard-tabs {
  display: flex;
  gap: 0.25rem;
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: 0.2rem;
}

.dashboard-tab-btn {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(43, 62, 68, 0.6);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}

.dashboard-tab-btn:hover { color: var(--color-text); }

.dashboard-tab-btn.active {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(43, 62, 68, 0.12);
}

.dashboard-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}

.dashboard-subtitulo {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-secondary);
  margin: 0 0 0.4rem;
}

.dashboard-2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}

.dashboard-2col .dashboard-card { margin-bottom: 0; }

/* ============ Dashboard: mini-tablas de estado (punto de color + etiqueta + importe) ============ */

.mini-stats {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.mini-stat {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.6rem;
  border-radius: calc(var(--radius) - 2px);
  background: var(--color-bg);
}

.mini-stat-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Mismos 4 cubos de significado que los badges de estado (ver sección "Badges de estado" más
   arriba) — nombrados por fase genérica (inicial/en curso/completado), no por el nombre de un
   estado real concreto, porque estas tarjetas se reutilizan para varios ciclos de estado
   distintos (LiquidacionComercial, y los estado_comercializadora/estado_comercial derivados de
   comisiones) cuyo vocabulario real no siempre coincide en significado con la misma palabra
   (p. ej. "liquidada" es la fase MÁS TEMPRANA del ciclo de estado_comercial, no la intermedia
   — nombrar esta clase igual habría sido engañoso). */
.mini-stat--inicial .mini-stat-dot { background: var(--color-accent); }
.mini-stat--progreso .mini-stat-dot { background: var(--color-secondary); }
.mini-stat--completado .mini-stat-dot { background: var(--color-success); }

.mini-stat-label {
  font-size: 0.8rem;
  color: rgba(43, 62, 68, 0.75);
  flex: 1;
}

.mini-stat-valor {
  font-size: 0.88rem;
  font-weight: 600;
}

/* ============ Dashboard: ranking compacto ============ */

.ranking-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ranking-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: calc(var(--radius) - 2px);
}

.ranking-list li:nth-child(odd) { background: var(--color-bg); }

.ranking-nombre { font-size: 0.85rem; }

.ranking-valor { font-size: 0.85rem; font-weight: 600; }

.ranking-vacio {
  color: rgba(43, 62, 68, 0.6);
  font-size: 0.85rem;
  justify-content: flex-start !important;
}

/* ============ Login (pantalla sin sidebar) ============ */

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  padding: 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 22rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2rem 2rem 1.75rem;
}

.auth-card .sidebar-brand {
  margin-bottom: 1.75rem;
  color: var(--color-text);
}

.auth-card .brand-wordmark { color: var(--color-text); }

.auth-card form { max-width: none; }

.auth-card button[type="submit"] {
  width: 100%;
  justify-content: center;
  margin-top: 1.5rem;
}

/* ============ Responsive ============ */

@media (max-width: 860px) {
  .app-shell {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    overflow: visible;
  }

  .sidebar-brand { margin-bottom: 0; margin-right: 1.5rem; }

  .sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    flex: 0 1 auto;
    overflow: visible;
  }

  .sidebar-footer {
    margin-top: 0;
    margin-left: auto;
    padding-top: 0;
    border-top: none;
  }

  .sidebar-footer .btn { width: auto; }

  .main-content { padding: 1.5rem 1.25rem 3rem; }
}