:root{
    --amarillo: #ffe727;
    --negro: #000000;
    --gris: #9A999E;
    --gris_click: #434246;
    --blanco: #fff;
    --ancho_pagina: 85%;
}
       
       /* Estilo general */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--blanco);
        }

        .tabs-container {
            width: 100%;
            max-width: var(--ancho_pagina);
            margin: auto;
            margin-top: 30px;
            margin-bottom: 50px;
            background: var(--blanco);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .ajustar_1{
            width: 70%;
            max-width: var(--ancho_pagina);
            /* padding: 15px 20px 15px 30px; */
        }

        /* Tabs Header para vista de escritorio */
        .tabs-header {
            display: flex;
            justify-content: space-between;
            background: var(--gris);
            border-bottom: 3px solid var(--gris);
        }

        .tab {
            flex: 1;
            text-align: center;
            padding: 15px 0;
            cursor: pointer;
            color: white;
            font-weight: bold;
            transition: background 0.3s ease;
        }

        .tab:hover {
            background: var(--amarillo);
        }

        .tab.active {
            background: var(--amarillo);
        }

        /* Contenido general de las tabs */
        .tabs-content {
            padding: 20px;
        }
        .ajustar_2{
            padding: 15px 20px 15px 40px;
        }

        .tab-panel {
            display: none;
        }

        .tab-panel.active {
            display: block;
        }

        /* Acordeón para móviles */
        .accordion-header {
            display: none; /* Ocultos en escritorio */
            padding: 15px;
            background: var(--gris);
            color: white;
            cursor: pointer;
            border-bottom: 2px solid var(--amarillo);
            transition: background 0.3s ease;
        }

        .accordion-header:hover {
            background: var(--amarillo);
        }

        .accordion-header.active {
            background: var(--amarillo);
        }

        .accordion-content {
            display: none;
            padding: 20px;
        }

        .accordion-content.active {
            display: block;
        }

        /* Media Query para vista móvil */
        @media (max-width: 768px) {
            .tabs-header, .tabs-content {
                display: none; /* Oculta tabs y su contenido */
            }

            .accordion-header {
                display: block; /* Muestra el acordeón */
            }
            .ajustar_1{
                width: 95%;
                /* padding: 15px 20px 15px 30px; */
            }
        }

        /* Vista de escritorio (asegura que el acordeón no aparezca en desktop) */
        @media (min-width: 769px) {
            .accordion-header, .accordion-content {
                display: none;
            }
        }