.suscrip-contenedor {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center; /* centra horizontal */
    align-items: center; /* centra vertical */
    gap: 20px; /* espacio entre imagen y texto */
}

.suscrip-icono img {
    height: 60px;
}

.suscrip-titulo {
    display: flex;
    align-items: center;
}

.suscrp_ttl1 {
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
    color:green;
}
.barra-tickets {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    box-sizing: border-box;
    gap: 20px;
}

/* BUSQUEDA */
.grupo-busqueda {
    display: flex;
    align-items: center;
    position: relative;
}

.input_cambios {
    padding: 8px 40px 8px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    width: 250px;
}

.icono-busqueda {
    position: absolute;
    right: 10px;
    width: 20px;
    cursor: pointer;
}

/* BOTONES */
.grupo-botones {
    display: flex;
    gap: 15px;
}

.btn-ticket {
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

    .btn-ticket.tomar {
        background-color: #28a745;
        color: white;
    }

        .btn-ticket.tomar:hover {
            background-color: #218838;
        }

    .btn-ticket.progreso {
        background-color: #007bff;
        color: white;
    }

        .btn-ticket.progreso:hover {
            background-color: #0069d9;
        }


.user-area {
    display: flex;
    align-items: center;
}

/* LOGIN y BIENVENIDA */
.login-box,
.welcome-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Icono usuario */
.login-img {
    width: 24px;
    cursor: pointer;
}

/* Texto login */
.login-text {
    cursor: pointer;
    color: #333;
    font-weight: 500;
    text-decoration: none;
}

/* Texto bienvenida */
.welcome-text {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

/* BOTÓN CERRAR SESIÓN */
.logout-btn {
    background: #e53935;
    color: white;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: 0.3s ease;
}

    .logout-btn:hover {
        background: #c62828;
    }

/* ===== MENÚ PRINCIPAL ===== */
.nav-wrapper {
    background: #1f3c88;
}

/* Botón hamburguesa */


.altum_chat_container {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
}

/* botón flotante */
.altum_chat_button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: #2b8a8a url('./Imagenes/Chat/chat.png') center no-repeat;
    background-size: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

/* ventana chat */
.altum_chat_window {
    position: absolute;
    bottom: 70px;
    right: 0;
}

/* caja chat */
.altum_chat_box {
    width: 320px;
    max-width: 90vw;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

/* header */
.altum_chat_header {
    background: #e7f3f2;
    padding: 10px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* iconos */
.altum_chat_icon {
    width: 18px;
    cursor: pointer;
}

/* cuerpo chat */
.altum_chat_body {
    padding: 10px;
    max-height: 300px;
    overflow-y: auto;
}

/* mensajes */
.altum_chat_message {
    background: #2b8a8a;
    color: white;
    padding: 8px 10px;
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
}

/* footer */
.altum_chat_footer {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ddd;
}

/* input */
.altum_chat_input {
    flex: 1;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

/* botón enviar */
.altum_chat_send {
    width: 28px;
    margin-left: 8px;
    cursor: pointer;
}
.contenedor-centro {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}
#sesioncompra1_fondo2 {
    width: 100%;
    max-width: 11200px;
    margin: auto;
}

.titulo-seccion {
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

.subtitulo-seccion {
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

.fondo_menu40 {
    font-size: 36px;
    font-weight: bold;
    color: rgba(254,254,255,245);
}

.fondo_menu20 {
    font-size: 28px;
    color: rgba(254,255,253,254);
}
.etiquetasseparadatos {
    width: 100%;
    height: 45px;
    background: linear-gradient(180deg, green, #1a410e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 18px;
    box-sizing: border-box;
}

#contenedor_tarjetas_servicios {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
    gap: 20px;
    width: 100%;
}



.tarjeta_servicio {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    overflow: hidden;
}

    .tarjeta_servicio:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }

.tarjeta_titulo {
    background: linear-gradient(180deg,green,#1a410e);
    color: white;
    text-align: center;
    padding: 12px;
    font-size: 18px;
    font-weight: bold;
}


/* TABLA */

.tabla_tarjeta {
    width: 100%;
}


/* ENCABEZADO */

.tabla_encabezado {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr 2fr 1fr;
    background: #f0f0f0;
    font-weight: bold;
}


/* FILAS */

.tabla_fila {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr 2fr 1fr;
}


    /* CELDAS */

    .tabla_encabezado div,
    .tabla_fila div {
        padding: 10px;
        border-bottom: 1px solid #e4e4e4;
        font-size: 14px;
    }

/* contenedor principal centrado */
.contenedor_general {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* espacio superior */
.espacio_superior {
    height: 15px;
}

/* titulo */
.titulo_compra {
    width: 100%;
    max-width: 900px;
    display: flex;
    align-items: center;
}

.titulo_izq {
    flex: 1;
}

.titulo_centro {
    flex: auto;
    text-align: center;
}

.titulo_der {
    flex: 1;
}

/* area de trabajo centrada */
.contenedor_trabajo {
    width: 100%;
    max-width:100%;
    margin: auto;
    padding-bottom: 15px;
    box-sizing: border-box;
}

/* separador paso */
.separador_paso {
    width: 100%;
    padding-top: 10px;
    text-align: center;
    font-size: 14px;
}

/* tabla contenedor */
.tabla_contenedor {
    width: 100%;
}
.titulo-contacto {
    text-align: center;
    margin-bottom: 10px;
    color: #0a8f3c;
}

.subtitulo-contacto {
    text-align: center;
    margin-bottom: 25px;
    color: #0a8f3c;
}

.titulo-historial {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 20px;
}

.titulo-contenedor {
    display: flex;
    align-items: center;
    gap: 15px;
}

.icono-historial {
    height: 50px;
}

.titulo-texto {
    font-size: 26px;
    font-weight: bold;
    color: #1f7a3a;
}
.contenedores-padres {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.contenedor {
    width: 90%;
    max-width: 350px;
    padding: 25px;
    background: white;
    border-radius: 12px;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.15);
    text-align: center;
}

.logo {
    width: 140px;
    margin-bottom: 10px;
}

.titulo {
    font-size: 18px;
    margin-bottom: 20px;
}

.formRow {
    margin-bottom: 15px;
    text-align: left;
}

.label {
    display: block;
    margin-bottom: 5px;
}

.input {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.mensaje {
    font-size: 12px;
    color: red;
}

.boton {
    width: 100%;
    padding: 10px;
    background: #007BFF;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

    .boton:hover {
        background: #0056b3;
    }
/* RESPONSIVE */
@media (max-width:1024px) {

    .altum_chat_box {
        width: 280px;
    }
}
@media (max-width:1024px) {

    .altum_chat_box {
        width: 280px;
    }
}
.contacto-contenedor {
    width: 900px;
    margin: auto;
    padding: 30px;
}

.contacto-titulo {
    text-align: center;
    margin-bottom: 20px;
}

.contacto-instruccion {
    text-align: center;
    margin-bottom: 25px;
}

.grupo-campo {
    display: flex;
    margin-bottom: 15px;
}

.campo-label {
    width: 220px;
    font-weight: bold;
}

.campo-input {
    flex: 1;
}

.input-form,
.select-form {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.textarea-form {
    width: 100%;
    height: 120px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.contenedor-boton {
    text-align: center;
    margin-top: 25px;
}

.btn-enviar {
    background: #0033cc;
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 6px;
    cursor: pointer;
}

    .btn-enviar:hover {
        background: #002299;
    }

.campo-error {
    color: red;
}

.validacion {
    display: inline-block;
    margin-left: 10px;
}

.campo-ayuda {
    font-size: 12px;
    color: #666;
}
.contacto-contenedor {
    width: 90%;
}

.campo-label {
    width: 180px;
}
.form-contacto {
    width: 100%;
    max-width: 900px;
    margin: 25px auto;
    height:600px;
}

.form-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
    width: 100%;
}

.form-label {
    width: 220px;
    font-weight: 600;
}

.form-input {
    flex: 1;
    width: 100%;
}

    /* INPUTS */

    .form-input input,
    .form-input select {
        width: 90%;
        height: 38px;
        border: 1px solid #ccc;
        border-radius: 6px;
        padding: 4px 8px;
        box-sizing: border-box;
    }

    .form-input textarea {
        width: 90%;
        height: 120px;
        border: 1px solid #ccc;
        border-radius: 6px;
        padding: 8px;
        box-sizing: border-box;
        resize: vertical;
    }

/* VALIDACION */

.textoCampo_Valida {
    margin-left: 6px;
}

/* LEYENDAS */

.form-leyenda {
    font-size: 12px;
    color: #777;
    margin-top: 4px;
}

/* CONTENEDOR PRINCIPAL */
.tabla_tarjeta2 {
    width: 100%;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    font-family: Verdana, Arial;
    margin-top: 15px;
}

/* ENCABEZADO */
.tabla_encabezado2 {
    display: grid;
    grid-template-columns: 60px 120px 1.5fr 1fr 1fr 1fr;
    background: #0f6c3b;
    color: white;
    font-weight: bold;
    padding: 12px 10px;
    align-items: center;
}

    .tabla_encabezado2 div {
        text-align: center;
        font-size: 14px;
    }

/* FILAS */
.tabla_fila2 {
    display: grid;
    grid-template-columns: 60px 120px 1.5fr 1fr 1fr 1fr;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid #e5e5e5;
    background: white;
    transition: all .2s ease;
}

    .tabla_fila2:hover {
        background: #f7faf9;
    }

    /* COLUMNAS */
    .tabla_fila2 div {
        text-align: center;
        font-size: 14px;
    }

    /* RADIO */
    .tabla_fila2 input[type="radio"] {
        cursor: pointer;
        transform: scale(1.1);
    }

    /* TOTAL VERDE */
    .tabla_fila2 div:last-child {
        font-weight: bold;
        color: #16a34a;
    }
.tabla_tarjeta3 {
    width: 100%;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-top: 15px;
}

/* ENCABEZADO */
.tabla_encabezado3 {
    display: grid;
    grid-template-columns: 2fr 2fr 0.7fr 1fr 1fr 1fr 1fr;
    background: #dbe4ef;
    color: #0033cc;
    font-weight: bold;
    padding: 10px;
    align-items: center;
}

    .tabla_encabezado3 div {
        text-align: center;
        font-size: 13px;
    }

/* FILAS */
.tabla_fila3 {
    display: grid;
    grid-template-columns: 2fr 2fr 0.7fr 1fr 1fr 1fr 1fr;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #e5e5e5;
    background: white;
    transition: 0.2s;
}

    .tabla_fila3 div {
        text-align: center;
        font-size: 13px;
    }

    /* HOVER */
    .tabla_fila3:hover {
        background: #f5f9ff;
    }
    
    /* TOTAL */
    .tabla_fila3 div:last-child {
        font-weight: bold;
        color: #16a34a;
    }

/* DETALLE COMPRA */
.detalle_compra {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 10px;
    background: #f8fbf9;
    border-left: 4px solid #15803d;
    border-radius: 6px;
    padding: 15px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    display: none;
    animation: animDetalle .25s ease;
}
.tabla-grid {
    width: 100%;
    font-family: Arial;
}

/* HEADER */
.tabla-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    background: #2c8f8f;
    color: white;
    font-weight: bold;
    padding: 10px;
}

/* FILAS */
.tabla-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    align-items: center;
}

    .tabla-row:hover {
        background: #f5f5f5;
    }

    .tabla-header div,
    .tabla-row div {
        padding: 5px;
    }
/* ENCABEZADO */

/* ANIMACION */
@keyframes animDetalle {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.contenedor_general_precios {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 40px 20px;
    box-sizing: border-box;
}

/* GRID DE TARJETAS */
.contenedor-precios {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 25px;
    margin-top: 30px;
}

/* TARJETA DE PRECIO */
.tarjeta-precio {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    position: relative;
    transition: all .3s ease;
}

    /* EFECTO HOVER */
    .tarjeta-precio:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 25px rgba(0,0,0,0.15);
    }

    /* RADIO */
    .tarjeta-precio input[type="radio"] {
        position: absolute;
        top: 15px;
        right: 15px;
        transform: scale(1.3);
    }

/* TITULO */
.titulo-paquete {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #204279;
}

/* PRECIO */
.precio-paquete {
    font-size: 32px;
    font-weight: bold;
    color: #2ecc71; /* VERDE */
    margin-top: 15px;
}

/* ICONO GRANDE */
.tarjeta-precio img {
    width: 70px;
    height: 70px;
    margin-bottom: 15px;
}

/* FILA CONTACTO */
.filaContacto {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
    flex-wrap: wrap;
}

.textoContacto {
    font-size: 16px;
    text-align: center;
}

.iconoContacto {
    width: 70px;
}

/* BOTONES */
.contenedorBotonesInicio {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.botones-centro {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    background-color:green;
}

.botones-centro:hover {
    background: #2c5aa0;
}


#mseccion_fondo4 {
    width: 100%;
    max-width: 1200px;
    margin: 60px auto;
    padding: 20px;
}

.tabla_encabezado4 {
    display: grid;
    grid-template-columns: 0.7fr 2fr 2fr 1fr;
    background: #dbe4ef;
    color: #0033cc;
    font-weight: bold;
    padding: 10px;
    align-items: center;
}

    .tabla_encabezado4 div {
        text-align: center;
        font-size: 13px;
    }

/* FILAS */
.tabla_fila4 {
    display: grid;
    grid-template-columns: 0.7fr 2fr 2fr 1fr;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #e5e5e5;
    background: white;
    transition: 0.2s;
}

    .tabla_fila4 div {
        text-align: center;
        font-size: 13px;
    }

    /* HOVER */
    .tabla_fila4:hover {
        background: #f5f9ff;
    }

    /* PRECIO */
    .tabla_fila4 div:last-child {
        font-weight: bold;
        color: #16a34a;
    }
#suscrip_registros {
    display: flex;
    justify-content:center;
    align-items: center;
    width: 100%;
    
    gap: 15px;
}

.suscrip_icon img {
    width: 60px;
    height: auto;
}

.suscrip_text {
    flex: 1;
}

.suscrp_ttl1s {
    font-size: 18px;
    color: #2a9d2a;
}
.formbuttons {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.btn-main {
    font-size: 12px;
    border: 1px Green;
    padding: 4px 7px 2px 4px;
    width: 20%;
    height: 30px;
    margin-top: 5px;
    margin-left: 1px;
    margin-right: 5px;
    cursor: pointer;
    border-radius: 5px;
    background-color: Green;
    color: white;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.btn-alt {
    font-size: 12px;
    border: 1px Green;
    padding: 4px 7px 2px 4px;
    width: 20%;
    height: 30px;
    margin-top: 5px;
    margin-left: 1px;
    margin-right: 5px;
    cursor: pointer;
    border-radius: 5px;
    background-color: Green;
    color: white;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.fromRegistros {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}
.fromRow {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
    .fromRow label {
        width: 180px;
        font-size: 13px;
    }
.input-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    width:100%;
}

.inputs {
    height: 32px;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color:rgba(0,0,0,0.15)
}

.input hover {
    border: 1px solid #fff;
    background-color:white;
}

.leyendas {
    font-size: 12px;
    color: red;
    margin-top: 4px;
}
.leyendas:empty {
    display: none;
}

    @media(max-width:768px) {
        .tabla_encabezado {
        display: none;
    }

    .historial-titulo {
        font-size: 22px;
    }

    .tabla_fila {
        grid-template-columns: 1fr;
        padding: 10px;
        background: white;
        margin: 10px;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgb(31 235 88);
    }

        .tabla_fila div {
            display: flex;
            justify-content: space-between;
            border: none;
            border-bottom: 1px solid #eee;
            padding: 8px 0;
        }

            .tabla_fila div::before {
                content: attr(data-label);
                font-weight: bold;
                color: #333;
            }

    .contacto-contenedor {
        width: 95%;
        padding: 20px;
    }

    /* campos uno debajo del otro */
    .grupo-campo {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }

    .campo-label {
        width: 200px;
        font-weight: bold;
    }

    .campo-input {
        flex: 1;
    }

    .input-form,
    .select-form,
    .textarea-form {
        width: 100%;
    }

    .input-form,
    .select-form,
    .textarea-form {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 14px;
    }

        .input-form:focus,
        .select-form:focus,
        .textarea-form:focus {
            border-color: #2f7df6;
            outline: none;
        }

    /* boton */

    .btn-enviar {
        width: 100%;
    }

    .btn-main,
    .btn-alt {
        flex: 1 1 40%;
        max-width: 180px;
    }

    .form-row {
        flex-direction: column;
    }

    .form-label {
        width: 100%;
        margin-bottom: 5px;
    }

    .form-input input,
    .form-input select,
    .form-input textarea {
        width: 100%;
    }

    .form-row {
        flex-direction: column;
    }

    .form-label {
        width: 100%;
    }

    .tabla_encabezado2 {
        display: none;
    }

    .tabla_fila2 {
        grid-template-columns: 1fr;
        gap: 6px;
        margin-bottom: 12px;
        border-radius: 8px;
        box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    }

        .tabla_fila2 div {
            display: flex;
            justify-content: space-between;
            padding: 6px 10px;
            font-size: 14px;
        }

            .tabla_fila2 div:before {
                content: attr(data-label);
                font-weight: bold;
                color: #555;
            }

    .tabla_encabezado3 {
        display: none;
    }

    .tabla_fila3 {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 12px;
        border: 1px solid #e5e5e5;
        border-radius: 6px;
        margin-bottom: 10px;
    }

        .tabla_fila3 div {
            text-align: left;
            font-size: 13px;
        }

    .tabla_encabezado4 {
        display: none;
    }

    .tabla_fila4 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 6px;
    }

        .tabla_fila4 div {
            text-align: left;
            width: 100%;
        }

            .tabla_fila4 div::before {
                content: attr(data-label);
                font-weight: bold;
                color: #204279;
                display: block;
            }

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

            .fromRow label {
                width: 100%;
                margin-bottom: 4px;
            }

            .fromRow input,
            .fromRow select {
                width: 100%;
            }
        .contenedor-precios {
            display: grid;
            grid-template-columns: repeat(1,1fr);
            gap: 25px;
            margin-top: 30px;
        }
}






/* ============================= */
/* MOVIL PEQUEÑO */
/* ============================= */

@media (max-width:480px) {

    .contacto-titulo h1 {
        font-size: 22px;
    }

    .contacto-instruccion h2 {
        font-size: 16px;
    }

    .input-form,
    .select-form {
        padding: 10px;
    }
    .form-row {
        flex-direction: column;
    }

    .form-label {
        width: 100%;
    }
}