/* =========================================
   ESTILOS GENERALES (BASE)
   ========================================= */
body {
    background-color: #F4F0E4; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    min-height: 100vh;
}

/* Solo para la página de Login */
.body-login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-contenedor {
    background: white;
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0px 8px 20px rgba(0,0,0,0.1);
    width: 350px;
    text-align: center;
    border-top: 5px solid #A51A1A;
}

.login-contenedor input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.logo-login {
    width: 130px;
    margin-bottom: 20px;
}

/* =========================================
   LAYOUT DASHBOARD Y TABLAS GENERALES
   ========================================= */
.dashboard-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
    background-color: #ffffff;
    border-bottom: 2px solid #eee;
}

.main-body {
    display: flex;
    flex: 1;
}

.sidebar {
    width: 250px;
    background-color: #f4f0e4;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-right: 1px solid #ddd;
}

.content {
    flex: 1;
    padding: 30px;
    display: block; 
}

.tabla-general {
    width: 100%;
    border-collapse: collapse;
    background: white;
    margin-top: 20px;
}

.tabla-general th, .tabla-general td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
}

.tabla-general th {
    background-color: #A51A1A;
    color: white;
    text-transform: uppercase;
}

/* =========================================
   REPORTE GLOBAL (ESTILO HOJA CARTA)
   ========================================= */
.filtro-contenedor {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}

.form-filtro-horizontal {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
}

.wrapper-tabla-excel {
    width: 100%;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}

.tabla-excel {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.tabla-excel th, .tabla-excel td {
    border: 1px solid #ddd;
    padding: 8px;
    vertical-align: top;
    font-size: 11px;
    line-height: 1.3;
    word-wrap: break-word;
}

.tabla-excel th {
    background-color: #A51A1A;
    color: white;
    text-transform: uppercase;
    font-size: 9px;
}

/* Reparto de anchos para la tabla global */
.tabla-excel th:nth-child(1) { width: 4%; }  
.tabla-excel th:nth-child(2) { width: 9%; }  
.tabla-excel th:nth-child(3) { width: 19%; } 
.tabla-excel th:nth-child(4) { width: 11%; } 
.tabla-excel th:nth-child(5) { width: 15%; } 
.tabla-excel th:nth-child(6) { width: 13%; } 
.tabla-excel th:nth-child(7) { width: 11%; } 
.tabla-excel th:nth-child(8) { width: 12%; } 
.tabla-excel th:nth-child(9) { width: 6%; }  

.tabla-excel tr:nth-child(even) { background-color: #f2f2f2; }

/* =========================================
   FORMULARIO DE CAPTURA (TIPO EXAMEN)
   ========================================= */
.content-reporte {
    flex: 1;
    padding: 40px;
    background-color: #F4F0E4;
}

.container-form-reporte {
    background: white;
    padding: 35px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}

.campo-eow {
    margin-bottom: 25px;
    width: 100%;
    display: block;
}

.campo-eow label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    color: #333;
    font-size: 1.1rem;
}

.campo-eow textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
}

/* =========================================
   BOTONES Y COMPONENTES
   ========================================= */
.btn-ingresar {
    background-color: #A51A1A;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    transition: background 0.3s ease;
}

.btn-ingresar:hover {
    background-color: #8a1616;
}

/* NUEVO: Contenedor para alinear los botones del Login */
.botones-login {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* NUEVO: Botón Cancelar con estilo moderno */
.btn-cancelar {
    flex: 1; /* Para que ambos botones midan lo mismo */
    background-color: #f0f0f0; 
    color: #444;              
    border: 1px solid #ccc;   
    padding: 12px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}

.btn-cancelar:hover {
    background-color: #e2e2e2;
    border-color: #bbb;
}

/* Ajuste para que el botón Ingresar también sea flexible en el login */
.botones-login .btn-ingresar {
    flex: 1;
}
.btn-menu {
    background-color: #6c757d;
    color: white;
    padding: 12px;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
}

.btn-admin-verde { background-color: #28a745 !important; }

.btn-accion {
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 4px;
    color: white;
    font-weight: bold;
}

/* Estilo Pro para el Cuadro Combinado (Select) */
.form-filtro-horizontal select {
    appearance: none; /* Quita la flecha por defecto del navegador */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23A51A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding: 12px 40px 12px 15px; /* Espacio extra a la derecha para la flecha */
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    cursor: pointer;
    width: 320px; /* Un poco más ancho para nombres de área largos */
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

/* Efecto al pasar el mouse */
.form-filtro-horizontal select:hover {
    border-color: #A51A1A;
}

/* Efecto al hacer clic o tener el foco */
.form-filtro-horizontal select:focus {
    border-color: #A51A1A;
    outline: none;
    box-shadow: 0 0 0 3px rgba(165, 26, 26, 0.1);
    background-color: #fdfdfd;
}

/* Estilo para el input de búsqueda (para que combine perfectamente) */
.form-filtro-horizontal input[type="text"] {
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    width: 280px;
    transition: all 0.3s ease;
}

.form-filtro-horizontal input[type="text"]:focus {
    border-color: #A51A1A;
    box-shadow: 0 0 0 3px rgba(165, 26, 26, 0.1);
}

/* Estilos normales (Pantalla) */
.print-only-text {
    display: none; /* Oculto en la web */
}

@media print {
    /* Ocultamos lo innecesario y el textarea */
    .sidebar, .header, .btn-menu, .btn-ingresar, .no-print, .btn-cancelar, textarea, .no-print-element {
        display: none !important;
    }

    /* Mostramos el texto plano */
    .print-only-text {
        display: block !important;
        font-size: 11pt; /* Un poco más pequeña para que se vea más elegante */
        line-height: 1.4; /* Interlineado natural de lectura */
        color: #333;
        margin-bottom: 15px; /* Reducimos el espacio entre respuesta y siguiente pregunta */
        text-align: justify; /* Esto hace que se vea como una carta formal */
        padding-left: 5px;
        /* Quitamos white-space: pre-wrap porque ya usamos nl2br en PHP */
    }

    /* Ajustes de página */
    body { background-color: white !important; }
    .container-form-reporte {
        box-shadow: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    h2 { color: #A51A1A !important; }
}

/* Ajuste para que el contenedor acepte formularios más largos (como el registro) */
.login-contenedor {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0px 8px 20px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 400px; /* Ancho ideal para lectura */
    text-align: left; /* Alineamos labels a la izquierda para mejor lectura */
    border-top: 5px solid #A51A1A;
    margin: 20px; /* Margen de seguridad para móviles */
}

/* Forzamos que el título del cuadro siga centrado */
.login-contenedor h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Estilo para los labels dentro del contenedor de login/registro */
.login-contenedor label {
    display: block;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 14px;
    color: #555;
}

/* Estilo para el select del registro para que combine con los inputs */
.select-registro {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
    font-family: inherit;
    box-sizing: border-box;
}

/* Estilo para los enlaces de "Ya tienes cuenta" */
.enlaces {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
}

.enlaces a {
    color: #A51A1A;
    text-decoration: none;
    font-weight: bold;
}

.enlaces a:hover {
    text-decoration: underline;
}

/* =========================================
   BOTONES DE ACCIÓN EN TABLAS (GESTIÓN)
   ========================================= */
.btn-accion {
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 4px;
    color: white !important; /* Forzamos texto blanco */
    font-weight: bold;
    font-size: 12px;
    display: inline-block;
    transition: background 0.3s;
}

/* Botón Cerrar (Rojo oscuro para que contraste) */
.btn-rojo {
    background-color: #A51A1A;
    border: 1px solid #7c1414;
}

.btn-rojo:hover {
    background-color: #7c1414;
}

/* Botón Reabrir (Azul como el de Reporte Global) */
.btn-admin-azul {
    background-color: #0056b3;
    border: 1px solid #004494;
}

.btn-admin-azul:hover {
    background-color: #004494;
}

/* Estilo para los Badges (Abierta/Cerrada) */
.badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: bold;
    color: white;
}
.badge-abierta { background-color: #28a745; }
.badge-cerrada { background-color: #6c757d; }

/************************************************************/
/* INICIO DE ESTILOS: captura_movimiento_vista.css          */
/************************************************************/

.contenedor-principal-caja {
    background-color: #f4f4f4;
    min-height: 100vh;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
}

.tarjeta-registro {
    background: #ffffff;
    max-width: 900px; /* 5. Campos más largos */
    width: 100%;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-top: 5px solid #A51A1A;
}

.logo-header {
    text-align: center;
    margin-bottom: 20px;
}

.logo-aguila-caja {
    width: 120px; /* 4. Logo del águila */
}

.titulo-seccion {
    text-align: center;
    margin-bottom: 30px;
}

.titulo-seccion h2 {
    color: #333;
    font-size: 1.5rem;
    letter-spacing: 1px;
}

.linea-roja {
    width: 60px;
    height: 3px;
    background: #A51A1A;
    margin: 10px auto;
}

.form-caja {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fila-doble {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.grupo-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.grupo-input label {
    font-weight: bold;
    color: #555;
    font-size: 0.9rem;
}

/* 1. Diseño de campos (No planos) */
.input-estilizado {
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #fafafa;
}

.input-estilizado:focus {
    border-color: #A51A1A;
    outline: none;
    box-shadow: 0 0 8px rgba(165, 26, 26, 0.2);
    background: #fff;
}

.input-bloqueado {
    background: #eeeeee;
    color: #777;
    cursor: not-allowed;
}

.monto-grande {
    font-weight: bold;
    color: #A51A1A;
    font-size: 1.2rem;
}

.acciones-form {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 20px;
}

.btn-regresar {
    padding: 12px 25px;
    color: #666;
    text-decoration: none;
    border-radius: 6px;
}

.btn-guardar {
    padding: 12px 30px;
    background-color: #A51A1A;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-guardar:hover {
    background-color: #821414;
}

/* Dentro de tu bloque de estilos de captura_movimiento_vista.css */
.badge-rechazado { 
    background: #f8d7da; 
    color: #721c24; 
    border: 1px solid #f5c6cb;
}

/************************************************************/
/* FIN DE ESTILOS: captura_movimiento_vista.css             */
/************************************************************/

/************************************************************/
/* ESTILOS DE BOTONES SIDEBAR (UNIFICADOS)                  */
/************************************************************/

/* Clase base para todos los botones del menú lateral */
.btn-sidebar {
    display: block;
    width: 90%;          /* Le damos un poco de aire a los lados */
    margin: 0 auto 12px; /* El 'auto' a los lados los centra horizontalmente */
    padding: 12px 10px;
    border-radius: 8px;
    text-align: center;  /* ESTO centra el texto y el icono */
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: none;
    color: white;
}

.btn-sidebar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    filter: brightness(1.1);
}

/* Colores específicos */
.btn-verde, .btn-verde-tesoreria {
    background-color: #28a745;
}

.btn-azul, .btn-azul-tesoreria {
    background-color: #007bff;
}

.menu-label {
    display: block;
    font-size: 11px;
    color: #666;
    font-weight: bold;
    margin: 20px 0 10px 0;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center; /* Centra el título de la sección */
}

.menu-seccion {
    width: 100%;
    text-align: center; /* Centra también la etiqueta (TESORERÍA) */
}


/************************************************************/
/* FIN DE ESTILOS DE BOTONES SIDEBAR (UNIFICADOS)                  */
/************************************************************/