/* /assets/css/style.css - VERSIÓN MODERNA Y RESPONSIVE */

/* --- 1. Variables y Estilos Base --- */
:root {
    --primary-color: #e83e8c; /* Rosa "Mamiflor" */
    --primary-hover: #c2185b; /* Rosa más oscuro para hover */
    --secondary-color: #28a745; /* Verde para éxito y WhatsApp */
    --background-color: #f4f6f9; /* Un gris muy claro para el fondo */
    --card-bg: #ffffff;
    --text-color: #343a40;
    --light-text-color: #6c757d;
    --border-color: #dee2e6;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    --border-radius: 12px;
}

/* Importamos las fuentes de Google Fonts */
body {
    background-color: var(--background-color);
    font-family: 'Lato', sans-serif;
    color: var(--text-color);
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .btn {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

/* --- 2. Componentes Principales --- */

/* Contenedor de Login y de Historial de Cliente */
.login-container, .client-history {
    background: var(--card-bg);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-top: 50px;
    transition: all 0.3s ease;
}

.login-container h2 {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Tarjetas (Dashboard) */
.card {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    padding: 1rem 1.5rem;
}

/* Tablas */
.table {
    border-collapse: separate;
    border-spacing: 0 10px;
}

.table thead th {
    border: none !important;
    color: var(--light-text-color);
    font-size: 0.9rem;
    text-transform: uppercase;
}

.table tbody tr {
    background: var(--card-bg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.table td, .table th {
    border: none;
    vertical-align: middle;
}
.table tbody tr:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* --- 3. Formularios y Botones --- */

/* Inputs y Selects */
.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(232, 62, 140, 0.2);
}

/* Botones */
.btn {
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* Botón de WhatsApp personalizado */
.btn-whatsapp {
    background-color: #25D366;
    color: white;
}
.btn-whatsapp:hover {
    background-color: #1DAE54;
    color: white;
}

/* --- 4. Elementos Específicos --- */

/* Firma Digital */
#signature-pad {
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    cursor: crosshair;
    background-color: #fdfdfd;
}

#clear-signature {
    font-size: 0.8rem;
}

/* Modales */
.modal-content {
    border-radius: var(--border-radius);
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
}

/* Botones de Rating */
.rating-buttons .btn-check + .btn:hover {
    transform: none; /* Evita que los botones de radio se levanten */
}

/* --- 5. Diseño Responsivo --- */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    /* === REEMPLAZA ESTA REGLA COMPLETA === */
    .client-history {
        /* Eliminamos los márgenes laterales y la sombra para que ocupe todo el ancho */
        margin: 0;
        box-shadow: none;
        
        /* Eliminamos el borde redondeado para que se funda con los bordes de la pantalla */
        border-radius: 0; 
        
        /* Ajustamos el padding: mantenemos espacio vertical pero reducimos el horizontal al mínimo necesario */
        padding: 2rem 15px; /* Más espacio arriba/abajo, justo lo necesario a los lados */
    }
    /* === FIN DEL REEMPLAZO === */

    .login-container { /* Mantenemos el estilo original del login */
        margin: 20px 10px;
        padding: 1.5rem;
    }

    .btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    /* Hace la tabla scrollable en pantallas pequeñas */
    .table-responsive {
        border-radius: var(--border-radius);
    }
}

.capital-masked {
    filter: blur(5px);
    transition: filter 0.3s;
}
.capital-masked.unmasked {
    filter: none;
}