/* ==========================================================================
   DigitalPremium - Estilos Mejorados V6 (Rediseño Profesional de Perfiles Vendidos Crear y General)
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* Variables CSS Globales (Paleta, Tipografía, Sombras, Configuraciones Base)
/* -------------------------------------------------------------------------- */
:root {
    /* Paleta de colores principal: Tonos de azul/morado */
    --primary-hue: 240; /* Tono de azul-morado para un look más sofisticado */
    --primary-color: hsl(var(--primary-hue), 70%, 55%); /* Azul-morado vibrante */
    --primary-color-dark: hsl(var(--primary-hue), 65%, 45%); /* Tono más oscuro para hovers/activos */
    --primary-color-light: hsl(var(--primary-hue), 70%, 95%); /* Para fondos muy sutiles/elementos claros */
    --primary-bg-subtle: hsl(var(--primary-hue), 70%, 98%); /* Fondo extremadamente sutil */
    --primary-text-emphasis: hsl(var(--primary-hue), 60%, 30%); /* Texto oscuro sobre primary */
    --primary-gradient: linear-gradient(135deg, hsl(var(--primary-hue), 70%, 50%), hsl(var(--primary-hue), 60%, 65%)); /* Degradado elegante */

    /* Colores de estado: Usan tonos más apagados y profesionales */
    --secondary-color: #6b7280; /* Gris oscuro para elementos secundarios */
    --success-hue: 145;
    --success-color: hsl(var(--success-hue), 60%, 40%); /* Verde suave y profundo */
    --success-bg-subtle: hsl(var(--success-hue), 60%, 95%);
    --success-text-emphasis: hsl(var(--success-hue), 60%, 25%);

    --info-hue: 200;
    --info-color: hsl(var(--info-hue), 70%, 45%); /* Azul cian calmante */
    --info-bg-subtle: hsl(var(--info-hue), 70%, 95%);
    --info-text-emphasis: hsl(var(--info-hue), 70%, 28%);
    
    --warning-hue: 45;
    --warning-color: hsl(var(--warning-hue), 90%, 50%); /* Amarillo cálido */
    --warning-bg-subtle: hsl(var(--warning-hue), 90%, 95%);
    --warning-text-emphasis: hsl(var(--warning-hue), 70%, 30%);

    --danger-hue: 0;
    --danger-color: hsl(var(--danger-hue), 65%, 50%); /* Rojo clásico */
    --danger-bg-subtle: hsl(var(--danger-hue), 65%, 95%);
    --danger-text-emphasis: hsl(var(--danger-hue), 65%, 30%);
    
    /* Fondos y colores de texto globales */
    --light-bg: #f8f9fa; /* Fondo muy claro */
    --content-bg: #ffffff; /* Fondo blanco para tarjetas y secciones */
    --body-bg: #eef2f6; /* Fondo principal del body, un gris azulado muy sutil */

    --text-dark: #212529; /* Texto muy oscuro, casi negro */
    --text-light: #ffffff; /* Texto blanco */
    --text-muted: #6c757d; /* Texto gris para descripciones y secundario */
    --text-muted-light: #adb5bd; /* Texto gris aún más claro */

    --dark-hue: 210;
    --dark-color: hsl(var(--dark-hue), 10%, 23%);
    --dark-bg-subtle: hsl(var(--dark-hue), 10%, 95%);
    --dark-text-emphasis: hsl(var(--dark-hue), 10%, 10%);

    /* Configuración del Sidebar */
    --sidebar-width: 260px;
    --sidebar-bg-start: #1c2b3e; /* Azul oscuro profundo */
    --sidebar-bg-end: #2d4059; /* Azul más claro para el degradado */
    --sidebar-text-color: rgba(255, 255, 255, 0.9); /* Texto muy legible */
    --sidebar-icon-color: rgba(255, 255, 255, 0.75);
    --sidebar-link-hover-bg: rgba(255, 255, 255, 0.15); /* Fondo de hover más opaco */
    --sidebar-link-hover-text: #ffffff;
    --sidebar-link-active-bg: var(--primary-color); /* Usa el primary-color */
    --sidebar-link-active-text: #ffffff;
    --sidebar-border-active: var(--warning-color); /* Borde activo en color de énfasis */
    --sidebar-submenu-bg: rgba(0, 0, 0, 0.25); /* Fondo de submenú más opaco */
    --sidebar-title-color: rgba(255,255,255,0.55); /* Títulos más claros */

    /* Tipografía General */
    --font-family-base: 'Poppins', sans-serif; /* Poppins como fuente principal */
    --base-font-size: 16px; /* Base más cómoda */
    --line-height-base: 1.6;
    
    /* Bordes y sombras */
    --border-radius-sm: 0.375rem; /* Bordes de Bootstrap */
    --border-radius-md: 0.75rem; /* Intermedio para elementos como botones grandes */
    --border-radius-lg: 1.25rem; /* Grandes radios para tarjetas y modales */
    --border-color: #e5e7eb; /* Borde estándar de Bootstrap */

    --box-shadow-xs: 0 0 5px rgba(0,0,0,0.05); /* Extra pequeña para elementos internos */
    --box-shadow-sm: 0 2px 8px rgba(0,0,0,0.08); /* Sombra suave para la mayoría de elementos */
    --box-shadow-md: 0 5px 18px rgba(0,0,0,0.1); /* Sombra media para tarjetas principales */
    --box-shadow-lg: 0 12px 35px rgba(0,0,0,0.18); /* Sombra grande para elementos flotantes/modales */

    --transition-base: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Curva de transición suave */

    /* Mobile Navbar */
    --mobile-navbar-height: 60px; /* Un poco más alta */
    --mobile-navbar-bg: var(--content-bg);
    --mobile-navbar-text-color: var(--primary-color);
    --mobile-navbar-box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* -------------------------------------------------------------------------- */
/* Modo Oscuro (Dark Mode) - ¡NUEVO!
/* -------------------------------------------------------------------------- */
html[data-theme='dark'] {
    /* Fondos y colores de texto globales para modo oscuro */
    --light-bg: #2a313c; /* Fondo más claro para headers de tabla y otros */
    --content-bg: #1e2530; /* Fondo para tarjetas y secciones */
    --body-bg: #141920; /* Fondo principal del body */

    --text-dark: #e9ecef; /* Texto casi blanco */
    --text-light: #141920; /* Texto oscuro para usar sobre fondos claros (raro en modo oscuro) */
    --text-muted: #8892b0; /* Texto gris claro para descripciones */
    --text-muted-light: #5d687e; /* Texto gris más oscuro */

    --border-color: #343f50; /* Borde más oscuro */

    /* Re-definición de sombras para modo oscuro (más pronunciadas para ser visibles) */
    --box-shadow-xs: 0 0 5px rgba(0,0,0,0.15);
    --box-shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
    --box-shadow-md: 0 5px 18px rgba(0,0,0,0.3);
    --box-shadow-lg: 0 12px 35px rgba(0,0,0,0.4);

    /* Clases soft y emphasis para modo oscuro */
    --primary-bg-subtle: hsla(var(--primary-hue), 70%, 50%, 0.15);
    --primary-text-emphasis: hsl(var(--primary-hue), 70%, 80%);
    --success-bg-subtle: hsla(var(--success-hue), 60%, 40%, 0.15);
    --success-text-emphasis: hsl(var(--success-hue), 60%, 75%);
    --info-bg-subtle: hsla(var(--info-hue), 70%, 45%, 0.15);
    --info-text-emphasis: hsl(var(--info-hue), 70%, 75%);
    --warning-bg-subtle: hsla(var(--warning-hue), 90%, 50%, 0.15);
    --warning-text-emphasis: hsl(var(--warning-hue), 90%, 75%);
    --danger-bg-subtle: hsla(var(--danger-hue), 65%, 50%, 0.15);
    --danger-text-emphasis: hsl(var(--danger-hue), 65%, 80%);
    --dark-bg-subtle: hsla(var(--dark-hue), 10%, 80%, 0.15);
    --dark-text-emphasis: hsl(var(--dark-hue), 10%, 85%);

    /* Ajustes específicos de componentes */
    --mobile-navbar-bg: var(--content-bg);
    --modal-footer-bg: var(--body-bg);

    /* Scrollbars para modo oscuro */
    --scrollbar-track-bg: #202731;
    --scrollbar-thumb-bg: #4a5464;
    --scrollbar-thumb-hover-bg: #5d687e;
}


/* Clases soft y emphasis (simulando Bootstrap 5.3 si no se tienen) */
.bg-primary-soft { background-color: var(--primary-bg-subtle) !important; }
.text-primary-emphasis { color: var(--primary-text-emphasis) !important; }
.bg-success-soft { background-color: var(--success-bg-subtle) !important; }
.text-success-emphasis { color: var(--success-text-emphasis) !important; }
.bg-info-soft { background-color: var(--info-bg-subtle) !important; }
.text-info-emphasis { color: var(--info-text-emphasis) !important; }
.bg-warning-soft { background-color: var(--warning-bg-subtle) !important; }
.text-warning-emphasis { color: var(--warning-text-emphasis) !important; }
.bg-danger-soft { background-color: var(--danger-bg-subtle) !important; }
.text-danger-emphasis { color: var(--danger-text-emphasis) !important; }
.bg-dark-soft { background-color: var(--dark-bg-subtle) !important; }
.text-dark-emphasis { color: var(--text-dark-emphasis) !important; }

/* Redefinición para modo oscuro */
html[data-theme='dark'] .bg-light-subtle { background-color: rgba(255, 255, 255, 0.05) !important; }
.bg-light-subtle { background-color: #fcfcfd !important; }


/* -------------------------------------------------------------------------- */
/* Base y Reset
/* -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: var(--base-font-size); }
body {
    font-family: var(--font-family-base);
    line-height: var(--line-height-base);
    color: var(--text-dark);
    background-color: var(--body-bg);
    margin: 0;
    display: flex;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased; /* Suavizado de fuentes */
    -moz-osx-font-smoothing: grayscale; /* Suavizado de fuentes para Firefox */
    overflow-x: hidden; /* Previene el scroll horizontal no deseado */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave para cambio de tema */
}
body.sidebar-mobile-open {
    overflow: hidden; /* Deshabilita el scroll del body cuando el sidebar está abierto */
}

/* -------------------------------------------------------------------------- */
/* Layout Principal (Sidebar y Contenido)
/* -------------------------------------------------------------------------- */
.sidebar {
    width: var(--sidebar-width);
    background-image: linear-gradient(180deg, var(--sidebar-bg-start) 0%, var(--sidebar-bg-end) 100%);
    color: var(--sidebar-text-color);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050; /* Por encima del contenido y la navbar móvil */
    display: flex;
    flex-direction: column;
    box-shadow: 3px 0 15px -5px rgba(0,0,0,0.4); /* Sombra más pronunciada al sidebar */
    transition: var(--transition-base);
}
.sidebar-header {
    padding: 1.25rem 1rem; /* Más padding */
    border-bottom: 1px solid rgba(255, 255, 255, 0.18); /* Borde más visible */
    min-height: var(--mobile-navbar-height);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Ocultar el header del sidebar completamente en móvil para evitar el espacio en blanco */
@media (max-width: 991.98px) {
    .sidebar-header {
        display: none; /* Oculta completamente el header del sidebar en móvil */
        padding: 0; /* Asegura que no haya padding si se muestra por alguna razón */
        min-height: 0; /* Asegura que no haya altura mínima */
        border-bottom: none; /* Elimina el borde */
    }
}

.sidebar-logo-link {
    color: var(--text-light);
    font-size: 1.8rem; /* Logo más grande */
    font-family: var(--font-family-base);
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: opacity 0.2s ease;
    letter-spacing: 0.5px;
}
.sidebar-logo-link:hover { opacity: 0.9; color: var(--text-light); }
.sidebar-logo-icon { margin-right: 0.85rem; font-size: 2.2rem; opacity: 0.95; } /* Icono más grande */
.sidebar-logo-text { letter-spacing: 0.5px; } /* Espaciado de letras */

.sidebar-nav {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}
.sidebar .nav-item-title {
    padding: 1.2rem 1.5rem 0.6rem; /* Más padding */
    font-size: 0.75rem; /* Más legible */
    font-weight: 700;
    color: var(--sidebar-title-color);
    text-transform: uppercase;
    letter-spacing: 0.12em; /* Mayor espaciado */
    border-bottom: 1px dashed rgba(255,255,255,0.15); /* Separador sutil */
    margin-bottom: 0.6rem;
}
.sidebar .nav-link {
    color: var(--sidebar-text-color);
    padding: 0.95rem 1.5rem; /* Más padding para los links */
    font-size: 0.98rem; /* Más legible */
    font-weight: 500;
    border-left: 5px solid transparent;
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.sidebar .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: var(--sidebar-link-hover-bg);
    transition: left 0.35s ease-in-out; /* Transición más suave */
    z-index: -1;
}
.sidebar .nav-link:hover::before { left: 0; }
.sidebar .nav-link i.fas, .sidebar .nav-link i.far {
    width: 22px; /* Iconos más grandes */
    margin-right: 1.1rem; /* Más espacio */
    font-size: 1.2em;
    color: var(--sidebar-icon-color);
    transition: var(--transition-base);
    text-align: center;
}
.sidebar .nav-link span { transition: transform 0.25s ease; } /* Transición más rápida */
.sidebar .nav-link:hover { color: var(--sidebar-link-hover-text); }
.sidebar .nav-link:hover i.fas, .sidebar .nav-link:hover i.far { color: var(--sidebar-link-hover-text); }
.sidebar .nav-link:hover span { transform: translateX(6px); } /* Más movimiento al hover */

.sidebar .nav-link.active, .sidebar .nav-link.active-parent {
    background-color: var(--sidebar-link-active-bg);
    color: var(--sidebar-link-active-text);
    font-weight: 600;
    border-left-color: var(--sidebar-border-active);
    box-shadow: inset 0 0 12px rgba(0,0,0,0.3); /* Sombra interna más profunda */
}
.sidebar .nav-link.active i.fas, .sidebar .nav-link.active i.far,
.sidebar .nav-link.active-parent i.fas, .sidebar .nav-link.active-parent i.far {
    color: var(--sidebar-link-active-text);
}
.sidebar .nav-link .arrow-icon {
    transition: transform 0.3s ease;
    margin-left: auto;
    font-size: 0.9em;
}
.sidebar .nav-link[aria-expanded="true"] .arrow-icon { transform: rotate(180deg); }

.sidebar .sub-menu {
    background-color: var(--sidebar-submenu-bg);
    padding-left: 0;
    list-style: none;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    border-top: 1px solid rgba(255,255,255,0.08); /* Borde sutil */
}
.sidebar .sub-menu .nav-link {
    padding-left: calc(1.5rem + 22px + 1.1rem); /* Alineación con el icono del padre */
    font-size: 0.9rem; /* Tamaño de sub-link */
    font-weight: 400;
    border-left: none;
    color: rgba(255,255,255,0.75); /* Color más legible */
}
.sidebar .sub-menu .nav-link::before {
    content: '—';
    left: 1.7rem; /* Ajuste de posición */
    font-size: 1em; /* Más legible */
    color: var(--sidebar-icon-color);
}
.sidebar .sub-menu .nav-link:hover::before, .sidebar .sub-menu .nav-link.active::before {
    color: var(--sidebar-link-active-text);
}
.sidebar .sub-menu .nav-link:hover {
    background-color: rgba(255,255,255,0.08); /* Fondo de hover más sutil */
    color: #ffffff;
}
.sidebar .sub-menu .nav-link.active {
    background-color: transparent;
    color: var(--sidebar-link-active-text) !important;
    font-weight: 500;
}
.sidebar .sub-menu .nav-link i.fas { display: none; }

.sidebar-footer {
    padding: 0.85rem 0; /* Más padding */
    margin-top: auto; /* Para que siempre esté al fondo */
    border-top: 1px solid rgba(255, 255, 255, 0.18); /* Borde más visible */
    flex-shrink: 0; /* Evita que el footer se encoja */
}
.sidebar-divider {
    margin: 0.85rem 1.5rem;
    border-color: rgba(255, 255, 255, 0.15);
}
.sidebar .logout-link {
    color: var(--sidebar-text-color);
    padding: 0.95rem 1.5rem;
    font-size: 0.98rem;
    font-weight: 500;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    text-decoration: none;
    /* Estilos específicos para el botón de cerrar sesión */
    background-color: rgba(220, 53, 69, 0.2); /* Fondo rojo sutil */
    border-radius: var(--border-radius-md); /* Bordes redondeados */
    margin: 0 1.5rem; /* Margen para que no toque los bordes */
    justify-content: center; /* Centrar el contenido */
    box-shadow: var(--box-shadow-xs); /* Sombra sutil */
}
.sidebar .logout-link:hover {
    background-color: var(--danger-color); /* Rojo completo al hover */
    color: var(--text-light);
    transform: translateY(-3px); /* Pequeña elevación */
    box-shadow: var(--box-shadow-sm); /* Sombra más pronunciada al hover */
}
.sidebar .logout-link i.fas {
    width: 22px;
    margin-right: 1.1rem;
    color: rgba(255, 255, 255, 0.8); /* Color del icono */
    transition: var(--transition-base);
}
.sidebar .logout-link:hover i.fas {
    color: var(--text-light);
}


/* -------------------------------------------------------------------------- */
/* Mobile Top Navbar (Barra de Navegación Superior en Móviles)
/* -------------------------------------------------------------------------- */
.mobile-top-navbar {
    background: var(--primary-gradient); /* Usar el degradado primario */
    height: var(--mobile-navbar-height);
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed; /* Fija la barra en la parte superior */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    box-shadow: var(--box-shadow-md); /* Sombra más definida */
    color: white; /* Asegura el color de texto blanco */
}

/* Los estilos del botón toggle móvil ahora están en includes/sidebar.php */

.mobile-navbar-brand {
    font-family: var(--font-family-base);
    font-size: 1.5rem; /* Más grande */
    font-weight: 700;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
}
.mobile-navbar-brand i.fas { margin-right: 0.7rem; font-size: 1.3em; opacity: 0.9; }

/* Botón del menú hamburguesa en el header móvil */
.sidebar-toggle-btn-mobile {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.sidebar-toggle-btn-mobile:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.sidebar-toggle-btn-mobile:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* Overlay para móviles */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1039;
    display: none;
    backdrop-filter: blur(2px);
}


/* -------------------------------------------------------------------------- */
/* Main Content (Contenido Principal)
/* -------------------------------------------------------------------------- */
.main-content {
    margin-left: var(--sidebar-width); /* Deja espacio para el sidebar */
    width: calc(100% - var(--sidebar-width));
    padding: 1.5rem; /* Padding general para el contenido */
    background-color: var(--body-bg);
    transition: margin-left 0.3s ease-in-out, background-color 0.3s ease;
    overflow-y: auto; /* Permite scroll si el contenido es largo */
    height: 100vh; /* Ocupa el 100% del viewport height */
    padding-top: 1.5rem; /* Ajuste para cuando el sidebar está fijo */
}
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem; /* Más espacio */
    padding-bottom: 1.5rem; /* Más padding */
    border-bottom: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}
.page-header .page-title {
    font-size: 2.2rem; /* Título más grande */
    font-weight: 700; /* Más audaz */
    color: var(--text-dark);
    margin-bottom: 0;
    transition: color 0.3s ease;
}
.page-header .page-title i {
    margin-right: 1rem; /* Más espacio para el icono */
    font-size: 1.2em;
    color: var(--primary-color); /* Icono con color primario */
}
.page-header .btn {
    font-size: 1rem; /* Botones más grandes */
    padding: 0.7rem 1.4rem; /* Más padding */
    font-weight: 600; /* Semibold */
    border-radius: var(--border-radius-md);
    display: inline-flex; /* Para alinear iconos */
    align-items: center;
    gap: 0.5rem;
}

/* -------------------------------------------------------------------------- */
/* Cards (Tarjetas de Contenido)
/* -------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--border-color); /* Borde sutil para modo oscuro */
    border-radius: var(--border-radius-lg); /* Bordes más redondeados y modernos */
    box-shadow: var(--box-shadow-md); /* Sombra media para profundidad y elegancia */
    margin-bottom: 1.75rem;
    background-color: var(--content-bg);
    overflow: hidden;
    transition: var(--transition-base);
}

/* En modo claro, el borde es el mismo que el del :root */
html[data-theme='light'] .card {
    border: none;
}

.card-header {
    background-color: var(--primary-bg-subtle); /* Fondo sutil para el header de la tarjeta */
    border-bottom: 1px solid var(--border-color);
    padding: 1.2rem 1.8rem; /* Más padding */
    font-weight: 600;
    color: var(--text-dark);
    font-size: 1.15rem; /* Tamaño de fuente del header */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
    margin-bottom: 0;
    font-size: inherit;
    font-weight: 600;
    color: inherit;
}
.card-header i.fas, .card-header i.far {
    margin-right: 0.8rem; /* Más espacio */
    color: var(--text-muted);
    font-size: 1.1em;
}
.card-body {
    padding: 1.8rem; /* Más padding general */
}

/* -------------------------------------------------------------------------- */
/* Tables (Tablas de Datos)
/* -------------------------------------------------------------------------- */
.table {
    margin-bottom: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.table thead th {
    background-color: var(--light-bg);
    color: var(--text-muted);
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem; /* Más legible */
    letter-spacing: 0.08em;
    padding: 0.9rem 1.2rem; /* Más padding */
    vertical-align: middle;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.table tbody td {
    padding: 0.8rem 1.2rem; /* Más padding */
    vertical-align: middle;
    border-top: 1px solid var(--border-color);
    color: var(--text-dark);
    font-size: 0.95rem; /* Más legible */
    transition: border-color 0.3s ease, color 0.3s ease;
}
.table tbody tr:first-child td { border-top: none; }
.table-hover tbody tr:hover { 
    background-color: var(--primary-bg-subtle); 
}

/* Bordes redondeados para la tabla dentro de un card-body sin padding */
.card-body > .table:first-child:not(.no-border-radius) {
    border-top-left-radius: var(--border-radius-lg);
    border-top-right-radius: var(--border-radius-lg);
}
.card-body > .table:last-child:not(.no-border-radius) {
    border-bottom-left-radius: var(--border-radius-lg);
    border-bottom-right-radius: var(--border-radius-lg);
}

.table .badge {
    font-size: 0.85rem;
    padding: 0.4em 0.7em;
    font-weight: 600;
    border-radius: var(--border-radius-md);
}
/* Clases de tablas compactas */
.table.table-compact th, .table.table-compact td { font-size: 0.9rem; padding: 0.75rem 0.9rem; vertical-align: middle; }
.table.table-x-compact th, .table.table-x-compact td { font-size: 0.82rem; padding: 0.4rem 0.6rem !important; white-space: nowrap; vertical-align: middle; }
.table.table-x-compact .badge { font-size: 0.78rem; padding: 0.25em 0.5em; font-weight: 500; }
.table.table-x-compact .btn-group-sm > .btn, .table.table-x-compact .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
.table.table-x-compact .btn i.fas, .table.table-x-compact .btn i.fab { font-size: 0.9em; vertical-align: middle; }

/* Truncado de texto en tablas */
.truncate-text { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; cursor: help; }
.truncate-email-short { max-width: 180px; }


/* -------------------------------------------------------------------------- */
/* Forms (Formularios)
/* -------------------------------------------------------------------------- */
.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: #f8f9fa
}
.form-control, .form-select {
    font-size: 1rem;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    transition: var(--transition-base);
    background-color: var(--content-bg); /* Adaptado para modo oscuro */
    color: var(--text-dark); /* Adaptado para modo oscuro */
}
.form-control-sm, .form-select-sm {
    font-size: 0.9rem;
    border-radius: var(--border-radius-sm);
    padding: 0.5rem 0.8rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem hsla(var(--primary-hue), 70%, 55%, 0.25);
    outline: none;
    background-color: var(--content-bg);
}
/* Estilos para input-groups */
.input-group-text {
    background-color: var(--light-bg);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-md) 0 0 var(--border-radius-md); /* Redondeado solo a la izquierda */
    font-size: 1rem;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.input-group .form-control,
.input-group .form-select {
    border-radius: var(--border-radius-md); /* Restaura el radio para el control */
}
.input-group .form-control:not(:first-child),
.input-group .form-select:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group .btn {
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0; /* Botones al final del input-group */
}

/* Estilos para modales */
.modal-header {
    background-color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem 2rem;
    color: white;
    border-top-left-radius: var(--border-radius-lg); /* Bordes redondeados del modal */
    border-top-right-radius: var(--border-radius-lg);
}
.modal-header .modal-title {
    font-weight: 600;
    font-size: 1.5rem;
}
.modal-header .btn-close {
    filter: invert(1) brightness(2);
    opacity: 0.9;
}
.modal-content {
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--box-shadow-lg); /* Sombra grande para modales */
    background-color: var(--content-bg);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.modal-body {
    padding: 2rem;
}
.modal-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--light-bg);
    border-bottom-left-radius: var(--border-radius-lg);
    border-bottom-right-radius: var(--border-radius-lg);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.modal-lg { max-width: 960px; }


/* -------------------------------------------------------------------------- */
/* Login Page (Página de Inicio de Sesión)
/* -------------------------------------------------------------------------- */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(135deg, #2c3e50 0%, #1a2536 100%); /* Degradado oscuro y elegante */
    padding: 1.5rem;
}
.login-box {
    background: var(--content-bg);
    padding: 3.5rem; /* Más padding */
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg); /* Sombra dramática */
    width: 100%;
    max-width: 500px; /* Más ancho */
    text-align: center;
    position: relative;
    overflow: hidden;
}
.login-box::before, .login-box::after { /* Elementos decorativos sutiles */
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(40px); /* Desenfoque para un efecto suave */
    opacity: 0.4;
}
.login-box::before {
    top: -80px; left: -80px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%);
}
.login-box::after {
    bottom: -80px; right: -80px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, var(--success-color) 0%, transparent 70%);
}
.login-box .login-logo {
    font-size: 2.8rem; /* Más grande */
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 1.2rem;
    display: block;
    text-decoration: none;
    letter-spacing: 1.5px;
}
.login-box .login-logo i { margin-right: 0.8rem; font-size: 1.1em; }
.login-box .login-box-msg {
    margin-bottom: 3rem; /* Más espacio */
    font-size: 1.15rem; /* Más legible */
    color: var(--text-muted);
}
.login-box .form-control {
    height: auto;
    padding: 0.95rem 1.4rem; /* Más padding */
    font-size: 1.05rem; /* Más grande */
    margin-bottom: 1.8rem; /* Más espacio */
    border-radius: var(--border-radius-md);
}
.login-box .btn {
    padding: 0.95rem 2rem; /* Más padding */
    font-size: 1.15rem; /* Más grande */
    font-weight: 600;
    border-radius: var(--border-radius-md);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transition: var(--transition-base);
}
.login-box .btn:hover {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
    box-shadow: var(--box-shadow-sm);
    transform: translateY(-2px);
}
.login-box .form-check-label {
    color: var(--text-muted);
}
.login-box .social-auth-links {
    margin-top: 2rem;
}
.login-box .social-auth-links a.btn {
    font-size: 0.95rem;
    padding: 0.7rem 1.2rem;
}


/* -------------------------------------------------------------------------- */
/* Lift Effect (Efecto de Elevación al Hover)
/* -------------------------------------------------------------------------- */
.lift { transition: var(--transition-base); }
.lift:hover { transform: translateY(-8px); box-shadow: var(--box-shadow-lg) !important; }

/* -------------------------------------------------------------------------- */
/* Scrollbars (Barras de Desplazamiento Personalizadas)
/* -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 12px; height: 12px; } /* Más gruesas */
::-webkit-scrollbar-track { background: var(--body-bg); border-radius: 6px; } /* Más visible y suave */
::-webkit-scrollbar-thumb { background: var(--text-muted-light); border-radius: 6px; } /* Color sutil */
::-webkit-scrollbar-thumb:hover { background: var(--secondary-color); } /* Más oscuro al hover */

html[data-theme='dark'] ::-webkit-scrollbar-track { background: var(--scrollbar-track-bg, var(--body-bg)); }
html[data-theme='dark'] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-bg, var(--text-muted-light)); }
html[data-theme='dark'] ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover-bg, var(--secondary-color)); }

.sidebar-nav::-webkit-scrollbar { width: 8px; } /* Más delgado para sidebar */
.sidebar-nav::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); }


/* -------------------------------------------------------------------------- */
/* Responsive Design (Diseño Adaptativo)
/* -------------------------------------------------------------------------- */
@media (max-width: 991.98px) { /* Tablet y Móviles (breakpoint de Bootstrap: lg) */
    :root { 
        --sidebar-width: 280px; /* Ancho en móvil */
        --base-font-size: 15px; /* Ligeramente más pequeño en tablets/móviles */
    }
    body { padding-top: var(--mobile-navbar-height); }
    /* El CSS del sidebar en móviles se maneja en sidebar.php */
    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 1rem; /* Menos padding en móvil */
        height: calc(100vh - var(--mobile-navbar-height));
        padding-top: 1rem;
    }
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .page-header .page-title {
        margin-bottom: 0.75rem;
        font-size: 1.8rem;
    }
    .page-header .btn {
        width: 100%;
        margin-top: 0.5rem;
    }
    /* Formularios y elementos dentro de tarjetas */
    .card-body form.row > [class*="col-md-"],
    .card-body form.row > [class*="col-lg-"] {
        margin-bottom: 1rem;
    }
    .card-body form.row > [class*="col-md-"]:last-child,
    .card-body form.row > [class*="col-lg-"]:last-child {
        margin-bottom: 0;
    }
    .card-body form.row .d-flex.justify-content-end {
        flex-direction: column;
        gap: 0.75rem;
    }
    .card-body form.row .d-flex.justify-content-end .btn {
        width: 100%;
        margin-right: 0 !important;
    }
    /* Login Page Responsive */
    .login-box { margin: 1rem; padding: 2.5rem; }
    .login-box .login-logo { font-size: 2.2rem; }
    .login-box .login-box-msg { font-size: 1.05rem; margin-bottom: 1.5rem; }
    .login-box .form-control { padding: 0.75rem 1rem; font-size: 1rem; margin-bottom: 1rem; }
    .login-box .btn { padding: 0.75rem 1.5rem; font-size: 1rem; }
}

/* -------------------------------------------------------------------------- */
/* Utility Classes (Clases de Utilidad)
/* -------------------------------------------------------------------------- */
.rounded-pill { border-radius: 50rem !important; }
.shadow-sm { box-shadow: var(--box-shadow-sm) !important; }
.shadow-md { box-shadow: var(--box-shadow-md) !important; }
.shadow-lg { box-shadow: var(--box-shadow-lg) !important; }
/* Para elementos que necesitan una sombra extra pequeña */
.shadow-xs { box-shadow: var(--box-shadow-xs) !important; }

/* Para alinear íconos con texto en algunos botones */
.btn.icon-left {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* -------------------------------------------------------------------------- */
/* Perfiles Vendidos Page Specific Styles
/* -------------------------------------------------------------------------- */
/* Botón de Alertas en el Header de la Página */
.alerts-button {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: var(--text-dark-emphasis); /* Ajustado para mejor contraste */
    font-weight: 600;
    transition: var(--transition-base);
    box-shadow: var(--box-shadow-sm);
}
.alerts-button:hover {
    background-color: var(--warning-text-emphasis);
    border-color: var(--warning-text-emphasis);
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-md);
}
html[data-theme='light'] .alerts-button {
    color: white; /* Color original para modo claro */
}

.alerts-count-badge { /* Badge del contador en el botón de alertas */
    background-color: var(--danger-color) !important;
    color: white !important;
    font-size: 0.75em;
    padding: 0.3em 0.6em;
    border-radius: 50%;
    position: relative;
    top: -2px;
}

/* Estilos de las Tarjetas de Suscripción (Cada perfil vendido) */
.subscription-card-wrapper {
    /* Contenedor de la tarjeta, sin estilos directos complejos para rendimiento */
}

.subscription-card {
    border-radius: var(--border-radius-lg);
    background-color: var(--content-bg);
    border: 1px solid var(--border-color); /* Borde sutil */
    box-shadow: var(--box-shadow-sm); /* Sombra suave */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    overflow: hidden;
    height: 100%; /* Asegura que todas las tarjetas tengan la misma altura en una fila */
    display: flex;
    flex-direction: column; /* Para empujar el footer hacia abajo */
}

html[data-theme='light'] .subscription-card {
    border: none;
}


.subscription-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-md); /* Sombra más pronunciada al hover */
}

/* Efectos de Brillo en el Borde para Alertas (en tarjetas individuales) */
.card-glow-warning {
    box-shadow: inset 0 0 0 3px var(--warning-color), var(--box-shadow-sm); /* Borde interior brillante */
}
.card-glow-danger {
    box-shadow: inset 0 0 0 3px var(--danger-color), var(--box-shadow-sm); /* Borde interior brillante */
}

/* Estilo para cards canceladas - Color plomo/desactivado MÁS VISIBLE */
.card-cancelada {
    background-color: #e9ecef !important;
    border: 3px solid #dc3545 !important;
    border-style: dashed !important;
    opacity: 0.8;
    filter: grayscale(0.6);
    position: relative;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.3) !important;
}

.card-cancelada::before {
    content: "CORTADO";
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #dc3545;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    z-index: 10;
    transform: rotate(15deg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.card-cancelada .card-header {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    position: relative;
}

.card-cancelada .card-header::after {
    content: "✕";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: bold;
    z-index: 1;
}

.card-cancelada .card-body {
    background-color: #f8f9fa !important;
    position: relative;
}

.card-cancelada .card-footer {
    background-color: #e9ecef !important;
    border-top-color: #dc3545 !important;
    border-top-width: 2px !important;
}

.card-cancelada:hover {
    transform: none !important;
    box-shadow: 0 0 20px rgba(220, 53, 69, 0.4) !important;
    opacity: 0.9;
}

.card-cancelada .detail-value {
    color: #6c757d !important;
    text-decoration: line-through;
}

.card-cancelada .detail-label {
    color: #6c757d !important;
}

.card-cancelada .detail-item {
    opacity: 0.7;
}

.card-cancelada .btn {
    opacity: 0.4;
    pointer-events: none;
    text-decoration: line-through;
}

.card-cancelada .progress-bar {
    background-color: #dc3545 !important;
}

.card-cancelada .platform-icon {
    opacity: 0.5;
    filter: grayscale(1);
}

.card-cancelada h5 {
    text-decoration: line-through;
    opacity: 0.8;
}

/* Encabezado de Tarjeta de Suscripción */
.subscription-card .card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.2); /* Borde interno transparente */
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    color: white; /* Color de texto predeterminado para headers de plataforma */
    position: relative;
    z-index: 1;
}
.subscription-card .card-header h5 {
    font-weight: 700;
    display: flex;
    align-items: center;
    margin-bottom: 0;
    flex-grow: 1;
    color: inherit;
}
.subscription-card .platform-icon {
    font-size: 1.8rem;
    margin-right: 0.75rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Colores de Encabezado de Plataforma (Asegurando buen contraste) */
/* Se utilizan los colores de los logos de las plataformas para un toque visual */
.header-netflix { background-color: #E50914; color: white; } /* Rojo */
.header-disney { background-color: #1A2A4B; color: white; } /* Azul oscuro */
.header-prime { background-color: #00A8E1; color: white; } /* Azul claro */
.header-hbo { background-color: #6C2B80; color: white; } /* Morado */
.header-spotify { background-color: #1DB954; color: white; } /* Verde */
.header-crunchyroll { background-color: #F47521; color: white; } /* Naranja */
.header-canva { background-color: #00C4CC; color: white; } /* Turquesa */
.header-paramount { background-color: #0064FF; color: white; } /* Azul Brillante */
.header-iptv { background-color: #6a1b9a; color: white; } /* Púrpura oscuro */
.header-capcut { background-color: #16C79A; color: white; } /* Verde Aqua */
.header-directv { background-color: #0199d6; color: white; } /* Azul cielo */
.header-movistar { background-color: #147ee5; color: white; } /* Azul Movistar */
.header-flujo { background-color: #FF5722; color: white; } /* Naranja vibrante */
.header-viki { background-color: #FF005D; color: white; } /* Rosa chicle */
.header-youtube { background-color: #FF0000; color: white; } /* Rojo YouTube */
.header-default { background-color: var(--secondary-color); color: white; } /* Color por defecto */


/* Pie de Tarjeta de Suscripción */
.subscription-card .card-footer {
    background-color: var(--light-bg);
    border-top: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem; /* Espacio entre botones */
    justify-content: flex-end;
    margin-top: auto; /* Empuja el footer hacia abajo si el contenido variable */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Botones de Copiar y Mostrar/Ocultar Contraseña */
.copy-btn, .toggle-password-btn {
    cursor: pointer;
    transition: color 0.2s, transform 0.1s;
    color: var(--text-muted);
    opacity: 0.8;
    font-size: 0.95rem;
}
.copy-btn:hover, .toggle-password-btn:hover {
    color: var(--primary-color);
    opacity: 1;
    transform: translateY(-1px);
}

/* Listas de Detalles de Suscripción */
.subscription-card .list-group-item {
    background: transparent !important;
    border: none !important;
    padding: .6rem 0;
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.subscription-card .list-group-item .text-muted {
    color: var(--text-muted) !important;
    font-weight: 500;
    display: flex;
    align-items: center;
}
.subscription-card .list-group-item .text-muted i {
    margin-right: 0.75rem;
    font-size: 1.1rem;
    color: var(--secondary-color); /* Iconos de detalle en gris */
}
.subscription-card .list-group-item .fw-bold {
    color: var(--text-dark);
    word-break: break-all;
}

/* Input de Contraseña en la Tarjeta */
.subscription-card .list-group-item .form-control-plaintext {
    background-color: transparent !important;
    border: none !important;
    padding: 0;
    font-size: inherit;
    color: inherit;
    width: 130px; /* Ancho fijo para alineación */
    text-align: right;
    font-family: 'Roboto Mono', monospace; /* Fuente monoespaciada para contraseñas */
}
.subscription-card .list-group-item .form-control-plaintext:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Botones de Acción en Footer de Tarjeta */
.subscription-card .card-footer .btn {
    padding: .6rem 1.2rem;
    font-size: 0.9rem;
    border-radius: 50rem !important; /* Totalmente redondeado */
    font-weight: 500;
    transition: var(--transition-base);
    box-shadow: var(--box-shadow-xs); /* Sombra muy sutil */
}
.subscription-card .card-footer .btn:hover {
    transform: translateY(-2px); /* Pequeña elevación */
    box-shadow: var(--box-shadow-sm); /* Sombra más pronunciada */
}
/* Colores de botones en el footer de la tarjeta */
.subscription-card .btn-outline-primary { color: var(--primary-color); border-color: var(--primary-color); }
.subscription-card .btn-outline-primary:hover { background-color: var(--primary-color); color: white; }
.subscription-card .btn-outline-secondary { color: var(--secondary-color); border-color: var(--secondary-color); }
.subscription-card .btn-outline-secondary:hover { background-color: var(--secondary-color); color: white; }
.subscription-card .btn-outline-success { color: var(--success-color); border-color: var(--success-color); }
.subscription-card .btn-outline-success:hover { background-color: var(--success-color); color: white; }
.subscription-card .btn-outline-warning { color: var(--warning-color); border-color: var(--warning-color); }
.subscription-card .btn-outline-warning:hover { background-color: var(--warning-color); color: var(--text-dark); } /* Texto oscuro */
.subscription-card .btn-outline-danger { color: var(--danger-color); border-color: var(--danger-color); }
.subscription-card .btn-outline-danger:hover { background-color: var(--danger-color); color: white; }
.subscription-card .btn-renew { /* Botón de renovar en el header de la tarjeta */
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
    font-weight: 600;
    background-color: white !important;
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    transition: var(--transition-base);
    box-shadow: var(--box-shadow-xs);
}
.subscription-card .btn-renew:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
    transform: scale(1.05);
    box-shadow: var(--box-shadow-sm);
}


/* Barra de Progreso */
.progress {
    height: 10px;
    border-radius: 10px;
    background-color: var(--border-color);
    margin-top: 12px;
}
.progress-bar {
    transition: width 0.6s ease;
}
/* No usar animación `progress-bar-animated` por rendimiento y preferencia estética */


/* -------------------------------------------------------------------------- */
/* Centro de Notificaciones (Alertas en el Modal)
/* -------------------------------------------------------------------------- */
.modal-header.bg-warning {
    background-color: var(--warning-color) !important;
    color: #212529 !important; /* Texto oscuro forzado para contraste */
}
.modal-header.bg-warning .btn-close {
    filter: none; /* Quita el filtro de color blanco */
    opacity: 0.7;
    color: var(--text-dark); /* Color oscuro para el icono de cerrar */
}
html[data-theme='light'] .modal-header.bg-warning .btn-close {
    color: #212529;
}
.modal-header.bg-warning .btn-close:hover {
    opacity: 1;
}

.alert-notifications-card .card-body {
    padding: 1.5rem; /* Ajuste el padding para el cuerpo de la tarjeta de notificaciones */
}

.alert-notifications-card .alert.alert-item {
    border-left: 6px solid; /* Borde más grueso */
    border-radius: var(--border-radius-md); /* Bordes más consistentes */
    padding: 1.25rem 1.5rem;
    box-shadow: var(--box-shadow-sm);
    margin-bottom: 1.25rem;
    background-color: var(--content-bg); /* Fondo blanco */
}
.alert-notifications-card .alert.alert-item:last-child {
    margin-bottom: 0;
}

.alert-notifications-card .alert-heading {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    color: var(--text-dark);
}
.alert-notifications-card .alert-heading i {
    margin-right: 0.75rem;
    font-size: 1.1em;
}
.alert-notifications-card .alert-item.alert-danger { border-left-color: var(--danger-color); }
.alert-notifications-card .alert-item.alert-warning { border-left-color: var(--warning-color); }
.alert-notifications-card .alert-item.alert-success { border-left-color: var(--success-color); }


.alert-notifications-card .alert-list {
    margin-top: 0.5rem;
}
.alert-notifications-card .alert-list li {
    padding: 0.75rem 0;
    border-bottom: 1px dashed var(--border-color); /* Separador sutil */
}
.alert-notifications-card .alert-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.alert-notifications-card .alert-info-text {
    flex-grow: 1;
    padding-right: 1rem;
}
.alert-notifications-card .alert-info-text strong {
    color: var(--primary-text-emphasis);
    font-size: 1.05rem;
}
.alert-notifications-card .alert-info-text small {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.alert-notifications-card .alert-actions {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
}

.alert-notifications-card .btn-renew-alert {
    background-color: var(--success-color) !important; /* Verde sólido */
    color: white !important;
    border: none;
    font-weight: 600;
    box-shadow: var(--box-shadow-xs);
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    transition: var(--transition-base);
}
.alert-notifications-card .btn-renew-alert:hover {
    background-color: var(--success-text-emphasis) !important;
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-sm);
}

.alert-notifications-card .btn-outline-info { /* Botón de WhatsApp en alerta */
    color: var(--info-color) !important;
    border-color: var(--info-color) !important;
    background-color: transparent !important;
    box-shadow: var(--box-shadow-xs);
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    transition: var(--transition-base);
}
.alert-notifications-card .btn-outline-info:hover {
    background-color: var(--info-color) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-sm);
}

/* Badges en la parte superior del cuerpo de la página (no en el centro de notificaciones) */
/* Estas son las de "Suscripciones Vencidas (hace X días)" */
.alert-badge {
    font-size: 0.8em;
    padding: .5em 1em;
    margin: 0 .4em .4em 0;
    border-radius: 50rem !important;
    font-weight: 600;
    text-shadow: none;
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
    cursor: pointer;
}
.alert-badge:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-sm);
}

/* Notas de Suscripción Colapsables */
.notes-toggle {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.9rem;
    transition: color 0.2s ease;
    margin-top: 0.75rem;
    display: block;
    text-align: right;
}
.notes-toggle:hover {
    color: var(--primary-color);
    text-decoration: underline;
}
.notes-toggle .fas {
    font-size: 0.8em;
    transition: transform 0.2s ease;
}
.notes-toggle[aria-expanded="true"] .fas {
    transform: rotate(180deg);
}
.notes-collapse-content {
    margin-top: 0.75rem;
    padding: 1rem;
    background-color: var(--body-bg);
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}


/* Ajustes Responsive Específicos para Perfiles Vendidos */
@media (max-width: 767.98px) { /* Móviles (breakpoint de Bootstrap: md) */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
    }
    .page-header .page-title {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }
    .page-header .btn {
        width: 100%;
        font-size: 0.9rem;
        padding: 0.6rem 1rem;
    }
    /* Ajustes específicos para el botón de Alertas en el header */
    .page-header .alerts-button {
        width: 100%;
        margin-bottom: 0.75rem; /* Espacio si el botón "Nueva Suscripción" está debajo */
    }
    .page-header .btn-primary { /* Asegura que el botón "Nueva Suscripción" se apile bien */
        width: 100%;
    }
    .page-header .d-flex.align-items-center.gap-3 { /* Contenedor de botones en el header */
        flex-direction: column;
        width: 100%;
        gap: 0.75rem; /* Espacio entre botones apilados */
    }

    /* Centro de Notificaciones (dentro del modal) */
    .alert-notifications-card .card-body {
        padding: 1rem;
    }
    .alert-notifications-card .alert.alert-item {
        padding: 1rem;
        font-size: 0.95rem;
    }
    .alert-notifications-card .alert-heading {
        font-size: 1.15rem;
    }
    .alert-notifications-card .alert-list li {
        flex-direction: column; /* Apila texto y acciones */
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.75rem 0;
    }
    .alert-notifications-card .alert-actions {
        width: 100%;
        justify-content: flex-end; /* Alinea los botones a la derecha */
        margin-top: 0.5rem;
    }
    .alert-notifications-card .btn-renew-alert,
    .alert-notifications-card .btn-outline-info {
        flex-grow: 1; /* Permite que los botones crezcan para ocupar el espacio */
        font-size: 0.8rem;
        padding: 0.35rem 0.75rem;
    }

    /* Tarjetas de Suscripción Individuales */
    .subscription-card .card-header {
        padding: 0.8rem 1rem;
        font-size: 1rem;
    }
    .subscription-card .platform-icon {
        font-size: 1.5rem;
        margin-right: 0.5rem;
    }
    .subscription-card .card-body {
        padding: 1.2rem;
    }
    .subscription-card .list-group-item {
        font-size: 0.9rem;
        flex-direction: column;
        align-items: flex-start;
    }
    .subscription-card .list-group-item small.text-muted,
    .subscription-card .list-group-item .fw-bold {
        width: 100%;
        text-align: left;
    }
    .subscription-card .list-group-item .d-flex.align-items-center {
        width: 100%;
        justify-content: space-between;
    }
    .subscription-card .list-group-item .form-control-plaintext {
        width: auto; /* Permite que se ajuste al contenido */
        text-align: left;
    }
    .subscription-card .notes-toggle {
        text-align: left;
    }
    .subscription-card .card-footer {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.8rem 1rem;
    }
    .subscription-card .card-footer .btn {
        width: 100%;
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }
    .quick-search-icon {
        left: 0.8rem !important; /* Ajusta la posición del icono de búsqueda */
    }
    .form-control-lg.ps-5 {
        padding-left: 2.5rem !important; /* Asegura que el input tenga espacio para el icono */
    }
}