/* ==========================================================================
   UMSAPP - Sistema Visual Oscuro & Carmesí (site-red.css)
   ========================================================================== */

/* --- Variables de Color y Tema --- */
:root {
  --ums-bg-dark: #09090b;
  --ums-bg-panel: #0e0e11;
  --ums-bg-card: #18181b;
  --ums-border-color: #27272a;
  --ums-red-main: #dc2626;
  --ums-red-hover: #b91c1c;
  --ums-red-bright: #ff4d4d;
  --ums-text-muted: #a1a1aa;
}

body.bg-dark-theme {
  background-color: var(--ums-bg-dark) !important;
  color: #f4f4f5;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   1. HEADER & NAVBAR (LAYOUT MAIN)
   ========================================================================== */

.bg-ums-header {
  background-color: var(--ums-bg-dark) !important;
}

.brand-logo {
  max-height: 42px;
  width: auto;
}

/* Enlaces del Menú Principal */
.navbar-dark .navbar-nav .nav-link {
  color: #e4e4e7 !important;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.85rem;
  transition: color 0.2s ease-in-out;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link {
  color: var(--ums-red-bright) !important;
}

/* Botón Rojo Principal */
.btn-ums-red {
  background-color: var(--ums-red-main) !important;
  border-color: var(--ums-red-main) !important;
  color: #ffffff !important;
  transition: all 0.2s ease;
}

.btn-ums-red:hover,
.btn-ums-red:focus {
  background-color: var(--ums-red-hover) !important;
  border-color: var(--ums-red-hover) !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
}

/* Menús Desplegables (Dropdowns) */
.dropdown-menu {
  background-color: var(--ums-bg-card) !important;
  border: 1px solid var(--ums-border-color) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  padding: 0.5rem 0;
}

.dropdown-item {
  color: #d4d4d8 !important;
  font-size: 0.875rem;
  padding: 0.6rem 1.2rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--ums-border-color) !important;
  color: var(--ums-red-bright) !important;
}

/* ==========================================================================
   2. HERO SECTOR (BANNER VIDEO DE 400px DE ALTO)
   ========================================================================== */

.hero-video-wrapper {
  height: 400px !important;
  position: relative;
  background-color: #000000;
}

.hero-video-wrapper video.videohome {
  object-fit: cover;
  object-position: center;
}

/* Overlay Oscuro para Garantizar Máxima Legibilidad */
.bg-red-overlay-dark {
  background: linear-gradient(
    180deg,
    rgba(9, 9, 11, 0.85) 0%,
    rgba(153, 27, 27, 0.45) 50%,
    rgba(9, 9, 11, 0.9) 100%
  );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Sombras y Filtros de Texto */
.text-shadow-strong {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 4px 20px rgba(0, 0, 0, 0.8);
}

.text-danger-bright {
  color: var(--ums-red-bright) !important;
  text-shadow: 0 0 15px rgba(220, 38, 38, 0.6);
}

.bg-red-badge-solid {
  background-color: var(--ums-red-main) !important;
  border: 1px solid #ef4444;
}

.hero-subtitle-box {
  background-color: rgba(9, 9, 11, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.text-white-80 {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Botón Secundario de Cristal Translúcido */
.btn-ums-secondary {
  background-color: rgba(24, 24, 27, 0.8);
  border: 1px solid var(--ums-border-color);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

.btn-ums-secondary:hover {
  background-color: var(--ums-border-color);
  border-color: #3f3f46;
}

/* ==========================================================================
   3. PANEL LATERAL (OFFCANVAS CUENTA & COMPONENTES)
   ========================================================================== */

.bg-dark-panel {
  background-color: var(--ums-bg-panel) !important;
}

.bg-dark-card {
  background-color: var(--ums-bg-card) !important;
}

.border-zinc-800 {
  border-color: var(--ums-border-color) !important;
}

.text-zinc-300 {
  color: #d4d4d8 !important;
}

.text-zinc-400 {
  color: var(--ums-text-muted) !important;
}

/* Botón de Carrito Flotante */
.cart-floating-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 999999;
    background-color: var(--ums-bg-card);
    border: 1px solid var(--ums-border-color);
    padding: 0.75rem 1rem;
    border-radius: 50px;
    color: #ffffff;
    transition: transform 0.2s ease;
    align-items: center;
    align-content: center;
    align-self: center;
    display: flex;
}

.cart-floating-btn:hover {
  transform: scale(1.05);
  color: var(--ums-red-bright);
}

/* Footer Accent colors */
.dread_yellow {
  color: #facc15;
}

.dread_green {
  color: #22c55e;
}

/* ==========================================================================
   4. TARJETAS DE CARACTERÍSTICAS (FEATURE CARDS LOOK & FEEL)
   ========================================================================== */

.feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 6px;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(220, 38, 38, 0.25) !important;
}

/* Cabecera Roja Granate Oscuro */
.card-header-red {
  background: linear-gradient(180deg, #6b0c10 0%, #4a0609 100%);
  border-bottom: 2px solid #800e13;
}

/* Cuerpo de la Card en Blanco */
.card-body-light {
  background-color: #ffffff !important;
  min-height: 180px;
}

/* Iconos de las Tarjetas */
.feature-icon i {
  color: #7f1d1d; /* Rojo carmesí profundo */
  transition: color 0.2s ease;
}

.feature-card:hover .feature-icon i {
  color: #dc2626; /* Brillo al pasar el cursor */
}