/* OSO · páginas de uso (Mis comidas y Admin). Se carga después de styles.css */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.app main { flex: 1; }
.app .top__in { gap: 18px; }
.app .top { background: var(--marron); color: var(--crema); border-bottom-color: var(--marron); }
.app .top .link { color: var(--crema); }
.app .top__right .quien { color: rgba(248, 238, 221, .75) !important; }
.top__right { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: .92rem; min-width: 0; }
.top__right .quien { color: var(--marron-60); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.top__tag { font: 400 .74rem/1 var(--f-fun); text-transform: uppercase; letter-spacing: .12em; color: var(--naranja); }

.page { max-width: 980px; margin-inline: auto; padding: clamp(28px, 5vw, 56px) var(--gutter) 80px; }
.page--wide { max-width: 1240px; }
.page h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); }
.sub { margin-top: 12px; max-width: 46ch; color: var(--marron-60); }

/* Ingreso */
.volver { display: inline-flex; align-items: center; gap: 8px; font: 400 .8rem/1 var(--f-fun); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; margin-bottom: 26px; }
.volver span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--marron); font-size: 1rem; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.volver:hover span { transform: translateX(-4px); background: var(--marron); color: var(--crema); }
.login { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: clamp(28px, 6vw, 80px); align-items: start; }
.login__der { align-self: end; }
.login__izq .login__card { margin-top: 28px; }
.login__card { max-width: 440px; width: 100%; }
.login__der { position: relative; display: grid; justify-items: center; align-content: end; min-height: 420px; }
.burbuja {
  position: relative; background: var(--naranja); color: var(--crema);
  font-size: clamp(1.4rem, 2.3vw, 1.85rem); line-height: 1.15; padding: 20px 26px; border-radius: 28px;
  max-width: 340px; justify-self: start; transform: rotate(-3deg); margin-bottom: 18px;
  animation: burbuja-in .6s .3s cubic-bezier(.34, 1.56, .64, 1) both;
}
.burbuja::after { content: ""; position: absolute; left: 58%; bottom: -16px; border: 12px solid transparent; border-top: 18px solid var(--naranja); border-bottom: 0; transform: skewX(-18deg); }
.login__card { background: var(--marron); color: var(--crema); border-radius: 26px; padding: clamp(24px, 4vw, 36px); display: grid; gap: 14px; }
.login__card .field label { color: var(--crema); }
.login__card .field input { background: var(--crema); }
.login__card p { font-size: .95rem; color: rgba(248, 238, 221, .8); }
.login__bear { width: min(300px, 70%); transform-origin: 50% 100%; animation: oso-bob 4.5s ease-in-out infinite; }
.login__der:hover .login__bear { animation: oso-wiggle .7s ease-in-out; }
@keyframes burbuja-in { from { opacity: 0; transform: rotate(-3deg) scale(.6) translateY(20px); } to { opacity: 1; transform: rotate(-3deg); } }
.aviso { padding: 14px 18px; border-radius: 16px; background: var(--amarillo); color: var(--marron); font-size: .98rem; }
.aviso--error { background: #f3d9d2; color: var(--rojo); }
.aviso--ok { background: #e3e8d4; }

/* Saldo */
.saldo { display: grid; grid-template-columns: auto 1fr; gap: 6px 28px; align-items: end; background: var(--marron); color: var(--crema); border-radius: 26px; padding: clamp(24px, 4vw, 36px); margin-top: 28px; }
.saldo__n { grid-row: span 2; font: 800 clamp(5rem, 14vw, 8rem)/.8 var(--f-tit); font-variation-settings: "SOFT" 100; letter-spacing: -.03em; }
.saldo__t { font: 700 1.6rem/1.1 var(--f-tit); font-variation-settings: "SOFT" 100; }
.saldo__v { color: rgba(248, 238, 221, .8); }
.saldo + .aviso, .aviso + .entrega, .saldo + .entrega { margin-top: 14px; }

.entrega { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 16px 4px; border-bottom: 1.5px solid var(--linea); }
.entrega b { font-weight: 500; }
.entrega__form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: end; padding: 16px 0; border-bottom: 1.5px solid var(--linea); }

/* Días para elegir */
.dias-titulo { margin-top: 44px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.dias-titulo h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.dias-titulo span { font: 400 .8rem/1.3 var(--f-fun); color: var(--marron-60); }
.dia { padding: 22px 0; border-bottom: 1.5px solid var(--linea); display: grid; grid-template-columns: 12rem 1fr; gap: 18px; }
.dia__h b { display: block; font: 700 1.35rem/1.1 var(--f-tit); font-variation-settings: "SOFT" 100; }
.dia__h span { display: block; margin-top: 6px; font: 400 .74rem/1.3 var(--f-fun); color: var(--marron-60); }
.dia__ops { display: grid; gap: 8px; min-width: 0; }
.op { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 10px 10px 16px; border: 1.5px solid var(--linea); border-radius: 14px; }
.op--on { border-color: var(--marron); background: #fffaf1; }
.op__p { font: 600 1.08rem/1.25 var(--f-tit); font-variation-settings: "SOFT" 100; min-width: 0; }
.step { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.step button { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--marron); background: transparent; color: var(--marron); font: 700 1.2rem/1 var(--f-cuerpo); cursor: pointer; }
.step button:disabled { opacity: .3; cursor: not-allowed; }
.step .mas { background: var(--marron); color: var(--crema); }
.step output { min-width: 1.6ch; text-align: center; font: 700 1.1rem/1 var(--f-fun); font-variant-numeric: tabular-nums; }
.vacio { padding: 28px 0; color: var(--marron-60); }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--marron); color: var(--crema); padding: 12px 18px; border-radius: 999px; font-size: .95rem; z-index: 60; max-width: calc(100% - 32px); }
.toast--error { background: var(--rojo); }

/* Admin */
.tabsbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
.barra { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; margin-bottom: 18px; }
.barra .field { width: auto; }
.barra .field input, .barra .field select { width: auto; padding: 10px 12px; }
.resumen { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.chip { font: 400 .8rem/1 var(--f-fun); padding: 9px 13px; border-radius: 999px; border: 1.5px solid var(--marron); }
.chip b { font-weight: 700; }
.tabla-wrap { overflow-x: auto; border: 1.5px solid var(--marron); border-radius: 16px; background: #fffaf1; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th { font: 400 .72rem/1.2 var(--f-fun); text-transform: uppercase; letter-spacing: .08em; text-align: left; padding: 12px 14px; border-bottom: 1.5px solid var(--marron); background: var(--crema); white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid var(--linea); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
td .acc { display: flex; gap: 8px; flex-wrap: wrap; }
.estado { font: 400 .72rem/1 var(--f-fun); text-transform: uppercase; letter-spacing: .08em; padding: 6px 9px; border-radius: 999px; white-space: nowrap; }
.estado--pendiente { background: var(--amarillo); }
.estado--pagada { background: #dfe6cf; }
.estado--cancelada { background: #ead7d2; color: var(--rojo); }
.mini { font: 700 .7rem/1 var(--f-fun); text-transform: uppercase; letter-spacing: .08em; padding: 9px 12px; border-radius: 999px; border: 1.5px solid var(--marron); background: transparent; color: var(--marron); cursor: pointer; white-space: nowrap; text-decoration: none; }
.mini--dark { background: var(--marron); color: var(--crema); }
.mini:disabled { opacity: .4; cursor: wait; }
.cocina { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cocina__item { border: 1.5px solid var(--marron); border-radius: 18px; padding: 18px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; background: #fffaf1; }
.cocina__item b { font: 800 2.4rem/1 var(--f-tit); font-variation-settings: "SOFT" 100; font-variant-numeric: tabular-nums; }
.cocina__item span { font: 600 1.05rem/1.2 var(--f-tit); font-variation-settings: "SOFT" 100; }
.confirma { display: inline-flex; gap: 6px; align-items: center; font-size: .85rem; }
.demo-banner { background: var(--amarillo); color: var(--marron); text-align: center; padding: 8px 16px; font: 400 .78rem/1.3 var(--f-fun); }

@media (max-width: 760px) {
  .login { grid-template-columns: 1fr; }
  .login__der { min-height: 0; order: -1; grid-template-columns: auto 1fr; align-items: end; justify-items: start; gap: 8px; }
  .login__der .login__bear { width: 130px; grid-column: 1; grid-row: 1; }
  .burbuja { grid-column: 2; grid-row: 1; font-size: 1.25rem; padding: 14px 18px; margin-bottom: 70px; }
  .burbuja::after { left: -10px; bottom: 18px; border: 10px solid transparent; border-right: 16px solid var(--naranja); border-left: 0; transform: none; }
  .dia { grid-template-columns: 1fr; gap: 12px; }
  .entrega__form { grid-template-columns: 1fr; }
  .saldo { grid-template-columns: 1fr; }
  .saldo__n { grid-row: auto; }
  .app body, body.app { padding-bottom: 0; }
}

/* Selector por día (Mis comidas) */
.semnav { display: flex; align-items: center; gap: 10px; font: 400 .85rem/1 var(--f-fun); }
.semnav__b { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--marron); background: transparent; color: var(--marron); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.semnav__b:disabled { opacity: .25; cursor: not-allowed; }
.diastrip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 18px; }
.dchip { display: grid; gap: 4px; justify-items: center; padding: 12px 6px 10px; border-radius: 16px; border: 1.5px solid var(--marron); background: transparent; color: var(--marron); cursor: pointer; font: inherit; position: relative; }
.dchip__d { font: 400 .72rem/1 var(--f-fun); text-transform: uppercase; letter-spacing: .1em; }
.dchip__n { font: 700 1.7rem/1 var(--f-tit); font-variation-settings: "SOFT" 100; }
.dchip__s { font: 400 .7rem/1.2 var(--f-fun); min-height: 1.2em; color: var(--naranja); }
.dchip[aria-selected="true"] { background: var(--marron); color: var(--crema); }
.dchip[aria-selected="true"] .dchip__s { color: var(--amarillo); }
.dchip--cerrado { border-color: var(--linea); color: var(--marron-60); cursor: default; }
.dchip--cerrado .dchip__s { color: var(--marron-60); }
.diapanel { margin-top: 18px; padding: clamp(18px, 3vw, 26px); border: 1.5px solid var(--marron); border-radius: 22px; background: #fffaf1; display: grid; gap: 10px; }
.diapanel__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; margin-bottom: 6px; }
.diapanel__h b { font: 700 1.5rem/1.1 var(--f-tit); font-variation-settings: "SOFT" 100; }
.diapanel__h span { font: 400 .76rem/1.3 var(--f-fun); color: var(--marron-60); }
.diapanel .op { background: var(--crema); }
.diapanel .op--on { background: #fff; }
.semana { margin-top: 28px; }
.semana h3 { font: 400 .76rem/1 var(--f-fun); text-transform: uppercase; letter-spacing: .12em; color: var(--marron-60); margin-bottom: 8px; }
.semana ul { list-style: none; margin: 0; padding: 0; }
.semana li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: .96rem; }
.semana li span:first-child { font: 400 .78rem/1.5 var(--f-fun); color: var(--naranja); text-transform: uppercase; letter-spacing: .06em; }
.semana li i { font-style: normal; color: var(--marron-60); }
.perfil { margin-top: 14px; padding: 18px; border-radius: 18px; border: 1.5px dashed var(--marron); display: grid; gap: 12px; }
.perfil p { font-size: .98rem; }
.perfil__f { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 10px; align-items: end; }
@media (max-width: 760px) {
  .diastrip { gap: 5px; }
  .dchip { padding: 10px 2px 8px; border-radius: 12px; }
  .dchip__n { font-size: 1.3rem; }
  .dchip__d { font-size: .62rem; letter-spacing: .04em; }
  .dchip__s { font-size: .6rem; }
  .semana li { grid-template-columns: 1fr; gap: 2px; }
  .perfil__f { grid-template-columns: 1fr 1fr; }
}

/* Comandas */
.comandas { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 18px; align-items: start; }
.cal { border: 1.5px solid var(--marron); border-radius: 22px; padding: 18px; background: #fffaf1; }
.cal__h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cal__h b { font: 700 1.15rem/1 var(--f-tit); font-variation-settings: "SOFT" 100; }
.cal__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__w { text-align: center; font: 400 .7rem/1 var(--f-fun); color: var(--marron-60); padding: 6px 0; }
.cal__d { aspect-ratio: 1; border: 0; border-radius: 10px; background: transparent; color: var(--marron); cursor: pointer; display: grid; place-items: center; align-content: center; gap: 1px; font: 500 .95rem/1 var(--f-cuerpo); }
.cal__d small { font: 700 .6rem/1 var(--f-fun); color: var(--naranja); }
.cal__d:hover { background: var(--crema); }
.cal__d--finde { color: var(--marron-60); background: rgba(62, 36, 22, .05); }
.cal__d--hoy span { text-decoration: underline; text-underline-offset: 3px; }
.cal__d--sel, .cal__d--sel:hover { background: var(--naranja); color: var(--crema); }
.cal__d--sel small { color: var(--crema); }
.cal__ley { margin-top: 10px; font-size: .8rem; color: var(--marron-60); }
.comandas__der { display: grid; gap: 18px; min-width: 0; }
.cbox { border: 1.5px solid var(--marron); border-radius: 22px; padding: 20px 22px 4px; background: #fffaf1; }
.cbox__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; margin-bottom: 14px; }
.cbox__h h2 { font-size: 1.6rem; }
.hojas { margin-top: 26px; display: grid; gap: 10px; }
.hoja__t { font: 400 .78rem/1 var(--f-fun); text-transform: uppercase; letter-spacing: .12em; margin-top: 14px; }
tr.fila-grupo td { background: #f2ece2; font-weight: 600; }
tr.fila-total td { font-weight: 700; border-top: 1.5px solid var(--marron); }

/* Reportes */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { border: 1.5px solid var(--marron); border-radius: 18px; padding: 16px 18px; background: #fffaf1; display: grid; gap: 6px; }
.kpi b { font: 800 2rem/1 var(--f-tit); font-variation-settings: "SOFT" 100; font-variant-numeric: tabular-nums; }
.kpi span { font-size: .85rem; color: var(--marron-60); }
.rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.rbox { border: 1.5px solid var(--linea); border-radius: 18px; padding: 18px; background: #fffaf1; min-width: 0; }
.rbox h3 { font: 700 1.1rem/1.2 var(--f-tit); font-variation-settings: "SOFT" 100; margin-bottom: 12px; }
.rbox__n { margin-top: 10px; font-size: .8rem; color: var(--marron-60); }
.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.barras li { display: grid; grid-template-columns: minmax(0, 9.5rem) 1fr auto; gap: 10px; align-items: center; font-size: .88rem; }
.barras__k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras__b { height: 12px; background: rgba(62, 36, 22, .07); border-radius: 4px; overflow: hidden; }
.barras__b i { display: block; height: 100%; background: var(--naranja); border-radius: 0 4px 4px 0; min-width: 2px; }
.barras__v { font: 700 .82rem/1 var(--f-fun); font-variant-numeric: tabular-nums; white-space: nowrap; }
.barras__v small { font-weight: 400; color: var(--marron-60); }
.cumples { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cumples li { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: 10px; align-items: center; }
.cumples li > span:first-child { font: 800 1.3rem/1 var(--f-tit); font-variation-settings: "SOFT" 100; color: var(--naranja); }
@media (max-width: 860px) { .comandas { grid-template-columns: minmax(0, 1fr); } .cal { max-width: 420px; } .cbox .estado { white-space: normal; line-height: 1.35; } }
.llega { margin: -4px 0 4px; font-size: .92rem; color: var(--naranja); }
#paso-mail, .paso-cod { display: grid; gap: 14px; }
.paso-cod__t { font-size: 1rem !important; color: var(--crema) !important; }
.paso-cod__t b { font-weight: 700; overflow-wrap: anywhere; }
.login__card .cod-in { font: 700 1.8rem/1 var(--f-fun) !important; letter-spacing: .45em; text-align: center; padding: 16px 10px !important; }
.paso-cod__alt { text-align: center; }
.paso-cod__alt .link { color: var(--crema); font-size: .9rem; }
#l-msg:empty { display: none; }
.sin-compras .dias-titulo, .sin-compras #diastrip, .sin-compras #diapanel { display: none; }
.saldo--vacio .saldo__t { font-size: 1.4rem; }
.saldo__acc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }