/* «PEDIDOS DE LA CARTA» (P9, 2026-11-08, docs/central/carta-digital-pedidos-configuracion-2026-11-08.md): la ficha de una zona de
   reparto o de una franja (en el sitio, debajo de su tabla), el MAPA de la zona (js/zonas.js: teselas de OpenStreetMap y un <svg>
   encima) y las siete pastillas de los días. Solo consume las fichas --limpia-* (el claro y el oscuro salen de hoja-limpia.css).
   Táctil: todo lo que se pulsa mide 44 px o más; los puntos del mapa tienen 44 px de toque (el círculo transparente). */

.zonas-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zonas-nombre { font-weight: 600; }
.zonas-subtitulo { margin: 18px 0 6px; font-size: .75rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
    color: var(--limpia-tinta-2); }

/* La ficha de una zona o de una franja: una caja fina debajo de la tabla, sin sombra. */
.zonas-ficha { margin-top: 12px; padding: 12px 16px 16px; border: 1px solid var(--limpia-borde); border-radius: var(--limpia-radio);
    background: var(--limpia-cabecera); min-width: 0; }
.zonas-ficha-titulo { margin: 0 0 8px; font-size: .9375rem; font-weight: 650; color: var(--limpia-tinta); }
.zonas-ficha-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.zonas-ficha-botones .mud-button-root { min-height: 44px; }
.zonas-casillas { display: grid; gap: 0; margin-top: 4px; }

/* EL MAPA. Alto fijo y ancho de la caja; en un teléfono, algo más bajo para que quepan los botones de debajo sin desplazar. */
.zonas-editor { margin-top: 12px; min-width: 0; }
.zonas-mapa { position: relative; height: 420px; overflow: hidden; border: 1px solid var(--limpia-borde); border-radius: var(--limpia-radio);
    touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; outline: none;
    /* La cuadrícula: lo que se ve mientras llegan las teselas o si no llegan (sin red). */
    background-color: var(--limpia-neutro-fondo);
    background-image: linear-gradient(var(--limpia-borde) 1px, transparent 1px), linear-gradient(90deg, var(--limpia-borde) 1px, transparent 1px);
    background-size: 32px 32px; }
.zonas-mapa:focus-visible { box-shadow: 0 0 0 3px var(--limpia-morado); }
.zonas-teselas { position: absolute; inset: 0; pointer-events: none; }
.zonas-teselas img { position: absolute; top: 0; left: 0; width: 256px; height: 256px; max-width: none; }
.zonas-dibujo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.zonas-zona { fill: color-mix(in srgb, var(--limpia-morado) 22%, transparent); stroke: var(--limpia-morado); stroke-width: 3; stroke-linejoin: round; }
polyline.zonas-zona { fill: none; }
.zonas-otra { fill: color-mix(in srgb, var(--limpia-tinta-3) 14%, transparent); stroke: var(--limpia-tinta-3); stroke-width: 2; stroke-dasharray: 6 4; }
.zonas-tirador-toque { fill: transparent; cursor: grab; }
.zonas-punto-marca { fill: var(--limpia-hoja); stroke: var(--limpia-morado); stroke-width: 3; pointer-events: none; }
.zonas-punto-primero { fill: var(--limpia-morado); }
.zonas-insertar-marca { fill: var(--limpia-hoja); stroke: var(--limpia-morado); stroke-width: 2; opacity: .85; pointer-events: none; }
.zonas-insertar .zonas-tirador-toque { cursor: copy; }

/* Los botones de encima del mapa: 44 px, en columna arriba a la derecha. */
.zonas-controles { position: absolute; top: 8px; right: 8px; display: grid; gap: 6px; z-index: 2; }
.zonas-boton { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--limpia-radio-control);
    border: 1px solid var(--limpia-borde); background: var(--limpia-hoja); color: var(--limpia-tinta); cursor: pointer;
    box-shadow: 0 1px 3px rgba(42, 26, 62, .12); }
.zonas-boton:hover { background: var(--limpia-hover); }
.zonas-boton:focus-visible { outline: 3px solid var(--limpia-morado); outline-offset: 1px; }

/* LA ATRIBUCIÓN de OpenStreetMap (licencia ODbL): siempre visible, abajo a la derecha. */
.zonas-atribucion { position: absolute; right: 0; bottom: 0; z-index: 2; padding: 2px 6px; font-size: .6875rem; line-height: 1.4;
    background: color-mix(in srgb, var(--limpia-hoja) 85%, transparent); border-top-left-radius: 6px; }
.zonas-atribucion a { color: var(--limpia-tinta-2); }

.zonas-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
.zonas-cuenta { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--limpia-tinta-2); margin-right: auto; }
.zonas-accion.mud-button-root { min-height: 44px; }
.zonas-ayuda { margin-top: 2px; line-height: 1.4; }

/* LOS DÍAS de una franja: siete pastillas de 44 px que se marcan y desmarcan. */
.franjas-horas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.franjas-dias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.franjas-dia { min-width: 44px; height: 44px; padding: 0 10px; border-radius: 22px; border: 1px solid var(--limpia-borde-control);
    background: var(--limpia-hoja); color: var(--limpia-tinta); font: inherit; font-weight: 650; cursor: pointer; }
.franjas-dia[aria-pressed="true"] { background: var(--limpia-morado); border-color: var(--limpia-morado); color: var(--limpia-sobre-morado); }
.franjas-dia:focus-visible { outline: 3px solid var(--limpia-morado); outline-offset: 2px; }

/* Los botones de las filas de las tablas de zonas y franjas: 44 px de toque. */
.zonas .crud-celda-acciones .mud-icon-button, .franjas .crud-celda-acciones .mud-icon-button { min-width: 44px; min-height: 44px; }

@media (max-width: 600px) {
    /* En el teléfono la tabla se apila en tarjetas (plano.css §3) y el carril de las acciones es de UN botón: aquí son dos (editar y
       quitar), y la cifra de la primera línea se metía debajo del lápiz (captura de 390 px). Dos toques de ancho. */
    .zonas tbody > tr, .franjas tbody > tr { --plano-carril-acciones: calc(2 * var(--plano-toque) + 0.35rem) !important; }
    .zonas-mapa { height: 340px; }
    .zonas-ficha { padding: 10px 10px 12px; }
    .franjas-horas { grid-template-columns: 1fr; }
}

/* En horizontal en un teléfono (poco alto): el mapa deja sitio a los botones. */
@media (max-height: 480px) and (orientation: landscape) {
    .zonas-mapa { height: 260px; }
}

/* En oscuro, las teselas claras se oscurecen (invertidas y con el tono devuelto): sin esto el mapa deslumbra en una hoja oscura. */
@media (prefers-color-scheme: dark) {
    .zonas-teselas img { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9); }
}