/* ===========================================================================
   LA TARIFA DE CADA ZONA — la tabla de zonas y el editor de la elegida a mano
   y las programadas (precios P7b, 2026-10-02; docs\arquitectura\precios-
   impuestos-y-promociones-2026-09-29.md, «Estado de P7b»).

   Va DESPUES de app.css y de las otras pieles de precios en el indice. No
   declara ni una ficha propia: usa las `--plano-*` de plano.css, como la de la
   configuracion fiscal. La tabla se desplaza en su marco si no cabe; el
   documento nunca es mas ancho que la ventana.
   =========================================================================== */

/* PRIMERO EL LOCAL (2026-10-09): el desplegable «Local», las fichas de los filtros tipo Excel (y «Filtrar y ordenar» en
   el teléfono) y el recuento, en una fila que se parte si no cabe. */
.tz-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
    margin-block-end: 0.75rem;
}

/* El desplegable «Local» no ocupa la fila entera: MudSelect se pone al 100 % de su caja. */
.tz-filtros > :is(.tz-local, .mud-input-control:has(.tz-local), .mud-select:has(.tz-local)),
.tz-local {
    flex: 0 1 22rem;
    inline-size: 100%;
    max-inline-size: 22rem;
    min-width: 0;
    margin-bottom: 0;
}

.tz-contador {
    margin-inline-start: auto;
    color: var(--plano-tinta-2);
    font-size: var(--plano-t-12);
    white-space: nowrap;
}

.tz-tabla-caja {
    /* `position: relative` (2026-10-08): sin él, el rótulo «Acciones» solo para el lector (`.tz-oculto`, absoluto) se
       colocaba respecto a la página y no a esta caja, y a 390 px la ensanchaba hasta 449 px (desplazamiento horizontal
       de la página entera; tools/central/barrer-responsivo-movil.mjs). */
    position: relative;
    max-inline-size: 100%;
    overflow-x: auto;
}

.tz-tabla {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--plano-t-13);
}

.tz-tabla th,
.tz-tabla td {
    padding: 0.4rem 0.5rem;
    border-block-end: 1px solid var(--plano-linea);
    text-align: start;
    vertical-align: top;
}

.tz-tabla thead th {
    color: var(--plano-tinta-2);
    font-weight: 600;
    white-space: nowrap;
}

.tz-fila-elegida {
    background-color: var(--plano-morado-aguada);
}

.tz-origen {
    display: inline-block;
    margin-inline-start: 0.35rem;
    padding: 0 0.45rem;
    border-radius: var(--plano-pildora);
    font-size: var(--plano-t-12);
    color: var(--plano-tinta);
    background-color: rgba(42, 26, 62, 0.06);
}

.tz-origen-mano {
    background-color: var(--plano-mostaza-aguada);
}

.tz-origen-programada {
    background-color: var(--plano-salvia-aguada-honda);
}

.tz-hora {
    display: block;
    color: var(--plano-tinta-2);
    font-size: var(--plano-t-12);
}

.tz-programadas {
    margin: 0;
    padding-inline-start: 1rem;
}

.tz-nada {
    color: var(--plano-tinta-2);
}

.tz-oculto {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.tz-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tz-subtitulo {
    margin: 0.5rem 0 0;
    font-size: var(--plano-t-15);
    color: var(--plano-tinta);
}

.tz-campo {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-inline-size: 28rem;
    min-width: 0;
    font-size: var(--plano-t-12);
    font-weight: 600;
    color: var(--plano-tinta-2);
}

.tz-campo small {
    font-weight: 400;
}

.tz-campo-corto {
    flex: 0 1 9rem;
}

.tz-campo input,
.tz-campo select {
    min-block-size: var(--plano-toque);
    inline-size: 100%;
    max-inline-size: 100%;
    padding: 0.35rem 0.6rem;
    border: none;
    border-radius: var(--plano-radio-control);
    background-color: rgba(42, 26, 62, 0.06);
    color: var(--plano-tinta);
    font-family: var(--plano-familia);
    font-size: var(--plano-t-15);
    font-weight: 400;
    box-sizing: border-box;
}

.tz-programada {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem;
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--plano-linea-fina);
    border-radius: var(--plano-radio-control);
    min-width: 0;
}

.tz-programada legend {
    padding: 0 0.3rem;
    font-size: var(--plano-t-12);
    color: var(--plano-tinta-2);
}

.tz-dias {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.tz-dia {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-block-size: var(--plano-toque);
    padding: 0 0.4rem;
    font-size: var(--plano-t-13);
    color: var(--plano-tinta);
}

.tz-ayuda {
    margin: 0;
    font-size: var(--plano-t-12);
    color: var(--plano-tinta-2);
}

.tz-error {
    color: var(--plano-arcilla-honda);
    font-weight: 400;
}

.tz-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* EN EL TELÉFONO, LA TABLA EN FICHAS (2026-10-08; docs/central/responsivo-cabeceras-2026-10-08.md). A 390 px las seis
   columnas no cabían: la zona, el local y la tarifa se partían en tres renglones de una palabra («SALA / CAFETERÍA /
   SANTANDER») y «Programada» y «Cambiar…» solo se veían desplazando la tabla. Por debajo de 600 px cada zona es un
   bloque: su nombre arriba con «Cambiar…» a la derecha y, debajo, un renglón por dato con su rótulo. */
@media (max-width: 599.98px) {
    .tz-tabla thead {
        display: none;
    }

    .tz-tabla,
    .tz-tabla tbody {
        display: block;
    }

    .tz-tabla tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        padding-block: 0.4rem;
        border-block-end: 1px solid var(--plano-linea);
    }

    .tz-tabla tr > th,
    .tz-tabla tr > td {
        padding-block: 0.15rem;
        border: none;
    }

    .tz-tabla tr > th[scope="row"] {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .tz-tabla tr > td.tz-celda-accion {
        grid-column: 2;
        grid-row: 1;
    }

    .tz-tabla tr > td[data-etiqueta] {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: 6.5rem minmax(0, 1fr);
        column-gap: 0.5rem;
    }

    .tz-tabla tr > td[data-etiqueta]::before {
        content: attr(data-etiqueta);
        color: var(--plano-tinta-2);
        font-size: var(--plano-t-12);
        font-weight: 600;
    }

    /* Lo que pinta la celda de «Ahora» (la tarifa, su origen y la hora) va en la columna del valor, uno detrás de otro. */
    .tz-tabla tr > td[data-etiqueta] > * {
        grid-column: 2;
        justify-self: start;
    }

    .tz-tabla tr > td[data-etiqueta] .tz-origen {
        margin-inline-start: 0;
    }
}