/* =====================================================================
   SISTEMA DE DISEÑO — Campeonato AFS
   =====================================================================
   Capa de estilos reutilizable para unificar TODO el sitio (panel admin
   y páginas públicas) sin tocar el CSS legacy de cada plantilla.

   Reglas de convivencia:
   - Todas las clases nuevas van prefijadas con "ds-" (design system) para
     no chocar nunca con clases legacy existentes (.container, .card, etc.)
     que ya tienen su propio significado en distintas plantillas.
   - Los tokens de color/tipografía son LOS MISMOS que ya usa la portada
     pública (static/css/style.css): navy + amarillo, Bebas Neue / Barlow.
     No se inventa una identidad nueva, se preserva y se propaga.
   - Este archivo se puede incluir en cualquier plantilla además de su CSS
     propio; no reemplaza ningún stylesheet existente.
   ===================================================================== */

:root {
  /* Idénticos a style.css (portada pública) — la identidad visual real */
  --ds-navy: #0D1B3E;
  --ds-navy-light: #1a2a52;
  --ds-navy-mid: #132244;
  --ds-yellow: #F5C518;
  --ds-yellow-dark: #e0b000;
  --ds-white: #ffffff;
  --ds-gray-light: #f4f5f7;
  --ds-gray: #e0e3ea;
  --ds-gray-text: #6b7280;
  --ds-text: #1a1a2e;
  --ds-red: #e03030;
  --ds-red-dark: #b91c1c;
  --ds-green: #22c55e;
  --ds-green-dark: #16a34a;
  --ds-blue: #3b82f6;
  --ds-blue-dark: #1d4ed8;
  --ds-orange: #f97316;
  --ds-purple: #8b5cf6;
  --ds-purple-dark: #6d28d9;
  --ds-teal: #06b6d4;

  /* Escala de espaciado */
  --ds-sp-1: 4px;
  --ds-sp-2: 8px;
  --ds-sp-3: 12px;
  --ds-sp-4: 16px;
  --ds-sp-5: 24px;
  --ds-sp-6: 32px;
  --ds-sp-7: 48px;

  /* Radios y sombras */
  --ds-radius-sm: 6px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 16px;
  --ds-shadow-sm: 0 1px 3px rgba(13, 27, 62, 0.08);
  --ds-shadow-md: 0 4px 16px rgba(13, 27, 62, 0.12);
  --ds-shadow-lg: 0 10px 30px rgba(13, 27, 62, 0.18);

  /* Tipografía */
  --ds-font-display: 'Bebas Neue', sans-serif;
  --ds-font-ui: 'Barlow Condensed', sans-serif;
  --ds-font-body: 'Barlow', sans-serif;
}

/* ===== Google Fonts (mismas que la portada) ===== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@400;500;600;700;800;900&family=Barlow+Condensed:wght@400;600;700;800&display=swap');

.ds-scope, .ds-scope * { box-sizing: border-box; }

/* =====================================================================
   BOTONES
   ===================================================================== */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ds-font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  padding: 10px 18px;
  border: none;
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
}
.ds-btn:active { transform: translateY(1px); }
.ds-btn:disabled, .ds-btn.is-disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.ds-btn-primary { background: var(--ds-yellow); color: var(--ds-navy); }
.ds-btn-primary:hover:not(:disabled) { background: var(--ds-yellow-dark); }

.ds-btn-navy { background: var(--ds-navy); color: var(--ds-white); }
.ds-btn-navy:hover:not(:disabled) { background: var(--ds-navy-light); }

.ds-btn-success { background: var(--ds-green); color: var(--ds-white); }
.ds-btn-success:hover:not(:disabled) { background: var(--ds-green-dark); }

.ds-btn-danger { background: var(--ds-red); color: var(--ds-white); }
.ds-btn-danger:hover:not(:disabled) { background: var(--ds-red-dark); }

.ds-btn-ghost { background: transparent; color: var(--ds-navy); border: 1.5px solid var(--ds-gray); }
.ds-btn-ghost:hover:not(:disabled) { background: var(--ds-gray-light); border-color: var(--ds-navy); }

.ds-btn-whatsapp { background: #25D366; color: #ffffff; }
.ds-btn-whatsapp:hover:not(:disabled) { background: #1ebe57; }

.ds-btn-sm { padding: 6px 12px; font-size: 12.5px; }
.ds-btn-lg { padding: 13px 26px; font-size: 15px; }
.ds-btn-block { width: 100%; }

.ds-btn-icon {
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ds-btn-icon.ds-btn-sm { width: 30px; height: 30px; font-size: 12px; }

.ds-btn-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* =====================================================================
   TARJETAS
   ===================================================================== */
.ds-card {
  background: var(--ds-white);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  border: 1px solid var(--ds-gray);
  overflow: hidden;
}
.ds-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--ds-sp-4) var(--ds-sp-5);
  border-bottom: 1px solid var(--ds-gray);
  flex-wrap: wrap;
}
.ds-card-header h1, .ds-card-header h2, .ds-card-header h3 {
  font-family: var(--ds-font-display);
  letter-spacing: 0.5px;
  color: var(--ds-navy);
  font-size: 22px;
}
.ds-card-body { padding: var(--ds-sp-5); }
.ds-card-footer {
  padding: var(--ds-sp-4) var(--ds-sp-5);
  border-top: 1px solid var(--ds-gray);
  background: var(--ds-gray-light);
}

/* Tarjetas de acceso rápido (dashboard) */
.ds-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ds-sp-4);
}
.ds-quick-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--ds-white);
  border: 1px solid var(--ds-gray);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-sp-4);
  text-decoration: none;
  color: var(--ds-text);
  box-shadow: var(--ds-shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.ds-quick-card:hover { box-shadow: var(--ds-shadow-md); transform: translateY(-2px); border-color: var(--ds-yellow); }
.ds-quick-card .ds-quick-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ds-navy);
  color: var(--ds-yellow);
  font-size: 18px;
}
.ds-quick-card h3 { font-family: var(--ds-font-ui); font-size: 16px; font-weight: 700; color: var(--ds-navy); }
.ds-quick-card p { font-size: 12.5px; color: var(--ds-gray-text); line-height: 1.4; }

/* =====================================================================
   FORMULARIOS
   ===================================================================== */
.ds-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ds-sp-4);
}
.ds-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--ds-sp-4); }
.ds-field:last-child { margin-bottom: 0; }
.ds-field label {
  font-family: var(--ds-font-ui);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.3px;
  color: var(--ds-navy);
  text-transform: uppercase;
}
.ds-field .ds-hint { font-size: 11.5px; color: var(--ds-gray-text); font-weight: 500; text-transform: none; }

.ds-input, .ds-select, .ds-textarea {
  width: 100%;
  font-family: var(--ds-font-body);
  font-size: 14px;
  padding: 10px 12px;
  border: 1.5px solid var(--ds-gray);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-white);
  color: var(--ds-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ds-textarea { resize: vertical; min-height: 90px; }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  outline: none;
  border-color: var(--ds-yellow-dark);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.3);
}

/* Menú desplegable (<select>) con flecha propia: por defecto cada
   navegador/sistema operativo dibuja su propia flechita nativa (distinta en
   Windows, Mac, Android, Chrome, Firefox...) que queda desalineada con el
   resto del sistema de diseño. Se reemplaza por una flecha propia (mismo
   color navy que el resto del texto) y se agregan estados hover/focus más
   cuidados para que se sienta un componente "propio" del sitio, no un
   control de formulario genérico. Se aplica en todas las plantillas que
   usan .ds-select (jornada, categoría, equipo, estado, etc.).
   Nota: .ds-select siempre queda con fondo blanco, incluso en modo oscuro
   -- misma decisión que las tarjetas .ds-card, ver sección MODO OSCURO. */
.ds-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  background-color: var(--ds-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230D1B3E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.ds-select:hover { border-color: var(--ds-navy); }
.ds-checkbox-row { display: flex; align-items: center; gap: 8px; }
.ds-checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ds-navy); }

/* =====================================================================
   TABLAS
   ===================================================================== */
.ds-table-wrap { width: 100%; overflow-x: auto; border-radius: var(--ds-radius-md); border: 1px solid var(--ds-gray); }
.ds-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--ds-white); }
.ds-table thead th {
  background: var(--ds-navy);
  color: var(--ds-white);
  font-family: var(--ds-font-ui);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 11.5px;
  padding: 12px 14px;
  text-align: left;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.ds-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--ds-gray); vertical-align: middle; }
.ds-table tbody tr:nth-child(even) { background: var(--ds-gray-light); }
.ds-table tbody tr:hover { background: #fff8e1; }
.ds-table tbody tr:last-child td { border-bottom: none; }
.ds-table .ds-cell-actions { display: flex; gap: 6px; white-space: nowrap; }

/* En pantallas angostas: colapsar la tabla en tarjetas apiladas.
   Requiere marcar cada <td> con data-label="Encabezado" en la plantilla. */
@media (max-width: 700px) {
  .ds-table.ds-table-stack thead { display: none; }
  .ds-table.ds-table-stack, .ds-table.ds-table-stack tbody, .ds-table.ds-table-stack tr, .ds-table.ds-table-stack td { display: block; width: 100%; }
  .ds-table.ds-table-stack tr {
    margin-bottom: var(--ds-sp-3);
    border: 1px solid var(--ds-gray);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
  }
  .ds-table.ds-table-stack tbody tr:nth-child(even) { background: var(--ds-white); }
  .ds-table.ds-table-stack td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    text-align: right;
    border-bottom: 1px solid var(--ds-gray-light);
  }
  .ds-table.ds-table-stack td::before {
    content: attr(data-label);
    font-family: var(--ds-font-ui);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--ds-gray-text);
    text-align: left;
  }
  .ds-table.ds-table-stack td.ds-cell-actions { justify-content: flex-end; }
  .ds-table.ds-table-stack td.ds-cell-actions::before { content: ''; }
}

/* =====================================================================
   BADGES / ESTADOS
   ===================================================================== */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ds-font-ui);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.3px;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
}
.ds-badge-success { background: #dcfce7; color: #15803d; }
.ds-badge-warning { background: #fef9c3; color: #a16207; }
.ds-badge-danger  { background: #fee2e2; color: #b91c1c; }
.ds-badge-neutral { background: var(--ds-gray); color: var(--ds-gray-text); }
.ds-badge-navy    { background: var(--ds-navy); color: var(--ds-yellow); }

/* Tarjetas amarilla/roja como en el marcador real de un partido */
.ds-card-yellow { width: 14px; height: 19px; border-radius: 2px; background: #eab308; display: inline-block; }
.ds-card-red    { width: 14px; height: 19px; border-radius: 2px; background: var(--ds-red); display: inline-block; }

/* =====================================================================
   TOOLBAR / FILTROS
   ===================================================================== */
.ds-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-3);
  align-items: flex-end;
  margin-bottom: var(--ds-sp-4);
}
.ds-toolbar .ds-field { margin-bottom: 0; min-width: 160px; flex: 1 1 160px; }
.ds-toolbar .ds-btn { flex-shrink: 0; }

/* =====================================================================
   ESTADO VACÍO
   ===================================================================== */
.ds-empty {
  text-align: center;
  padding: var(--ds-sp-7) var(--ds-sp-4);
  color: var(--ds-gray-text);
}
.ds-empty i { font-size: 34px; color: var(--ds-gray); margin-bottom: 10px; display: block; }

/* =====================================================================
   ALERTAS / FLASH MESSAGES
   ===================================================================== */
.ds-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--ds-radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: var(--ds-sp-4);
}
.ds-alert-success { background: #dcfce7; color: #15803d; }
.ds-alert-danger  { background: #fee2e2; color: #b91c1c; }
.ds-alert-info    { background: #e0f2fe; color: #075985; }

/* Aviso flotante temporal (ej. "Enlace copiado"), no forma parte del flujo
   normal de la página como los .ds-alert de arriba, por eso va aparte. */
.ds-toast-flotante {
  position: fixed;
  bottom: var(--ds-sp-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  box-shadow: var(--ds-shadow-lg);
  margin-bottom: 0;
  white-space: nowrap;
}

/* =====================================================================
   MODAL (reduce clics: crear/editar/eliminar sin cambiar de página)
   ===================================================================== */
.ds-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(13, 27, 62, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--ds-sp-4);
  z-index: 2000;
}
.ds-modal-backdrop.is-open { display: flex; }
.ds-modal {
  background: var(--ds-white);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}
.ds-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ds-sp-4) var(--ds-sp-5);
  border-bottom: 1px solid var(--ds-gray);
}
.ds-modal-header h3 { font-family: var(--ds-font-display); font-size: 20px; color: var(--ds-navy); letter-spacing: 0.5px; }
.ds-modal-close { background: none; border: none; font-size: 20px; color: var(--ds-gray-text); cursor: pointer; line-height: 1; padding: 4px; }
.ds-modal-body { padding: var(--ds-sp-5); }
.ds-modal-footer { padding: var(--ds-sp-4) var(--ds-sp-5); border-top: 1px solid var(--ds-gray); display: flex; justify-content: flex-end; gap: 10px; }


/* =====================================================================
   NAVBAR PÚBLICA — MENÚ MÓVIL Y BOTÓN DE MODO OSCURO
   La navbar pública (.navbar/.nav-links de style.css) ya trae su look;
   acá solo se agrega el botón hamburguesa y el comportamiento responsivo
   (antes .nav-links simplemente desaparecía en móvil sin reemplazo).
   ===================================================================== */
.ds-navbar-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--ds-white);
  font-size: 20px;
  padding: 8px;
  cursor: pointer;
}
.ds-theme-toggle {
  background: rgba(255,255,255,0.1);
  border: none;
  color: var(--ds-yellow);
  font-size: 15px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.ds-theme-toggle:hover { background: rgba(255,255,255,0.2); }
/* Mismo punto de corte que .nav-links/.navbar en style.css: el menu de 12
   links se colapsa al hamburguesa desde 1300px hacia abajo (no solo en
   mobile), porque no alcanza a caber en una sola fila en laptops normales. */
@media (max-width: 1300px) {
  .ds-navbar-toggle { display: block; }
  /* En móvil, "Ingresar" + el botón hamburguesa quedan como un solo grupo
     pegado al lado derecho, en ese orden (logo, Ingresar, menú). */
  .navbar .nav-actions { margin-left: auto; margin-right: 0; }
  .navbar .nav-links {
    display: none;
    position: fixed;
    top: 70px;
    left: 12px;
    right: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    background: var(--ds-navy-light);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-lg);
    border: 1px solid rgba(255,255,255,0.08);
    padding: var(--ds-sp-2);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    z-index: 150;
  }
  .navbar .nav-links.is-open { display: flex; animation: dsNavLinksIn 0.18s ease; }
  .navbar .nav-links a {
    padding: 13px var(--ds-sp-4);
    border-bottom: none;
    border-radius: var(--ds-radius-sm);
    border-left: 3px solid transparent;
    width: 100%;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .navbar .nav-links a:hover { background: rgba(255,255,255,0.08); }
  .navbar .nav-links a.active { background: rgba(245,197,24,0.12); border-left-color: var(--ds-yellow); }
  .navbar .btn-ingresar { margin-left: 0; }
}
/* En telefonos angostos (~400px o menos) el logo + los botones de la
   derecha (modo oscuro, Ingresar, menu) no alcanzan a caber con el
   tamaño de arriba: se salian del header (el fondo navy quedaba mas
   angosto que los botones, que terminaban "flotando" fuera de el).
   Se encogen un poco mas todos los elementos para que siempre quepan
   en una sola fila sin desbordar. */
@media (max-width: 400px) {
  .navbar { padding: 0 10px; gap: 6px; }
  .logo { gap: 4px; }
  .logo-shield { width: 28px; height: 28px; }
  .logo-title { font-size: 9px; letter-spacing: 0; }
  .logo-sub { font-size: 6px; letter-spacing: 0.6px; }
  .navbar .nav-actions { gap: 5px; }
  .ds-theme-toggle { width: 26px; height: 26px; font-size: 12px; }
  .navbar .btn-ingresar { padding: 5px 8px; font-size: 10.5px; }
  .ds-navbar-toggle { padding: 5px; font-size: 16px; }
}
@keyframes dsNavLinksIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   RESPONSIVE HELPERS
   ===================================================================== */
.ds-container { max-width: 1240px; margin: 0 auto; padding: 0 var(--ds-sp-5); }
@media (max-width: 700px) {
  .ds-container { padding: 0 var(--ds-sp-3); }
  .ds-card-body, .ds-card-header, .ds-card-footer { padding: var(--ds-sp-3) var(--ds-sp-4); }
}
.ds-hide-mobile { display: initial; }
.ds-show-mobile { display: none; }
@media (max-width: 700px) {
  .ds-hide-mobile { display: none !important; }
  .ds-show-mobile { display: initial !important; }
}

/* =====================================================================
   MODO OSCURO
   =====================================================================
   Alcance deliberadamente ACOTADO: se activa con [data-theme="dark"] en
   <html> (ver design-system.js) y SOLO cambia el fondo del <body>, más el
   estilo propio de los componentes nuevos de esta sesión (más abajo).

   Corrección importante: la primera versión de esto redefinía los tokens
   compartidos --ds-gray-light/--gray-light (y sus pares --ds-gray/--gray)
   a nivel global. Se veía bien en teoría, pero esos tokens en realidad se
   usan por TODO el sitio como fondo de elementos con texto oscuro encima
   (filas pares de tablas, pies de tarjeta, estados vacíos, etc. — no solo
   como fondo de página), así que oscurecerlos de golpe dejaba texto oscuro
   sobre fondo oscuro en muchos lugares: ilegible. Por eso ahora NO se toca
   ningún token compartido -- se oscurece el <body> directamente con un
   color propio, y todo lo demás (tablas, tarjetas, texto) queda exactamente
   igual que en modo claro, sea cual sea el modo. Las tarjetas ".ds-card"
   quedan como una superficie clara "flotando" sobre un fondo oscuro, que es
   un patrón común y perfectamente legible.

   Los componentes construidos en esta misma sesión (tickets de "Próximos
   partidos", palmarés, figura de la fecha) sí reciben su propio estilo
   oscuro completo más abajo, porque esos los controlamos por completo.
   ===================================================================== */
:root[data-theme="dark"] body { background: #0f1729; }
:root[data-theme="dark"] .navbar { box-shadow: 0 2px 14px rgba(0,0,0,0.4); }

/* Tickets de "Próximos partidos" (galeria.html) */
:root[data-theme="dark"] .pp-ticket {
  background: #16213e; border-color: #2a3a5c;
}
:root[data-theme="dark"] .pp-ticket-team span,
:root[data-theme="dark"] .pp-ticket-fecha { color: #e8ecf5; }
:root[data-theme="dark"] .pp-ticket-cancha,
:root[data-theme="dark"] .pp-ticket-vs { color: #93a2c1; }
:root[data-theme="dark"] .pp-ticket-divider { border-color: #2a3a5c; }
:root[data-theme="dark"] .pp-ticket-divider::before,
:root[data-theme="dark"] .pp-ticket-divider::after { background: #16213e; }
:root[data-theme="dark"] .pp-filtro-btn { background: #16213e; border-color: #2a3a5c; color: #93a2c1; }
:root[data-theme="dark"] .pp-filtro-btn:hover { border-color: var(--ds-yellow); color: #e8ecf5; }

/* Palmarés (palmares.html) */
:root[data-theme="dark"] .pm-card { background: #16213e; border-color: #2a3a5c; }
:root[data-theme="dark"] .pm-equipo { color: #e8ecf5; }
:root[data-theme="dark"] .pm-categoria { color: #93a2c1; }
:root[data-theme="dark"] .pm-timeline::before { background: #2a3a5c; }

/* Figura de la fecha (index.html) */
:root[data-theme="dark"] .home-figura-card { background: linear-gradient(135deg, #16213e, #0f1729); border-color: #2a3a5c; }
:root[data-theme="dark"] .home-figura-nombre { color: #e8ecf5; }
:root[data-theme="dark"] .home-figura-meta { color: #93a2c1; }