/* Reset básico */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden; /* No scroll lateral de página */
    font-family: 'Inter', sans-serif;
}

/* Inputs */
input[type="number"], input[type="text"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    padding: 4px;
    font-family: inherit;
    box-sizing: border-box;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.error {
    font-size: 12px;
    color: red;
    margin-top: 5px;
    display: block;
}

/* Tablas */
.table-wrapper {
    width: 100%;
    height: auto;
    overflow-x: auto; 
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding: 0 5px;
    margin-bottom: 20px;
    padding-top: 20px;
}

.table-wrapper table {
    min-width: max-content;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;         /* Evita espacios entre celdas */
    border-radius: 12px;       /* Redondea esquinas exteriores */
    overflow: hidden;          /* Recorta bordes de celdas dentro */
}

table, th, td {
    border: 1px solid #333;
}

th {
    text-align: center;
    background-color: rgb(85,21,43);
    color: #fff;
    padding: 8px;
}

thead tr:first-child th {
    background-color: rgb(85, 21, 43);
    color: white;
}

thead tr:nth-child(2) th {
    background-color: rgb(125, 28, 61);
    color: white;
}

thead tr:nth-child(3) th {
    background-color: rgb(175, 78, 110);
    color: white;
}

thead th {
    border: 1px solid rgb(223, 215, 215);  /* Bordes del thead en blanco */
}

td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){
    background-color: oklab(88.102% 0.01055 0.0032);
}

.total {
    background-color: #a7a896;
}

thead tr:first-child th:first-child {
    border-top-left-radius: 12px;
}

thead tr:first-child th:last-child {
    border-top-right-radius: 12px;
}

/* Esquinas inferiores del tfoot */
tfoot tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

tfoot tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

/* Estilos responsive móviles */
@media (max-width: 768px) {
    .table-wrapper {
        height: 100dvh; /* tabla ocupa pantalla completa */
    }

    td, th {
        font-size: clamp(0.7em, 0.8em, 0.9em);
    }
}