/* ==========================================================================
   TEMA: CYBERPUNK 2077 (NIGHT CITY HUD)
   Paleta neón distintiva, fondos negro asfalto, estética técnica tipo HUD,
   bordes angulados y contrastes de alta legibilidad WCAG AA.
   ========================================================================== */

[data-theme="cyberpunk-2077"] {
  /* ------------------------------------------------------------------------
     1. Superficies y Fondos Asfalto / Carbón
     ------------------------------------------------------------------------ */
  --bg-main: #0d0d12;
  --bg-surface: #12121a;
  --bg-surface-secondary: #171722;
  --bg-surface-elevated: #1e1e2c;
  --bg-modal: #13131b;
  --bg-modal-header: #0e0e15;
  --bg-input: #08080c;
  --bg-card: #12121a;
  --bg-card-hover: #181824;
  --bg-control-bar: rgba(18, 18, 26, 0.88);

  /* ------------------------------------------------------------------------
     2. Bordes y Estructura Técnica
     ------------------------------------------------------------------------ */
  --border-dim: rgba(0, 240, 255, 0.2);
  --border-bright: #00f0ff;
  --border-active: #fcee0a;
  --border-highlight: #fcee0a;

  /* ------------------------------------------------------------------------
     3. Tipografía y Textos de Alto Contraste (WCAG AA)
     ------------------------------------------------------------------------ */
  --text-primary: #ffffff;
  --text-secondary: #00f0ff;
  --text-muted: #79798c;

  /* ------------------------------------------------------------------------
     4. Acentos Neón Night City y Glows Interactivos
     ------------------------------------------------------------------------ */
  --accent-primary: #fcee0a;
  --accent-primary-text: #000000;
  --accent-primary-hover: #e5d808;
  --accent-primary-glow: 0 0 14px rgba(252, 238, 10, 0.35);
  --accent-primary-dim: rgba(252, 238, 10, 0.12);
  --accent-primary-border: rgba(252, 238, 10, 0.4);

  --accent-secondary: #00f0ff;
  --accent-interactive-active: #00f0ff;
  --accent-success: #39ff14;
  --accent-success-hover: #2ee60d;
  --accent-success-border: #39ff14;
  --accent-success-dim: rgba(57, 255, 20, 0.15);
  --accent-warning: #ffaa00;
  --accent-danger: #ff0055;

  /* ------------------------------------------------------------------------
     5. Patrón de Fondo Digital Matrix / Tech Grid
     ------------------------------------------------------------------------ */
  --bg-pattern: 
    linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252, 238, 10, 0.02) 1px, transparent 1px);
  --bg-pattern-size: 28px 28px;

  /* ------------------------------------------------------------------------
     6. Adaptación de las 5 Comidas (+ Notas) Cyberpunk
     ------------------------------------------------------------------------ */
  /* Desayuno: Amarillo ámbar neón */
  --c-desayuno: #fcee0a;
  --c-desayuno-bg: rgba(252, 238, 10, 0.08);
  --c-desayuno-badge: #fcee0a;
  --c-desayuno-badge-bg: rgba(252, 238, 10, 0.18);

  /* Media Mañana: Cian eléctrico */
  --c-mediamanana: #00f0ff;
  --c-mediamanana-bg: rgba(0, 240, 255, 0.08);
  --c-mediamanana-badge: #00f0ff;
  --c-mediamanana-badge-bg: rgba(0, 240, 255, 0.18);

  /* Comida: Naranja vermillion radiactivo */
  --c-comida: #ff4400;
  --c-comida-bg: rgba(255, 68, 0, 0.08);
  --c-comida-badge: #ff5511;
  --c-comida-badge-bg: rgba(255, 68, 0, 0.18);

  /* Merienda: Magenta / hot pink neón */
  --c-merienda: #ff007f;
  --c-merienda-bg: rgba(255, 0, 127, 0.08);
  --c-merienda-badge: #ff007f;
  --c-merienda-badge-bg: rgba(255, 0, 127, 0.18);

  /* Cena: Violeta eléctrico / púrpura neón */
  --c-cena: #9d00ff;
  --c-cena-bg: rgba(157, 0, 255, 0.08);
  --c-cena-badge: #b336ff;
  --c-cena-badge-bg: rgba(157, 0, 255, 0.18);

  /* Notas / Indicaciones: Verde tóxico HUD */
  --c-notas: #39ff14;
  --c-notas-bg: rgba(57, 255, 20, 0.08);
  --c-notas-badge: #39ff14;
  --c-notas-badge-bg: rgba(57, 255, 20, 0.18);
}

/* ==========================================================================
   ESTILOS ESPECÍFICOS Y DETALLES HUD CYBERPUNK 2077
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. Cabecera de la Aplicación y Efecto Scanlines HUD
   -------------------------------------------------------------------------- */
[data-theme="cyberpunk-2077"] .app-header {
  background-color: var(--bg-surface);
  background-image:
    linear-gradient(180deg, rgba(18, 18, 26, 0.95) 0%, rgba(13, 13, 18, 0.98) 100%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 240, 255, 0.025) 2px,
      rgba(0, 240, 255, 0.025) 4px
    );
  border-bottom: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(252, 238, 10, 0.2);
  position: relative;
}

[data-theme="cyberpunk-2077"] .app-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #fcee0a 0%, #00f0ff 40%, rgba(0, 240, 255, 0.2) 80%, #fcee0a 100%);
  opacity: 0.9;
  pointer-events: none;
}

[data-theme="cyberpunk-2077"] .header-badge {
  color: var(--accent-primary);
  text-shadow: 0 0 8px rgba(252, 238, 10, 0.45);
  letter-spacing: 2.5px;
  font-weight: 800;
}

[data-theme="cyberpunk-2077"] .header-title {
  color: #ffffff;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: text-shadow 0.2s ease;
}

[data-theme="cyberpunk-2077"] .header-title:hover {
  text-shadow: 
    -1px 0 rgba(0, 240, 255, 0.7),
    1px 0 rgba(252, 238, 10, 0.7),
    0 0 12px rgba(252, 238, 10, 0.5);
  cursor: default;
}

[data-theme="cyberpunk-2077"] .header-subtitle {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   B. Badges de Estadísticas y Selector de Tema (Pills Técnicas)
   -------------------------------------------------------------------------- */
[data-theme="cyberpunk-2077"] .stat-pill,
[data-theme="cyberpunk-2077"] .theme-pill {
  background: var(--bg-surface-secondary);
  border: 1px solid rgba(0, 240, 255, 0.3);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  box-shadow: inset 0 0 8px rgba(0, 240, 255, 0.05);
  transition: border-color 0.2s, box-shadow 0.2s;
}

[data-theme="cyberpunk-2077"] .stat-pill:hover,
[data-theme="cyberpunk-2077"] .theme-pill:hover {
  border-color: var(--accent-secondary);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
}

[data-theme="cyberpunk-2077"] .stat-label {
  color: var(--accent-secondary);
  font-weight: 700;
  letter-spacing: 1px;
}

[data-theme="cyberpunk-2077"] .stat-val {
  color: var(--accent-success);
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.45);
  font-weight: 800;
}

[data-theme="cyberpunk-2077"] .user-val {
  color: var(--accent-primary);
  text-shadow: 0 0 8px rgba(252, 238, 10, 0.45);
}

[data-theme="cyberpunk-2077"] .theme-select {
  color: var(--accent-primary);
  text-shadow: 0 0 6px rgba(252, 238, 10, 0.35);
  font-weight: 800;
}

[data-theme="cyberpunk-2077"] .theme-select option {
  background: #12121a;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   C. Barra de Navegación y Control (Semana y Acciones)
   -------------------------------------------------------------------------- */
[data-theme="cyberpunk-2077"] .control-bar {
  background: var(--bg-control-bar);
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
  backdrop-filter: blur(10px);
}

[data-theme="cyberpunk-2077"] .tech-select {
  background: var(--bg-input);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

[data-theme="cyberpunk-2077"] .tech-select:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 10px rgba(252, 238, 10, 0.35);
}

/* --------------------------------------------------------------------------
   D. Botones Técnicos con Esquinas Anguladas (HUD Chamfered Cut)
   -------------------------------------------------------------------------- */
[data-theme="cyberpunk-2077"] .tech-btn {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Botón Primario: Amarillo Neón HUD con texto negro */
[data-theme="cyberpunk-2077"] .tech-btn-primary {
  background: var(--accent-primary);
  color: #000000;
  border: 1px solid var(--accent-primary);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: 0 0 10px rgba(252, 238, 10, 0.25);
}

[data-theme="cyberpunk-2077"] .tech-btn-primary:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
  box-shadow: 0 0 18px rgba(252, 238, 10, 0.65), 0 0 25px rgba(0, 240, 255, 0.3);
  transform: translateY(-1px);
}

/* Botón de Navegación de Semanas */
[data-theme="cyberpunk-2077"] .tech-btn-nav {
  background: var(--bg-surface);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: var(--accent-secondary);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

[data-theme="cyberpunk-2077"] .tech-btn-nav:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--accent-secondary);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.45);
}

/* Botón Secundario */
[data-theme="cyberpunk-2077"] .tech-btn-secondary {
  background: var(--bg-surface);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #d1d5db;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

[data-theme="cyberpunk-2077"] .tech-btn-secondary:hover {
  background: var(--bg-surface-elevated);
  border-color: var(--accent-secondary);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

/* Botón Acento (Subir Hoja / OCR / Instalar) */
[data-theme="cyberpunk-2077"] .tech-btn-accent {
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid var(--accent-secondary);
  color: var(--accent-secondary);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.2);
}

[data-theme="cyberpunk-2077"] .tech-btn-accent:hover {
  background: var(--accent-secondary);
  color: #000000;
  font-weight: 800;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.55);
}

/* Botón Éxito (Guardar PIN / Acciones positivas) */
[data-theme="cyberpunk-2077"] .tech-btn-success {
  background: var(--accent-success);
  color: #000000;
  border: 1px solid var(--accent-success);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.3);
}

[data-theme="cyberpunk-2077"] .tech-btn-success:hover {
  background: #52ff33;
  border-color: #52ff33;
  color: #000000;
  box-shadow: 0 0 18px rgba(57, 255, 20, 0.6);
}

/* Botón Peligro / Salir */
[data-theme="cyberpunk-2077"] .tech-btn-danger {
  background: rgba(255, 0, 85, 0.15);
  border: 1px solid var(--accent-danger);
  color: #ff3377;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

[data-theme="cyberpunk-2077"] .tech-btn-danger:hover {
  background: var(--accent-danger);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(255, 0, 85, 0.55);
}

/* Botón Advertencia / Admin */
[data-theme="cyberpunk-2077"] .tech-btn-warning {
  background: rgba(255, 170, 0, 0.15);
  border: 1px solid var(--accent-warning);
  color: #ffaa00;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

[data-theme="cyberpunk-2077"] .tech-btn-warning:hover {
  background: var(--accent-warning);
  color: #000000;
  box-shadow: 0 0 16px rgba(255, 170, 0, 0.55);
}

/* --------------------------------------------------------------------------
   E. Columnas de Día, Cabeceras y Check de Día (Schedule Grid)
   -------------------------------------------------------------------------- */
[data-theme="cyberpunk-2077"] .day-column {
  background: var(--bg-card);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

[data-theme="cyberpunk-2077"] .day-column:hover {
  border-color: rgba(0, 240, 255, 0.55);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 240, 255, 0.15);
}

[data-theme="cyberpunk-2077"] .day-column.drag-over {
  border-color: var(--accent-primary);
  box-shadow: 0 0 20px rgba(252, 238, 10, 0.45), inset 0 0 12px rgba(252, 238, 10, 0.08);
  transform: translateY(-2px);
}

[data-theme="cyberpunk-2077"] .day-column.is-completed {
  border-color: rgba(57, 255, 20, 0.5);
  box-shadow: 0 0 16px rgba(57, 255, 20, 0.2), inset 0 0 10px rgba(57, 255, 20, 0.05);
}

[data-theme="cyberpunk-2077"] .day-header {
  background: var(--bg-surface-elevated);
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
  border-top: 2px solid var(--accent-secondary);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  position: relative;
}

[data-theme="cyberpunk-2077"] .day-column.is-completed .day-header {
  border-top-color: var(--accent-success);
}

[data-theme="cyberpunk-2077"] .day-title {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

[data-theme="cyberpunk-2077"] .drag-handle {
  color: var(--accent-secondary);
  opacity: 0.6;
}

[data-theme="cyberpunk-2077"] .drag-handle:hover {
  opacity: 1;
  color: var(--accent-primary);
}

/* Botón Check de Día */
[data-theme="cyberpunk-2077"] .day-check-btn {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--accent-secondary);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  transition: all 0.2s;
}

[data-theme="cyberpunk-2077"] .day-check-btn:hover {
  background: rgba(57, 255, 20, 0.15);
  border-color: var(--accent-success);
  color: var(--accent-success);
  box-shadow: 0 0 12px rgba(57, 255, 20, 0.35);
}

[data-theme="cyberpunk-2077"] .day-check-btn.checked {
  background: var(--accent-success);
  border-color: var(--accent-success);
  color: #000000;
  font-weight: 800;
  box-shadow: 0 0 15px rgba(57, 255, 20, 0.5);
}

/* --------------------------------------------------------------------------
   F. Tarjetas de Comidas con Acento Técnico Lateral y Resplandor Neón
   -------------------------------------------------------------------------- */
[data-theme="cyberpunk-2077"] .meal-card {
  border-radius: 3px;
  border-left-width: 3px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

[data-theme="cyberpunk-2077"] .meal-card:hover {
  transform: translateY(-2px);
}

[data-theme="cyberpunk-2077"] .meal-card.DESAYUNO:hover {
  box-shadow: 0 0 14px rgba(252, 238, 10, 0.28);
}

[data-theme="cyberpunk-2077"] .meal-card.MEDIA_MANANA:hover {
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.28);
}

[data-theme="cyberpunk-2077"] .meal-card.COMIDA:hover {
  box-shadow: 0 0 14px rgba(255, 68, 0, 0.28);
}

[data-theme="cyberpunk-2077"] .meal-card.MERIENDA:hover {
  box-shadow: 0 0 14px rgba(255, 0, 127, 0.28);
}

[data-theme="cyberpunk-2077"] .meal-card.CENA:hover {
  box-shadow: 0 0 14px rgba(157, 0, 255, 0.28);
}

[data-theme="cyberpunk-2077"] .meal-card.NOTAS:hover {
  box-shadow: 0 0 14px rgba(57, 255, 20, 0.28);
}

[data-theme="cyberpunk-2077"] .meal-badge {
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  letter-spacing: 1px;
}

[data-theme="cyberpunk-2077"] .meal-content {
  color: #f8fafc;
  font-weight: 450;
  line-height: 1.4;
}

[data-theme="cyberpunk-2077"] .meal-textarea {
  background: var(--bg-input);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

[data-theme="cyberpunk-2077"] .meal-textarea:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 10px rgba(252, 238, 10, 0.35);
}

/* --------------------------------------------------------------------------
   G. Navegación Móvil por Días (Tabs con Estética Chamfered)
   -------------------------------------------------------------------------- */
[data-theme="cyberpunk-2077"] .mobile-day-tabs {
  background: var(--bg-surface);
  border-bottom: 1px solid rgba(0, 240, 255, 0.25);
}

[data-theme="cyberpunk-2077"] .day-tab {
  background: var(--bg-surface-secondary);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: var(--text-secondary);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: all 0.2s;
}

[data-theme="cyberpunk-2077"] .day-tab.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #000000;
  font-weight: 800;
  box-shadow: 0 0 15px rgba(252, 238, 10, 0.5);
}

[data-theme="cyberpunk-2077"] .day-tab-dot {
  background: var(--text-muted);
}

[data-theme="cyberpunk-2077"] .day-tab.completed .day-tab-dot {
  background: var(--accent-success);
  box-shadow: 0 0 8px var(--accent-success);
}

/* --------------------------------------------------------------------------
   H. Modales, Dropzone OCR y Tabla de Revisión
   -------------------------------------------------------------------------- */
[data-theme="cyberpunk-2077"] .modal-overlay {
  background: rgba(5, 5, 8, 0.85);
  backdrop-filter: blur(6px);
}

[data-theme="cyberpunk-2077"] .modal-content {
  background: var(--bg-modal);
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 240, 255, 0.15);
  border-radius: 6px;
  position: relative;
}

[data-theme="cyberpunk-2077"] .modal-header {
  background: var(--bg-modal-header);
  border-bottom: 1px solid rgba(0, 240, 255, 0.25);
  border-top: 2px solid var(--accent-primary);
}

[data-theme="cyberpunk-2077"] .modal-title {
  color: var(--accent-primary);
  text-shadow: 0 0 8px rgba(252, 238, 10, 0.4);
  letter-spacing: 1.5px;
}

[data-theme="cyberpunk-2077"] .modal-close {
  color: var(--accent-secondary);
  transition: color 0.15s, transform 0.15s;
}

[data-theme="cyberpunk-2077"] .modal-close:hover {
  color: var(--accent-primary);
  transform: scale(1.15);
}

[data-theme="cyberpunk-2077"] .upload-dropzone {
  background: var(--bg-surface-secondary);
  border: 2px dashed rgba(0, 240, 255, 0.4);
  transition: all 0.2s ease;
}

[data-theme="cyberpunk-2077"] .upload-dropzone:hover {
  border-color: var(--accent-primary);
  background: rgba(252, 238, 10, 0.05);
  box-shadow: 0 0 20px rgba(252, 238, 10, 0.25);
}

[data-theme="cyberpunk-2077"] .camera-icon {
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.5));
}

[data-theme="cyberpunk-2077"] .spinner {
  border: 3px solid rgba(0, 240, 255, 0.2);
  border-top-color: var(--accent-primary);
  box-shadow: 0 0 10px rgba(252, 238, 10, 0.4);
}

[data-theme="cyberpunk-2077"] .review-header h3 {
  color: var(--accent-primary);
  text-shadow: 0 0 8px rgba(252, 238, 10, 0.3);
}

[data-theme="cyberpunk-2077"] .review-table th {
  background: var(--bg-surface-elevated);
  color: var(--accent-secondary);
  border-color: rgba(0, 240, 255, 0.2);
}

[data-theme="cyberpunk-2077"] .review-table td {
  border-color: rgba(0, 240, 255, 0.15);
}

[data-theme="cyberpunk-2077"] .review-table textarea {
  background: var(--bg-input);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #ffffff;
}

[data-theme="cyberpunk-2077"] .review-table textarea:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 10px rgba(252, 238, 10, 0.35);
}

/* --------------------------------------------------------------------------
   I. Autenticación y Pantalla de Bloqueo por PIN
   -------------------------------------------------------------------------- */
[data-theme="cyberpunk-2077"] .auth-overlay {
  background-color: var(--bg-main);
  background-image: 
    linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252, 238, 10, 0.02) 1px, transparent 1px);
  background-size: 28px 28px;
}

[data-theme="cyberpunk-2077"] .auth-card {
  background: var(--bg-card);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-top: 2px solid var(--accent-primary);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.9), 0 0 20px rgba(252, 238, 10, 0.15);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

[data-theme="cyberpunk-2077"] .terminal-badge {
  color: var(--accent-primary);
  background: rgba(252, 238, 10, 0.12);
  border: 1px solid rgba(252, 238, 10, 0.4);
  text-shadow: 0 0 6px rgba(252, 238, 10, 0.35);
}

[data-theme="cyberpunk-2077"] .tech-input {
  background: var(--bg-input);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

[data-theme="cyberpunk-2077"] .tech-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 12px rgba(252, 238, 10, 0.4), inset 0 0 6px rgba(252, 238, 10, 0.1);
}

[data-theme="cyberpunk-2077"] .pin-dots .dot {
  border: 2px solid var(--accent-secondary);
}

[data-theme="cyberpunk-2077"] .pin-dots .dot.filled {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: 0 0 14px var(--accent-primary);
}

[data-theme="cyberpunk-2077"] .key-btn {
  background: var(--bg-surface-secondary);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #ffffff;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: all 0.12s ease;
}

[data-theme="cyberpunk-2077"] .key-btn:hover {
  border-color: var(--accent-secondary);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

[data-theme="cyberpunk-2077"] .key-btn:active {
  background: var(--accent-primary);
  color: #000000;
  border-color: var(--accent-primary);
  box-shadow: 0 0 16px rgba(252, 238, 10, 0.6);
}

[data-theme="cyberpunk-2077"] .warning-box {
  background: rgba(252, 238, 10, 0.08);
  border: 1px solid var(--accent-primary);
}

[data-theme="cyberpunk-2077"] .warning-text {
  color: var(--accent-primary);
  text-shadow: 0 0 6px rgba(252, 238, 10, 0.3);
}

/* --------------------------------------------------------------------------
   J. Administración de Usuarios y Footer
   -------------------------------------------------------------------------- */
[data-theme="cyberpunk-2077"] .user-item {
  background: var(--bg-surface-secondary);
  border: 1px solid rgba(0, 240, 255, 0.25);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

[data-theme="cyberpunk-2077"] .admin-section h3 {
  color: var(--accent-warning);
  text-shadow: 0 0 6px rgba(255, 170, 0, 0.35);
}

[data-theme="cyberpunk-2077"] .app-footer {
  background: var(--bg-main);
  border-top: 1px solid rgba(0, 240, 255, 0.2);
}

[data-theme="cyberpunk-2077"] .footer-note {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   K. Selección de Texto y Barras de Desplazamiento (Cyberpunk HUD Scrollbar)
   -------------------------------------------------------------------------- */
[data-theme="cyberpunk-2077"] ::selection {
  background: var(--accent-primary);
  color: #000000;
}

[data-theme="cyberpunk-2077"] ::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

[data-theme="cyberpunk-2077"] ::-webkit-scrollbar-track {
  background: var(--bg-main);
}

[data-theme="cyberpunk-2077"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.3);
  border-radius: 2px;
}

[data-theme="cyberpunk-2077"] ::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
  box-shadow: 0 0 8px var(--accent-secondary);
}