/**
 * Twenty-One Custom System Design para TodosalaWeb
 * Basado en la interfaz principal del sitio corporativo
 */

:root {
    --taw-primary: #121349;    /* Azul oscuro de títulos principales */
    --taw-secondary: #00b4bc;  /* Cian/Turquesa vibrante de botones de acción */
    --taw-dark-text: #1a1a2e;  /* Texto de alta legibilidad */
    --taw-light-bg: #f8fafc;   /* Fondo grisáceo ultra suave para secciones */
    --radius-md: 8px;
    --radius-lg: 14px;
}

/* 1. Ajustes Globales de Tipografía y Fondo */
body {
    color: var(--taw-dark-text) !important;
    background-color: #ffffff !important;
}

h1, h2, h3, h4, h5, h6, .text-dark {
    color: var(--taw-primary) !important;
    font-weight: 700 !important;
}

/* 2. Barra de Navegación Superior (Navbar) */
.app-nav {
    background-color: #ffffff !important;
    border-bottom: 2px solid #f1f5f9 !important;
    padding-top: 15px;
    padding-bottom: 15px;
}

/* Menú de navegación enlaces */
.navbar-light .navbar-nav .nav-link {
    color: var(--taw-primary) !important;
    font-weight: 500;
    font-size: 0.95rem;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: var(--taw-secondary) !important;
}

/* 3. Botones e Identidad Visual (Basado en tus CTAs) */
.btn-primary, .btn-info, .login-button {
    background-color: var(--taw-secondary) !important;
    border-color: var(--taw-secondary) !important;
    color: #ffffff !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    box-shadow: 0 4px 10px rgba(0, 180, 188, 0.2) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover, .btn-info:hover {
    background-color: #009aa0 !important;
    border-color: #009aa0 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(0, 180, 188, 0.3) !important;
}

/* Botones secundarios estilo esquema */
.btn-secondary {
    background-color: transparent !important;
    border: 2px solid var(--taw-primary) !important;
    color: var(--taw-primary) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
}

.btn-secondary:hover {
    background-color: var(--taw-primary) !important;
    color: #ffffff !important;
}

/* 4. Tarjetas Modernas (Dashboard del Cliente) */
.card {
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03) !important;
    background-color: #ffffff !important;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(18, 19, 73, 0.05) !important;
}

.card-header {
    background-color: var(--taw-light-bg) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: var(--taw-primary) !important;
    font-weight: 600 !important;
}

/* 5. Menú Lateral (Sidebar) */
.list-group-item.active {
    background-color: var(--taw-primary) !important;
    border-color: var(--taw-primary) !important;
    color: #ffffff !important;
    font-weight: 600;
}

.list-group-item {
    color: var(--taw-dark-text);
    border: 1px solid #e2e8f0;
}

.list-group-item:hover:not(.active) {
    background-color: var(--taw-light-bg) !important;
    color: var(--taw-secondary) !important;
}

/* 6. Alertas e Indicadores de Estado */
.badge-success, .status-active, .badge-paid {
    background-color: #27ae60 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
}

.badge-danger, .status-cancelled, .badge-unpaid {
    background-color: #eb5757 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
}

footer.footer {
    background-color: #06071b !important;
}
media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1480px !important;
  }
}