/*
    style.css - Estilos personalizados para el Sistema de Tickets
    Este archivo se usa junto con la librería Bootstrap 4.5
*/

/* 1. Estilos Globales y Cuerpo */
body {
    /* Fondo claro global para la aplicación */
    background-color: #f4f6f9;
    /* Un poco de padding extra para evitar que el contenido toque los bordes */
    padding-bottom: 50px;
}

/* 2. Navegación y Encabezado */
.navbar {
    /* Pequeña sombra para que la barra de navegación destaque */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 3. Contenedores y Tarjetas */
.container, .container-fluid {
    /* Margen superior para separar del navbar */
    margin-top: 20px;
}

.card {
    /* Sombra ligera para un efecto de elevación moderno */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
}

/* 4. Tablas (Dashboard) */
.table-responsive {
    /* Estilo para que las tablas no se vean cortadas en móviles */
    overflow-x: auto;
}

.table-striped tbody tr:nth-of-type(odd) {
    /* Color de fondo sutil para filas impares */
    background-color: rgba(0, 0, 0, 0.03);
}

.table-hover tbody tr:hover {
    /* Resaltar la fila al pasar el ratón */
    background-color: #e9ecef;
}

/* Ajuste de color para la cabecera oscura */
.table thead.thead-dark th {
    background-color: #343a40;
    color: white;
    border-color: #454d55;
    vertical-align: middle;
}

/* 5. Elementos de Formulario (CRUD) */

/* Estilo para las etiquetas de los formularios */
label {
    font-weight: 600;
    color: #333;
}

/* 6. Mensajes y Notificaciones */
.alert-info {
    /* Color de fondo y borde más suave para las alertas informativas */
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

/* 7. Badges (Etiquetas de Estado) */

/* Hacer los badges un poco más grandes y uniformes */
.badge {
    padding: .4em .6em;
    font-size: 85%;
    min-width: 90px; /* Ancho mínimo para que todos los estados sean legibles */
    text-align: center;
}

/* Estilos de color específicos para estados si se usan en la aplicación: */
.badge-danger { /* Abierto */
    background-color: #dc3545;
    color: white;
}
.badge-info { /* En Progreso */
    background-color: #17a2b8;
    color: white;
}
.badge-success { /* Cerrado */
    background-color: #28a745;
    color: white;
}
.badge-warning { /* Pendiente de Pago */
    background-color: #ffc107;
    color: #333;
}

/* 8. Estilos del Formulario de Login (solo en login.php) */
.login-container .card-header {
    /* Centrar el texto en el encabezado de la tarjeta de login */
    text-align: center;
    border-radius: 0.5rem 0.5rem 0 0 !important;
}

/* 9. Botones de Acción en el Dashboard (Tabla) */
.btn-sm {
    margin: 1px;
}

/* Nuevo estilo para el estado Pagado */
.badge-primary {
    background-color: #007bff; /* Color azul de Bootstrap */
    color: white;
}