/**
 * PEDIDOS - estilos del modulo (PASO D1, 20-09-2026)
 * ---------------------------------------------------------------------------
 * Hasta hoy estos estilos se inyectaban desde pedidos.js (<style id="pedidos-estilos">)
 * y los colores salian de las variables globales del tema, que son siempre
 * oscuras. Ahora viven aqui, con tokens propios --ped-* en dos bloques:
 * claro y oscuro.
 *
 * COMO SE ELIGE EL MODO. El interruptor de la cabecera (assets/js/tema-global.js)
 * guarda 'bcn_tema' = auto | claro | oscuro y escribe data-tema="claro|oscuro"
 * en <html>; con 'auto' lo resuelve prefers-color-scheme. El script en linea
 * del <head> de visual_search.html lo aplica ANTES de las hojas de estilo,
 * para que no haya parpadeo.
 *
 * ESTOS TOKENS --ped-* son de Pedidos, con UNA excepcion desde el
 * 21-09-2026: --ped-fondo lo usa tambien atrezzo-base.css para el fondo de
 * la pagina en Pedidos y en Confirmacion (busca "EL FONDO SIGUE A LA
 * PESTANA"). Si se renombra o se le cambia el valor, mirar ahi. A data-tema si
 * le sigue ademas Confirmacion desde el 21-09-2026 (con su propia clase
 * body.conf-tema-claro, no con estos tokens). El boton del visor (#temaVisor,
 * clave atrezzo_tema) sigue aparte: la zona de fotos se queda oscura siempre.
 *
 * LOS TOKENS VAN EN :root, no en #pedidos-tab, porque el aviso flotante
 * (.ped-toast) y el dialogo de confirmacion (.ped-capa) cuelgan de <body>,
 * fuera de la pestana. Los nombres llevan el prefijo --ped-: no pisan nada.
 *
 * Paleta: la que mando el usuario (claro el 19-09, oscuro el 20-09). Los
 * unicos tokens que no venian en su lista, y que marco aqui:
 *   --ped-peligro         archivar y errores (la paleta no traia color de error)
 *   --ped-sombra          sombra de menus, dialogo y aviso flotante
 *   --ped-boton-texto     el texto del boton principal (#FFF claro, #16140F oscuro)
 *   --ped-acento-texto    el texto sobre el acento (badge HOY)
 *   --ped-seleccion-fondo lo pidio el usuario para no escribir blanco a mano
 * Contraste comprobado (WCAG, texto normal 4.5:1). Con los ajustes del
 * usuario del 20-09 pasa TODO el texto en los dos modos: el badge HOY lleva
 * texto oscuro tambien en claro (4.86:1), --ped-tenue subio a #665F51 (5.32:1
 * sobre el fondo) y --ped-peligro ya no es el color del enlace (6.25:1 claro,
 * 7.36:1 oscuro).
 * --ped-borde-campo es SOLO para el contorno de los campos: cumple el 3:1
 * sobre --ped-superficie (3.49 / 3.19) y sobre --ped-fondo (3.09 / 3.49), que
 * es donde viven. Sobre --ped-superficie-2 se quedaria en 2.8:1: NO poner un
 * campo sobre esa superficie. --ped-borde y --ped-divisor son de tarjeta y
 * separador, no de campo, y se quedan por debajo de 3:1 a proposito.
 */

/* ============================== TOKENS: MODO CLARO (por defecto) ========== */
:root {
    --ped-fondo: #EFEBE3;
    --ped-superficie: #FBF9F5;
    --ped-superficie-2: #E6E1D6;
    --ped-borde: #8C8574;
    --ped-borde-campo: #8C8574;
    --ped-divisor: #C9C1B0;
    --ped-texto: #17150F;
    --ped-texto-2: #3A362D;
    --ped-atenuado: #625C4F;
    --ped-tenue: #665F51;
    --ped-boton: #17150F;
    --ped-boton-texto: #FFFFFF;
    --ped-enlace: #B53A10;
    --ped-enlace-hover: #8A2B0A;
    --ped-acento: #E8501C;
    --ped-acento-texto: #17150F;
    --ped-ok-fondo: #DCEBD9;
    --ped-ok-texto: #235C2E;
    --ped-aviso-fondo: #F6E3B0;
    --ped-aviso-texto: #6E4B00;
    --ped-carpeta-fondo: #E9DCC3;
    --ped-seleccion-fondo: #FFFFFF;
    --ped-peligro: #B42318;
    --ped-sombra: rgba(23, 21, 15, .18);

    /* Locales: punto/borde, texto y fondo del chip. Se aplican en el PASO D2. */
    --ped-molins-punto: #C47E03;  /* L5: 3,32:1 sobre la tarjeta; #D98E04 daba 2,68 */      --ped-molins-texto: #7A5000;      --ped-molins-chip: rgba(217, 142, 4, .16);
    --ped-montjuic22-punto: #1F8A5B;  --ped-montjuic22-texto: #15613F;  --ped-montjuic22-chip: rgba(31, 138, 91, .14);
    --ped-vila21-punto: #6B4FD8;      --ped-vila21-texto: #4B34A8;      --ped-vila21-chip: rgba(107, 79, 216, .13);
    --ped-oficina-punto: #2C6FB7;     --ped-oficina-texto: #1F4F85;     --ped-oficina-chip: rgba(44, 111, 183, .13);
    --ped-expo91-punto: #D2452E;      --ped-expo91-texto: #9E2F1D;      --ped-expo91-chip: rgba(210, 69, 46, .13);

    /* Tipografia: Archivo para titulos (eje de ancho al 80%), IBM Plex Sans
       para el texto, IBM Plex Mono para codigos y nombres de carpeta. */
    --ped-fuente: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ped-fuente-titulo: "Archivo", "IBM Plex Sans", system-ui, sans-serif;
    --ped-fuente-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* ============================== TOKENS: MODO OSCURO ====================== */
:root[data-tema="oscuro"] {
    --ped-fondo: #16140F;
    --ped-superficie: #201D17;
    --ped-superficie-2: #2A261F;
    --ped-borde: #736B5C;
    --ped-borde-campo: #736B5C;
    --ped-divisor: #4A443A;
    --ped-texto: #F3EFE6;
    --ped-texto-2: #D9D3C5;
    --ped-atenuado: #ADA593;
    --ped-tenue: #958D7B;
    --ped-boton: #F3EFE6;
    --ped-boton-texto: #16140F;
    --ped-enlace: #FF9466;
    --ped-enlace-hover: #FFB38F;
    --ped-acento: #F0602C;
    --ped-acento-texto: #16140F;
    --ped-ok-fondo: #1E3324;
    --ped-ok-texto: #9FD8AA;
    --ped-aviso-fondo: #3A2E12;
    --ped-aviso-texto: #F2CE7C;
    --ped-carpeta-fondo: #2E271B;
    --ped-seleccion-fondo: #2A261F;
    --ped-peligro: #FF8A80;
    --ped-sombra: rgba(0, 0, 0, .55);

    --ped-molins-punto: #F0A92E;      --ped-molins-texto: #F6C36A;      --ped-molins-chip: rgba(240, 169, 46, .16);
    --ped-montjuic22-punto: #3DBA82;  --ped-montjuic22-texto: #7FD8AE;  --ped-montjuic22-chip: rgba(61, 186, 130, .15);
    --ped-vila21-punto: #9A82F0;      --ped-vila21-texto: #C2B2F7;      --ped-vila21-chip: rgba(154, 130, 240, .16);
    --ped-oficina-punto: #5A9BE0;     --ped-oficina-texto: #A3C6EE;     --ped-oficina-chip: rgba(90, 155, 224, .15);
    --ped-expo91-punto: #EE6A50;      --ped-expo91-texto: #F6A594;      --ped-expo91-chip: rgba(238, 106, 80, .15);
}

/* ============================== BASE DEL MODULO ========================== */
/* La pestana entera toma el fondo del tema: si no, el claro se veria como
   islas sobre el fondo oscuro de la aplicacion. */
#pedidos-tab {
    background: var(--ped-fondo);
    color: var(--ped-texto);
    font-family: var(--ped-fuente);
    min-height: 70vh;
}
/* Mientras Pedidos esta delante, el fondo del tema llega hasta abajo del todo
   (lo marca pedidos.js con data-pedidos). En las demas pestanas no se toca. */
body[data-pedidos="1"] { background: var(--ped-fondo); --barra-fondo: var(--ped-fondo); }
.ped-wrap, .ped-toast, .ped-dialogo { font-family: var(--ped-fuente); }
/* Titulos en Archivo estrecho, como pide la paleta. */
.ped-titulo, .ped-cab-ref, .ped-subtit, .ped-grupo-tit, .ped-cifra b, .ped-confirmar h3, .ped-dialogo h3 {
    font-family: var(--ped-fuente-titulo);
    font-stretch: 80%;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.ped-titulo, .ped-cab-ref { font-weight: 800; }
/* Codigos de pedido y nombres de carpeta, en mono. */
.ped-codigo, .ped-pastilla, .ped-carpeta code, .ped-previa code, .ped-aviso code { font-family: var(--ped-fuente-mono); font-weight: 500; }
.ped-btn-texto:hover, .ped-contacto:hover { color: var(--ped-enlace-hover); }

/* ============================== ESTILOS DEL MODULO ======================= */
/* Portados de pedidos.js tal cual, con los tokens de arriba. La estructura de
   las pantallas no cambia en D1: eso es D2. */
.ped-wrap{max-width:1100px;margin:0 auto;padding:12px 12px 90px;color:var(--ped-texto);box-sizing:border-box;}
.ped-wrap *{box-sizing:border-box;}
.ped-cabecera{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.ped-titulo{font-size:1.35rem;margin:4px 0 10px;color:var(--ped-texto);}
.ped-subtit{font-size:1.1rem;margin:18px 0 8px;}
.ped-sec{color:var(--ped-atenuado);font-size:.9em;}
.ped-oblig{color:var(--ped-peligro);}
.ped-btn{min-height:44px;padding:10px 16px;border-radius:12px;border:1.5px solid var(--ped-texto);background:var(--ped-tarjeta);color:var(--ped-texto);font-size:1rem;cursor:pointer;touch-action:manipulation;}
.ped-btn:hover{filter:brightness(1.12);}
.ped-btn:disabled{opacity:.5;cursor:default;}
.ped-btn-primario{background:var(--ped-boton);border-color:var(--ped-boton);color:var(--ped-boton-texto);font-weight:600;}
.ped-btn-peligro{border:1.5px solid var(--ped-peligro);color:var(--ped-peligro);background:transparent;font-weight:600;text-decoration:none;}
.ped-btn-grande{width:100%;min-height:52px;font-size:1.05rem;}
.ped-volver{padding-left:10px;}
.ped-input{display:block;width:100%;min-height:44px;margin-top:6px;padding:10px 12px;font-size:16px;border-radius:12px;border:1px solid var(--ped-borde-campo);background:var(--ped-superficie);color:var(--ped-texto);}
textarea.ped-input{resize:vertical;}
.ped-lbl{display:block;margin:0 0 14px;font-weight:600;font-size:.95rem;}
.ped-lbl .ped-input,.ped-lbl .ped-opciones,.ped-lbl .ped-ac{font-weight:400;}
.ped-fila2{display:grid;grid-template-columns:1fr;gap:0 10px;}
.ped-fila2>*{min-width:0;}
/* break-word parte por ESPACIOS. Con 'anywhere' se partia DENTRO de las
   palabras y el nombre de carpeta salia "moni / ca" (PASO L5). */
.ped-wrap{overflow-wrap:break-word;}
.ped-input,.ped-num,.ped-op,.ped-btn{max-width:100%;min-width:0;}
.ped-cab-pedido{padding:2px 2px 14px;margin-bottom:6px;border-bottom:1px solid var(--ped-divisor);}
.ped-cab-ref{font-weight:700;}
.ped-cab-linea{margin:3px 0;font-size:.97rem;}
.ped-cab-acciones{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin-top:12px;}
.ped-btn-accion{min-height:52px;font-size:1.05rem;}
.ped-btn-texto{align-self:center;min-height:44px;padding:8px 14px;border:0;background:transparent;color:var(--ped-enlace);font-size:.95rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.ped-zona-archivar{margin:30px 0 10px;padding-top:14px;border-top:1px dashed var(--ped-divisor);}
.ped-zona-archivar .ped-btn{width:100%;}
.ped-filtros{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;}
.ped-mas-filtros summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--ped-enlace);}
.ped-mas-filtros[open]{padding:8px 10px;border:1px solid var(--ped-borde);border-radius:12px;}
.ped-meta{font-size:.85rem;color:var(--ped-atenuado);margin:6px 2px 8px;}
.ped-lista{display:block;}
.ped-tarjeta,.ped-entrega,.ped-parecido{display:block;width:100%;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--ped-borde);background:var(--ped-superficie);color:var(--ped-texto);font:inherit;}
.ped-tarjeta{cursor:pointer;}
.ped-tarjeta:active{transform:scale(.99);}
.ped-t-sup{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px;}
.ped-codigo{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:1rem;}
.ped-t-ref{font-size:1.1rem;font-weight:600;margin:2px 0;word-break:break-word;}
.ped-t-quien{font-size:.95rem;margin-bottom:6px;}
.ped-chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.78rem;font-weight:600;background:var(--ped-superficie-2);border:1px solid var(--ped-borde);}
.ped-chip.tipo-pelicula,.ped-chip.tipo-serie{background:var(--ped-superficie-2);border-color:var(--ped-borde);}
.ped-chip.cerrado,.ped-chip.archivado{background:var(--ped-aviso-fondo);border-color:var(--ped-aviso-texto);}
.ped-chip.hoy{background:var(--ped-acento);color:var(--ped-acento-texto);border-color:var(--ped-acento);}
.ped-vacio,.ped-cargando{padding:24px;text-align:center;color:var(--ped-atenuado);}
.ped-mas{width:100%;}
.ped-datos{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0;}
.ped-datos dt{color:var(--ped-atenuado);}
.ped-datos dd{margin:0;word-break:break-word;min-width:0;}
.ped-pre{white-space:pre-wrap;}
.ped-entrega{margin-bottom:8px;}
.ped-deco{font-weight:600;text-transform:uppercase;}
/* Recuadro y "Copiar" en la MISMA fila, tambien en movil. El code crece a
   lo ancho (flex:1) y su alto es el del texto. */
.ped-carpeta{display:flex;gap:8px;align-items:center;margin:8px 0;flex-wrap:nowrap;}
.ped-carpeta code,.ped-previa code,.ped-aviso code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem;word-break:break-all;}
.ped-carpeta code{flex:1 1 auto;min-width:0;padding:8px 10px;border-radius:12px;background:var(--ped-carpeta-fondo);color:var(--ped-texto);}
.ped-copiar{min-height:40px;padding:6px 12px;}
.ped-aviso{margin:8px 0;padding:10px;border-radius:12px;border:1px solid var(--ped-aviso-texto);background:var(--ped-aviso-fondo);}
.ped-ok{color:var(--ped-ok-texto);}
.ped-error{color:var(--ped-peligro);font-weight:600;min-height:1.2em;margin:4px 0 8px;}
.ped-opciones{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:6px;}
.ped-op{min-height:48px;border-radius:12px;border:1px solid var(--ped-borde);background:var(--ped-tarjeta);color:var(--ped-texto);font-size:1rem;cursor:pointer;touch-action:manipulation;}
.ped-op.sel{background:var(--ped-boton);border:1.5px solid var(--ped-boton);color:var(--ped-boton-texto);font-weight:700;}
.ped-locales-sel{grid-template-columns:repeat(2,1fr);}
.ped-ac{position:relative;}
.ped-ac-estado{font-size:.85rem;margin-top:4px;min-height:1.1em;font-weight:400;}
.ped-ac-lista{position:absolute;z-index:50;left:0;right:0;top:52px;max-height:55vh;overflow:auto;margin:0;padding:4px;list-style:none;background:var(--ped-superficie);border:1px solid var(--ped-divisor);border-radius:12px;box-shadow:0 10px 30px var(--ped-sombra);}
.ped-ac-lista li{padding:10px 12px;border-radius:8px;cursor:pointer;min-height:44px;font-weight:400;}
.ped-ac-lista li b{display:block;}
.ped-ac-lista li span{display:block;font-size:.85rem;color:var(--ped-atenuado);}
.ped-ac-lista li:hover,.ped-ac-lista li.activo{background:var(--ped-superficie-2);}
.ped-ac-libre{border-top:1px solid var(--ped-divisor);color:var(--ped-enlace);}
.ped-ac-mas{color:var(--ped-atenuado);font-size:.85rem;cursor:default!important;}
/* El embalaje se reparte solo: columnas de 148px como minimo. Con anchos
   fijos (era repeat(3,1fr) a partir de 600px) en el panel derecho de la
   pantalla partida cada casilla se quedaba en ~120px, y como la fila era
   "1fr 44px 64px 44px" a la etiqueta no le quedaba ancho: salia una letra por
   linea, en vertical. */
.ped-embalaje{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;margin-top:6px;font-weight:400;}
/* Etiqueta encima; debajo, menos - numero - mas. Sin partir palabras. */
.ped-cont{display:grid;grid-template-columns:44px minmax(48px,1fr) 44px;grid-template-areas:"eti eti eti" "menos num mas";align-items:center;gap:6px;}
.ped-cont>span{grid-area:eti;font-size:.85rem;color:var(--ped-atenuado);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;hyphens:none;overflow-wrap:normal;word-break:normal;}
.ped-cont .ped-mm[data-d="-1"]{grid-area:menos;}
.ped-cont .ped-mm[data-d="1"]{grid-area:mas;}
.ped-cont .ped-num{grid-area:num;}
.ped-mm{min-height:44px;border-radius:12px;border:1px solid var(--ped-borde-campo);background:var(--ped-superficie);color:var(--ped-texto);font-size:1.3rem;cursor:pointer;touch-action:manipulation;}
.ped-num{min-height:44px;width:100%;text-align:center;font-size:16px;border-radius:12px;border:1px solid var(--ped-borde-campo);background:var(--ped-superficie);color:var(--ped-texto);}
/* SIN position:sticky desde el PASO L2b. Pegada arriba tapaba la primera
   fila de contadores del embalaje al bajar por el formulario: un sticky
   no reserva hueco, el contenido pasa POR DEBAJO. Y no hacia falta: los
   campos que cambian el nombre (fecha, quien recoge, decorado) estan
   todos arriba, al lado de la caja; el embalaje y la fianza no lo tocan. */
.ped-previa{margin:6px 0 14px;padding:10px 12px;border-radius:12px;border:1px solid var(--ped-borde);background:var(--ped-carpeta-fondo);display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;}
.ped-previa-tit{grid-column:1/-1;font-size:.8rem;color:var(--ped-atenuado);text-transform:uppercase;letter-spacing:.04em;}
.ped-previa code{font-size:1rem;font-weight:600;min-width:0;}
.ped-previa-nota{grid-column:1/-1;font-size:.85rem;color:var(--ped-atenuado);}
.ped-previa-nota.mal{color:var(--ped-peligro);font-weight:600;}
/* EL NOMBRE YA EXISTE. Va DENTRO del recuadro del nombre y no junto al
   boton de guardar: es ahi donde se esta mirando cuando pasa, y es ahi
   donde se arregla (poniendo un decorado). Rojo y en negrita porque no
   es una sugerencia: con ese nombre no se puede guardar. */
.ped-previa-choque{grid-column:1/-1;margin-top:4px;font-size:.9rem;font-weight:600;
    color:var(--ped-peligro);}
/* BARRA DE GUARDAR (PASO J7): una sola regla para TODOS los formularios
   (pedido, entrega y carpeta de local). Se pega al contenedor que tenga el
   scroll: en escritorio es el panel derecho, en movil la pagina. El hueco de
   abajo lo pone la propia barra con padding, no con margin: un margin se
   colapsa con el del elemento siguiente y el boton acaba a ras del borde.
   env(safe-area-inset-bottom) es para el movil, donde la barra de gestos se
   comia el boton.
   El degradado NO puede dar por hecho --ped-fondo: la barra vive dentro del
   contenedor que tenga el scroll, y ese puede tener otro fondo. Cada
   contenedor declara el suyo en --barra-fondo; --ped-fondo es solo el valor
   por defecto. */
.ped-barra-guardar{position:sticky;bottom:0;z-index:20;display:flex;gap:8px;
    padding:10px 0 calc(16px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to top,var(--barra-fondo,var(--ped-fondo)) 75%,transparent);}
.ped-barra-guardar .ped-btn{flex:1;}
/* La barra de la FICHA (+ Anadir entrega). Misma mecanica que la de
   guardar: sticky abajo y el hueco lo pone su propio padding, asi que no
   tapa el historial ni la ultima entrega. */
.ped-barra-ficha{margin-top:6px;}
/* Solo en la pantalla partida: en la columna estrecha el boton es un "+". */
.ped-btn-mas{flex:0 0 auto;width:44px;min-width:44px;padding:0;font-size:1.5rem;line-height:1;
    background:var(--ped-boton);color:var(--ped-boton-texto);border-color:transparent;}
.ped-ayuda{display:block;margin:6px 0 0;font-size:.85rem;font-weight:400;color:var(--ped-tenue);line-height:1.35;}
/* Aviso de nombre parecido del encargado (PASO J1). Nunca impide guardar. */
.ped-parecido{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px;font-size:.88rem;font-weight:400;color:var(--ped-texto-2);}
.ped-parecido:empty{display:none;}
/* Regidor en la ficha, justo debajo de la productora (PASO J3). */
.ped-cab-regidor{margin:2px 0 0;font-size:.95rem;}
.ped-ok-banner{padding:10px 12px;border-radius:12px;background:var(--ped-ok-fondo);border:1px solid var(--ped-ok-texto);margin-bottom:8px;}
.ped-contexto{margin:-4px 0 8px;}
.ped-confirmar{margin-top:16px;padding:14px;border-radius:14px;border:2px solid var(--ped-aviso-texto);background:var(--ped-superficie);}
.ped-confirmar h3{margin:0 0 8px;font-size:1.1rem;}
.ped-parecido{margin:10px 0;}
.ped-btn-decision{background:var(--ped-boton);border-color:var(--ped-boton);color:var(--ped-boton-texto);font-weight:700;margin-top:8px;white-space:normal;}
.ped-decision{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.ped-historial{margin-top:18px;}
.ped-historial summary{cursor:pointer;min-height:44px;display:flex;align-items:center;}
.ped-hist{list-style:none;padding:0;margin:0;font-size:.9rem;}
.ped-hist li{padding:8px 0;border-bottom:1px solid var(--ped-divisor);word-break:break-word;}
.ped-cab-sub{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ped-atenuado);margin:12px 0 6px;}
.ped-equipo{list-style:none;margin:6px 0 10px;padding:0;display:flex;flex-direction:column;gap:8px;font-weight:400;}
.ped-persona{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid var(--ped-borde);background:var(--ped-superficie);}
.ped-persona.principal{border-color:var(--ped-acento);}
.ped-avatar{flex:0 0 40px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;background:var(--ped-superficie-2);border:1px solid var(--ped-borde);}
.ped-persona.principal .ped-avatar{background:var(--ped-boton);border-color:var(--ped-boton);color:var(--ped-boton-texto);}
.ped-persona-datos{flex:1;min-width:0;}
.ped-persona-nombre{font-weight:600;}
.ped-persona-linea{font-size:.92rem;margin-top:2px;word-break:break-word;}
.ped-principal{display:inline-flex;align-items:center;gap:3px;font-size:.78rem;font-weight:700;color:var(--ped-acento);vertical-align:middle;}
.ped-contacto{display:inline-block;padding:4px 0;color:var(--ped-enlace);text-decoration:none;}
.ped-persona-botones{display:flex;gap:8px;flex:0 0 auto;}
.ped-redondo{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;border-radius:50%;border:1px solid var(--ped-enlace);color:var(--ped-enlace);background:transparent;text-decoration:none;touch-action:manipulation;}
.ped-redondo:active{background:var(--ped-enlace);color:var(--ped-superficie);}
button.ped-redondo{cursor:pointer;padding:0;font:inherit;}
.ped-estrella{border-color:var(--ped-borde);color:var(--ped-atenuado);}
.ped-capa{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10001;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.55);}
.ped-dialogo{width:100%;max-width:420px;padding:18px 16px 14px;border-radius:14px;background:var(--ped-superficie);color:var(--ped-texto);border:1px solid var(--ped-divisor);box-shadow:0 10px 30px var(--ped-sombra);}
.ped-dialogo h3{margin:0 0 8px;font-size:1.1rem;overflow-wrap:anywhere;}
.ped-dialogo p{margin:0 0 16px;font-size:.97rem;line-height:1.4;white-space:pre-line;}
.ped-dialogo-botones{display:flex;gap:8px;}
.ped-dialogo-botones .ped-btn{flex:1;min-height:48px;}
.ped-recoge{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0;font-size:.97rem;}
.ped-eq-sub{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ped-atenuado);font-weight:600;margin:4px 2px 0;}
.ped-eq-hacer{padding:6px 0;min-height:40px;}
.ped-eq-quitar{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:1px solid var(--ped-borde);background:transparent;color:var(--ped-peligro);font-size:1rem;cursor:pointer;touch-action:manipulation;}
.ped-eq-aviso{color:var(--ped-peligro);font-weight:600;font-size:.9rem;}
.ped-eq-aviso:empty{display:none;}
.ped-eq-anadir{margin-top:10px;}
/* GRUPOS POR DIA y fieldsets del formulario (consolidado en el PASO J8).
   Estaba declarado TRES veces: aqui, en @media >=600 como grid de dos
   columnas y en @media >=1024 con una sola columna. La cuarta, al final del
   fichero, ganaba siempre por orden y las dejaba muertas... salvo su
   align-items:start, que SI vale en flex y hacia que cada tarjeta tomara el
   ancho de su contenido: por eso una entrega de 4 locales salia mas ancha que
   una de 2. Una sola declaracion, y el ancho lo manda el contenedor. */
.ped-grupo{display:flex;flex-direction:column;align-items:stretch;gap:12px;
    border:0;padding:0;margin:0 0 22px;min-width:0;}
.ped-grupo>*{min-width:0;max-width:100%;}
.ped-leyenda{font-weight:600;font-size:.95rem;padding:0;margin-bottom:2px;}
.ped-radio{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 12px;margin-top:6px;border-radius:12px;border:1px solid var(--ped-borde-campo);background:var(--ped-superficie);cursor:pointer;font-weight:400;}
.ped-radio input{width:22px;height:22px;flex:0 0 22px;margin:0;accent-color:var(--ped-acento);}
.ped-radio:has(input:checked){border:1.5px solid var(--ped-texto);background:var(--ped-seleccion-fondo);padding:7.5px 11.5px;}
.ped-radio-cuerpo{flex:1;min-width:0;}
.ped-radio-cuerpo>.ped-sec{display:block;}
.ped-radio-nota{font-size:.8rem;color:var(--ped-aviso-texto);font-weight:600;}
.ped-radio-otra .ped-radio-cuerpo{color:var(--ped-enlace);font-weight:600;}
.ped-otra{margin-top:8px;}
mark.ped-resalta{background:var(--ped-aviso-fondo);color:inherit;border-radius:4px;padding:0 2px;box-shadow:0 0 0 1px var(--ped-aviso-texto);}
/* CAMPO DE FECHA Y HORA (repasado en el PASO J5)
   El problema: el input nativo iba SIEMPRE tapado por una capa transparente y
   lo que se leia era un <span> aparte, que se refresca en 'input'/'change'. Con
   teclado el span iba un paso por detras del caret, y como no tenia numeros de
   ancho fijo, el texto ademas se movia al pasar de 09:00 a 17:30. De ahi la
   sensacion de que los numeros bailan.
   Ahora: con RATON se ve el input nativo, limpio y escribible; la capa
   transparente y el showPicker() solo con el dedo (@media pointer:coarse, la
   misma condicion que mira tactil() en pedidos.js). */
.ped-fh{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;margin-top:6px;padding:10px 12px;border-radius:12px;border:1px solid var(--ped-borde-campo);background:var(--ped-superficie);color:var(--ped-texto);font-size:16px;font-weight:400;}
.ped-fh.vacio{border-style:dashed;}
.ped-fh.vacio .ped-fh-texto{color:var(--ped-enlace);font-weight:600;}
.ped-fh:focus-within{outline:2px solid var(--ped-enlace);outline-offset:2px;}
.ped-fh-icono{display:flex;flex:0 0 auto;color:var(--ped-atenuado);}
/* Los numeros, de ancho fijo: 1 y 7 ocupan lo mismo y nada se desplaza. */
.ped-fh-texto,.ped-fh-nativo{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
/* CASO BASE: el input nativo, visible y escribible; el <span> de texto,
   escondido. Asi, un navegador que no entienda 'pointer' (no aplicaria ni
   coarse ni fine) se queda con el campo nativo, que funciona siempre, en vez
   de ensenar la hora dos veces. */
.ped-fh-texto{display:none;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ped-fh-nativo{flex:1;min-width:0;width:100%;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-size:16px;}
.ped-fh-nativo:focus{outline:none;}
.ped-fh-nativo::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6;}
.ped-fh-nativo::-webkit-calendar-picker-indicator:hover{opacity:1;}
@media (pointer:coarse){
    /* Solo con el dedo: el input se tapa entero y manda el texto de al lado,
       para que tocar cualquier parte del campo abra el selector del sistema.
       Es la misma condicion que mira tactil() en pedidos.js. */
    .ped-fh{cursor:pointer;}
    .ped-fh-texto{display:block;}
    .ped-fh-nativo{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;padding:0;opacity:0;z-index:1;cursor:pointer;-webkit-appearance:none;appearance:none;}
    .ped-fh-nativo::-webkit-calendar-picker-indicator{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;}
}
.ped-fh-borrar{position:relative;z-index:2;flex:0 0 40px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--ped-atenuado);font-size:1rem;cursor:pointer;touch-action:manipulation;}
.ped-toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,150%);max-width:min(92vw,520px);z-index:10000;padding:12px 16px;border-radius:12px;background:var(--ped-superficie);color:var(--ped-texto);border:1px solid var(--ped-divisor);box-shadow:0 10px 30px var(--ped-sombra);transition:transform .25s ease;font-size:.95rem;}
.ped-toast.visible{transform:translate(-50%,0);}
.ped-toast.ok{border-color:var(--ped-ok-texto);}
.ped-toast.error{border-color:var(--ped-peligro);}
/* ====================== TABLET VERTICAL (600-1023px) ===================== */
@media (min-width:600px){
    .ped-wrap{padding:16px 20px 40px;max-width:720px;}
    /* El boton fijo se alinea con el contenido, no con la pantalla. */
    .ped-barra-nueva .ped-btn{max-width:720px;}
    /* Las tarjetas se reparten DENTRO de cada dia; los dias siguen uno debajo de otro. */
    .ped-locales-sel{grid-template-columns:repeat(5,1fr);}
    .ped-cab-acciones{flex-direction:row;align-items:center;}
    .ped-btn-accion{flex:0 1 320px;}
    .ped-decision{flex-direction:row;}
    .ped-decision .ped-btn{flex:1;}
    /* Formulario de entrega a dos columnas: los bloques anchos siguen enteros. */
    #pedFormEntrega{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start;}
    #pedFormEntrega>.ped-cabecera,#pedFormEntrega>.ped-titulo,#pedFormEntrega>.ped-contexto,
    #pedFormEntrega>.ped-previa,#pedFormEntrega>.ped-ok-banner,#pedFormEntrega>.ped-error,
    #pedFormEntrega>.ped-barra-guardar,#pedFormEntrega>.ped-lbl:has(.ped-embalaje),
    #pedFormEntrega>label.ped-lbl:has(textarea){grid-column:1/-1;}
}

/* ====================== ESCRITORIO (>=1024px): PANTALLA PARTIDA ========== */
@media (min-width:1024px){
    /* Dos columnas con scroll propio: la lista no se mueve al leer la ficha. */
    /* El alto lo mide pedidos.js desde la posicion real del contenedor
       (--ped-alto-px), y donde haya dvh se usa --ped-alto, que sigue a la
       barra del navegador en el movil. Nada de restar una cabecera fija. */
    .ped-split{display:grid;grid-template-columns:420px minmax(0,1fr);gap:0;
        height:var(--ped-alto-px,70vh);min-height:420px;overflow:hidden;}
    /* --barra-fondo: el fondo real de este panel, para el degradado de la
       barra de guardar. Si algun dia el panel cambia de fondo, se cambia aqui
       y la barra le sigue sola. */
    .ped-panel-lista{overflow-y:auto;-webkit-overflow-scrolling:touch;border-right:1px solid var(--ped-divisor);background:var(--ped-fondo);--barra-fondo:var(--ped-fondo);}
    .ped-panel-detalle{overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--ped-fondo);--barra-fondo:var(--ped-fondo);}
    @supports (height:100dvh){ .ped-split{height:var(--ped-alto,var(--ped-alto-px,70vh));} }
    /* La pagina no puede tener su propia barra ademas de la de los paneles. */
    body[data-pedidos="1"]{overflow-y:hidden;}
    .ped-panel-lista .ped-wrap,.ped-panel-detalle .ped-wrap{max-width:none;padding:16px;}
    .ped-panel-detalle .ped-wrap{max-width:820px;}
    /* En la izquierda no hay boton fijo abajo: va junto al titulo. */
    .ped-lista-cabecera{display:flex;align-items:center;justify-content:space-between;gap:10px;}
    .ped-lista-cabecera .ped-titulo-grande{margin:0;font-size:1.5rem;}
    /* Lista compacta y en UNA columna: el ancho es poco. */
    .ped-panel-lista .ped-tarjeta{padding:10px 12px;}
    .ped-panel-lista .ped-t-ref{font-size:1rem;}
    .ped-tarjeta.seleccionada{border:1.5px solid var(--ped-texto);background:var(--ped-seleccion-fondo);}
    /* Panel derecho vacio: el aviso y, debajo, el boton con todas las letras.
       En la columna izquierda solo cabe el "+" (.ped-btn-mas).
       PASO J6: el boton deja de ser negro a ancho completo. Compacto y con
       borde: presente, pero sin gritar. Y el bloque queda preparado para la
       imagen de fondo que ira en ::before. */
    .ped-elige{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
        height:100%;padding:40px;color:var(--ped-tenue);font-size:1.05rem;text-align:center;overflow:hidden;}
    /* LA IMAGEN NO EXISTE TODAVIA, y pedirla costaba un 404 en la consola
       cada vez que se pinta "Elige un pedido" (22-09-2026). No se ve nada
       distinto -- un fondo que no carga no deja hueco -- pero ensucia la
       consola y despista cuando se busca un fallo de verdad. El bloque se
       queda preparado: el dia que se suba assets/img/fondo-pedidos.jpg, se
       descomenta la linea del background y ya esta. */
    .ped-elige::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
        /* background:url("../img/fondo-pedidos.jpg") center/cover no-repeat; */
        opacity:.10;}
    :root[data-tema="oscuro"] .ped-elige::before{opacity:.06;}
    /* Todos los hijos por encima del velo, no solo los de hoy: un
       pseudo-elemento posicionado se pinta despues del contenido en linea. */
    .ped-elige>*{position:relative;z-index:1;}
    .ped-elige p{margin:0;}
    .ped-elige .ped-elige-sub{font-size:.92rem;color:var(--ped-tenue);}
    .ped-elige .ped-btn{flex:0 0 auto;width:auto;min-width:200px;max-width:240px;min-height:48px;
        margin-top:8px;border-radius:12px;border:1.5px solid var(--ped-texto);
        background:var(--ped-superficie);color:var(--ped-texto);font-size:1rem;font-weight:600;}
    .ped-elige .ped-btn:hover{background:var(--ped-superficie-2);}
    /* La previa y la barra de guardar se pegan DENTRO del panel, que es quien
       tiene el scroll.
       ANTES aqui habia padding-bottom:0, con la idea de que el hueco de abajo
       lo pusiera la barra de guardar. Vale para los formularios, que la
       llevan; NO vale para la ficha, que acaba en "Archivar pedido" y se
       quedaba pegado al borde de abajo sin un pixel (22-09-2026). Y aun en
       los formularios, con cero el boton "Crear pedido" queda a ras del
       canto. 24px: un respiro, y sigue siendo menos que los 90px del movil,
       que ahi hacen falta para el boton fijo de "+ Nuevo pedido". */
    .ped-panel-detalle .ped-wrap{padding-bottom:24px;}
    /* Entregas que comparten carpeta: el nombre una vez, una fila por local. */
    .ped-comp-cab{margin-bottom:6px;}
    .ped-comp-filas{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
    .ped-comp-fila{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;background:var(--ped-superficie-2);}
    .ped-comp-emb{flex:1;min-width:0;}
}

@media (min-width:480px){.ped-fila2{grid-template-columns:1fr 1fr;}
}
@media (max-width:360px){.ped-embalaje{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));}
/* Los botones - / + NO bajan de 44px: se usan con el dedo (PASO L4).
   Aqui decian 40px, que es justo donde mas falta hacen. */
.ped-cont{grid-template-columns:44px minmax(40px,1fr) 44px;}
}

/* ============================== LISTA (PASO D2) ========================== */
/* Sitio para la barra fija de "+ Nuevo pedido", que si no tapa la ultima tarjeta. */
.ped-wrap-lista{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));}
.ped-titulo-grande{font-size:1.9rem;margin:6px 0 12px;}
.ped-barra-nueva{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    background:var(--ped-fondo);border-top:1px solid var(--ped-divisor);}
.ped-barra-nueva .ped-btn{max-width:1100px;margin:0 auto;display:block;}
/* Abiertos / Cerrados */
.ped-pestanas{display:flex;gap:6px;padding:4px;border-radius:12px;background:var(--ped-superficie-2);}
.ped-pestana{flex:1;min-height:44px;white-space:nowrap;border:0;border-radius:10px;background:transparent;color:var(--ped-atenuado);
    font:inherit;font-weight:600;cursor:pointer;touch-action:manipulation;}
.ped-pestana.activo{background:var(--ped-seleccion-fondo);color:var(--ped-texto);box-shadow:0 1px 2px var(--ped-sombra);}
/* Grupos por dia (la declaracion de .ped-grupo esta arriba, unificada) */
.ped-grupo-tit{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:1rem;margin:0 2px;}
.ped-grupo-n{font-family:var(--ped-fuente);font-weight:500;font-size:.85rem;color:var(--ped-tenue);text-transform:none;}
.ped-badge-hoy{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--ped-acento);color:var(--ped-acento-texto);
    font-size:.8rem;font-weight:800;letter-spacing:.04em;}
.ped-t-fecha{font-size:.88rem;color:var(--ped-tenue);margin-top:2px;}
/* Chips de tipo, debajo de Abiertos/Cerrados. */
.ped-chips-tipo{display:flex;gap:6px;flex-wrap:wrap;}
.ped-chip-tipo{min-height:44px;padding:8px 14px;border-radius:999px;white-space:nowrap;
    border:1px solid var(--ped-borde);background:var(--ped-superficie);color:var(--ped-texto-2);
    font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;touch-action:manipulation;}
.ped-chip-tipo.activo{border:1.5px solid var(--ped-texto);background:var(--ped-seleccion-fondo);color:var(--ped-texto);}
/* ---- Tres niveles: pedido, entrega y local (PASO H) ---- */
/* Entre entregas separa el gap del .ped-grupo (12px). Con el margin ademas
   eran 24px entre dos entregas del mismo dia y 12px con el titulo: se quita. */
.ped-entrega-bloque{padding:12px 14px;border-radius:14px;border:1px solid var(--ped-borde);
    background:var(--ped-tarjeta);box-shadow:var(--ped-sombra-caja);
    background:var(--ped-superficie);min-width:0;}
.ped-locales-lista{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
/* TARJETA DENTRO DE TARJETA (PASO L4): la carpeta de local vive dentro de
   la caja de entrega. Con el fondo del papel se confundia con su madre
   (1,30:1 en claro, 1,18 en oscuro); ahora lleva la superficie intermedia
   y borde propio. */
/* .ped-local y .ped-dos-col se retiran en el PASO L6: la tarjeta de carpeta
   pasa a ser .ped-carpeta-local (pestana + cuerpo) y ya no las pinta nadie. La franja
   lateral que vivia aqui ademas salia GRIS en los cinco locales, porque el
   data-local estaba en un hijo y las variables de CSS no se heredan hacia
   arriba. Comprobado con el resolutor: 4px solid #665F51. */
.ped-btn-local{width:100%;margin-top:10px;}
.ped-local-carpeta{margin-top:8px;}
.ped-local-carpeta code{font-family:var(--ped-fuente-mono);font-size:.85rem;}
.ped-hist-donde{font-size:.72rem;font-weight:700;}
.ped-deco-campo{margin-bottom:6px;}

/* ---- Avisos de entregas nuevas (PASO G2) ---- */
.ped-chip.nuevas{background:var(--ped-acento);border:1px solid var(--ped-acento);color:var(--ped-acento-texto);font-weight:700;}
/* El aviso de la pestaña cuelga del boton de project-management-v8.js. */
.ped-aviso-pestana{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:6px;
    padding:0 6px;border-radius:999px;background:var(--ped-acento);color:var(--ped-acento-texto);
    font-family:var(--ped-fuente);font-size:.75rem;font-weight:800;line-height:1;vertical-align:middle;}

/* ---- Altas para el Excel (PASO G1) ---- */
.ped-btn-altas{width:100%;margin:8px 0 4px;display:flex;align-items:center;justify-content:center;gap:8px;}
.ped-altas-acciones{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0;}
.ped-alta{margin-bottom:10px;}
.ped-alta-botones{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.ped-alta-botones .ped-btn{flex:1 1 auto;min-width:140px;}
.ped-dialogo-alta{max-width:520px;max-height:86vh;overflow-y:auto;}
.ped-dialogo-alta .ped-lbl{margin-bottom:10px;}
.ped-mas-datos{margin:4px 0 12px;}
.ped-mas-datos summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--ped-enlace);font-weight:600;}
.ped-ac-alta b::after{content:' · alta';font-size:.75rem;font-weight:600;color:var(--ped-aviso-texto);}

/* Fianza: SI y NO son las dos normales y van neutras. Lo que se avisa es lo
   que nadie ha dicho todavia. */
.ped-fianza{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.85rem;font-weight:600;
    background:var(--ped-superficie-2);border:1px solid var(--ped-borde);color:var(--ped-texto-2);}
.ped-chip.sin-indicar,.ped-fianza.indicar{background:var(--ped-aviso-fondo);border:1px solid var(--ped-aviso-texto);
    color:var(--ped-aviso-texto);font-weight:700;}
.ped-fianza-sel{grid-template-columns:repeat(2,1fr);}
.ped-error-campo{font-size:.9rem;margin:6px 0 0;min-height:0;}
.ped-error-campo:empty{display:none;}
.ped-t-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
/* Chip de local: el color lo llevan el punto y el texto; el fondo es discreto. */
.ped-chip-local{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
    font-size:.82rem;font-weight:600;white-space:nowrap;
    color:var(--ped-local-texto,var(--ped-texto-2));background:var(--ped-local-chip,var(--ped-superficie-2));}
.ped-punto{width:8px;height:8px;border-radius:50%;background:var(--ped-local-punto,var(--ped-tenue));flex:0 0 8px;}
[data-local="molins"]{--ped-local-punto:var(--ped-molins-punto);--ped-local-texto:var(--ped-molins-texto);--ped-local-chip:var(--ped-molins-chip);}
[data-local="montjuic22"]{--ped-local-punto:var(--ped-montjuic22-punto);--ped-local-texto:var(--ped-montjuic22-texto);--ped-local-chip:var(--ped-montjuic22-chip);}
[data-local="vila21"]{--ped-local-punto:var(--ped-vila21-punto);--ped-local-texto:var(--ped-vila21-texto);--ped-local-chip:var(--ped-vila21-chip);}
[data-local="oficina"]{--ped-local-punto:var(--ped-oficina-punto);--ped-local-texto:var(--ped-oficina-texto);--ped-local-chip:var(--ped-oficina-chip);}
[data-local="expo91"]{--ped-local-punto:var(--ped-expo91-punto);--ped-local-texto:var(--ped-expo91-texto);--ped-local-chip:var(--ped-expo91-chip);}

/* ============================== FICHA (PASO D2) ========================== */
.ped-cab-sup{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.ped-pastilla{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--ped-superficie-2);
    border:1px solid var(--ped-borde);font-size:.9rem;}
.ped-cab-ref{font-size:1.6rem;line-height:1.2;margin:2px 0 4px;word-break:break-word;}
.ped-cab-productora{margin:0 0 12px;font-size:1rem;color:var(--ped-texto-2);}
.ped-chip.abierto{background:var(--ped-ok-fondo);border-color:var(--ped-ok-texto);color:var(--ped-ok-texto);}
/* Tres cifras: entregas, locales, atrezzistas. */
/* CUATRO cuadros desde el PASO L2: entregas, locales, carpetas y
   atrezzistas. auto-fit y no repeat(4,1fr) porque en movil cuatro
   columnas dejan la cifra sin sitio: asi caen dos y dos. */
.ped-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px;margin:0 0 14px;}
/* Aviso de "ya hay otra carpeta/entrega asi": no es un error todavia,
   es lo que hay que saber ANTES de escribir el decorado. */
.ped-aviso-deco{margin:0 0 6px;padding:8px 10px;border-radius:10px;font-size:.85rem;
    background:var(--ped-aviso-fondo,rgba(232,80,28,.12));color:var(--ped-texto);
    border:1px solid var(--ped-borde);}
/* .informativo = otra persona recoge, asi que el nombre de carpeta ya es
   distinto: se cuenta, no se avisa. Por eso pierde el fondo naranja. */
.ped-aviso-deco.informativo{background:var(--ped-superficie-2);}
.ped-cifra{padding:10px 8px;border-radius:14px;background:var(--ped-superficie);border:1px solid var(--ped-borde);text-align:center;}
.ped-cifra b{display:block;font-size:1.5rem;line-height:1.1;}
.ped-cifra span{font-size:.78rem;color:var(--ped-tenue);text-transform:uppercase;letter-spacing:.04em;}
/* Equipo: UNA tarjeta, una fila por persona, separadas por una linea fina. */
.ped-equipo{background:var(--ped-superficie);border:1px solid var(--ped-borde);border-radius:14px;
    padding:0;margin:6px 0 14px;gap:0;}
.ped-persona{border:0;border-radius:0;background:transparent;padding:12px;align-items:flex-start;}
.ped-persona + .ped-persona{border-top:1px solid var(--ped-divisor);}
.ped-persona.principal{border:0;}
.ped-persona-nombre{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ped-estrella{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;
    margin:-10px 0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ped-tenue);cursor:pointer;touch-action:manipulation;}
.ped-estrella:hover{color:var(--ped-acento);}
.ped-tel{white-space:nowrap;}
.ped-mail{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ped-persona-botones{align-self:center;}
/* Entregas */
.ped-e-sup{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.ped-e-editar{align-self:auto;padding:8px 6px;}
.ped-campo{margin:8px 0 0;min-width:0;}
.ped-etiqueta{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ped-tenue);}
.ped-valor{font-size:.97rem;word-break:break-word;}

/* ===================================================================
   CONTRASTE DE PEDIDOS (PASO L4, 22-09-2026)

   --ped-borde era #D6CFC1 en claro y #3A352C en oscuro: el mismo beis, o el
   mismo marron, que las superficies. Medido con el resolutor de cascada,
   21 de 35 piezas de Pedidos estaban POR DEBAJO DE 3:1 -- tarjetas, cajas de
   entrega, el recuadro del nombre y casi todos los botones secundarios. Con
   #8C8574 / #736B5C quedan en 3,09-3,49.

   Lo que va aqui abajo es lo que el token no arregla solo: piezas que no
   tenian borde ninguno, y dos que van sobre un fondo mas oscuro que el papel
   y necesitan un borde mas marcado.
   =================================================================== */
/* No tenian borde: se veian por su relleno, y su relleno no llega a 3:1. */
.ped-chip-local{border:1px solid var(--ped-borde);}
.ped-carpeta code,.ped-previa code{border:1px solid var(--ped-borde);}
/* El grupo Abiertos/Cerrados no se veia contra el papel (1,10:1), y en OSCURO
   la pestana ACTIVA era exactamente del color del grupo (1,00:1): no se sabia
   cual estaba puesta. Eso no es estetica.
   La INACTIVA se queda sin borde a proposito: en un control segmentado es el
   hueco, y cuatro marcos anidados no se leen. */
.ped-pestanas{border:1px solid var(--ped-borde);}
.ped-pestana.activo{border:1px solid var(--ped-tenue);}
/* El "Copiar" de la vista previa va sobre --ped-carpeta-fondo, mas oscuro que
   el papel: con el borde normal se queda en 2,71. */
.ped-previa .ped-btn{border-color:var(--ped-tenue);}

/* ===================================================================
   EMBALAJE COMPACTO EN MOVIL (PASO L4)

   Son ONCE contadores y ocupaban 446px de alto a 400px de ancho: media
   pantalla de movil para llegar a la fianza. Los botones - / + abarcan ahora
   las DOS filas, asi que el contador entero mide lo que mide el boton en vez
   de 66px. Queda en 304px: un tercio menos.

   NO se pierde ningun contador y los botones NO se hacen mas pequenos: 44px
   tambien por debajo de 360px, donde antes bajaban a 40 y no daban para el
   dedo. Lo que se estrecha es el hueco del numero.
   =================================================================== */
.ped-embalaje{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;}
.ped-cont{grid-template-areas:"menos eti mas" "menos num mas";column-gap:4px;row-gap:2px;}
.ped-cont>span{font-size:.8rem;line-height:1;}
.ped-cont .ped-mm{grid-row:1/3;}          /* el boton ocupa las dos filas */
.ped-cont .ped-num{min-height:28px;}      /* el objetivo del dedo son los botones */
@media (max-width:360px){
    .ped-embalaje{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
}

/* ===================================================================
   JERARQUIA (PASO L5, 22-09-2026)

   El L4 arreglo el CONTRASTE -- que un borde se vea -- pero no la jerarquia:
   pagina, caja de entrega, tarjeta de carpeta y botones secundarios
   compartian los mismos dos beiges y el mismo borde, asi que todo parecia el
   mismo rectangulo y "+ Anadir carpeta de local" no parecia pulsable.

   Ahora: pagina beige - caja BLANCA - tarjeta BLANCA con la franja de su
   local. Y TRES tipos de boton, ninguno con relleno beige (ese color es el de
   las tarjetas):
     principal   negro relleno          Guardar, Crear, + Anadir entrega
     secundario  tarjeta + borde tinta  Copiar, Altas, Ahora no, volver
     anadir aqui discontinuo + acento   + Anadir carpeta de local, + decorado

   OJO: el blanco sobre el papel da 1,19:1. Lo que separa la caja es el BORDE
   (3,09:1), no el color; la sombra es refuerzo, no el mecanismo.
   =================================================================== */
:root{ --ped-tarjeta:#FFFFFF; --ped-sombra-caja:0 1px 3px rgba(23,21,15,.10); }
:root[data-tema="oscuro"]{ --ped-tarjeta:#201D17; --ped-sombra-caja:0 1px 3px rgba(0,0,0,.45); }
/* "ANADIR AQUI". Es el UNICO discontinuo de Pedidos, para que signifique
   siempre lo mismo: aqui se anade algo. Por eso "Elegir hora" lo pierde. */
.ped-btn-anadir{border:1.5px dashed var(--ped-enlace);background:transparent;
    color:var(--ped-enlace);font-weight:600;width:100%;}
.ped-btn-anadir:hover{background:var(--ped-aviso-fondo);}
/* Los botones de local llevan el punto de su color, como los chips. */
.ped-op-local{display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.ped-op-local.sel .ped-punto{outline:1px solid var(--ped-boton-texto);}
/* El recuadro del nombre cuando aun no hay local: se dice que falta elegir. */
.ped-previa code.vacio{font-family:var(--ped-fuente);font-weight:400;color:var(--ped-atenuado);}

/* --- CABECERA DE ENTREGA EN MOVIL --- */
.ped-e-sup{flex-wrap:wrap;gap:6px;justify-content:flex-start;}
/* El boton de editar se va al final de la fila; los chips van seguidos. */
.ped-e-sup .ped-e-editar{margin-left:auto;}
.ped-e-sup .ped-chip,.ped-e-sup .ped-fianza{white-space:nowrap;}
/* RETIRADAS LAS DOS REGLAS DEL PASO L5 (22-09-2026):
     .ped-e-sup>*{flex:1 0 100%}  la clase .ped-e-sup la usan TRES sitios, no
         solo la cabecera de entrega: tambien la de cada carpeta de local. Por
         eso el chip ocupaba la fila entera y "Editar" salia centrado y solo.
     .ped-carpeta{flex-direction:column}  con el contenedor en COLUMNA, el
         flex:1 del <code> deja de repartir ancho y reparte ALTO: el recuadro
         del nombre se estiraba a varias veces lo que ocupa el texto.
   Ahora los chips van seguidos y bajan solos, y el nombre mide lo que mide. */
/* El nombre de carpeta SI puede partirse por donde sea: no tiene espacios
   utiles y si no, desborda. Es la excepcion, no la norma. */
.ped-carpeta code,.ped-previa code{overflow-wrap:anywhere;}

/* --- "+ ANADIR ENTREGA" FIJO EN MOVIL ---
   Era sticky dentro del panel, y en movil el panel es la pagina entera: en una
   ficha de quince entregas solo aparecia al llegar al final. 899px es el corte
   de la pantalla partida, asi que en escritorio no cambia nada. */
@media (max-width:899px){
    .ped-barra-ficha{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;
        padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
        background:var(--ped-fondo);border-top:1px solid var(--ped-borde);}
    .ped-barra-ficha .ped-btn{max-width:1100px;margin:0 auto;display:block;}
    /* Sitio para que la barra no tape la ultima carpeta ni el historial:
       44 del boton + 20 del padding + los 40 de respiro de siempre. */
    /* :not(.ped-wrap-lista) para no pisar el hueco de la LISTA, que ya tiene
       el suyo por la barra de "+ Nuevo pedido". Esto es solo la ficha. */
    #pedidos-tab .ped-wrap:not(.ped-wrap-lista){padding-bottom:calc(104px + env(safe-area-inset-bottom,0px));}
}

/* ===================================================================
   EMBALAJE "TOCA PARA SUMAR" (PASO L5)

   Once contadores con - / + ocupaban 564px de alto en un movil de 360, en UNA
   sola columna: .tab-content quita 2rem por lado, que es lo que no conte en el
   L4. Media pantalla para poner dos o tres cantidades.

   Ahora son fichas de 44px, tres por fila. Tocar una suma 1. La que tiene
   cantidad crece HACIA ABAJO hasta 70px para hacer sitio a su "-": se queda en
   su columna y en su orden, que es lo que importa cuando se toca varias veces
   seguidas. align-items:start, para que crezca ella y no toda la fila.
   =================================================================== */
.ped-emb-cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.ped-emb-resumen{font-weight:400;font-size:.85rem;color:var(--ped-atenuado);text-align:right;}
.ped-embalaje{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px;
    align-items:start;font-weight:400;}
@media (min-width:600px){ .ped-embalaje{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));} }
.ped-emb{display:block;min-height:44px;padding:6px 8px;border-radius:12px;
    border:1px solid var(--ped-borde);background:var(--ped-tarjeta);color:var(--ped-texto);
    font:inherit;font-size:.8rem;line-height:1.15;cursor:pointer;text-align:center;
    touch-action:manipulation;}
.ped-emb.con{background:var(--ped-boton);border-color:var(--ped-boton);
    color:var(--ped-boton-texto);font-weight:700;padding-bottom:0;}
.ped-emb-n{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ped-emb-c{display:block;font-size:1.05rem;font-weight:800;line-height:1.1;}
/* El "-" mide 44px de alto: es el objetivo del dedo. Con el, la ficha puesta
   queda en 70px (26 de nombre y numero + 44). */
.ped-emb-m{display:flex;align-items:center;justify-content:center;min-height:44px;
    margin:2px -8px 0;border-top:1px solid var(--ped-boton-texto);
    font-size:1.2rem;font-weight:700;cursor:pointer;}
.ped-emb-campo{display:block;width:100%;min-height:26px;padding:0 2px;text-align:center;
    font:inherit;font-size:1.05rem;font-weight:800;border:0;border-radius:6px;
    background:var(--ped-tarjeta);color:var(--ped-texto);}

/* ===================================================================
   LA CARPETA DE LOCAL TIENE FORMA DE CARPETA (PASO L6, 22-09-2026)

   Una pestana arriba a la izquierda con el chip del local, y debajo el cuerpo
   amarillo con la esquina de arriba a la izquierda RECTA, pegada a la pestana.
   Sustituye a la franja lateral del PASO L5, que ademas salia gris: el
   data-local estaba en un hijo y las variables de CSS no se heredan hacia
   arriba. Ahora va en el <article>.

   Contrastes medidos (resolutor, los dos temas):
     borde contra la caja de entrega   4,00 claro / 5,08 oscuro   (>= 3)
     texto sobre el cuerpo            16,90 / 13,43              (>= 4,5)
     ENCARGADO (atenuado)              6,15 / 6,30
     "Editar"                          5,44 / 7,11
   El cuerpo contra la caja da 1,08: lo que separa la carpeta es su BORDE, no
   el color, igual que pasa con la caja blanca sobre el papel.
   =================================================================== */
:root{ --ped-carpeta-local-cuerpo:#FFF6DA; --ped-carpeta-local-pestana:#FBE8AE; --ped-carpeta-local-borde:#9A7B2F; }
:root[data-tema="oscuro"]{ --ped-carpeta-local-cuerpo:#2A2416; --ped-carpeta-local-pestana:#3A3019; --ped-carpeta-local-borde:#A8894A; }
.ped-carpeta-local{margin-top:14px;}
.ped-carpeta-local + .ped-carpeta-local{margin-top:16px;}
.ped-carpeta-local-pestana{display:inline-flex;align-items:center;gap:6px;
    background:var(--ped-carpeta-local-pestana);border:1.5px solid var(--ped-carpeta-local-borde);border-bottom:none;
    border-radius:9px 14px 0 0;padding:5px 16px 5px 10px;font-size:.82rem;font-weight:700;
    color:var(--ped-texto);position:relative;top:1.5px;z-index:1;max-width:100%;}
/* El punto coge el color de SU local: el data-local esta en el <article>, asi
   que llega aqui por herencia. Es el mismo token que el chip de la lista. */
/* El aro no es adorno: el ambar de Molins sobre el amarillo de la pestana se
   queda en 2,72:1. Con un aro de 1px del borde de la carpeta (3,29 en claro,
   3,92 en oscuro) se ve cualquiera de los cinco sobre cualquier fondo, y no
   hay que retocar ningun color de local. box-shadow y no border, para que el
   punto no cambie de tamano. */
.ped-carpeta-local-pestana .ped-punto{width:9px;height:9px;flex:0 0 9px;
    background:var(--ped-local-punto,var(--ped-tenue));
    box-shadow:0 0 0 1px var(--ped-carpeta-local-borde);}
.ped-carpeta-local-cuerpo{background:var(--ped-carpeta-local-cuerpo);border:1.5px solid var(--ped-carpeta-local-borde);
    border-radius:0 12px 12px 12px;padding:10px 12px;}
/* Encargado y Embalaje: dos columnas en movil, tres cuando hay sitio. */
.ped-carpeta-local-datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;}
@media (min-width:700px){ .ped-carpeta-local-datos{grid-template-columns:repeat(3,minmax(0,1fr));} }
/* "Carpeta: ..." a la izquierda y "Editar" a la derecha, en la misma fila. */
.ped-carpeta-local-pie{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;}
.ped-carpeta-local-pie .ped-local-carpeta{flex:1 1 auto;min-width:0;}
.ped-carpeta-local-pie .ped-e-editar{margin-left:auto;align-self:center;}
/* El nombre de la carpeta puede partirse por donde sea: es una referencia sin
   espacios utiles, y si no, desborda. */
.ped-carpeta-local-pie code{overflow-wrap:anywhere;}

/* ===================================================================
   LA LISTA, POR FECHA DE CREACION (PASO L7, 22-09-2026)
   Dos niveles: el MES en grande y debajo cada dia. Antes se agrupaba por el
   dia de la proxima entrega y la cabecera contaba solo las entregas de ESE
   dia, asi que un pedido con cinco salia como "1 pedido · 2 entregas".
   =================================================================== */
.ped-mes + .ped-mes{margin-top:22px;}
.ped-mes-tit{margin:14px 0 4px;font-family:var(--ped-fuente-titulo);font-stretch:80%;
    font-weight:800;font-size:1.25rem;letter-spacing:.02em;color:var(--ped-texto);
    border-bottom:1px solid var(--ped-borde);padding-bottom:4px;}
/* El resumen de entregas de cada tarjeta ("5 entregas · proxima jue 01-10"). */
.ped-t-fecha{font-size:.85rem;color:var(--ped-atenuado);margin-top:2px;}
