:root {
    /* --- Colores --- */
--cfondo: #38393c;
--cconteiner: #4b4c4f;
--cturquesa:#83c4d6;
--cturquesafuerte:#00c5d6;
--cbordes: #5a5c60;
--cletrasfondo: #e0f2fe;
--cvioleta: #b074b6ff;
--cfimput: #2d2e30;
--blanco: #fff;
--grisseparador: #666;

--grisboton: #aaa;


}

body { 
    font-family: 'Segoe UI', sans-serif; 
    margin: 40px; 
    background-color: var(--cfondo); 
    color: var(--cletrasfondo);
}
    
.container-gral { 
    max-width: 1000px; /* Un poco más ancho para que respire */
    margin: auto; 
    background: var(--cconteiner); /* Fondo tarjeta ligeramente más claro */
    padding: 40px; 
    border-radius: 12px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.5); 
}
.container-gral h1 {
    color: var(--cturquesa);
}

.dos-columnas {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.elementos-header {
    display: flex;             
    justify-content: space-between; 
    align-items: center;        
    border-bottom: 2px solid var(--cturquesa); /* Celeste del diseño */
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.elementos-header h1 {
    color: var(--cturquesa);
    
    margin-bottom: 20px; 
}

.logout-link { 
    font-size: 1rem; 
    margin: 0; 
    color: var(--grisboton); 
    text-decoration: none; 
    font-weight: bold; 
}
        
.logout-link:hover { 
    color: var(--blanco); 
    font-weight:500;
}

.logo-del-header {
    text-align: center;        
    padding-bottom: 0px;    
    margin-bottom: 0px;  
 }

.logo-del-header img {
    height: 100px;              
    width: auto;               
    display: block;
    margin: 0 auto;            
}

.contenedor-formularios { 
    /*grid-column: 1 / -1;*/
    background-color: #38393c; 
    padding: 25px; 
    border-radius: 8px; 
    border: 1px solid #5a5c60; 
    margin-bottom: 30px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.contenedor-formularios h2 {
    color: var(--cvioleta);
}

.contenedor-registro-pago {
    display: grid; 
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr; 
    gap: 15px; 
    align-items: end;
}
.contenedor-cuotas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Se adaptan al ancho */
    gap: 20px;
    margin-bottom: 25px;
}

.muestro-el-precio {
    background: var(--cfimput);       /* Fondo un poco más claro que la base */
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--cbordes);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.muestro-titulo {
    color: var(--grisboton);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    font-weight: 600;
}

.muestro-valor {
    color: var(--blanco);
    font-size: 1rem;       /* ¡Números Grandes! */
    font-weight: 600;
    margin: 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--cfimput) inset !important;
    -webkit-text-fill-color: var(--blanco) !important;
    border: 1px solid var(--cbordes) !important;
    transition: background-color 5000s ease-in-out 0s;
}

h2 { color: #e0f2fe; 
    border-bottom: 1px solid #5a5c60; 
    padding-bottom: 10px; 
    margin-bottom: 20px; 
    font-size: 1.5rem; 
}

/*h1 { 
    color: var(--cturquesa); 
    border-bottom: 2px solid var(--cturquesa); 
    padding-bottom: 15px; 
    margin-bottom: 30px; 
}*/
 
.nombre-del-socio {
    color: var(--blanco);
    font-weight: 500;     
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); 
}
    
.titulos-secciones {
    grid-column: 1 / -1;/* Ocupa todo el ancho */
    color: var(--cvioleta);
    border-bottom: 1px solid var(--grisboton);
    padding-bottom: 5px;
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: bold;
}

    /* CLASES UTILITARIAS */
.todo-el-ancho { 
    grid-column: 1 / -1; /* Fuerza a ocupar todo el ancho */
} 
    
label { 
    display: block; 
    margin-bottom: 5px; 
    margin-top: 8px;
    font-weight: 600; 
    font-size: 0.9rem; 
    color: var(--cturquesa); 
}
    
input, select { 
    width: 100%; 
    padding: 12px; 
    border: 1px solid var(--cbordes); 
    border-radius: 6px; 
    box-sizing: border-box; 
    background: var(--cfimput);
    color: var(--blanco); 
    font-size: 1rem;
}
    
input:focus, select:focus {
    outline: none;
    border-color: var(--cturquesa);
    background: var(--cfondo);
}

/*TABLA*/

table { 
    width: 100%; border-collapse: collapse; 
    background: var(--cfimput); border-radius: 8px; overflow: hidden; 
    border: 1px solid var(--cbordes); margin-top: 10px;
}

th, td { 
    padding: 12px 15px; 
    text-align: left; 
    border-bottom: 1px solid var(--cbordes); 
}

td a {
    color: var(--cvioleta); 
    text-decoration: none; 
    margin-left: 10px; 
    font-weight: 600; 
    transition: color 0.2s; 
    cursor: pointer; 
    font-size: 0.9rem; 
}

td a:hover {
    color: var(--blanco);
}

th { 
    background-color:var(--cfondo); 
    color: var(--cturquesa); 
    font-weight: 700; 
    border-bottom: 2px solid var(--cbordes); 
}

tr:hover { 
    background-color: var(--cfimput); 
}

/* CAJA ESPECIAL CHECKBOX */

.checkbox-box {
    background: var(--cfondo);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--cbordes);
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    height: 12px; /*Altura fija para alinear con inputs */
    
   
}
    
.checkbox-box input { 
    width: auto; 
    margin-right: 15px; 
    cursor: pointer; 
    transform: scale(1.2);
}

.checkbox-box label { 
    margin: 0;
    margin-left: 5px; 
    color: var(--blanco); 
    cursor: pointer; 
}

.checkbox-box small {
     text-align: right;
     color: var(--grisboton); 
     font-size: 0.8rem; 
}

/* BOTONES */

input[type="file"]::file-selector-button {
    background-color: var(--cturquesa); /* Tu color turquesa */
    color: var(--cfimput);              /* Color de letra oscuro */
    border: none;
    padding: 9px 13px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 15px; /* Espacio entre el botón y el texto "ningún archivo..." */
    transition: background-color 0.2s;
}

/* Efecto Hover para que reaccione al pasar el mouse */
input[type="file"]::file-selector-button:hover {
    background-color: var(--cturquesafuerte);
}

.btn-submit { 
    background: var(--cturquesa); 
    color: var(--cfimput); 
    padding:15px; 
    border: none; 
    border-radius: 6px;
    cursor: pointer; 
    font-weight: bold; 
    font-size: 1.1rem;
    width: 100%; 
    transition: all 0.2s;
    margin-top: 30px;
}

.btn-submit:hover { 
    background: var(--cturquesafuerte); 
    transform: translateY(-2px); 
}
    
.btn-back { 
    display: block; 
    text-align: center; 
    margin-top: 20px; 
    color: var(--grisboton); 
    text-decoration: none; 
}

.btn-back:hover { 
    color: var(--blanco); 
}

.btn-delete {
    background-color: #ef4444; 
    color: white;
    border: none; 
    padding: 8px 12px; 
    border-radius: 4px;
    cursor: pointer; 
    font-size: 0.9rem; 
    font-weight: bold;
}

.btn-delete:hover { 
    background-color: #c92a2a; 
}

/* MENSAJES */

.msg { 
    padding: 15px; 
    border-radius: 8px; 
    margin-bottom: 25px; 
    font-weight: 500; 
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.msg.success { 
    background: #d1e7dd; 
    color: #0f5132; 
    border: 1px solid #badbcc; 
}

.msg.error { 
    background: #f8d7da;
    color: #842029; 
    border: 1px solid #f5c2c7; 
}

    /* MOBILE */
@media (max-width: 600px) {
    /* Hacemos que la grilla de 2 columnas pase a ser de 1 sola */
    .dos-columnas { 
        grid-template-columns: 1fr; 
    } 

    /* Ajustamos el padding para ganar espacio en pantallas chicas */
    .container-gral {
        padding: 15px;
        margin: 10px;
    }

    .elementos-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .titulo-flex {
        flex-direction: column; /* En celular, logo arriba y texto abajo */
        text-align: center;
    }
    .checkbox-box {
        grid-template-columns: auto 1fr; /* Simplificamos en móvil */
        flex-wrap: wrap;
        height: auto;
    }
    .checkbox-box small {
        display: block;
        width: 100%;
        text-align: left;
        margin-top: 5px;
        margin-left: 35px; /* Alineado con el texto del label */
    }
}

/* --- MODAL --- */
.modal { 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.6); 
    backdrop-filter: blur(3px); 
    padding-top: 60px; 
}

.modal-content { 
    background-color: var(--cconteiner); 
    margin: 5% auto; 
    padding: 30px; 
    border: 1px solid var(--cturquesa); 
    border-radius: 12px; 
    width: 80%; 
    max-width: 500px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.7); 
    color: var(--cletrasfondo); 
}

.close-btn {
    color: #aaa; 
    float: right; 
    font-size: 28px; 
    font-weight: bold; 
}

.close-btn:hover { 
    color: #83c4d6; 
    cursor: pointer; 
}
.socio-nombre-link { 
    cursor: pointer; 
    font-weight: bold; 
    color: #e0f2fe; 
    transition: color 0.2s; 
}

.socio-nombre-link:hover { 
    color: #83c4d6; 
    text-decoration: underline; 
}

.data-label { 
    font-weight: 600; 
    color: #83c4d6; 
    margin-top: 10px; 
    display: block; 
    font-size: 0.9rem; 
}

.data-value { 
    font-size: 1.1rem; 
    margin-bottom: 5px; 
    color: white; 
}

.deuda-status { 
    padding: 10px; 
    border-radius: 8px; 
    margin-top: 15px; 
    font-weight: bold; 
    text-align: center; 
}

.deuda-ok { 
    background: #496449; 
    color: #4ade80; 
    border: 1px solid #4ade80; 
}

.deuda-pendiente { 
    background: #644949; 
    color: #f87171; 
    border: 1px solid #f87171;
}

.status-badge { 
    display: inline-block; 
    padding: 2px 8px; 
    border-radius: 10px; 
    font-size: 0.75rem; 
    font-weight: bold; 
}

.status-ok { 
    background: #1f7c5e; 
    color: white;
}

/*Panel Tesoreria*/

.contenedor-formularios textarea {
    width: 100%;                /* Ancho completo como los inputs */
    min-height: 80px;           /* Equivale a unas 3 o 4 líneas de largo */
    background-color: var(--cfimput); /* El fondo oscuro que usas */
    color: var(--cletrasfondo); /* El color de letra celeste clarito */
    border: 1px solid var(--cbordes);
    border-radius: 8px;
    padding: 10px;
    font-family: inherit;       /* Para que no use una letra distinta */
    box-sizing: border-box;     /* Para que el padding no lo ensanche de más */
    resize: vertical;           /* Permite al usuario agrandarlo hacia abajo si quiere */
    margin-bottom: 15px;
}

/* Efecto cuando el tesorero hace clic para escribir */
.contenedor-formularios textarea:focus {
    outline: none;
    border-color: var(--cturquesa);
    box-shadow: 0 0 5px rgba(131, 196, 214, 0.3);
}