/* =========================
   VARIABLES DE MARCA
========================= */
:root {
    --brand-naranja-mariola: #FF8200;
    --brand-gris-urbano: #425563;
    --brand-rojo-amapola: #E0004D;
    --brand-azul-poro: #00A3E0;
    --brand-verde-cedro-maria: #6CC24A;
    --brand-naranja-copey: #FE5000;
    --brand-rojo-higueron: #A6093D;
    --brand-azul-heliconius: #0076A8;
    --brand-verde-guayaba: #48A548;
    --font-principal: 'Biryani', sans-serif;
    --font-alternativa: 'Verdana', sans-serif;
}

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

html, body {
    height: 100%;
    font-family: var(--font-principal);
    background-color: #f5f7f9;
    color: var(--brand-gris-urbano);
}

/* =========================
   LAYOUT GENERAL
========================= */
form {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* =========================
   HEADER
========================= */
.header {
    background-color: white;
    border-bottom: 5px solid var(--brand-naranja-mariola);
    padding: 10px 0;
    display: flex;
    justify-content: center;
}

.logo img {
    max-width: 100%;
    height: auto;
    padding: 0 20px;
}

/* =========================
   CONTENEDOR PRINCIPAL
========================= */
.contenedor {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* =========================
   TITULOS
========================= */
h1, h2, h3 {
    font-family: var(--font-principal);
    margin-bottom: 15px;
}

h1 {
    color: var(--brand-azul-heliconius);
}

h2 {
    color: var(--brand-naranja-copey);
}

h3 {
    color: var(--brand-verde-guayaba);
}

/* =========================
   ENLACES
========================= */
a {
    color: var(--brand-azul-poro);
    text-decoration: none;
    transition: 0.3s ease;
}

    a:hover {
        color: var(--brand-rojo-amapola);
    }

/* =========================
   BOTONES GENERALES
========================= */
button,
input[type="submit"],
input[type="button"],
.aspNet-Button {
    background-color: var(--brand-azul-heliconius);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-alternativa);
    transition: 0.3s ease;
}

    button:hover,
    input[type="submit"]:hover,
    input[type="button"]:hover {
        background-color: var(--brand-rojo-higueron);
    }

/* =========================
   VOLVER ARRIBA
========================= */
.volver-arriba {
    text-align: right;
    margin-top: 20px;
}

    .volver-arriba a {
        background-color: var(--brand-naranja-mariola);
        color: white;
        padding: 8px 15px;
        border-radius: 5px;
        font-size: 14px;
    }

        .volver-arriba a:hover {
            background-color: var(--brand-naranja-copey);
        }

/* =========================
   FOOTER
========================= */
#pie {
    background-color: var(--brand-gris-urbano);
    color: white;
    text-align: center;
    padding: 18px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
}

@media (max-width: 992px) {
    .contenedor {
        padding: 20px;
    }

    .volver-arriba {
        text-align: center;
    }
}

@media (max-width: 600px) {

    .header {
        padding: 8px 0;
    }

    .contenedor {
        padding: 15px;
    }

    #pie {
        font-size: 14px;
    }

    .volver-arriba a {
        display: inline-block;
        width: 100%;
        text-align: center;
    }
}

/* =========================
   WRAPPER GENERAL
========================= */
.content-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

/* =========================
   INFORMACIÓN SUPERIOR
========================= */
.info-superior {
    margin-bottom: 25px;
    font-size: 15px;
    line-height: 1.6;
}

/* =========================
   TÍTULO TÉRMINOS
========================= */
.titulo-terminos {
    color: var(--brand-azul-heliconius);
    margin-bottom: 15px;
    font-weight: 600;
}

/* =========================
   CAJA DE TÉRMINOS
========================= */
.terminos-box {
    background-color: white;
    border-left: 6px solid var(--brand-naranja-mariola);
    padding: 20px;
    height: 300px; /* Altura fija */
    overflow-y: auto; /* Scroll vertical */
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    line-height: 1.7;
    font-size: 14px;
}

    /* Scroll personalizado (opcional pero elegante) */
    .terminos-box::-webkit-scrollbar {
        width: 8px;
    }

    .terminos-box::-webkit-scrollbar-thumb {
        background-color: var(--brand-azul-poro);
        border-radius: 4px;
    }

    .terminos-box::-webkit-scrollbar-track {
        background-color: #f1f1f1;
    }

/* =========================
   CONTENEDOR BOTÓN
========================= */
.btn-aceptar-container {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 20px;
}

/* =========================
   BOTÓN ACEPTAR
========================= */
.btn-aceptar {
    background-color: var(--brand-verde-guayaba);
    color: white;
    padding: 12px 35px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
    font-family: var(--font-alternativa);
    min-width: 180px;
}

    .btn-aceptar:hover {
        background-color: var(--brand-verde-cedro-maria);
    }

@media (max-width: 600px) {
    .terminos-box {
        height: 250px;
        font-size: 13px;
    }

    .btn-aceptar {
        width: 100%;
    }
}
/* =========================
   LOGOSPAGO
========================= */
.logos-pago {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    flex-wrap: wrap;
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.logo-pago {
    flex: 1;
    max-height: 70px;
    object-fit: contain;
}

@media (max-width: 600px) {
    .logos-pago {
        justify-content: center;
    }

    .logo-pago {
        flex: 0 0 45%;
    }
}
/* =========================
   FORMULARIO
========================= */

.mensaje-estilo {
    display: block; 
    text-align: center;  
    margin: 10px auto; 
    padding: 10px 20px; 
    font-weight: bold; 
}

.form-wrapper {
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-bottom: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}

    .form-group label {
        margin-bottom: 6px;
        font-weight: 600;
        color: var(--brand-gris-urbano);
    }

    .form-group input,
    .form-group select {
        padding: 10px;
        border-radius: 6px;
        border: 1px solid #ccc;
        font-family: var(--font-alternativa);
    }

        .form-group input:focus,
        .form-group select:focus {
            border-color: var(--brand-azul-poro);
            outline: none;
        }
/* =========================
   BOTONCONSULTAR
========================= */
.consultar-wrapper {
    text-align: center;
    margin-top: 15px;
}

.btn-consultar {
    background-color: var(--brand-azul-heliconius);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s ease;
    min-width: 180px;
}

    .btn-consultar:hover {
        background-color: var(--brand-rojo-higueron);
    }

@media (max-width: 600px) {
    .btn-consultar {
        width: 100%;
    }
}
/* =========================
   GRIDVIEW
========================= */
.grid-wrapper {
    width: 100%;
    overflow-x: auto;
    margin-top: 25px;
}

.grid-institucional {
    width: 100%;
    min-width: 750px; 
    border-collapse: collapse;
    font-size: 14px;
    background: white;
}

    .grid-institucional th {
        background-color: var(--brand-azul-heliconius);
        color: white;
        padding: 12px;
        text-align: left;
    }

    .grid-institucional td {
        padding: 10px;
        border-bottom: 1px solid #e0e0e0;
    }

    .grid-institucional tr:nth-child(even) {
        background-color: #f8fbfd;
    }

    .grid-institucional tr:hover {
        background-color: #eef5fa;
    }

@media (max-width: 768px) {
    .grid-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* =========================
   BLOQUEPAGOS
========================= */
.pago-wrapper {
    margin-top: 30px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.pagar-container {
    text-align: center;
    margin-top: 15px;
}

.btn-pagar {
    background-color: var(--brand-naranja-mariola);
    color: white;
    padding: 14px 35px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s ease;
    min-width: 200px;
}

    .btn-pagar:hover {
        background-color: var(--brand-naranja-copey);
    }

@media (max-width: 600px) {
    .btn-pagar {
        width: 100%;
    }
}
/* =========================
   RESPUESTA PAGO
========================= */

.respuesta-pago {
    text-align: center;
    max-width: 500px;
    margin: 40px auto;
}


.titulo-procesando {
    margin-top: 20px;
    color: var(--brand-verde-guayaba);
}

.mensaje-error {
    display: block;
    margin-top: 25px;
    padding: 12px;
    font-weight: 600;
    border-radius: 6px;
    color: var(--brand-rojo-higueron);
}

.detalle-error {
    display: block;
    margin-top: 8px;
    color: var(--brand-rojo-higueron);
}

/* =========================
   Botones recibo
========================= */
.btn-recibo {
    background-color: var(--brand-verde-guayaba);
    color: white;
    padding: 12px 35px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
    font-family: var(--font-alternativa);
    min-width: 180px;
}
@media (max-width: 600px) {
    .btn-recibo:hover {
        background-color: var(--brand-verde-cedro-maria);
    }

    .btn-recibo {
        width: 100%;
    }
}
/* =========================
   Contenedor botones recibo
========================= */
.contenedor-botones {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

@media (max-width: 600px) {
    .contenedor-botones {
        flex-direction: column;
        align-items: center;
    }
}

/* =========================
   Contenedor mensajes
========================= */
.contenedor-mensajes {
    text-align: center;
    margin-top: 30px;
}

/* Título del error */
.mensaje-titulo {
    display: block;
    font-weight: 600;
    margin-top: 15px;
}

/* Mensaje de error */
.mensaje-error {
    display: block;
    margin-top: 10px;
    padding: 12px 20px;
    color: #b30000;
    font-weight: 500;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* =========================
   Contenedor principal
========================= */
.recibo-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    font-family: var(--font-alternativa);
}

/* =========================
   Header
========================= */
.recibo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #e5e5e5;
    padding-bottom: 20px;
}

.recibo-header-texto h3 {
    margin: 0;
    font-weight: 500;
}

.nom-convenio {
    display: block;
    font-size: 28px;
    font-weight: 700;
    margin-top: 10px;
}

.recibo-logo img {
    width: 120px;
    height: auto;
}

/* =========================
   Secciones
========================= */
.recibo-seccion {
    margin-top: 30px;
}

    .recibo-seccion h4 {
        margin-bottom: 15px;
        border-bottom: 2px solid #f0f0f0;
        padding-bottom: 8px;
    }

/* =========================
   Datos contribuyente
========================= */
.dato {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f3f3f3;
}

    .dato span {
        font-weight: 600;
    }

/* =========================
   Texto detalle
========================= */
.detalle-info {
    text-align: center;
    color: #d82323;
    font-size: 14px;
    margin-bottom: 20px;
}
/* =========================
   Responsive
========================= */
@media (max-width: 768px) {

    .recibo-header {
        flex-direction: column;
        text-align: center;
    }

    .recibo-logo {
        margin-top: 15px;
    }

    .dato {
        flex-direction: column;
        align-items: flex-start;
    }

        .dato span {
            margin-bottom: 4px;
        }
}


    .gvDatosFactura .btn-detalles {
        background-color: #507CD1;
        color: white;
        border: none; 
        padding: 6px 12px; 
        font-size: 11pt; 
        font-family: Arial, sans-serif;
        cursor: pointer; 
        border-radius: 4px; 
        transition: background-color 0.3s ease;
    }

        .gvDatosFactura .btn-detalles:hover {
            background-color: #2461BF; 
        }


        .gvDatosFactura .btn-detalles:active {
            background-color: #4870BE;
        }