@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* ---
   NUEVO DISEÑO UNIFICADO
   Paleta de colores profesional y cómoda para la vista.
--- */

:root {
    --color-primary: #3498db; /* Azul principal suave */
    --color-primary-dark: #2980b9;
    --color-secondary: #2c3e50; /* Azul oscuro para cabeceras */
    --color-background: #ecf0f1; /* Gris muy claro de fondo */
    --color-surface: #ffffff; /* Blanco para tarjetas y tablas */
    --color-text-primary: #34495e; /* Gris oscuro para texto */
    --color-text-secondary: #7f8c8d;
    --color-border: #bdc3c7;
    --color-success: #27ae60;
    --color-error: #c0392b;
    --color-warning: #f39c12;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    --border-radius: 6px;
    --max-width: 1400px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text-primary);
    font-size: 16px;
    line-height: 1.6;
}

/* --- LAYOUT Y CONTENEDORES --- */

header, .navigation, .container, footer {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 15px;
}

header {
    background-color: var(--color-secondary);
    color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

.header-titulo, .nombre_empresa {
    flex: 1 1 400px;
    text-align: center;
}

.header-titulo h2 {
    font-size: 28px;
    margin-bottom: 10px;
}
/* Estilos para la fecha y hora del sistema en el header*/
.fechayhora {
    font-size: 14px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 5px 12px;
    border-radius: 20px;
    display: inline-block;
}

/* --- INICIO: Estilos para el logo en el header --- */
.logo-titulo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px; /* Espacio entre el logo y el título */
}

.header-logo {
    height: 70px; /* Altura recomendada */
    width: auto;  /* El ancho se ajusta solo */
    border-radius: 5px;
}

.fa-sun, .fa-utensils, .fa-cloud-sun, .fa-moon, .fa-cloud-moon  {
    font-size: 20px;
    transition: transform 0.3s ease; /* Transición suave */
}

.fa-sun:hover, .fa-utensils:hover, .fa-cloud-sun:hover, .fa-moon:hover, .fa-cloud-moon:hover {
    color: yellow;
    transform: scale(1.2); /* Aumenta el tamaño en un 20% */
    cursor: pointer;
}

/* --- FIN: Estilos para el logo en el header --- */

.nombre_empresa h2 { font-size: 18px; }
.nombre_empresa p { font-size: 14px; opacity: 0.8; }

.navigation { padding: 0; }

.topnav {
    background-color: var(--color-primary);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: var(--shadow);
}

.topnav a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
    font-size: 18px;
    transition: background-color 0.3s ease;
}

.topnav a:hover { background-color: var(--color-primary-dark); }
.topnav a.active { background-color: var(--color-secondary); }

/* Estilos para la información del usuario sugeridos */
.user-info {
    display: flex;
    align-items: center;
    padding: 14px 20px; /* Mismo padding que los enlaces */
    font-size: 14px;
    color: white;
    background-color: transparent; /* Mismo fondo que el resto del menú */
    border-radius: 0;
}
.user-info i {
    margin-right: 8px;
    font-size: 18px;
}

/* Banner de Alerta de Vencimientos */
.alerta-vencimientos {
    background-color: var(--color-warning);
    color: var(--color-text-primary);
    padding: 15px;
    margin: 15px auto;
    border-radius: var(--border-radius);
    text-align: center;
    font-weight: 500;
    box-shadow: var(--shadow);
    max-width: 800px;
    animation: fadeInDown 0.5s ease-out;
}
.alerta-vencimientos a {
    color: inherit;
    text-decoration: none;
    display: block;
}
.alerta-vencimientos i {
    margin-right: 10px;
    animation: titilar-bell 2s ease-in-out infinite;
}

/* Banner de Alerta de Vencidos (Rojo) */
.alerta-vencidos-rojo {
    background-color: var(--color-error);
    color: white;
    padding: 15px;
    margin: 15px auto;
    border-radius: var(--border-radius);
    text-align: center;
    font-weight: 500;
    box-shadow: var(--shadow);
    max-width: 800px;
    animation: fadeInDown 0.5s ease-out;
}
.alerta-vencidos-rojo a { color: inherit; text-decoration: none; display: block; }
.alerta-vencidos-rojo i { margin-right: 10px; }
/* Estilo para el ícono del menú hamburguesa (oculto por defecto) */
.topnav .icon {
    display: none;
    font-size: 20px;
}

/* ---
   FIN DE NUEVO DISEÑO
--- */

footer {
    text-align: center;
    padding: 25px;
    margin-top: 30px;
    border-top: 1px solid var(--color-border);
    font-size: 14px;
    color: var(--color-text-secondary);
}
footer a { color: var(--color-primary); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* --- TABLAS PRINCIPALES (index, bajas, buscar) --- */

table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

table th, table td {
    padding: 12px 15px;
    text-align: left;
    vertical-align: middle;
}

table th {
    background-color: var(--color-secondary);
    color: white;
    font-weight: 500;
    text-align: center;
}

table tbody tr {
    border-bottom: 1px solid var(--color-border); /* Aplicamos el borde a la fila completa */
}


table td {
    color: var(--color-text-primary);
    text-align: left;
}

table tbody tr:last-child { border-bottom: none; } /* Quitamos el borde de la última fila */
table tbody tr:hover { background-color: #f5f7fa; } /* Mantenemos el efecto hover */

/* Estilo para la tabla de clientes dados de baja */
.tabla-bajas td {
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Estilos para la celda de acciones en la tabla principal */
table td.acciones {
    text-align: center;
    white-space: nowrap; /* Evita que los botones se partan en dos líneas */
}
/* Estilos para unificar el tamaño de los botones de acción en la tabla */
.acciones .boton-mostrar-matafuegos,
.acciones .boton-mostrar-vehiculos,
.acciones .boton-crear-certificado,
.acciones .boton-editar,
.acciones .delete-user-button-baja {
    width: 40px;  /* Ancho fijo */
    height: 36px; /* Alto fijo */
    padding: 0;   /* Quitar padding para controlar el tamaño exacto */
    display: inline-flex; /* Centrar el contenido (ícono) */
    align-items: center;
    justify-content: center;
}

/* NUEVO: Estilo para el indicador de WhatsApp junto al nombre */
.whatsapp-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-left: 8px;
}
/* NUEVO: Contenedor para el ícono de WhatsApp y los contadores numéricos */
.whatsapp-container {
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Espacio entre el ícono principal y los contadores */
    vertical-align: middle; /* Alinea el conjunto con el texto del propietario */
}

/* NUEVO: Estilos para los círculos de los contadores */
.whatsapp-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: white;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.counter-proximo { background-color: var(--color-warning); color: var(--color-text-primary); }
.counter-vencido { background-color: var(--color-error); }

/* NUEVO: Hacer el ícono de WhatsApp más "bold" (grueso) */
.whatsapp-indicator i {
    font-weight: 900; /* Aumenta el grosor del ícono */
}

/* Hacemos los botones de acción más pequeños y compactos */
.acciones .boton-crear-certificado,
.acciones .boton-generar-remito,
.acciones .boton-editar,
.acciones .delete-user-button-baja,
.acciones .delete-user-button-activar,
.acciones .delete-user-button-definitivo {
    padding: 8px 12px;
    margin: 0 3px;
}

/* Efecto de hover para todos los botones de acción en las tablas */
.acciones .boton-mostrar-matafuegos:hover,
.acciones .boton-mostrar-vehiculos:hover,
.acciones .boton-crear-certificado:hover,
.acciones .boton-generar-remito:hover,
.acciones .boton-editar:hover,
.acciones .delete-user-button-baja:hover,
.acciones .delete-user-button-activar:hover,
.acciones .delete-user-button-definitivo:hover {
    transform: scale(1.15); /* Se agranda un 15% */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
}

/* --- NUEVO: Estilo para el menú de acciones desplegable (versión simplificada) --- */
/* REVERTIDO: Se eliminan los estilos de ocultar/mostrar para que todos los botones sean visibles */
.acciones {
    display: flex;
    align-items: center;
    gap: 5px; /* Mantenemos el espacio entre botones */
    justify-content: flex-start; /* Alinea los botones visibles a la izquierda */
}

/* --- FORMULARIOS (altas, configuraciones, etc.) --- */

.container-section {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    background-color: var(--color-surface);
    padding: 25px;
}


.clientes-section, .matafuegos-section, .vehiculos-section, .configuration-section, .presupuesto_section {
    flex: 1 1 400px;
    min-width: 320px;
    background-color: var(--color-surface);
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-top: 20px; /* Añade un margen superior para separar las secciones */
}

.clientes-section h2, .matafuegos-section h2, .vehiculos-section h2, .configuration-section h2, .presupuesto_section {
    font-size: 22px;
    color: var(--color-secondary);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-background);
}

/* Contenedor para la tabla de precios con scroll */
.tabla-precios-container {
    max-height: 400px; /* Altura máxima antes de que aparezca el scroll */
    overflow-y: auto;  /* Scroll vertical si el contenido excede la altura */
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    margin-bottom: 20px; /* Espacio antes del formulario de agregar */
}

/* Estilos específicos para la tabla de precios para hacerla más compacta */
#tabla-precios th, #tabla-precios td {
    padding: 7px 9px; /* Reducimos el padding */
    font-size: 14px;   /* Reducimos el tamaño de la fuente */
    white-space: nowrap; /* Evita que el texto se parta en varias líneas */
    text-align: center; /* Centralizamos los datos de Kg, Clase, Servicio, Precio, Desde, Hasta, Icono de basura (eliminar)*/
}

/* Estilo para el botón/icono de eliminar en la tabla de precios */
#tabla-precios .btn-eliminar {
    color: var(--color-error);
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
    /* Aseguramos que el ícono sea visible y no herede otros estilos de botón */
    background: none;
    border: none;
    padding: 0;
}

#tabla-precios .btn-eliminar:hover {
    color: #a52112; /* Rojo más oscuro */
    transform: scale(1.2);
}

/* NUEVO: Estilo para resaltar precios vencidos en la tabla de configuraciones */
.precio-vencido td {
    color: var(--color-error) !important; /* Texto en rojo */
    opacity: 0.75; /* Ligeramente atenuado para indicar que no está activo */
    font-style: italic;
}

input, select, textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--color-text-primary);
}

/* --- BOTONES --- */

.boton, .boton_crear_pdf, .boton-crear, .boton-empresa, .boton-precios, .boton-editar, .boton-eliminar, .boton-insertar, .btn-success,
.boton-mostrar-matafuegos, .boton-mostrar-vehiculos, .boton-crear-certificado, .boton-generar-remito, .delete-user-button-baja,
.delete-user-button-activar, .delete-user-button-definitivo, .boton-crear-oblea, .boton_editar_clientes,
.boton_editar_matafuegos, .boton_editar_vehiculos, .boton_volver, #confirmDeleteBaja, #cancelDeleteBaja,
.boton-buscar {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s, transform 0.2s;
}

.boton:hover, .boton_crear_pdf:hover, .boton-crear:hover, .boton-empresa:hover, .boton-precios:hover, .boton-editar:hover, .boton-eliminar:hover, .boton-insertar:hover, .btn-success:hover {
    transform: translateY(-2px);
}

.boton-crear, .boton_crear_pdf, .boton-empresa, .boton-precios, .btn-success, .boton-crear-certificado { background-color: var(--color-success); }
.boton-generar-remito { background-color: #34495e; } /* Color azul oscuro, más sobrio */
.boton-editar, .boton-insertar { background-color: var(--color-primary); }
.boton-eliminar, .delete-user-button-baja, .delete-user-button-definitivo { background-color: var(--color-error); }
.delete-user-button-activar, .boton-crear-oblea { background-color: var(--color-warning); color: var(--color-text-primary); }
.boton-mostrar-matafuegos { background-color: #16a085; }
.boton-mostrar-vehiculos { background-color: #8e44ad; }
.boton-buscar { background-color: #34495e; } /* Azul oscuro para el botón de búsqueda */
.boton_volver a { color: white; text-decoration: none; }
.boton_editar_clientes, .boton_editar_matafuegos, .boton_editar_vehiculos, .boton_volver { background-color: var(--color-primary); }

/* Estilos para los botones de editar/eliminar dentro de las tarjetas */
.matafuego-container .boton-editar-matafuegos,
.matafuego-container .boton-eliminar-matafuegos,
.vehiculo-container .boton-editar-vehiculos,
.vehiculo-container .boton-eliminar-vehiculos {
    padding: 8px 15px;
    font-size: 14px;
}
.matafuego-container .boton-editar-matafuegos, .vehiculo-container .boton-editar-vehiculos {
    background-color: var(--color-primary);
}
.matafuego-container .boton-eliminar-matafuegos, .vehiculo-container .boton-eliminar-vehiculos {
    background-color: var(--color-error);
}

/* --- COMPONENTES ESPECÍFICOS --- */

/* Buscador */
.buscador {
    display: none; /* Se muestra con JS */
    padding: 20px;
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
    margin: 20px auto;
    max-width: 800px;
    box-shadow: var(--shadow);
}
.buscador form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
}
.buscador input, .buscador select { flex: 1; margin-bottom: 0; }
.buscador button { margin: 0; }

/* Listas de Matafuegos y Vehículos */
.matafuegos, .vehiculos { display: none; }
.matafuegos td, .vehiculos td { background-color: #fdfdfd; }

.lista-matafuegos, .lista-vehiculos {
    list-style: none;
    padding: 15px;
    display: grid;
    gap: 20px;
    /* Grid responsivo */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.matafuego-container, .vehiculo-container {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 15px;
    box-shadow: var(--shadow);
    transition: box-shadow 0.3s ease;
    position: relative;
}

.matafuego-container:hover, .vehiculo-container:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Clase para que una sección ocupe todo el ancho en el layout flex */
.full-width-section {
    flex-basis: 100% !important;
    max-width: 100%;
}

/* Estilos para el formulario de dos columnas en altas.php */
.form-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espacio entre columnas */
}

.form-column {
    flex: 1;
    min-width: 300px; /* Ancho mínimo para que no se aplasten en pantallas pequeñas */
    display: flex;
    flex-direction: column;
}

/* Ajustes para que los elementos del formulario ocupen el ancho de su columna */
.form-column input,
.form-column select,
.form-column textarea {
    width: 100%;
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
}

.matafuego-container li, .vehiculo-container li {
    line-height: 1.8; /* Aumenta el espacio entre líneas para mejor legibilidad */
}
.matafuego-container, .vehiculo-container {
    /* ... (estilos existentes) */
    text-align: left; /* Asegura que el contenido de las tarjetas siempre esté alineado a la izquierda */
}



.matafuego-actions, .vehiculo-actions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--color-background);
}

.contador-matafuego, .contador-vehiculo {
    position: absolute;
    top: -12px;
    left: -12px;
    background-color: var(--color-secondary);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 2px solid white;
}

/* Contenedor para alinear el contador de días */
.matafuego-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

/* Contadores de días */
.contador-dias {
    display: inline-block;
    color: white;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}
.contador-dias.verde { background-color: var(--color-success); }
.contador-dias.amarillo { background-color: var(--color-warning); color: var(--color-text-primary); }
.contador-dias.rojo { background-color: var(--color-error); }

.highlight-fecha {
    animation: titilar 1.5s ease-in-out infinite;
}
@keyframes titilar {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* --- Estilos para el contenedor de reparaciones --- */

/* El contenedor principal que agrupa todo */
#reparaciones_container {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #f9f9f9;
}

/* La etiqueta principal "Añadir Reparaciones" */
#reparaciones_container > label {
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 10px;
}

/* La grilla que contiene los checkboxes */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

/* Estilo para cada opción de reparación (etiqueta + checkbox) */
.custom-checkbox-reparacion {
    display: flex;
    justify-content: space-between; /* Pone el texto a la izquierda y el check a la derecha */
    align-items: center;
    background-color: #fff;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.custom-checkbox-reparacion:hover {
    background-color: #f0f0f0;
    border-color: #bbb;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes titilar-bell {
    0%, 100% { transform: rotate(0); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(-10deg); }
    20%, 40%, 60%, 80% { transform: rotate(10deg); }
}
/* Historial */
.icono-info-historial {
    color: var(--color-primary);
    cursor: pointer;
    font-size: 24px;
    transition: color 0.3s;
}
.icono-info-historial:hover { color: var(--color-primary-dark); }
.contenido-historial { display: none; margin-top: 10px; }
.lista-fechas-anteriores { list-style: none; padding-left: 15px; border-left: 2px solid var(--color-border); }
.lista-fechas-anteriores li { margin-bottom: 8px; }
.sin-actualizacion { color: var(--color-text-secondary); font-style: italic; }

/* Modales */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.modal.show {
    opacity: 1;
    visibility: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: var(--color-surface);
    padding: 30px;
    border-radius: var(--border-radius);
    width: 90%;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s;
}
.modal.show .modal-content {
    transform: scale(1);
}

.modal-content .close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    font-weight: bold;
    color: var(--color-border);
    cursor: pointer;
    transition: color 0.3s;
}
.modal-content .close:hover { color: var(--color-text-primary); }
.modal-content h3 { margin-bottom: 10px; }
.modal-content p { margin-bottom: 20px; color: var(--color-text-secondary); }

/* Paginación */
.pagination {
    text-align: center;
    margin: 30px 0;
}
.pagination a {
    display: inline-block;
    padding: 8px 16px;
    margin: 0 4px;
    background-color: var(--color-surface);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}
.pagination a.active {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    font-weight: bold;
}
.pagination a:hover:not(.active) {
    background-color: var(--color-primary-dark);
    color: white;
    border-color: var(--color-primary-dark);
}

/* Mensajes de feedback (AJAX) */
.form-message-clientes-agregados, .form-message-clientes-editados, .form-message-matafuego-matafuegos-agregados,
.form-message-vehiculo-vehiculos-agregados, .form-message-datos-empresa-agregados, .form-message-matafuegos-editados, .form-message-elija-un-matafuegos,
.form-message-vehiculos-editados, .form-message-datos-precios, .form-message-presupuesto, .form-message-elija-un-matafuegos {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-weight: 500;
    display: none;
    max-width: var(--max-width);
    margin: 15px auto;
}
.form-message-clientes-agregados.success, .form-message-clientes-editados.success, .form-message-matafuego-matafuegos-agregados.success,
.form-message-vehiculo-vehiculos-agregados.success, .form-message-datos-empresa-agregados.success, .form-message-matafuegos-editados.success,
.form-message-vehiculos-editados.success, .form-message-datos-precios.success, .form-message-presupuesto.success, .form-message-elija-un-matafuegos.success {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}
.form-message-clientes-agregados.error, .form-message-clientes-editados.error, .form-message-matafuego-matafuegos-agregados.error,
.form-message-vehiculo-vehiculos-agregados.error, .form-message-datos-empresa-agregados.error, .form-message-matafuegos-editados.error,
.form-message-vehiculos-editados.error, .form-message-datos-precios.error, .form-message-presupuesto.error, .form-message-elija-un-matafuegos.error {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

/* NUEVO: Estilo para las reparaciones con precio vencido */
.reparacion-vencida {
    color: var(--color-error) !important; /* Texto en rojo */
    cursor: not-allowed !important; /* Cursor de "no permitido" */
    background-color: #fff5f5 !important; /* Fondo rojizo muy claro */
    border-color: var(--color-error) !important;
    opacity: 0.7; /* Atenuado */
}

/* Opcional: Estilo para el checkbox desactivado dentro de una reparación vencida */
.reparacion-vencida input[type="checkbox"] {
    cursor: not-allowed;
}


/* NUEVO: Estilo para las alertas de precios vencidos en los formularios */
.form-message-precio-alerta {
    padding: 12px;
    margin-top: 10px;
    border-radius: 6px;
    font-weight: 500;
    display: none;
}
.form-message-precio-alerta.warning {
    background-color: #fff3e0; /* Naranja muy claro */
    color: #e65100; /* Naranja oscuro */
    border: 1px solid #ffcc80;
}


/* Estilos para el resumen de la búsqueda en buscar.php */
.termino_busqueda {
    max-width: var(--max-width);
    margin: 20px auto 0;
    padding: 15px;
    background-color: var(--color-surface);
    border-left: 5px solid var(--color-primary);
    box-shadow: var(--shadow);
    border-radius: var(--border-radius);
}
.termino_busqueda p {
    font-size: 18px;
    font-weight: 500;
}

.termino_busqueda p {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.contador-resultados {
    background-color: var(--color-primary-dark);
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 14px;
}

/* Edición en línea de precios */
.editable { cursor: pointer; }
.editing {
    padding: 0 !important;
    background-color: #e3f2fd !important;
}
.editing input, .editing select {
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-primary) !important;
    margin: 0;
    padding: 10px;
    border-radius: 0;
    font-size: 16px;
}

/* Checkbox personalizado */
.checkbox-container {
    margin: 20px 0;
    display: flex;
    align-items: center;
}
.custom-checkbox {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
    color: var(--color-text-primary);
}
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.custom-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: var(--color-background);
    border: 2px solid var(--color-border);
    border-radius: 6px;
    transition: all 0.3s ease;
}
.custom-checkbox:hover input ~ .checkmark { background-color: #e0e0e0; }
.custom-checkbox input:checked ~ .checkmark {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.custom-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 8px;
    top: 4px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.custom-checkbox input:checked ~ .checkmark:after { display: block; }

/* --- RESPONSIVE DESIGN --- */

/* --- INICIO DE DISEÑO RESPONSIVO --- */

/* Breakpoint 1: Pantallas más pequeñas que 1200px (Tablets en horizontal, laptops pequeñas) */
@media screen and (max-width: 1200px) {

    body {
        font-size: 19px; /* Aumentamos el tamaño de fuente base para tablets y móviles */
    }

    /* 1. Menú de Navegación se convierte en Hamburguesa */
    .topnav a:not(:first-child), .topnav .user-info {
        display: none; /* Ocultamos todos los enlaces y la info de usuario */
    }
    .topnav a.icon {
        display: block; /* Mostramos el ícono de hamburguesa */
        float: right;
    }

    /* Clase que se añade con JS para mostrar el menú en vertical */
    .topnav.responsive {
        position: relative;
        flex-direction: column;
        align-items: flex-start;
    }
    .topnav.responsive .icon {
        position: absolute;
        right: 15px;
        top: 14px;
    }
    .topnav.responsive a, .topnav.responsive .user-info {
        display: flex; /* Usamos flex para alinear el ícono y texto del usuario */
        width: 100%;
        text-align: left;
    }

    /* 2. Tabla Principal se apila verticalmente */
    table thead {
        display: none; /* Ocultamos la cabecera original */
    }

    table tr {
        margin-bottom: 20px; /* Espacio entre cada "tarjeta" de cliente */
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius);
        background-color: var(--color-surface); /* Fondo para cada tarjeta de cliente */
        box-shadow: var(--shadow);
        padding: 10px;
    }

    table td {
        display: flex; /* Usamos flex para alinear etiqueta y valor */
        justify-content: space-between; /* Etiqueta a la izq, valor a la der */
        padding: 10px 5px;
        border-bottom: 1px solid var(--color-background);
        text-align: left; /* Alineamos el valor a la derecha */
        margin: 5px;
    }
    table td:last-child { border-bottom: none; }

    table td::before {
        content: attr(data-label); /* Usamos el data-label como etiqueta */
        font-weight: bold;
        text-align: left;
        color: var(--color-text-primary);
        margin-right: 15px; /* Espacio entre etiqueta y valor */
    }

    /* 3. Celdas de Matafuegos/Vehículos y Acciones */
    table td.acciones {
        justify-content: center; /* Centramos los botones de acción */
        flex-wrap: wrap; /* Permitimos que se apilen si no caben */
        gap: 10px;
        padding-top: 15px;
    }

    /* 4. Apilar las tarjetas de Matafuegos y Vehículos */
    table tr.matafuegos td,
    table tr.vehiculos td {
        display: block;
        padding: 15px; /* Añadimos un padding para que las tarjetas no se peguen a los bordes */
        border: none;
    }
    table tr.matafuegos td::before,
    table tr.vehiculos td::before {
        display: none; /* Nos aseguramos de que no herede el pseudo-elemento de la etiqueta */
    }

    .lista-matafuegos, .lista-vehiculos {
        grid-template-columns: 1fr; /* Forzamos el grid a tener una sola columna */
        padding: 0; /* Quitamos cualquier padding interno de la lista */
        gap: 15px; /* Mantenemos un espacio vertical entre tarjetas */
    }
}

/* Breakpoint 2: Pantallas más pequeñas que 768px (Móviles) */
@media screen and (max-width: 768px) {
    

    header {
        flex-direction: column; /* Apilamos el título y la info de la empresa */
        padding: 10px;
        gap: 10px;
    }
    .header-titulo h2 { font-size: 24px; }
    .nombre_empresa h2 { font-size: 16px; }
    .nombre_empresa p { font-size: 12px; }

    .topnav a {
        font-size: 16px;
        padding: 12px 15px;
    }

    /* Ajustes para mensajes y modales */
    .form-message-clientes-agregados, .form-message-clientes-editados,
    .form-message-matafuego-matafuegos-agregados, .form-message-vehiculo-vehiculos-agregados,
    .form-message-datos-empresa-agregados, .form-message-matafuegos-editados,
    .form-message-elija-un-matafuegos, .form-message-vehiculos-editados,
    .form-message-datos-precios, .form-message-presupuesto, .form-message-precio-alerta,
    .termino_busqueda {
        padding: 10px; /* Reducimos el padding en mensajes */
        font-size: 13px;
    }
    .termino_busqueda p {
        flex-wrap: wrap; /* Permite que el texto y el contador se envuelvan */
        justify-content: center; /* Centra los elementos cuando se envuelven */
        text-align: center;
    }
    .termino_busqueda .contador-resultados {
        margin-top: 5px; /* Espacio si el contador se envuelve */
    }

    .modal-content {
        padding: 20px; /* Reducimos el padding del contenido del modal */
        width: 95%; /* Ocupa un poco más de ancho en móviles */
    }
    .modal-content h3 { font-size: 20px; }
    .modal-content p { font-size: 15px; }
    .modal-content .boton {
        width: 100%; /* Botones de modal ocupan todo el ancho */
        margin-left: 0;
        margin-right: 0;
    }

    /* Ajustes para formularios en general */
    input, select, textarea {
        font-size: 17px;
        padding: 10px;
    }
    .boton, .boton-crear, .boton-empresa, .boton-precios, .boton-editar, .boton-eliminar,
    .boton-insertar, .btn-success, .boton-buscar {
        width: 100%; /* Botones principales ocupan todo el ancho */
        margin-left: 0;
        margin-right: 0;
    }

    /* Ajustes para las pestañas */
    .tab-buttons {
        flex-wrap: wrap; /* Permite que los botones de las pestañas se apilen */
        justify-content: center;
    }
    .tab-button {
        flex: 1 1 auto; /* Permite que los botones de pestaña se ajusten y crezcan */
        margin: 5px;
        font-size: 16px;
        padding: 10px 15px;
    }

    /* Ajuste para las tarjetas de estadísticas en móviles */
    .stats-card {
        flex-basis: 100%; /* Ocupa todo el ancho */
        max-width: none;   /* Sin ancho máximo */
    }
}

/* --- ESTILOS PARA PÁGINA DE ESTADÍSTICAS --- */
.stats-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center; /* Centra las tarjetas si no llenan el espacio */
    padding: 20px;
}
.stats-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    flex: 1 1 400px;
    max-width: 500px;
    padding: 20px;
}
.stats-card h3 {
    font-size: 20px;
    color: var(--color-secondary);
    margin-bottom: 15px;
    border-bottom: 2px solid var(--color-background);
    padding-bottom: 10px;
}
.stats-table {
    width: 100%;
    border-collapse: collapse;
}
.stats-table td {
    padding: 10px 5px;
    border-bottom: 1px solid var(--color-background);
}
.stats-table tr:last-child td {
    border-bottom: none;
}
.stats-table td:last-child {
    text-align: right;
    font-weight: 500;
}
.total-row td {
    background-color: var(--color-background);
    font-weight: bold;
}

/* --- NUEVO: Estilos para el Sistema de Pestañas --- */
.tab-container {
    width: 100%;
    margin-top: 20px;
}

.tab-buttons {
    display: flex;
    border-bottom: 2px solid var(--color-border);
}

.tab-button {
    padding: 12px 25px;
    cursor: pointer;
    border: none;
    background-color: var(--color-background);
    font-size: 18px;
    font-weight: 500;
    color: var(--color-text-secondary);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    transition: all 0.3s ease;
    position: relative;
    top: 2px; /* Para alinear con el borde inferior */
}

.tab-button.active {
    background-color: var(--color-surface);
    color: var(--color-primary);
    border: 2px solid var(--color-border);
    border-bottom: 2px solid var(--color-surface); /* "Corta" el borde del contenedor */
}

.tab-button:disabled {
    color: #bdc3c7;
    cursor: not-allowed;
    background-color: #f8f9f9;
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* New style for access denied message */
.access-denied-card {
    background-color: var(--color-surface);
    padding: 30px;
    border-radius: var(--border-radius);
    width: 90%;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    margin: 50px auto; /* Center horizontally and add vertical margin */
    border: 1px solid var(--color-error); /* Red border to indicate error */
}

.access-denied-card h3 {
    color: var(--color-error);
    margin-bottom: 15px;
    font-size: 24px;
}

.access-denied-card p {
    margin-bottom: 25px;
    font-size: 18px;
    color: var(--color-text-primary);
}