/* ============================================================
   Heladería de los Patojos — estilo lúdico (basado en tab.html)
   ============================================================ */
:root{
  --crema:#fff8ef;
  --tinta:#3a3352;
  --tinta-suave:#7a7395;
  --sol:#ffc93c;
  --coral:#ff7b54;
  --verde:#5cc98a;
  --lila:#8f7ae5;
  --celeste:#5db4f0;
  --rosa:#ff9ec2;
  --tarjeta:#ffffff;
  --sombra:0 6px 0 rgba(58,51,82,.08);
  --sombra-alta:0 10px 30px rgba(58,51,82,.18);
  --radio:26px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:'Fredoka',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:
    radial-gradient(circle at 12% 8%, #ffe9d6 0, transparent 42%),
    radial-gradient(circle at 88% 4%, #ffe0ef 0, transparent 38%),
    var(--crema);
  background-attachment:fixed;
  color:var(--tinta);
  min-height:100vh;
  padding-bottom:40px;
}
img{max-width:100%}
button{font-family:inherit}

/* ---------- barra superior ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,248,239,.92);backdrop-filter:blur(8px);
  border-bottom:3px solid #ffe4c4;
  padding:12px 5%;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.logo{font-size:clamp(18px,4vw,26px);font-weight:700;display:flex;align-items:center;gap:8px;cursor:pointer;line-height:1}
.logo .helado{font-size:1.3em;animation:saltito 2.4s ease-in-out infinite;display:inline-block}
.logo small{display:block;font-size:.5em;color:var(--tinta-suave);font-weight:600;letter-spacing:.5px}
nav.top{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{
  border:none;cursor:pointer;border-radius:999px;
  font-size:clamp(13px,2.6vw,16px);font-weight:700;
  padding:10px 18px;background:var(--tarjeta);color:var(--tinta);
  box-shadow:var(--sombra);transition:transform .12s, box-shadow .12s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn.sol{background:var(--sol);color:#7a5200}
.btn.coral{background:var(--coral);color:#fff}
.btn.verde{background:var(--verde);color:#fff}
.btn.lila{background:var(--lila);color:#fff}
.btn.fantasma{background:transparent;box-shadow:none;color:var(--tinta-suave)}
.btn.chico{padding:7px 12px;font-size:13px}
.btn.grande{padding:14px 26px;font-size:clamp(16px,3.4vw,20px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-carrito{position:relative}
.btn-carrito .badge{
  position:absolute;top:-6px;right:-6px;background:var(--coral);color:#fff;
  font-size:12px;font-weight:700;border-radius:999px;min-width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
}

/* ---------- layout general ---------- */
main{max-width:1100px;margin:0 auto;padding:18px 5%}
.vista{display:none;animation:aparecer .3s ease-out}
.vista.activa{display:block}
@keyframes aparecer{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes saltito{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes pop{0%{transform:scale(.7);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

.titulo-seccion{
  font-size:clamp(22px,5vw,34px);font-weight:700;margin:6px 0 4px;
  display:flex;align-items:center;gap:10px;
}
.subtitulo{color:var(--tinta-suave);font-weight:600;margin-bottom:18px;font-size:clamp(14px,3vw,18px)}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(135deg,#fff3d6,#ffe0ef);
  border-radius:var(--radio);padding:26px 24px;margin-bottom:20px;
  box-shadow:var(--sombra);position:relative;overflow:hidden;
}
.hero h1{font-size:clamp(24px,6vw,40px);line-height:1.1;margin-bottom:8px}
.hero p{font-size:clamp(15px,3.4vw,20px);color:var(--tinta-suave);font-weight:600;max-width:640px}
.hero .emojis{font-size:clamp(30px,8vw,54px);margin-top:12px;letter-spacing:6px}

/* ---------- filtros categoria ---------- */
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.filtro{
  border:none;cursor:pointer;border-radius:999px;font-weight:700;
  padding:9px 16px;background:var(--tarjeta);color:var(--tinta-suave);
  box-shadow:var(--sombra);font-size:14px;
}
.filtro.activo{background:var(--sol);color:#7a5200}

/* ---------- grid de productos ---------- */
.productos{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;
}
.card-prod{
  background:var(--tarjeta);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:18px;display:flex;flex-direction:column;gap:8px;
  transition:transform .14s, box-shadow .14s;position:relative;
}
.card-prod:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta)}
.card-prod .emoji-grande{font-size:56px;line-height:1;text-align:center;margin:4px 0}
.card-prod .cat{
  align-self:flex-start;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;border-radius:999px;padding:4px 10px;
}
.cat.helado{background:#e8f2ff;color:#1b6fb8}
.cat.chocobanano{background:#f3e7d8;color:#9c6b2f}
.cat.gelatina{background:#ffe3ef;color:#c43e78}
.card-prod h3{font-size:18px;font-weight:700}
.card-prod .desc{font-size:14px;color:var(--tinta-suave);font-weight:500;line-height:1.35;flex:1}
.card-prod .fila-precio{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.card-prod .precio{font-size:22px;font-weight:700;color:var(--verde)}
/* Badge de existencias (producto terminado) */
.stock-badge{
  position:absolute;top:12px;right:12px;z-index:2;
  font-size:11px;font-weight:800;border-radius:999px;padding:4px 9px;
  background:#e7f7ec;color:#1f9254;box-shadow:var(--sombra);
}
.stock-badge.poco{background:#fff2d9;color:#a5720d}
.stock-badge.agotado{background:#ffe0d6;color:#c0432a}
.card-prod.agotado{opacity:.62;filter:saturate(.6)}
.card-prod.agotado .emoji-grande{filter:grayscale(.5)}
/* Cancelar pedido (kanban) */
.kb-cancelar{
  border:none;cursor:pointer;border-radius:9px;background:transparent;
  color:var(--coral);font-weight:700;font-size:12px;padding:4px 6px;font-family:inherit;
  align-self:flex-end;opacity:.75;
}
.kb-cancelar:hover{opacity:1;background:#ffe0d6}
.kb-cancelados-head{
  display:flex;justify-content:space-between;align-items:center;cursor:pointer;
  font-weight:800;color:var(--tinta-suave);
}
.kb-cancelado-item{padding:8px 0;border-top:1px dashed #e7ded0;font-size:14px;color:var(--tinta-suave)}
.kb-cancelado-item:first-of-type{border-top:none}
/* Sección "Para después": pedidos programados para otro día */
.prog-panel{border:2px dashed #f0c98a;background:#fffaf0}
.prog-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:12px}
.prog-card{background:#fff;border-radius:14px;box-shadow:var(--sombra);padding:10px 12px;display:flex;flex-direction:column;gap:5px;border-left:4px solid #e8a838}
.prog-cuando{font-weight:800;color:#a4660a;background:#fff1dd;padding:4px 10px;border-radius:999px;align-self:flex-start;font-size:13px}

/* ---------- carrito ---------- */
.carrito-item, .resumen-item{
  display:flex;align-items:center;gap:12px;background:#faf7ff;
  border-radius:16px;padding:10px 14px;
}
.carrito-item .emoji{font-size:30px}
.carrito-item .info{flex:1;min-width:0}
.carrito-item .info b{font-size:16px}
.carrito-item .info small{display:block;color:var(--tinta-suave);font-weight:600}
.cant-control{display:flex;align-items:center;gap:6px}
.cant-control button{
  border:none;cursor:pointer;width:32px;height:32px;border-radius:50%;
  background:var(--sol);color:#7a5200;font-size:18px;font-weight:700;line-height:1;
}
.cant-control .n{font-weight:700;min-width:22px;text-align:center;font-size:17px}
.vacio{text-align:center;color:var(--tinta-suave);font-weight:600;padding:40px 10px;font-size:17px}
.vacio .grande{font-size:56px;display:block;margin-bottom:10px}

.panel{
  background:var(--tarjeta);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:20px;margin-bottom:16px;
}
.total-fila{
  display:flex;justify-content:space-between;align-items:center;
  font-size:22px;font-weight:700;margin:14px 4px;
}
.total-fila .monto{color:var(--verde)}
.aviso-pago{
  background:#e3f7ec;color:#2f9c62;border-radius:16px;padding:12px 16px;
  font-weight:700;text-align:center;font-size:15px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.aviso-cuenta{
  background:#fff1dd;color:#a4660a;border-radius:16px;padding:12px 16px;
  font-weight:700;text-align:center;font-size:15px;margin-bottom:14px;
}
.aviso-cuenta small{display:block;font-weight:600;opacity:.85;font-size:13px;margin-top:2px}
.paso-ok{
  background:#e3f7ec;color:#2f9c62;border-radius:14px;padding:8px 14px;
  font-weight:700;font-size:14px;margin-bottom:12px;
}

/* ---------- formularios ---------- */
label.campo{display:block;margin-bottom:12px}
label.campo span{display:block;font-weight:700;margin-bottom:5px;font-size:14px}
input,textarea,select{
  width:100%;font-family:inherit;font-size:16px;
  border:2px solid #ece6f7;border-radius:14px;padding:12px 14px;
  background:#fbfaff;color:var(--tinta);transition:border-color .15s;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--lila)}
textarea{resize:vertical;min-height:64px}

.auth-wrap{max-width:440px;margin:20px auto}
.auth-tabs{display:flex;gap:8px;margin-bottom:16px}
.auth-tabs .filtro{flex:1;text-align:center}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:480px){.dos-col{grid-template-columns:1fr}}

.msg{border-radius:14px;padding:12px 16px;font-weight:700;margin-bottom:14px;font-size:15px}
.msg.error{background:#ffe9e3;color:#b3502d}
.msg.ok{background:#e3f7ec;color:#2f9c62}

/* ---------- tracking (estaciones, basado en tab.html) ---------- */
.pedido-card{
  background:var(--tarjeta);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:20px;margin-bottom:16px;
}
.pedido-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.pedido-head .id{font-weight:700;font-size:18px}
.pedido-head .fecha{color:var(--tinta-suave);font-weight:600;font-size:13px}
.pedido-prods{font-size:15px;font-weight:600;color:var(--tinta-suave);margin:6px 0 4px}
.pedido-prods .emoji{font-size:20px}
.estado-actual{
  display:flex;align-items:center;gap:12px;background:#fff8ef;
  border-radius:18px;padding:12px 16px;margin:12px 0;
}
.estado-actual .ico{font-size:36px;animation:latido 1.6s ease-in-out infinite}
.estado-actual .txt b{font-size:17px;display:block}
.estado-actual .txt small{color:var(--tinta-suave);font-weight:600;font-size:13px}
.estado-actual.fin{background:#e3f7ec}
.estado-actual.fin .ico{animation:pop .5s ease-out}

.proceso{position:relative;display:flex;justify-content:space-between;padding:6px 2px 0;margin-top:6px}
.proceso-linea{position:absolute;left:9%;right:9%;top:24px;height:6px;background:#efeaf9;border-radius:6px;z-index:0}
.proceso-relleno{height:100%;background:var(--verde);border-radius:6px;transition:width .8s}
.paso{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:4px;width:20%}
.paso .icono-p{
  width:40px;height:40px;border-radius:50%;background:#f1edfa;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  border:3px solid transparent;
}
.paso small{font-size:11px;font-weight:700;color:var(--tinta-suave);text-align:center;line-height:1.15}
.paso.hecho .icono-p{background:#e3f7ec;border-color:var(--verde)}
.paso.hecho small{color:#2f9c62}
.paso.actual .icono-p{background:#fff1dd;border-color:var(--coral);animation:latido 1.4s ease-in-out infinite;transform:scale(1.12)}
.paso.actual small{color:var(--coral)}
.paso.futuro{opacity:.45}

.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.chip{background:#f2eefc;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;color:var(--tinta-suave)}
.chip.precio{background:#e3f7ec;color:#2f9c62}
.chip.entrega{background:#fff1dd;color:#a4660a}
.chip.dir{background:#e8f2ff;color:#1b6fb8}

/* ---------- admin ---------- */
.admin-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.admin-orden{border-left:6px solid var(--sol)}
.admin-orden.e4{border-left-color:var(--verde)}
.admin-orden.e3{border-left-color:var(--coral)}
.acciones-estado{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.tabla-prod{width:100%;border-collapse:collapse}
.tabla-prod td,.tabla-prod th{padding:8px 6px;text-align:left;border-bottom:1px solid #f0ecf8;font-size:14px}
.tabla-prod th{color:var(--tinta-suave);font-size:12px;text-transform:uppercase}
.tabla-prod .inactivo{opacity:.4}

/* ---------- Kanban de pedidos (admin) ---------- */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;-webkit-overflow-scrolling:touch}
.kb-col{
  flex:0 0 250px;background:#f6f3fd;border-radius:20px;padding:10px;
  display:flex;flex-direction:column;gap:8px;min-height:120px;align-self:flex-start;
}
.kb-col.e0{background:#fff3e6} .kb-col.e1{background:#ffeaf0}
.kb-col.e2{background:#e8f4ff} .kb-col.e3{background:#fff1dd} .kb-col.kb-final{background:#e3f7ec}
.kb-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:14px;padding:4px 6px}
.kb-count{background:rgba(58,51,82,.14);border-radius:999px;padding:2px 10px;font-size:13px;min-width:26px;text-align:center}
.kb-col.colapsada .kb-body{display:none}
.kb-body{display:flex;flex-direction:column;gap:8px}
.kb-vacio{text-align:center;color:var(--tinta-suave);font-weight:600;padding:14px;opacity:.6}
.kb-card{background:#fff;border-radius:14px;box-shadow:var(--sombra);padding:10px 12px;display:flex;flex-direction:column;gap:5px}
.kb-id{font-size:14px;font-weight:600;color:var(--tinta-suave)}
.kb-prods{display:flex;flex-wrap:wrap;gap:6px}
.kb-prod{display:inline-flex;align-items:center;gap:2px;background:#f6f3fd;border-radius:8px;padding:2px 7px;font-size:14px;font-weight:700}
.kb-meta{font-size:12px;font-weight:600;color:var(--tinta-suave)}
.kb-dir{font-size:12px;font-weight:600;color:var(--tinta-suave);line-height:1.25}
.kb-cuando{color:#a4660a;background:#fff1dd;display:inline-block;padding:2px 8px;border-radius:999px;margin:1px 0}
.kb-acc{display:flex;gap:6px;margin-top:4px}
.kb-btn{border:none;cursor:pointer;border-radius:10px;background:#f2eefc;color:var(--tinta);font-weight:700;font-size:13px;padding:7px 10px;font-family:inherit}
.kb-btn.adel{flex:1;background:var(--coral);color:#fff}
.kb-btn:disabled{opacity:.4;cursor:not-allowed}
.kb-final .kb-btn.adel{background:var(--verde)}
.kb-chevron{display:inline-block;margin-right:4px;font-size:12px}
.kb-hint-entregados{
  background:rgba(47,156,98,.12);color:#2f9c62;border-radius:12px;
  padding:8px 10px;font-size:12px;font-weight:700;text-align:center;cursor:default;
}

/* ---------- dashboard de negocio ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.kpi{
  background:var(--tarjeta);border-radius:20px;box-shadow:var(--sombra);
  padding:14px 16px;display:flex;flex-direction:column;gap:2px;border-top:5px solid var(--sol);
}
.kpi.verde{border-top-color:var(--verde)} .kpi.coral{border-top-color:var(--coral)}
.kpi.lila{border-top-color:var(--lila)} .kpi.celeste{border-top-color:var(--celeste)}
.kpi .k-label{font-size:12px;font-weight:700;color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.4px;display:flex;align-items:center;gap:5px}
.kpi .k-valor{font-size:clamp(20px,4vw,28px);font-weight:700;line-height:1.1}
.kpi .k-sub{font-size:12px;font-weight:600;color:var(--tinta-suave)}

.seccion-neg{
  background:var(--tarjeta);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:18px 20px;margin-bottom:18px;
}
.seccion-neg h3{font-size:clamp(17px,3.4vw,21px);font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.seccion-neg .ayuda{color:var(--tinta-suave);font-weight:600;font-size:13px;margin-bottom:14px}

.tabla-neg{width:100%;border-collapse:collapse;font-size:14px}
.tabla-neg th,.tabla-neg td{padding:9px 8px;text-align:right;border-bottom:1px solid #f0ecf8;white-space:nowrap}
.tabla-neg th{color:var(--tinta-suave);font-size:11px;text-transform:uppercase;font-weight:700}
.tabla-neg td:first-child,.tabla-neg th:first-child{text-align:left}
.tabla-neg .prod-cel{display:flex;align-items:center;gap:8px;text-align:left}
.tabla-neg .prod-cel .ic{font-size:22px;width:26px;text-align:center;flex:0 0 auto}
.tabla-neg tr.inactivo{opacity:.45}
.tabla-neg .pos{color:var(--verde);font-weight:700}
.tabla-neg .neg{color:var(--coral);font-weight:700}
.tabla-neg .fila-baja{background:#fff6f2}
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.badge-margen{border-radius:999px;padding:3px 9px;font-weight:700;font-size:12px}
.badge-margen.alto{background:#e3f7ec;color:#2f9c62}
.badge-margen.medio{background:#fff1dd;color:#a4660a}
.badge-margen.bajo{background:#ffe9e3;color:#b3502d}

/* punto de equilibrio */
.eq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:14px}
.eq-item{background:#faf7ff;border-radius:16px;padding:12px 14px}
.eq-item .e-lbl{font-size:12px;font-weight:700;color:var(--tinta-suave)}
.eq-item .e-val{font-size:clamp(18px,3.6vw,24px);font-weight:700}
.barra-eq{height:26px;background:#f1edfa;border-radius:999px;overflow:hidden;position:relative;margin:6px 0}
.barra-eq .relleno-eq{height:100%;background:linear-gradient(90deg,#c9f2dc,var(--verde));border-radius:999px;transition:width .8s;min-width:2px}
.barra-eq .txt-eq{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--tinta)}
.eq-mensaje{font-weight:700;border-radius:14px;padding:10px 14px;margin-top:8px;text-align:center}
.eq-mensaje.ok{background:#e3f7ec;color:#2f9c62}
.eq-mensaje.falta{background:#fff1dd;color:#a4660a}
.fila-inline{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.fila-inline .campo{margin-bottom:0;flex:1;min-width:140px}

.alerta-stock{background:#ffe9e3;color:#b3502d;border-radius:14px;padding:10px 14px;font-weight:700;font-size:14px;margin-bottom:12px}
.alerta-stock.ok{background:#e3f7ec;color:#2f9c62}

/* receta editor */
.receta-linea{display:flex;align-items:center;gap:8px;background:#faf7ff;border-radius:12px;padding:8px 10px;margin-bottom:6px}
.receta-linea .r-ic{font-size:22px}
.receta-linea .r-nom{flex:1;font-weight:700;font-size:14px;min-width:0}
.receta-linea .r-nom small{display:block;color:var(--tinta-suave);font-weight:600}
.receta-linea .r-campo{display:flex;flex-direction:column;gap:2px;margin:0;flex:0 0 auto}
.receta-linea .r-campo span{font-size:10px;font-weight:700;color:var(--tinta-suave);text-align:center}
.receta-linea input{width:66px;text-align:center;padding:6px}
.receta-linea .r-quitar{border:none;background:#ffe9e3;color:#b3502d;border-radius:8px;width:30px;height:30px;cursor:pointer;font-weight:700;align-self:flex-end}
.receta-total{font-weight:700;text-align:right;margin-top:8px;font-size:15px}

/* ---------- modal ---------- */
.modal-bg{
  position:fixed;inset:0;background:rgba(58,51,82,.5);z-index:100;
  display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(3px);
}
.modal-bg.abierto{display:flex;animation:aparecer .2s}
.modal{
  background:var(--tarjeta);border-radius:var(--radio);box-shadow:var(--sombra-alta);
  padding:24px;max-width:480px;width:100%;max-height:90vh;overflow:auto;animation:pop .25s ease-out;
}
.modal h2{margin-bottom:14px}
.icono-picker{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.icono-opcion{
  border:2px solid #ece6f7;background:#fbfaff;border-radius:12px;cursor:pointer;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:24px;line-height:1;transition:transform .1s, border-color .1s;
}
.icono-opcion:hover{transform:translateY(-2px);border-color:var(--lila)}

/* ---------- toast ---------- */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(30px);
  background:var(--tinta);color:#fff;font-weight:700;padding:14px 24px;border-radius:999px;
  box-shadow:var(--sombra-alta);z-index:200;opacity:0;transition:opacity .25s, transform .25s;
  pointer-events:none;max-width:90%;text-align:center;
}
#toast.ver{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.exito{background:var(--verde)}
#toast.error{background:var(--coral)}

.confeti{position:fixed;top:-10px;font-size:22px;z-index:150;pointer-events:none;animation:caer-confeti linear forwards}
@keyframes caer-confeti{to{transform:translateY(105vh) rotate(540deg);opacity:.2}}

.banner-aviso{
  background:#fff1dd;color:#a4660a;border-radius:16px;padding:12px 16px;margin-bottom:14px;
  display:flex;align-items:center;gap:12px;font-weight:700;font-size:14px;flex-wrap:wrap;
}
.banner-aviso span{flex:1;min-width:180px}
.cargando{text-align:center;padding:40px;color:var(--tinta-suave);font-weight:700;font-size:18px}
.cargando .grande{font-size:44px;display:block;animation:saltito 1.2s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}