/* ===============================
   ESTILO GENERAL
================================== */

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

body{

    font-family:Arial, Helvetica, sans-serif;
    background:#f4f6f9;
    color:#333;
    padding:40px;

}

/* ===============================
   CONTENEDOR
================================== */

.container{

    max-width:900px;
    margin:auto;
    background:white;

    padding:35px;

    border-radius:12px;

    box-shadow:
        0 6px 18px rgba(0,0,0,.08);

}

/* ===============================
   TITULOS
================================== */

h1{

    color:#1f3c88;

    margin-bottom:30px;

    text-align:center;

}

h2{

    margin-bottom:15px;

    color:#1f3c88;

}

h3{

    margin-top:35px;
    margin-bottom:15px;

    color:#1f3c88;

}

/* ===============================
   INPUTS
================================== */

label{

    display:block;

    margin-bottom:8px;

    font-weight:bold;

}

input{

    width:100%;

    padding:12px;

    border:1px solid #d5d5d5;

    border-radius:8px;

    font-size:15px;

    margin-bottom:15px;

}

input:focus{

    outline:none;

    border-color:#1f3c88;

}

/* ===============================
   BOTONES
================================== */

button{

    background:#1f3c88;

    color:white;

    border:none;

    padding:12px 22px;

    border-radius:8px;

    cursor:pointer;

    font-size:15px;

    transition:.25s;

}

button:hover{

    background:#16306d;

}

/* ===============================
   TARJETA DEL SOCIO
================================== */

#resultado{

    margin-top:30px;

    padding:20px;

    background:#fafafa;

    border-radius:10px;

    border-left:5px solid #1f3c88;

}

#resultado p{

    margin:8px 0;

}

/* ===============================
   MENSAJES
================================== */

#mensajeEstado{

    margin-top:25px;

    padding:20px;

    border-radius:10px;

    text-align:center;

}

#mensajeEstado h2{

    margin-bottom:10px;

}

.verde{

    background:#e8f8ed;

    border:1px solid #66bb6a;

}

.rojo{

    background:#fdeaea;

    border:1px solid #ef5350;

}

/* ===============================
   TABLAS
================================== */

table{

    width:100%;

    border-collapse:collapse;

    margin-top:15px;

    background:white;

}

thead{

    background:#1f3c88;

    color:white;

}

th{

    padding:12px;

}

td{

    padding:10px;

    border-bottom:1px solid #e5e5e5;

}

tr:hover{

    background:#f7f9fc;

}

/* ===============================
   HR
================================== */

hr{

    margin:30px 0;

    border:none;

    border-top:1px solid #ddd;

}

/* ===============================
   BOTON RENOVAR
================================== */

#renovar,
#registrarIngreso{

    margin-top:25px;

    width:100%;

}

/* ===============================
   RESPONSIVE
================================== */

@media (max-width: 700px) {

    body {
        padding: 15px;
    }

    .container {
        width: 95%;
        padding: 20px;
        margin: auto;
    }

    h1 {
        font-size: 32px;
        text-align: center;
    }

    h2 {
        font-size: 22px;
    }

    label {
        font-size: 15px;
    }

    input,
    select,
    button {
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
    }

    button {
        margin-top: 15px;
    }

    .logo {
        max-width: 120px;
    }

    table {
        font-size: 14px;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

}

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

.logo {
    max-width: 180px;
    height: auto;
}

/* ===============================
   IMPRESIÓN
================================== */

@media print {

    body {

        background:white;
        padding:0;

    }

    .container {

        box-shadow:none;
        max-width:none;
        width:100%;
        padding:10px;

    }

    #buscador,
    #fechaDesde,
    #fechaHasta,
    #hoy,
    #ayer,
    #semana,
    #mes,
    #todas,
    #pdf {

        display:none !important;

    }

    label {

        display:none;

    }

    h1 {

        margin-bottom:20px;

    }

    table {

        width:100%;
        font-size:12px;

    }

    th,
    td {

        padding:7px;

    }

}

/* ===============================
   PORTAL PRINCIPAL
================================== */

.portal {

    max-width:700px;

    text-align:center;

}


.portal-titulo {

    text-align:left;

    margin-top:35px;
    margin-bottom:15px;

}


.portal-menu {

    display:flex;

    flex-direction:column;

    gap:12px;

}


.portal-boton {

    display:block;

    width:100%;

    padding:16px 20px;

    background:#1f3c88;

    color:white;

    text-decoration:none;

    border-radius:8px;

    font-size:17px;

    font-weight:bold;

    transition:.25s;

}


.portal-boton:hover {

    background:#16306d;

    transform:translateY(-1px);

}


.portal-admin-titulo {

    margin-top:45px;

}


@media(max-width:700px){

    .portal {

        padding:25px 20px;

    }

    .portal-boton {

        font-size:16px;

        padding:15px;

    }

}

/* ===========================
   ESTADO DE CUOTAS
   =========================== */

.cuotas-container {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f8f8f8;
}

.cuotas-container h3 {
    margin-top: 0;
    margin-bottom: 12px;
}

.cuota-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 6px;
    background: white;
}

.cuota-item:last-child {
    margin-bottom: 0;
}

.cuota-abonada {
    border-left: 5px solid #28a745;
}

.cuota-adeuda {
    border-left: 5px solid #dc3545;
}

.cuota-abonada > strong {
    color: #28a745;
}

.cuota-adeuda > strong {
    color: #dc3545;
}