:root {
            --border-color: #000;
            --bg-light: #fff;
            --text-main: #000;
        }

        body {
            color: var(--text-main);
        }

        .table-container {
            width: 100%;
            max-width: 900px;
            margin: auto;
            overflow-x:auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            border: 2px solid var(--border-color);
            text-align: center;
        }

        th, td {
            border: 1px solid var(--border-color);
            padding: 12px;
            vertical-align: middle;
        }

        .header-row th {
            width: 33.33%;
            text-transform: uppercase;
            font-size: 0.9em;
        }

        .label-column {
            font-weight: bold;
            background-color: var(--bg-light);
            text-transform: uppercase;
            width: 25%;
        }

        .full-span {
            background-color: var(--bg-light);
        }

        .highlight {
            font-weight: bold;
        }

        /* Responsividad para móviles */
        @media screen and (max-width: 600px) {
            table, thead, tbody, th, td, tr {
                display: block;
            }
            th{
                width: 100%;
                background-color: aqua;
            }

            .header-row {
                display: flex;
                flex-direction: column;         
            }

            .header-row  th{
                width: 100%;  
            }

            .label-column {
                width: 100%;
                background-color: #f0f0f0;
                border-bottom: 2px solid #000;
            }

            td {
                text-align: left;
                position: relative;
                padding-left: 10px;
            }

            .componentes-formulario{
                width: 80% !important;
            }
        }