/* ==================== ESTILOS VISUALES (estilos.css) ==================== */
:root { --fondo-general: #f4f7f6; --fondo-sidebar: #ffffff; --texto-principal: #2d3748; --color-operativo: #3182ce; --borde-suave: #e2e8f0; }
body { margin: 0; font-family: 'Segoe UI', sans-serif; background-color: var(--fondo-general); color: var(--texto-principal); display: flex; height: 100vh; overflow: hidden; }

.sidebar { width: 260px; background-color: var(--fondo-sidebar); border-right: 1px solid var(--borde-suave); display: flex; flex-direction: column; padding-top: 20px; z-index: 10; overflow-y: auto; }
.logo-container { padding: 0 20px 10px 20px; border-bottom: 1px solid var(--borde-suave); margin-bottom: 10px; text-align: center; }
.logo-container img { max-width: 140px; margin-bottom: 10px; }
.logo-container h2 { margin: 0; color: #1a365d; font-size: 16px; }
.menu-categoria { padding: 15px 20px 5px 20px; font-size: 11px; font-weight: bold; text-transform: uppercase; color: #718096; }

.menu-btn { width: 100%; text-align: left; background: transparent; border: none; border-left: 4px solid transparent; padding: 10px 20px; color: var(--texto-principal); font-size: 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; font-family: inherit; transition: 0.2s; }
.menu-btn:hover { background-color: #ebf8ff; border-left-color: var(--color-operativo); color: var(--color-operativo); font-weight: bold; }

.contenido-principal { flex: 1; padding: 30px 40px; overflow-y: auto; }
h1 { margin-top: 0; color: #1a365d; font-size: 26px; border-bottom: 2px solid var(--borde-suave); padding-bottom: 10px; }
.pantalla { display: none; } .pantalla.activa { display: block; }

.tarjeta-formulario { background-color: white; padding: 25px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); max-width: 700px; margin-top: 20px; }
.tarjeta-ancha { max-width: 1100px; } 

fieldset { border: 1px solid #cbd5e0; border-radius: 8px; padding: 15px 20px; margin-bottom: 20px; background-color: #f8fafc; }
legend { font-weight: bold; color: #2b6cb0; background-color: white; padding: 0 10px; border: 1px solid #cbd5e0; border-radius: 4px; font-size: 14px;}

.fila-doble { display: flex; gap: 15px; } 
.fila-doble .grupo-campo { flex: 1; }

.grupo-campo { margin-bottom: 15px; transition: 0.3s; }
label { display: block; font-size: 14px; font-weight: bold; margin-bottom: 5px; color: #4a5568; }
input, select, textarea { width: 100%; padding: 10px; border: 1px solid var(--borde-suave); border-radius: 5px; font-size: 14px; box-sizing: border-box; font-family: inherit; }

.btn-guardar { background-color: var(--color-operativo); color: white; border: none; padding: 12px 20px; font-size: 15px; font-weight: bold; border-radius: 5px; cursor: pointer; width: 100%; margin-top: 10px; transition: 0.2s;}
.btn-cancelar { background-color: #e2e8f0; color: #4a5568; border: none; padding: 10px; font-size: 14px; font-weight: bold; border-radius: 5px; cursor: pointer; width: 100%; margin-top: 10px; display: none; }
.caja-mensajes { display: none; padding: 15px; border-radius: 5px; margin-top: 15px; font-weight: bold; text-align: center; border: 1px solid transparent; }

.tabla-datos { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 14px; }
.tabla-datos th { background-color: #f8fafc; padding: 12px; text-align: left; border-bottom: 2px solid var(--borde-suave); color: var(--texto-secundario); }
.tabla-datos td { padding: 12px; border-bottom: 1px solid var(--borde-suave); }

.btn-editar { background-color: #ecc94b; color: #744210; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: bold; margin-right: 5px;}
.btn-mapa { background-color: #4299e1; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: bold; }
.btn-wpp { background-color: #25D366; color: white; border: none; padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: bold; text-decoration: none; display: inline-block; margin-left: 5px;}

#visor-mapa { width: 100%; height: 300px; border: 2px solid var(--borde-suave); border-radius: 8px; margin-top: 20px; display: none; }

/* ==================== ESTILOS DE IMPRESIÓN PARA EL RECIBO ==================== */
@media print {
    /* 1. Apagamos toda la interfaz del sistema */
    .sidebar, .contenido-principal, .fondo-modal { 
        display: none !important; 
    }
    
    /* 2. Forzamos a que el bloque del recibo despierte y se adapte a la hoja A4 */
    #zona-impresion-recibo { 
        display: block !important; 
        position: absolute !important; 
        left: 0 !important; 
        top: 0 !important; 
        width: 100% !important; 
        padding: 20px !important; 
        background: white !important;
        visibility: visible !important;
        box-sizing: border-box !important; /* CLAVE PARA QUE NO SE CORTE EL BORDE DERECHO */
    }
    
    /* 3. Limpiamos el fondo general */
    body { 
        background: white !important; 
        overflow: visible !important; 
        height: auto !important; 
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 4. Respetar colores de fondo */
    * { 
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important; 
    }
}