/* ============ ALS EATS — estilos ============ */
*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
html{-webkit-text-size-adjust:100%}
body{background:#0f1c1f;color:#f4f7f7;min-height:100vh;min-height:100dvh;overflow-x:hidden}
.app{max-width:520px;margin:auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.contenido{padding:10px 14px 30px;flex:1;width:100%}

/* ---------- Barra superior ---------- */
.barra{position:sticky;top:0;z-index:20;background:#0f1c1f;padding:calc(10px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-right,0px)) 10px calc(14px + env(safe-area-inset-left,0px));display:flex;align-items:center;gap:10px;border-bottom:1px solid #213131}
.barra .logo{width:42px;height:42px;border-radius:10px;background:#f5b301;flex:none}
.barra-txt{flex:1;min-width:0}
.barra-txt h1{font-size:17px;line-height:1.1}
.barra-txt h1 .etiqueta-slogan{display:block;width:fit-content;font-size:10px;font-weight:700;letter-spacing:.4px;background:#f5b301;color:#1a1a1a;padding:2px 8px;border-radius:999px;line-height:1.35;margin-top:4px}
.barra-txt span{color:#9fb1b1;font-size:11.5px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.menu-modulos{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}

/* ---------- Botones / tarjetas ---------- */
.btn{display:block;text-align:center;padding:12px 14px;border-radius:12px;background:#2a3c3c;color:#f4f7f7;text-decoration:none;border:1px solid #3a4d4d;cursor:pointer;font-size:14px;width:100%}
.btn:active{opacity:.85}
.btn.primary{background:#f5b301;color:#1a1a1a;font-weight:700;border-color:#d69a00}
.btn.ok{background:#1f6e43;border-color:#2a9257}
.btn.warn{background:#8a5a00;border-color:#b27a00;color:#ffe9b8}
.btn.danger{background:#7a2323;border-color:#a03131}
.btn.ghost{background:transparent;color:#f5b301;border:1px solid #3a4d4d}
.btn.small{padding:8px 10px;font-size:12.5px;border-radius:10px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.flex{display:flex;gap:8px}
.flex>.btn{flex:1}
.card{background:#182524;border:1px solid #264040;border-radius:14px;padding:14px;margin-bottom:12px}
.card h2{font-size:15.5px;margin-bottom:10px;color:#f4f7f7;display:flex;align-items:center;gap:8px}
.card h3{font-size:14px;margin:10px 0 6px}
.titulo-sec{font-size:17px;font-weight:700;margin:14px 0 10px;display:flex;align-items:center;gap:8px}
.small{color:#9fb1b1;font-size:12.5px;line-height:1.45}
.muted{color:#9fb1b1}
.centro{text-align:center}
.ok-color{color:#4cd07d}
.warn-color{color:#f5b301}

/* ---------- Formularios ---------- */
.campo{margin-bottom:10px}
.campo label{display:block;font-size:12.5px;color:#b6c3c3;margin-bottom:5px}
.campo input,.campo select,.campo textarea{width:100%;padding:11px 12px;border-radius:11px;border:1px solid #3a4d4d;background:#132020;color:#f4f7f7;font-size:14px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid #f5b301;border-color:#f5b301}
.campo textarea{min-height:64px;resize:vertical}
.check{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:#b6c3c3}
.check input{margin-top:2px;width:auto}

/* ---------- Insignias ---------- */
.insignia{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.origen-ae{background:#f5b301;color:#1a1a1a}
.origen-uber{background:#0a2647;color:#aef0ff;border:1px solid #009e5f}
.origen-rappi{background:#0a2647;color:#ff9a9a;border:1px solid #e6005c}
.origen-manual{background:#3a2a00;color:#ffd98a;border:1px solid #8a5a00}
.est-ia{background:#33414a;color:#cfe0e0}
.est-ue{background:#33414a;color:#cfe0e0}
.est-uc{background:#33414a;color:#cfe0e0}
.est-nuevo{background:#1f4e79;color:#d5ecff}
.est-aceptado{background:#5a3b00;color:#ffe2a8}
.est-preparacion{background:#7a4a00;color:#ffe2a8}
.est-listo{background:#1f6e43;color:#d9ffe9}
.est-camino{background:#31a1c4;color:#e3faff}
.est-entregado{background:#1f6e43;color:#d9ffe9}
.est-cancelado{background:#6e0f0f;color:#ffd0d0}

/* Estado de conexión plataformas */
.plat-no{background:#3a4545;color:#c8d2d2}
.plat-pend{background:#8a5a00;color:#ffe9b8}
.plat-con{background:#1f6e43;color:#d9ffe9}
.plat-error{background:#7a2323;color:#ffd0d0}
.plat-desc{background:#3a4545;color:#9fb1b1}

/* ---------- Restaurantes / platillos ---------- */
.res-card{display:flex;gap:12px;padding:12px;background:#182524;border:1px solid #264040;border-radius:14px;margin-bottom:10px;align-items:center}
.res-ico{width:56px;height:56px;border-radius:12px;background:#2a3c3c;display:flex;align-items:center;justify-content:center;font-size:28px;flex:none}
.res-info{flex:1}
.res-info .nombre{font-weight:700;font-size:14.5px}
.res-info .meta{color:#9fb1b1;font-size:12px}
.estado-cerrado{opacity:.65}
.estado-cerrado .res-info .nombre{color:#8b9a9a}
.platillo{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #213131;align-items:flex-start}
.platillo:last-child{border-bottom:none}
.platillo-ico{font-size:26px;flex:none}
.platillo-info{flex:1}
.platillo-info .p-nombre{font-weight:600;font-size:13.5px}
.platillo-info .p-desc{color:#9fb1b1;font-size:12px}
.platillo-info .p-precio{color:#f5b301;font-weight:700;font-size:13px}
.agotado{opacity:.5}
.agotado .p-nombre{text-decoration:line-through;color:#8b9a9a}

/* ---------- Generador automático de menús (punto 2) ---------- */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.opcion-gen{border:1px dashed #3a5a5a;background:#13201f;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}
.opcion-gen .opcion-tit{font-weight:700;font-size:14px}
.opcion-gen input[type=file]{font-size:12px;width:100%}
.prog{background:#132020;border:1px solid #3a4d4d;border-radius:999px;height:26px;overflow:hidden;position:relative;margin:10px 0}
.prog-barra{background:linear-gradient(90deg,#f5b301,#ffd154);height:100%;width:0%;border-radius:999px;transition:width .3s}
.prog .small{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#1a1a1a;font-weight:700;font-size:11.5px;text-shadow:0 0 4px #fff}
.insignia.pend{background:#5a4500;color:#ffe9a8;border:1px solid #8a6a00}
.gen-prod{border:1px solid #264040;border-radius:12px;padding:10px;margin-bottom:10px;background:#162220}

/* ---------- Pedidos ---------- */
.pedido{border:1px solid #264040;background:#182524;border-radius:14px;padding:12px;margin-bottom:10px}
.pedido-cab{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px}
.pedido-cab .folio{font-weight:700;font-size:13px}
.pedido-cab .hora{margin-left:auto;color:#9fb1b1;font-size:12px}
.pedido-items{font-size:13px;color:#dce6e6;margin:6px 0}
.pedido-items li{margin-left:16px;margin-bottom:2px}
.pedido-total{font-size:14px;font-weight:700;color:#f5b301;margin-top:4px}
.pedido-det{font-size:12px;color:#9fb1b1;line-height:1.5;margin-top:6px}
.pedido-acciones{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}

/* ---------- Reportes ---------- */
.tabla{width:100%;border-collapse:collapse;font-size:13px}
.tabla th,.tabla td{padding:8px 6px;border-bottom:1px solid #213131;text-align:left}
.tabla th{color:#9fb1b1;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px}
.tabla td.num,.tabla th.num{text-align:right}
.total-resumen{font-size:15px;font-weight:700;color:#f5b301}

/* ---------- Pestañas del panel ---------- */
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px}
.tabs .tab{flex:none;padding:9px 13px;border-radius:999px;border:1px solid #3a4d4d;background:#182524;color:#cfdede;font-size:12.5px;font-weight:600;cursor:pointer}
.tabs .tab.act{background:#f5b301;color:#1a1a1a;border-color:#f5b301}

/* ---------- Plataformas ---------- */
.plat-card{border:1px solid #264040;background:#182524;border-radius:14px;padding:13px;margin-bottom:11px}
.plat-cab{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.plat-cab .plat-nombre{font-weight:700;font-size:14.5px}
.plat-cab .plat-est{margin-left:auto}
.plat-info{font-size:12.5px;color:#b6c3c3;line-height:1.5}
.plat-info b{color:#f4f7f7}
.checkline{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;margin:6px 0}
.checkline input{margin-top:2px}
.aviso{border-left:4px solid #f5b301;background:#241d08;padding:9px 11px;border-radius:0 10px 10px 0;font-size:12.5px;color:#ffe9b8;margin:8px 0;line-height:1.5}
.aviso.azul{border-left-color:#31a1c4;background:#0a2233;color:#d6f3ff}
.aviso.verde{border-left-color:#4cd07d;background:#0d2418;color:#d9ffe9}
.aviso.rojo{border-left-color:#e5484d;background:#2a0f0f;color:#ffd0d0}

/* ---------- Login / bienvenida ---------- */
.hero{padding:18px 8px 6px;text-align:center}
.hero .logo{width:86px;height:86px;border-radius:18px;background:#f5b301;margin:0 auto 12px;display:block}
.hero h2{font-size:20px;margin-bottom:6px}
.pregunta{font-size:16px;font-weight:700;margin:16px 0 12px;text-align:center}
.rol-col{margin-bottom:10px}
.rol-col .rol-nombre{font-weight:700;font-size:14.5px}
.rol-col .rol-desc{color:#9fb1b1;font-size:12.5px;margin-top:2px}

/* selección de rol en registro/login */
.sel-rol{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.sel-rol .chip{flex:1;min-width:90px;text-align:center;padding:9px 6px;border-radius:10px;border:1px solid #3a4d4d;background:#182524;color:#cfdede;font-size:12px;cursor:pointer}
.sel-rol .chip.act{background:#f5b301;color:#1a1a1a;border-color:#f5b301;font-weight:700}

.pie{padding:16px 14px calc(24px + env(safe-area-inset-bottom,0px));text-align:center;color:#6f8282;font-size:11.5px;line-height:1.6;border-top:1px solid #162626}
.nota-tab{font-size:11px;color:#8aa}
.aviso-priv{font-size:11px;color:#7f9292;margin-top:6px}

/* sin-resultado */
.vacio{text-align:center;color:#9fb1b1;padding:28px 10px;font-size:13.5px}
.vacio .grande{font-size:34px;display:block;margin-bottom:8px}

/* ============ ALS EATS v2 — añadidos ============ */

/* Banda de estado de conexión */
.banda-conexion{padding:8px 14px;font-size:12.5px;text-align:center;font-weight:600}
.banda-conexion.oculto{display:none}
.banda-conexion.ok{background:#0d2418;color:#7ce6a4;border-bottom:1px solid #1f6e43}
.banda-conexion.off{background:#2a0f0f;color:#ffb3b3;border-bottom:1px solid #7a2323}

/* Cabecera de panel por usuario */
.panel-cab{display:flex;align-items:center;gap:10px;justify-content:space-between;background:#132020;border:1px solid #264040;border-radius:14px;padding:11px 13px;margin-bottom:12px}
.panel-rol{font-weight:700;font-size:14px;color:#f5b301}

/* Botones grandes de rol en la bienvenida */
.rol-btn{display:flex;align-items:center;gap:12px;text-align:left;padding:16px 14px;margin-bottom:10px;background:#182524;border:1px solid #2f4a4a}
.rol-btn .rol-ico{font-size:30px;flex:none}
.rol-btn .rol-col{display:flex;flex-direction:column;gap:2px}
.rol-btn:hover{border-color:#f5b301}

/* Enlaces del pie */
.pie a{color:#9fb1b1}

/* Cargador */
#cargando{position:fixed;inset:0;background:rgba(8,16,16,.72);display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:60}
.spinner{width:38px;height:38px;border:4px solid #2a3c3c;border-top-color:#f5b301;border-radius:50%;animation:gira 1s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* Avisos flotantes (toasts) */
#toasts{position:fixed;left:0;right:0;bottom:14px;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:70;pointer-events:none}
.toast{max-width:92%;padding:10px 14px;border-radius:12px;font-size:13px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.4);transition:opacity .35s,transform .35s}
.toast.info{background:#31a1c4;color:#04222c}
.toast.ok{background:#1f6e43;color:#eafff1}
.toast.error{background:#7a2323;color:#ffe0e0}
.toast.sale{opacity:0;transform:translateY(8px)}

/* Filas del editor de complementos (nombre + precio, agregar/quitar) */
.fila-extra{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.fila-extra .enom{flex:2;min-width:0}
.fila-extra .epre{flex:1;min-width:0}
.fila-extra .btn{flex:none;width:auto;white-space:nowrap}

/* Modal de confirmación */
.modal-fondo{position:fixed;inset:0;background:rgba(8,16,16,.72);display:flex;align-items:center;justify-content:center;z-index:80;padding:20px}
.modal{background:#182524;border:1px solid #2f4a4a;border-radius:16px;padding:18px;max-width:360px;width:100%}
.modal h3{font-size:15px;margin-bottom:6px}

/* Barras de desplazamiento discretas en móvil */
.tabs::-webkit-scrollbar{height:4px}
.tabs::-webkit-scrollbar-thumb{background:#2f4a4a;border-radius:4px}

/* ============ Vista en PC / pantallas grandes ============ */
/* En celular se mantiene la columna de 520px (igual que ahora). En tablet y
   PC/laptop el contenido se ensancha (hasta ~1120px) para verse como web y no
   como una pantalla de app estirada. */
@media(min-width:760px){
  .app{max-width:760px}
  .contenido{padding:16px 22px 40px}
}
@media(min-width:1100px){
  .app{max-width:1120px}
  .contenido{padding:18px 26px 46px}
  /* Las rejillas aprovechan el ancho disponible en vez de quedarse en 1-2 columnas. */
  .grid2{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
  .grid3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}