/* styles.css */

/* 1. Base tables share the same styles → unificamos en .table-base */
.table-base {
    font-family: Verdana, Arial, sans-serif;
    font-size: 0.875rem; /* antes 10px */
    font-weight: bold;
    text-decoration: none;
    margin-left: 0.875rem; /* antes 14px */
    width: 100%; /* ocupa todo el contenedor */
    max-width: none; /* elimina width:auto problemático */
    border-collapse: collapse; /* mejor apariencia */
}

/* 2. Tablas de formulario sin bordes */
.table-form {
    border: none;
}

/* 3. Botones o secciones con estilo de tabla reutilizan .table-base + text-left */
.table-btn {
    /* si quieres margen adicional o padding, agrégalo aquí */
}

/* 4. Clases de alineación semántica */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* 5. Responsive: en pantallas < 768px, permiten scroll horizontal y ajustan márgenes */
@media (max-width: 767px) {
    .table-base {
        margin-left: 0;
        font-size: 0.75rem;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        /* Opcional: convertir filas en bloques para lectura móvil */
        .table-base thead {
            display: none;
        }

        .table-base,
        .table-base tbody,
        .table-base tr,
        .table-base td,
        .table-base th {
            display: block;
            width: 100%;
        }

            .table-base tr {
                margin-bottom: 1rem;
                border-bottom: 1px solid #ccc;
            }

            .table-base td {
                text-align: right;
                padding-left: 50%;
                position: relative;
            }

                .table-base td::before {
                    /* usa data-label en el HTML para el título de cada celda */
                    content: attr(data-label);
                    position: absolute;
                    left: 0;
                    width: 45%;
                    padding-left: 0.5rem;
                    font-weight: bold;
                    text-align: left;
                }
}