/* =====================================================================
   App Pollería - Estilos
   Archivo:   public/css/app.css
   Autor:     Antonio Jesús Pérez Llorca · info@iceonline.es · www.iceonline.es
   Última modificación: 05/11/2026 19:50

   Pensado para iPad/tablet en horizontal en el mostrador: botones
   grandes, textos a la izquierda, tarjetas iguales y alineadas.
   ===================================================================== */

/* ---------- BLOQUE 1: Colores y base ---------- */
:root {
    --fondo: #f6f3ee;
    --tarjeta: #ffffff;
    --texto: #1f2328;
    --suave: #6b6f76;
    --borde: #e3ddd3;
    --principal: #c2410c;
    --principal-oscuro: #9a3412;
    --oscuro: #2b2118;
    --ok: #15803d;
    --error: #b91c1c;
    --aviso: #a16207;
    /* Contadores */
    --naranja-fondo: #ffedd5;  --naranja-texto: #7c2d12;  --naranja-borde: #fdba74;
    --verde-fondo:   #dcfce7;  --verde-texto:   #14532d;  --verde-borde:   #86efac;
    --radio: 12px;
    --sombra: 0 1px 3px rgba(0, 0, 0, .08);
}

* { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--fondo);
    color: var(--texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.45;
}
body.sin-sesion { height: auto; min-height: 100vh; }
html:has(body.con-sesion), body.con-sesion { overflow: hidden; }   /* Como una app: solo se desplaza el centro */

h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 .8rem; display: flex; align-items: center; gap: .4rem; }
a  { color: var(--principal); }
code { background: #f1ece4; padding: .1rem .35rem; border-radius: 4px; }
[hidden] { display: none !important; }

.suave   { color: var(--suave); }
.pequeno { font-size: .85rem; font-weight: 400; }
.ico { width: 1.25em; height: 1.25em; flex-shrink: 0; vertical-align: -0.25em; }

/* ---------- BLOQUE 2: Cabecera de la pantalla principal (contadores) ---------- */
.cabecera-panel {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) minmax(0, 1fr);
    gap: .75rem;
    padding: .75rem;
    background: var(--oscuro);
}
.contador {
    border-radius: var(--radio);
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-height: 100%;
}
.contador-hora { background: #3d3026; color: #fff; justify-content: center; align-items: center; text-align: center; }
.contador-hora .hora  { font-size: 3rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.contador-hora .fecha { font-size: 1.05rem; opacity: .9; }
.contador-hora .marca-mini { font-size: .8rem; opacity: .65; margin-top: .4rem; }

.contador-ventana    { background: var(--naranja-fondo); color: var(--naranja-texto); border: 2px solid var(--naranja-borde); }
.contador-pendientes { background: var(--verde-fondo);   color: var(--verde-texto);   border: 2px solid var(--verde-borde); }

.contador-titulo { display: flex; justify-content: space-between; gap: .5rem; font-weight: 700; font-size: 1rem; }
.contador-titulo .suave { color: inherit; opacity: .75; font-weight: 400; font-size: .85rem; }
.contador-numero { font-size: 1rem; }
.contador-numero strong { font-size: 2.6rem; line-height: 1.05; font-variant-numeric: tabular-nums; }

.desglose {
    list-style: none;
    margin: .3rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
}
.desglose li {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: rgba(255, 255, 255, .75);
    border-left: 5px solid var(--color);
    border-radius: 0;
    padding: .35rem .55rem;
    color: var(--texto);
    min-height: 42px;
}
.desglose .ico { width: 1.5em; height: 1.5em; }
.desglose .nombre { flex: 1; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desglose strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.sin-favoritos { margin: .3rem 0 0; font-size: .85rem; opacity: .8; }

/* Cabecera simple del resto de páginas */
.cabecera-simple {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem 1rem;
    background: var(--oscuro);
    color: #fff;
}
.cabecera-simple .marca { font-weight: 700; }
.cabecera-simple .titulo-pagina { flex: 1; opacity: .75; }
.cabecera-simple .reloj-mini { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- BLOQUE 3: Contenido ---------- */
.contenido {
    flex: 1;
    min-height: 0;              /* Solo se desplaza el centro: cabecera y menú siempre a la vista */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding: 1.25rem 1rem 1.5rem;
}
.contenido > * { max-width: 1200px; margin-left: auto; margin-right: auto; }

.tarjeta {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.25rem;
}
.tarjeta-estrecha { max-width: 440px; margin: 2rem auto; }

.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    align-items: start;
}
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sin-alto { gap: .75rem; }
.iguales { align-items: stretch; }

.cabecera-seccion { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cabecera-seccion h1 { margin: 0; }

/* ---------- BLOQUE 4: Centro del inicio (buscador y nuevo pedido) ---------- */
.centro-inicio {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
    max-width: 760px !important;
}
.buscador-grande {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #fff;
    border: 2px solid var(--borde);
    border-radius: var(--radio);
    padding: .5rem .5rem .5rem 1rem;
    box-shadow: var(--sombra);
}
.buscador-grande:focus-within { border-color: var(--principal); }
.buscador-grande .ico-buscador { width: 1.8rem; height: 1.8rem; color: var(--suave); }
.buscador-grande input[type=search] {
    flex: 1;
    border: 0;
    outline: 0;
    font-size: 1.4rem;
    min-height: 60px;
    background: transparent;
    margin: 0;
    padding: 0;
}
.buscador-grande .boton.boton-principal { min-height: 60px; font-size: 1.1rem; padding: 0 1.6rem; }

.boton.boton-nuevo {
    min-height: 76px;
    font-size: 1.4rem;
    background: var(--principal);
    border-color: var(--principal);
    color: #fff;
    gap: .6rem;
}
.boton.boton-nuevo .ico { width: 1.6rem; height: 1.6rem; }
.boton.boton-nuevo:hover { background: var(--principal-oscuro); }

.aviso-sin-recoger {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1rem;
    border-radius: var(--radio);
    background: #fef2f2;
    border: 2px solid #fca5a5;
    color: var(--error);
    text-decoration: none;
    font-size: 1.05rem;
}
.aviso-sin-recoger .ico { width: 1.5rem; height: 1.5rem; }

/* ---------- BLOQUE 5: Barra de encargados y menú inferior ---------- */
.barra-inferior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 1rem;
    background: #efe8dd;
    border-top: 1px solid var(--borde);
    min-height: 48px;
}
.barra-dato { font-size: 1.05rem; }
.barra-dato strong { font-size: 1.35rem; margin-left: .3rem; font-variant-numeric: tabular-nums; }
.firma { font-size: .85rem; color: var(--suave); text-align: right; }
.firma strong { color: var(--principal); }

.menu-inferior {
    display: flex;
    background: var(--oscuro);
    padding-bottom: env(safe-area-inset-bottom);
}
.menu-inferior a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    min-height: 64px;
    padding: .4rem .2rem;
    color: #d6cfc5;
    text-decoration: none;
    font-size: .8rem;
    text-align: center;
}
.menu-inferior a .ico { width: 1.6rem; height: 1.6rem; }
.menu-inferior a.activo { color: #fff; background: var(--principal); }
.menu-inferior a.salir { flex: 0 0 76px; opacity: .7; }

/* ---------- BLOQUE 6: Formularios y botones ---------- */
form label { display: block; margin-bottom: .9rem; font-weight: 600; }
input[type=text], input[type=password], input[type=tel], input[type=number], input[type=email],
input[type=time], input[type=date], input[type=search], select, textarea {
    display: block;
    width: 100%;
    margin-top: .3rem;
    padding: .7rem .8rem;
    font-size: 1rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: #fff;
    min-height: 48px;
    font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--principal); border-color: var(--principal); }
.ayuda { display: block; font-weight: 400; font-size: .85rem; color: var(--suave); margin-top: .3rem; }
p.ayuda { margin: -.5rem 0 1rem; }
.ico-ayuda { color: #ca8a04; }

.casilla { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400; }
.casilla input { width: 24px; height: 24px; margin-top: .1rem; flex-shrink: 0; accent-color: var(--principal); }
.campo-codigo { font-size: 1.5rem; letter-spacing: .3rem; font-family: ui-monospace, monospace; }

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 48px;
    padding: .6rem 1.1rem;
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: #fff;
    color: var(--texto);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}
.boton-principal { background: var(--principal); border-color: var(--principal); color: #fff; }
.boton-principal:hover { background: var(--principal-oscuro); }
.boton-peligro { border-color: var(--error); color: var(--error); }
.boton-ancho { width: 100%; }
.boton-icono { padding: .6rem .8rem; color: var(--suave); }
.botonera { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.botonera .boton { flex: 1; }
.botonera-derecha { justify-content: flex-end; }
.botonera-derecha .boton { flex: 0 0 auto; }
form.en-linea { display: inline; margin: 0; }

/* ---------- BLOQUE 7: Avisos y estados ---------- */
.aviso { padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; border-left: 5px solid; background: #fff; }
.aviso-ok    { border-color: var(--ok);    background: #f0fdf4; }
.aviso-error { border-color: var(--error); background: #fef2f2; }
.aviso-aviso { border-color: var(--aviso); background: #fefce8; }
.aviso-info  { border-color: #1d4ed8;     background: #eff6ff; }
.aviso-info p { margin: .4rem 0 0; }
.aviso-info strong .ico { color: #1d4ed8; }
.estado-ok { color: var(--ok); font-weight: 700; }
.estado-no { color: var(--error); font-weight: 700; }

/* ---------- BLOQUE 8: Productos ---------- */
.productos-con-leyenda { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.lista-productos { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.lista-productos li {
    display: flex;
    align-items: center;
    gap: .7rem;
    background: #fff;
    border: 1px solid var(--borde);
    border-left: 6px solid var(--color);
    border-radius: 0 var(--radio) var(--radio) 0;
    padding: .6rem .8rem;
    min-height: 68px;
}
.lista-productos li.es-mitad { margin-left: 2rem; }
.ico-producto { width: 2.2rem; height: 2.2rem; }
.producto-datos { flex: 1; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.producto-datos strong { font-size: 1.1rem; }
.etiquetas { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .85rem; color: var(--suave); align-items: center; }
.etiqueta { background: #f1ece4; border-radius: 6px; padding: .05rem .45rem; }

.boton-estrella {
    width: 52px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--borde); border-radius: 8px; background: #fff;
    color: #c8c2b8; cursor: pointer;
}
.boton-estrella .ico { width: 1.7rem; height: 1.7rem; }
.boton-estrella.activa { color: #ca8a04; background: #fef9c3; border-color: #fde047; }
.boton-estrella.activa .ico { --relleno: #facc15; }

.leyenda h2 { font-size: 1.05rem; }
.leyenda dl { margin: 0; }
.leyenda dt { font-weight: 700; margin-top: .8rem; display: flex; align-items: center; gap: .35rem; }
.leyenda dd { margin: .2rem 0 0; font-size: .9rem; color: var(--suave); }
.inactivos summary { cursor: pointer; font-weight: 600; }
.inactivos .lista-productos { margin-top: .8rem; }

/* Ficha de producto */
.ficha-producto { max-width: 1150px; }
.ficha-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1.5rem; align-items: start; }
.vista-previa {
    position: sticky; top: 0;
    background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem;
    display: flex; flex-direction: column; gap: .75rem;
}
.vista-previa h2 { margin: 0; }
.vista-previa p.ayuda { margin: 0; }

/* Botón de producto (vista previa y Nuevo pedido) */
.boton-producto {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    width: 100%; min-height: 170px; padding: .9rem .6rem;
    background: #fff; border: 2px solid var(--borde); border-top: 8px solid var(--color);
    border-radius: 14px; box-shadow: var(--sombra);
    font-family: inherit; color: var(--texto); text-align: center; cursor: pointer;
}
.bp-imagen { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }
.bp-ico { width: 64px; height: 64px; color: var(--color); }
img.bp-ico.foto { width: 84px; height: 84px; border-radius: 12px; }
.bp-nombre { font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.bp-precio { font-size: .9rem; color: var(--suave); }
.ficha-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ficha-cabecera h1 { margin: 0; }
.estrella-grande {
    position: relative;
    display: inline-flex !important; align-items: center; gap: .5rem; margin: 0 !important;
    padding: .5rem 1rem; border: 1px solid var(--borde); border-radius: 8px; background: #fff;
    cursor: pointer; color: #b5aea3; min-height: 52px;
}
.estrella-grande input { position: absolute; opacity: 0; pointer-events: none; }
.estrella-grande .ico { width: 1.8rem; height: 1.8rem; }
.estrella-grande:has(input:checked) { color: #a16207; background: #fef9c3; border-color: #fde047; }
.estrella-grande:has(input:checked) .ico { --relleno: #facc15; }
.ficha-campos { margin-top: 1rem; }

.selector { border: 0; padding: 0; margin: 0 0 1rem; }
.selector legend { font-weight: 600; margin-bottom: .4rem; }
.opciones-icono, .opciones-color { display: grid; gap: .4rem; }
.opciones-icono  { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.opciones-color  { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.opciones-icono label, .opciones-color label {
    position: relative;
    margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
    min-height: 74px; padding: .4rem;
    border: 2px solid var(--borde); border-radius: 10px; background: #fff;
    font-weight: 400; font-size: .8rem; cursor: pointer; text-align: center;
}
.opciones-color label { min-height: 74px; }
.opciones-icono input, .opciones-color input { position: absolute; opacity: 0; pointer-events: none; }
.opciones-icono .ico { width: 2rem; height: 2rem; color: var(--principal); }
.opciones-icono label:has(input:checked), .opciones-color label:has(input:checked) {
    border-color: var(--principal); background: #fff7ed; font-weight: 700;
}
.muestra { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }
.opciones-casilla { display: grid; gap: .3rem; margin: .5rem 0; }
.bloque-mitad { margin: .5rem 0 1rem; border-left: 5px solid var(--principal); }

.proximamente-bloque { margin-top: 1rem; opacity: .8; }

/* Fotos de producto (en lugar del icono) */
img.foto { object-fit: cover; border-radius: 8px; border: 2px solid var(--color, var(--borde)); background: #fff; }
.desglose img.foto { width: 2.1em; height: 2.1em; }
img.ico-producto.foto { width: 3rem; height: 3rem; }
.foto-producto { display: flex; gap: 1rem; align-items: flex-start; }
.foto-vista {
    width: 128px; height: 128px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 2px dashed var(--borde); border-radius: 12px; background: #fff; overflow: hidden;
}
.foto-vista img, .foto-grande { width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; }
.boton-subir { position: relative; overflow: hidden; margin-bottom: .6rem !important; }
.boton-subir input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---------- BLOQUE 8B: Nuevo pedido ----------
   ┌───────────────── cliente · hora (franja compacta) ─────────────┐
   │ productos (el máximo posible)                     │  pedido     │
   └───────────────────────────────────────────────────┴─────────────┘ */
.contenido:has(.pedido) { overflow: hidden; padding: .6rem; }
.pedido {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-rows: auto minmax(0, 1fr);
    gap: .6rem;
    height: 100%;
    max-width: none !important;
}

/* Arriba: cliente, notas y hora */
.pedido-cliente {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr);
    gap: .3rem .75rem;
    background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
    padding: .5rem .75rem .6rem;
}
.pedido-cliente label { margin: 0; font-size: .85rem; }
.pedido-cliente input[type=text], .pedido-cliente input[type=tel] { min-height: 44px; margin-top: .15rem; padding: .5rem .7rem; }
.campo-cliente { position: relative; }
.sugerencias {
    position: absolute; z-index: 20; top: 100%; left: 0; width: 340px;
    list-style: none; margin: .2rem 0 0; padding: 0; border: 1px solid var(--borde); border-radius: 8px;
    background: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.18); overflow: hidden;
}
.sugerencias li { padding: .6rem .8rem; cursor: pointer; display: flex; flex-direction: column; border-bottom: 1px solid var(--borde); min-height: 48px; }
.sugerencias li:last-child { border-bottom: 0; }
.sugerencias li:hover { background: #fff7ed; }
.sugerencias span { font-size: .85rem; color: var(--suave); }

.selector-hora { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; min-width: 0; display: flex; align-items: center; gap: .6rem; }
.selector-hora legend { float: left; font-weight: 600; font-size: .85rem; margin: 0; padding: 0; white-space: nowrap; }
.horas {
    flex: 1; display: flex; gap: .35rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; padding-bottom: .15rem;
}
.horas label { position: relative; margin: 0; flex: 0 0 auto; }
.horas input { position: absolute; opacity: 0; pointer-events: none; }
.horas span {
    display: flex; align-items: center; justify-content: center; min-height: 42px; min-width: 70px; padding: 0 .5rem;
    border: 2px solid var(--borde); border-radius: 8px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
}
.horas input:checked + span { background: var(--principal); border-color: var(--principal); color: #fff; }
.horas .pasada { display: none; }
.horas .pasada span { color: var(--suave); border-style: dashed; }
.ver-pasadas .horas .pasada { display: block; }
.ver-pasadas-boton { flex: 0 0 auto; background: none; border: 1px dashed var(--borde); border-radius: 8px; color: var(--suave); font-size: .8rem; padding: 0 .6rem; min-height: 42px; cursor: pointer; font-family: inherit; }

/* Centro: productos */
.pedido-productos { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .15rem; min-height: 0; }
.rejilla-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: .6rem; }
.rejilla-productos .boton-producto {
    position: relative; min-height: 128px; padding: .6rem .4rem; gap: .25rem; border-top-width: 6px;
    touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.rejilla-productos .bp-imagen { width: 64px; height: 64px; }
.rejilla-productos .bp-ico { width: 52px; height: 52px; }
.rejilla-productos img.bp-ico.foto { width: 64px; height: 64px; }
.rejilla-productos .bp-nombre { font-size: 1rem; }
.rejilla-productos .boton-producto .bp-precio { display: none; }       /* El precio no se enseña al apuntar */
.boton-producto.elegido { border-color: var(--color); background: #fffaf3; }
.boton-producto.pulsado { animation: pulsar .18s ease-out; }
@keyframes pulsar { 50% { transform: scale(.95); } }
.bp-cantidad:empty { display: none; }
.bp-cantidad {
    position: absolute; top: .3rem; right: .3rem; min-width: 2.1rem; height: 2.1rem; padding: 0 .4rem;
    border-radius: 1.05rem; background: var(--color); color: #fff; font-weight: 800; font-size: 1.15rem;
    display: flex; align-items: center; justify-content: center;
}

/* Derecha: el pedido */
.pedido-lineas-panel {
    display: flex; flex-direction: column; gap: .5rem; min-height: 0;
    background: #fff; border: 1px solid var(--borde); border-top: 6px solid var(--principal);
    border-radius: var(--radio); box-shadow: var(--sombra); padding: .75rem;
}
.pedido-lineas-panel h2 { margin: 0; font-size: 1.25rem; }
.boton-repetir { width: 100%; justify-content: flex-start; text-align: left; background: #fff7ed; border-color: var(--naranja-borde); color: var(--naranja-texto); font-size: .9rem; min-height: 44px; }
#lineas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1; overflow-y: auto; min-height: 0; }
#lineas li { display: flex; align-items: center; gap: .4rem; padding: .3rem 0; border-bottom: 1px solid var(--borde); }
#lineas .cantidad { min-width: 1.8rem; text-align: right; font-size: 1.35rem; }
#lineas .nombre { flex: 1; font-size: 1rem; line-height: 1.2; }
#lineas button {
    width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--borde); border-radius: 8px; background: #fff;
    font-size: 1.4rem; font-weight: 700; cursor: pointer; color: var(--texto);
}
#lineas .mas { background: #fff7ed; }
.sin-lineas { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--suave); gap: .4rem; }
.sin-lineas[hidden] { display: none; }
.ico-vacio { width: 3rem; height: 3rem; opacity: .4; }
.pedido-lineas-panel .botonera { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--borde); }
.pedido-lineas-panel .botonera .boton { min-height: 56px; }

/* ---------- BLOQUE 8C: Buscar, Pedidos de hoy y comanda ---------- */
.centrado { text-align: center; }
.buscador-arriba { max-width: 900px; margin: 0 auto 1rem; }
.sin-resultados h2 { margin-bottom: .5rem; }

.rejilla-comandas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; align-items: start; max-width: none !important; }
.rejilla-comandas.una { grid-template-columns: minmax(0, 560px); justify-content: center; }

.comanda {
    background: #fffdf8;
    border: 1px solid var(--borde);
    border-top: 8px solid var(--principal);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    padding: 1rem 1.1rem;
    display: flex; flex-direction: column; gap: .7rem;
    background-image: repeating-linear-gradient(transparent 0 2.2rem, rgba(0,0,0,.03) 2.2rem 2.25rem);   /* Aire de libreta */
}
.comanda.estado-entregado { border-top-color: var(--ok); opacity: .85; }
.comanda.sin-recoger { border-top-color: var(--error); }
.comanda-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 2px dashed var(--borde); padding-bottom: .6rem; }
.comanda-nombre { font-size: 1.6rem; margin: 0; text-transform: uppercase; line-height: 1.15; }
.comanda-telefono { color: var(--suave); font-size: .95rem; }
.comanda-hora { font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--principal); line-height: 1; }
.comanda-estado { border-radius: 8px; padding: .45rem .7rem; font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.comanda-estado.entregado { background: #f0fdf4; color: var(--ok); }
.comanda-estado.retraso { background: #fef2f2; color: var(--error); }
.comanda-lineas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.comanda-lineas li { display: flex; align-items: center; gap: .6rem; font-size: 1.25rem; }
.comanda-cantidad {
    min-width: 2.4rem; height: 2.4rem; border-radius: 8px; background: var(--color); color: #fff;
    font-weight: 800; font-size: 1.35rem; display: flex; align-items: center; justify-content: center;
}
.comanda-ico { width: 2rem; height: 2rem; color: var(--color); }
img.comanda-ico.foto { width: 2.2rem; height: 2.2rem; }
.comanda-producto { font-weight: 600; }
.comanda-notas { background: #fefce8; border-left: 4px solid #ca8a04; padding: .5rem .7rem; font-weight: 600; display: flex; gap: .4rem; align-items: center; }
.comanda-pie { display: flex; flex-direction: column; gap: .5rem; margin-top: .2rem; }
.comanda-pie form { display: block; }
.boton.boton-entregado {
    width: 100%; min-height: 70px; font-size: 1.5rem; letter-spacing: .03em;
    background: var(--ok); border-color: var(--ok); color: #fff;
}
.boton.boton-entregado .ico { width: 1.8rem; height: 1.8rem; }
.boton.boton-entregado:disabled { opacity: .6; }
.comanda-mas summary { color: var(--suave); font-size: .85rem; cursor: pointer; padding: .3rem 0; }
.comanda-mas .boton { width: 100%; margin-top: .4rem; }
.comanda-pie .boton { width: 100%; }

.pestanas { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.pestanas a {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 1.1rem;
    border: 1px solid var(--borde); border-radius: 24px; background: #fff; color: var(--texto); text-decoration: none; font-weight: 600;
}
.pestanas a.activa { background: var(--oscuro); color: #fff; border-color: var(--oscuro); }
.pestanas a.alerta:not(.activa) { border-color: #fca5a5; color: var(--error); }
.contador-pestana { background: rgba(0,0,0,.08); border-radius: 12px; padding: .05rem .55rem; font-size: .9rem; }
.pestanas a.activa .contador-pestana { background: rgba(255,255,255,.2); }

.barra-deshacer {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: #f0fdf4; border: 1px solid #86efac; border-radius: var(--radio); padding: .5rem .5rem .5rem 1rem;
}

/* Búsqueda en directo */
.resultados-vivos {
    list-style: none; margin: -.6rem 0 0; padding: 0; background: #fff;
    border: 1px solid var(--borde); border-top: 0; border-radius: 0 0 var(--radio) var(--radio);
    box-shadow: 0 10px 24px rgba(0,0,0,.12); overflow: hidden;
}
.buscador-arriba + .resultados-vivos { max-width: 900px; margin: -1rem auto 1rem; }
.resultados-vivos li + li { border-top: 1px solid var(--borde); }
.resultados-vivos a { display: flex; align-items: center; gap: .9rem; padding: .55rem 1rem; min-height: 60px; color: var(--texto); text-decoration: none; }
.resultados-vivos a:active { background: #fff7ed; }
.resultados-vivos .rv-hora { font-size: 1.35rem; font-weight: 800; color: var(--principal); font-variant-numeric: tabular-nums; }
.resultados-vivos a.retraso .rv-hora { color: var(--error); }
.resultados-vivos .rv-datos { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.resultados-vivos strong { font-size: 1.1rem; }
.resultados-vivos small { color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resultados-vivos .rv-ir { font-size: 2rem; color: var(--suave); }
.resultados-vivos .vacio { padding: .9rem 1rem; color: var(--suave); }
.centro-inicio.buscando { justify-content: flex-start; }
.centro-inicio.buscando > :not(.buscador-grande):not(.resultados-vivos) { display: none; }

/* ---------- BLOQUE 8D: Configuración (usuarios y dispositivos) ---------- */
.bloque-config { margin-top: 1rem; }
.bloque-config h2 { flex-wrap: wrap; }
h2.separado { margin-top: 1.2rem; }
.lista-usuarios { list-style: none; margin: .8rem 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.lista-usuarios > li {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    border: 1px solid var(--borde); border-radius: 10px; padding: .6rem .8rem; background: #fff;
}
.lista-usuarios > li.inactivo { opacity: .6; }
.usuario-datos { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: .25rem; }
.usuario-datos form { display: flex; gap: .5rem; align-items: center; }
.usuario-datos form input { margin: 0; max-width: 320px; }
.usuario-acciones summary { list-style: none; }
.usuario-acciones summary::-webkit-details-marker { display: none; }
.usuario-acciones-cuerpo { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; min-width: 300px; }
.usuario-acciones-cuerpo form { display: flex; gap: .5rem; }
.usuario-acciones-cuerpo form input { margin: 0; }
.usuario-acciones-cuerpo .boton { width: 100%; }
.usuario-acciones-cuerpo form:first-child .boton { width: auto; white-space: nowrap; }
.etiqueta-roja  { background: #fee2e2; color: var(--error); }
.etiqueta-verde { background: #dcfce7; color: var(--ok); }
.boton-pequeno { min-height: 44px; padding: .4rem .8rem; font-size: .9rem; }
.nuevo-usuario summary { list-style: none; display: inline-flex; }
.nuevo-usuario summary::-webkit-details-marker { display: none; }
.nuevo-usuario[open] summary { margin-bottom: .8rem; }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }
.rejilla-4 .botonera { grid-column: 1 / -1; margin-top: 0; }

/* ---------- BLOQUE 8E: Informes ---------- */
.filtro-informe { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.atajos { display: flex; gap: .4rem; flex-wrap: wrap; }
.atajos .boton { min-height: 44px; }
.rango { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.rango label { margin: 0; }
.rango .boton-pdf { margin-left: auto; }
.titulo-informe { margin: .5rem 0 1rem; text-align: center; }
.resumen-informe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.resumen-informe .dato { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem 1rem; display: flex; flex-direction: column; }
.resumen-informe .dato span { color: var(--suave); font-size: .9rem; }
.resumen-informe .dato strong { font-size: 1.9rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.resumen-informe .dato small { color: var(--suave); }
.resumen-informe .dato-pollos { background: var(--naranja-fondo); border-color: var(--naranja-borde); color: var(--naranja-texto); }
.resumen-informe .dato-alerta strong { color: var(--error); }
.informe-bloques { align-items: start; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: .45rem .4rem; border-bottom: 1px solid var(--borde); text-align: left; }
.tabla th { font-size: .85rem; color: var(--suave); font-weight: 600; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.celda-producto { display: inline-flex; align-items: center; gap: .45rem; }
.celda-producto img.foto { width: 1.6rem; height: 1.6rem; }
.fila-barra { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.etiqueta-barra { width: 5.6rem; flex-shrink: 0; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.barra { flex: 1; display: flex; align-items: center; gap: .5rem; }
.barra span { height: 1.4rem; background: var(--principal); border-radius: 4px; display: block; }
.barra em { font-style: normal; font-size: .85rem; color: var(--suave); white-space: nowrap; }
@media (max-width: 900px) { .resumen-informe { grid-template-columns: repeat(2, 1fr); } }

/* ---------- BLOQUE 9: 2FA ---------- */
.qr { width: 220px; height: 220px; margin: .5rem 0 1rem; }
.qr svg { width: 100%; height: 100%; }
.codigos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: 1rem; }
.codigos code { font-size: 1.05rem; padding: .5rem; text-align: center; }
.pasos { padding-left: 1.2rem; margin: 0 0 .5rem; }

/* ---------- BLOQUE 10: Login y pie ---------- */
.sin-sesion .contenido { display: flex; align-items: center; overflow: visible; }
.login h1 { color: var(--principal); }
.pie { padding: 1rem; text-align: center; font-size: .8rem; color: var(--suave); }
.pie a { color: var(--suave); }

/* ---------- BLOQUE 11: Pantallas más pequeñas ---------- */
@media (max-width: 900px) {
    .cabecera-panel { grid-template-columns: 1fr 1fr; }
    .contador-hora { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 1rem; }
    .contador-hora .hora { font-size: 2rem; }
    .productos-con-leyenda { grid-template-columns: 1fr; }
    .ficha-cuerpo { grid-template-columns: 1fr; }
    .contenido:has(.pedido) { overflow-y: auto; }
    .pedido { grid-template-columns: 1fr; height: auto; }
    .pedido-cliente { grid-template-columns: 1fr 1fr; }
    .pedido-productos, #lineas { overflow: visible; }
    .vista-previa { position: static; flex-direction: row; flex-wrap: wrap; }
    .vista-previa > div { flex: 1; min-width: 180px; }
    .opciones-icono, .opciones-color { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .barra-inferior { flex-direction: column; align-items: flex-start; gap: .2rem; }
    .firma { text-align: left; }
    .cabecera-panel { grid-template-columns: 1fr; }
    .desglose { grid-template-columns: 1fr; }
    .menu-inferior a span { font-size: .65rem; }
    .lista-productos li { flex-wrap: wrap; }
    .opciones-icono, .opciones-color { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =====================================================================
   06/11/2026 · Sin icono, iconos propios de ICE, "Otro color",
   espacio de fotos, Mi cuenta y Ayuda
   ===================================================================== */
/* Botón "Sin icono": solo el nombre, grande y en su color */
.boton-producto.sin-icono { background: color-mix(in srgb, var(--color) 9%, #fff); }
.boton-producto.sin-icono.elegido { background: color-mix(in srgb, var(--color) 20%, #fff); }
.boton-producto.sin-icono .bp-imagen { display: none; }
.boton-producto.sin-icono .bp-nombre { font-size: 1.5rem; font-weight: 800; color: var(--color); overflow-wrap: anywhere; }
.rejilla-productos .boton-producto.sin-icono .bp-nombre { font-size: 1.3rem; }
/* Sin icono en los contadores y en la carta: una marca de color junto al nombre */
.desglose li:not(:has(.ico)) .nombre { border-left: 5px solid var(--color); padding-left: .5rem; }
/* En la carta, los productos sin icono llevan sus iniciales en su color (mismo hueco que un icono) */
.ico-iniciales {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    border: 2px solid var(--color); border-radius: 8px; color: var(--color);
    background: color-mix(in srgb, var(--color) 9%, #fff); font-weight: 800; font-size: .95rem;
}

/* Iconos propios (dibujos a color): se ven tal cual, sin teñir */
img.dibujo { object-fit: contain; }
.opciones-icono img.ico { width: 2rem; height: 2rem; }
.sin-icono-muestra {
    width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
    border: 2px dashed var(--borde); border-radius: 8px; font-weight: 800; color: var(--suave);
}

/* "Otro color": selector del navegador dentro de la rejilla de colores */
.opciones-color .color-libre input[type=color] {
    position: static; opacity: 1; pointer-events: auto; cursor: pointer;
    width: 30px; height: 30px; padding: 0; border: 1px solid var(--borde); border-radius: 50%; background: none;
}
.opciones-color .color-libre input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.opciones-color .color-libre input[type=color]::-webkit-color-swatch { border: none; border-radius: 50%; }

/* Espacio de fotos (Productos) */
.espacio-fotos { display: inline-flex; align-items: center; gap: .5rem; }
.espacio-fotos meter { width: 90px; }

/* Configuración: hora de reseteo */
.hora-corta { max-width: 10rem; }

/* Mi cuenta: nombre con su botón al lado */
.campo-con-boton { display: flex; gap: .5rem; }
.campo-con-boton input { flex: 1; min-width: 0; }
.form-nombre { margin-bottom: 1rem; }

/* Ayuda */
.ayuda-app { display: flex; flex-direction: column; gap: 1rem; max-width: 900px; }   /* Una sección debajo de otra */
.ayuda-app p { margin: .4rem 0; }
.lista-ayuda { margin: .5rem 0 0; padding-left: 1.2rem; }
.lista-ayuda li, .lista-contacto li { margin: .35rem 0; }
.lista-contacto { list-style: none; margin: .5rem 0; padding: 0; font-size: 1.05rem; }

/* =====================================================================
   06/11/2026 · Encargos para otro día y nombre de la app
   ===================================================================== */
.selector-dia { display: flex; gap: .4rem; align-items: center; flex: 0 0 auto; }
.selector-dia label { margin: 0; position: relative; }
.selector-dia input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.selector-dia span {
    display: flex; align-items: center; min-height: 42px; padding: 0 .8rem; cursor: pointer;
    border: 1px solid var(--borde); border-radius: 8px; background: #fff; font-weight: 600; font-size: .9rem; white-space: nowrap;
}
.selector-dia input:checked + span { background: var(--oscuro); border-color: var(--oscuro); color: #fff; }
.selector-dia input[type=date] { width: auto; min-height: 42px; margin: 0; padding: 0 .5rem; border-color: var(--oscuro); font-weight: 600; }
.otro-dia .horas .pasada { display: block; }                       /* Otro día: todas las horas valen */
.otro-dia .horas .pasada span { color: inherit; border-style: solid; }
.otro-dia .ver-pasadas-boton { display: none; }

.comanda-otro-dia { flex-basis: 100%; font-weight: 700; color: #1d4ed8; margin-bottom: .2rem; }
.titulo-dia { display: flex; align-items: center; gap: .5rem; margin: 1.2rem 0 .6rem; font-size: 1.2rem; }
.titulo-dia:first-of-type { margin-top: 0; }
.enlace-otros-dias {
    display: block; text-align: center; padding: .7rem 1rem; border-radius: var(--radio);
    background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; font-weight: 600; text-decoration: none;
}
.logo-login { display: block; margin: 0 auto .4rem; }
.login h1 { text-align: center; }

/* =====================================================================
   06/11/2026 · Panel de administración de ICE
   ===================================================================== */
.cabecera-ice {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: .7rem 1rem; background: #1e293b; color: #fff;
}
.cabecera-ice .marca { color: #fff; font-weight: 700; text-decoration: none; }
.cabecera-ice nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.cabecera-ice nav a { color: #e2e8f0; text-decoration: none; font-weight: 600; }
.cabecera-ice nav a.suave { color: #94a3b8; }
.panel-ice .pie { flex: 0 0 auto; }
.buscador-ice { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.buscador-ice input { flex: 1; min-width: 220px; margin: 0; }
.tabla-desplazable { overflow-x: auto; }
.tabla-ice td { vertical-align: middle; }
.enlace-fila { color: var(--texto); }
.etiqueta-aviso { background: #fef3c7; color: #92400e; }
.texto-aviso { color: #b45309; font-weight: 700; }
.cabecera-seccion h1 .etiqueta { font-size: .85rem; vertical-align: middle; margin-left: .4rem; }
.botonera-izq { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.botonera-izq.separado { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
.campo-clave { font-family: ui-monospace, monospace; letter-spacing: .05rem; }
.lista-usuarios .campo-con-boton input { width: 11rem; flex: 0 0 auto; margin: 0; }
.datos-acceso dl, .datos-uso { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: .6rem 0 0; }
.datos-acceso dt, .datos-uso dt { color: var(--suave); }
.datos-acceso dd, .datos-uso dd { margin: 0; font-weight: 600; }
.datos-acceso code { font-size: 1.1rem; }
/* Las notas de ayuda debajo de botones o de un campo con botón no se montan encima */
.botonera-izq + p.ayuda, form.campo-con-boton + p.ayuda { margin: .4rem 0 .8rem; }

/* =====================================================================
   06/11/2026 · Protección de datos: contrato, cartel, documentos e impresión
   ===================================================================== */
.texto-legal { max-width: 900px; margin: 0 auto 1rem; line-height: 1.5; }
.texto-legal h2 { margin-top: .4rem; }
.texto-legal h3 { margin: 1.2rem 0 .5rem; }
.clausulas { padding-left: 1.3rem; }
.clausulas li { margin: .45rem 0; }
.tabla-legal th { text-align: left; vertical-align: top; white-space: nowrap; color: var(--suave); font-weight: 600; }
.tabla-legal td, .tabla-legal th { padding: .45rem .6rem; border-bottom: 1px solid var(--borde); }
.firma-aceptacion { margin-top: 1.2rem; padding-top: .8rem; border-top: 1px dashed var(--borde); font-size: .9rem; }
.form-aceptar { max-width: 900px; margin: 0 auto; }
.casilla { display: flex; gap: .6rem; align-items: flex-start; font-weight: 600; }
.casilla input { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; margin: 0; }
.lista-documentos { list-style: none; padding: 0; margin: .6rem 0; display: flex; flex-direction: column; gap: .5rem; }
.lista-documentos li { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; padding: .55rem .8rem; border: 1px solid var(--borde); border-radius: 10px; background: #fff; }
.cartel-rgpd { max-width: 560px; margin: 0 auto; padding: 1.5rem 1.8rem; border: 3px solid var(--texto); border-radius: 14px; font-size: 1.15rem; line-height: 1.45; }
.cartel-rgpd h2 { font-size: 1.6rem; justify-content: center; margin-bottom: 1rem; }

@media print {
    @page { margin: 15mm; }
    html:has(body.con-sesion), body.con-sesion { overflow: visible; height: auto; }
    body { background: #fff; }
    .cabecera, .cabecera-simple, .barra-inferior, .menu-inferior, .pie, .aviso, .no-imprimir { display: none !important; }
    .contenido { overflow: visible; padding: 0; }
    .tarjeta { border: none; box-shadow: none; padding: 0; }
    .doc-cartel { padding-top: 10mm; }
}
/* Botón de guardar con su nota debajo, centrados */
.pie-formulario { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-top: .8rem; text-align: center; }
.pie-formulario p.ayuda { margin: 0; }

/* =====================================================================
   06/11/2026 · Licencias: aviso al negocio y bloques del panel
   ===================================================================== */
.aviso-licencia {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap;
    margin-bottom: 1rem; padding: .8rem 1rem; border-radius: var(--radio); font-weight: 600;
    background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a;
}
.aviso-licencia-impago, .aviso-licencia-caducada { background: #fef2f2; border: 2px solid #dc2626; color: #991b1b; }
.cuenta-atras { flex: 0 0 auto; padding: .3rem .8rem; border-radius: 999px; background: #dc2626; color: #fff; font-size: 1.05rem; white-space: nowrap; }
.bloque-ice { margin-bottom: 1rem; }
.bloque-ice h2 { margin-bottom: .5rem; }
.bloque-problemas { border: 2px solid #fecaca; }
.caja-impago .campo-con-boton { margin-top: .6rem; }
.caja-impago .campo-con-boton input, .tarjeta > .campo-con-boton input[name=nota] { margin: 0; }
/* Último aviso (fin de semana con los 7 días cumplidos): rojo intenso, parpadeo suave y ventana */
.aviso-licencia-ultimo { background: #dc2626; border: 2px solid #7f1d1d; color: #fff; font-size: 1.1rem; animation: latido 1.6s ease-in-out infinite; }
.aviso-licencia-ultimo .cuenta-atras { background: #fff; color: #b91c1c; }
@keyframes latido { 50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, .25); } }
@media (prefers-reduced-motion: reduce) { .aviso-licencia-ultimo { animation: none; } }
.dialogo-ultimo-aviso {
    position: fixed; inset: 0; margin: auto; z-index: 100; max-width: 520px; width: calc(100% - 2rem);
    border: 3px solid #dc2626; border-radius: 16px; padding: 1.5rem; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); font-size: 1.1rem;
}
.titulo-ultimo-aviso { margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 800; color: #b91c1c; }