/* css/style.css - Versión Dark de "Vuelta al Sol" */

/* --- Paleta de Colores DARK --- */
:root {
    --color-fondo: #1A1A2E;             /* Gris oscuro muy profundo, casi negro */
    --color-tarjeta: #242A38;           /* Gris oscuro para las tarjetas, un poco más claro que el fondo */
    --color-primario: #00ADB5;          /* Un verde azulado vibrante como acento (Azul Turquesa) */
    --color-texto: #EEEEEE;             /* Blanco suave para el texto principal */
    --color-texto-secundario: #A0A0A0;  /* Gris claro para texto secundario */
    --color-borde: #3F4450;             /* Gris oscuro para bordes y separadores */
    --color-exito: #4CAF50;             /* Verde para acciones de éxito */
    --color-peligro: #F44336;           /* Rojo para acciones de peligro/eliminar */
    --color-informacion: #2196F3;       /* Azul para información/editar */
    --color-sol: #FFD700;               /* Dorado para el icono del sol */
}

/* --- Estilos Generales --- */
body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Puedes cambiar esto por 'Poppins' si lo importas */
    line-height: 1.6;
}

/* --- Cabecera y Títulos --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-texto);
}

.display-4 {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

h1 .bi-sun-fill {
    color: var(--color-sol); /* Icono del sol con color dorado */
}

.lead {
    color: var(--color-texto-secundario);
    font-size: 1.15rem;
}

/* --- Contenedores Principales --- */
.container {
    max-width: 960px; /* Limita el ancho para mejor lectura en pantallas grandes */
}

/* --- Estilos de las Tarjetas (Cards) --- */
.custom-card {
    background-color: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 0.75rem; /* Bordes redondeados */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra sutil para profundidad */
    overflow: hidden; /* Asegura que el contenido respete los bordes */
}

.custom-card .card-header {
    background-color: var(--color-borde); /* Un gris más oscuro para el header */
    color: var(--color-primario);
    border-bottom: 1px solid var(--color-borde);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Espacio entre icono y texto */
}

.custom-card .card-body {
    padding: 1.5rem;
}

/* --- Listas de Cumpleaños --- */
.list-group-item {
    background-color: transparent; /* Fondo transparente para las listas dentro de las tarjetas */
    color: var(--color-texto);
    border-color: var(--color-borde); /* Color de borde para separar elementos de la lista */
    padding: 0.75rem 0; /* Padding vertical */
}

.list-group-item:first-child { border-top-width: 0; }
.list-group-item:last-child { border-bottom-width: 0; }

.badge {
    background-color: var(--color-primario) !important; /* Insignias con el color de acento */
    color: var(--color-fondo) !important;
    font-weight: 600;
    padding: 0.5em 0.75em;
    border-radius: 0.5rem;
}

/* --- Botones --- */
.btn-primary {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
    color: var(--color-fondo); /* Texto oscuro en botón claro */
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btn-primary:hover {
    background-color: #00C6CC; /* Ligeramente más claro al pasar el ratón */
    border-color: #00C6CC;
    transform: translateY(-1px); /* Efecto sutil al pasar el ratón */
}

.btn-secondary { /* Botón de "Volver" en crud.php */
    background-color: var(--color-borde);
    border-color: var(--color-borde);
    color: var(--color-texto);
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-secondary:hover {
    background-color: #555A66;
    border-color: #555A66;
}

.btn-info { /* Botón de Editar */
    background-color: var(--color-informacion);
    border-color: var(--color-informacion);
    color: var(--color-blanco);
}
.btn-info:hover {
    background-color: #0d6efd; /* Color de Bootstrap por defecto más oscuro */
    border-color: #0d6efd;
}

.btn-danger { /* Botón de Eliminar */
    background-color: var(--color-peligro);
    border-color: var(--color-peligro);
    color: var(--color-blanco);
}
.btn-danger:hover {
    background-color: #dc3545; /* Color de Bootstrap por defecto más oscuro */
    border-color: #dc3545;
}


/* --- Formularios --- */
.form-control {
    background-color: var(--color-borde);
    border: 1px solid var(--color-tarjeta); /* Borde sutil */
    color: var(--color-texto);
    padding: 0.75rem 1rem;
    border-radius: 0.4rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
    background-color: var(--color-borde);
    border-color: var(--color-primario);
    color: var(--color-texto);
    box-shadow: 0 0 0 0.25rem rgba(0, 173, 181, 0.25); /* Sombra de foco con el color primario */
}

.form-label {
    color: var(--color-texto-secundario);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* --- Tablas --- */
.table {
    color: var(--color-texto);
}

.table thead th {
    color: var(--color-primario);
    border-bottom-color: var(--color-borde);
    font-weight: 600;
}

.table tbody tr {
    border-color: var(--color-borde);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05); /* Rayas sutiles para filas impares */
}

.table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Efecto hover más pronunciado */
}

/* --- Texto Mutado / Pequeño --- */
small, .text-muted {
    color: var(--color-texto-secundario) !important;
}

/* --- Iconos --- */
.bi {
    vertical-align: -0.125em; /* Ajusta la alineación de los iconos de Bootstrap */
}