/* ============================================================================
   ALS EATS — capa de color de MARCA (colores del logo)
   ----------------------------------------------------------------------------
   · Se carga DESPUÉS de css/base.css y css/pro.css (no los reemplaza).
   · Toma los colores del logo:  AMARILLO #ffc400 · ROJO #d81f26 · NEGRO #1b1b1f
     y blanco, para que la app se vea cálida y MUY amarilla (antes se veía
     demasiado negra).
   · NO cambia textos, precios, pedidos ni funciones: SOLO la imagen.
   · PARA REVERTIR: borra la línea
        <link rel="stylesheet" href="css/marca.css">
     en web/index.html (y en clientes.html / negocios.html) y todo vuelve a como
     estaba antes.
   ============================================================================ */

:root {
  /* ---- Colores del logo ---- */
  --ae-amarillo: #ffc400;
  --ae-amarillo-claro: #ffdd55;
  --ae-amarillo-suave: #fff0bd;
  --ae-rojo: #d81f26;
  --ae-rojo-oscuro: #a8121a;
  --ae-tinta: #131316;
  --ae-tinta-2: #131316;
  --ae-crema: #fffaf0;
  --ae-linea: #eecd74;

  /* ---- Reutiliza el sistema de variables del tema anterior ----
     Así las tarjetas, bordes, pestañas, etc. que ya usaban estas
     variables (css/pro.css) salen claras y de color de una sola vez. */
  --ae-oro: var(--ae-amarillo);
  --ae-oro-claro: var(--ae-amarillo-claro);
  --ae-teal: #1e7fc2;
  --ae-verde: #1e9e4a;
  --ae-panel: #fffdf2;
  --ae-panel-alto: #fff8dd;
  --ae-borde: var(--ae-linea);
  --ae-borde-claro: var(--ae-amarillo);
}

/* ---------- Fondo MUY amarillo con brillos rojos ---------- */
html { background: #ffd451; }
body {
  background:
    radial-gradient(1200px 700px at 8% -14%, rgba(255, 205, 20, .90), rgba(255, 205, 20, 0) 62%),
    radial-gradient(900px 560px at 98% -8%, rgba(216, 31, 38, .22), rgba(216, 31, 38, 0) 62%),
    linear-gradient(180deg, #fff1b8 0%, #ffe17a 52%, #ffd451 100%);
  background-attachment: fixed;
  color: var(--ae-tinta);
}
::selection { background: var(--ae-amarillo); color: var(--ae-tinta); }

/* ---------- Barra superior (bloque de marca: negro + amarillo + rojo) ---------- */
.barra {
  background: linear-gradient(180deg, #2a2b31 0%, #141418 100%);
  border-bottom: none;
  box-shadow: 0 10px 26px rgba(70, 45, 0, .30);
}
.barra::after {
  height: 5px;
  bottom: 0;
  opacity: 1;
  background: linear-gradient(90deg,
    var(--ae-amarillo) 0%,
    var(--ae-rojo) 50%,
    var(--ae-amarillo) 100%);
}
.barra .logo {
  background: var(--ae-amarillo);
  box-shadow: 0 4px 16px rgba(255, 196, 0, .55);
}
.barra-txt h1 { color: #ffffff; }
.barra-txt span { color: #ffd968; }
.barra-txt h1 .etiqueta-slogan {
  background: linear-gradient(180deg, var(--ae-amarillo-claro), var(--ae-amarillo));
  color: var(--ae-tinta);
}

/* ---------- Tarjetas claras (crema amarillenta) con franja amarilla→rojo ---------- */
.card, .res-card, .pedido, .plat-card, .panel-cab, .gen-prod {
  background: linear-gradient(180deg, #fffefa, #fff6d6);
  border: 1.5px solid var(--ae-linea);
  box-shadow: 0 8px 20px rgba(150, 110, 0, .14);
}
.card::before {
  left: 0;
  right: 0;
  height: 4px;
  opacity: 1;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, var(--ae-amarillo), var(--ae-rojo));
}
@media (hover: hover) {
  .card:hover, .res-card:hover, .pedido:hover, .plat-card:hover {
    border-color: var(--ae-amarillo);
    box-shadow: 0 16px 32px rgba(150, 110, 0, .24);
  }
}

/* ---------- Textos ---------- */
.card h2 { color: var(--ae-tinta); }
.titulo-sec { color: var(--ae-tinta); }
.titulo-sec::before {
  background: linear-gradient(180deg, var(--ae-amarillo), var(--ae-rojo));
  box-shadow: 0 0 10px rgba(216, 31, 38, .30);
}
.small, .muted { color: var(--ae-tinta-2); }
.rol-col .rol-nombre { color: var(--ae-tinta); }
.rol-col .rol-desc { color: var(--ae-tinta-2); }
.ok-color { color: #17803c; }
.warn-color { color: #b06f00; }
.oblig { color: #c11b25; }

/* ---------- Formularios ---------- */
.campo label { color: #131316; }
.campo input, .campo select, .campo textarea {
  background: #fffef8;
  color: var(--ae-tinta);
  border: 1.5px solid #e8d089;
}
.campo input::placeholder, .campo select::placeholder, .campo textarea::placeholder { color: #b3a680; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #d9b64a; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--ae-amarillo);
  box-shadow: 0 0 0 3px rgba(255, 196, 0, .35);
}
.check { color: #131316; }

/* ---------- Botones ---------- */
.btn {
  background: linear-gradient(180deg, #fff9e4, #ffefb8);
  color: var(--ae-tinta);
  border: 1.5px solid var(--ae-linea);
  box-shadow: 0 3px 10px rgba(150, 110, 0, .16);
  font-weight: 700;
}
.btn.primary {
  background: linear-gradient(180deg, var(--ae-amarillo-claro), var(--ae-amarillo));
  color: var(--ae-tinta);
  border-color: #e0a800;
  box-shadow: 0 6px 18px rgba(255, 180, 0, .42);
}
.btn.primary:hover { box-shadow: 0 10px 24px rgba(255, 180, 0, .55); }
.btn.ok {
  background: linear-gradient(180deg, #31b45f, #17803c);
  color: #ffffff;
  border-color: #136d33;
}
.btn.warn {
  background: linear-gradient(180deg, #f0a21c, #cf7d00);
  color: #3a2600;
  border-color: #b06f00;
}
.btn.danger {
  background: linear-gradient(180deg, #e8393f, var(--ae-rojo-oscuro));
  color: #ffffff;
  border-color: #8f0f16;
}
.btn.ghost {
  background: rgba(255, 252, 236, .92);
  color: var(--ae-rojo-oscuro);
  border: 1.5px solid var(--ae-linea);
}
.btn.ghost:hover { background: #ffffff; border-color: var(--ae-amarillo); }

/* ---------- Banda de conexión ---------- */
.banda-conexion.ok {
  background: linear-gradient(90deg, #17803c, #2fb862);
  color: #ffffff;
  border-bottom: 1px solid #136d33;
}
.banda-conexion.off {
  background: linear-gradient(90deg, #8f0f16, var(--ae-rojo));
  color: #ffffff;
  border-bottom: 1px solid #8f0f16;
}

/* ---------- Cabecera de panel ---------- */
.panel-cab { background: linear-gradient(180deg, #ffe9a3, #fff9e0); }
.panel-rol { color: var(--ae-rojo-oscuro); text-shadow: none; }

/* ---------- Pestañas y chips ---------- */
.tabs .tab, .sel-rol .chip {
  background: linear-gradient(180deg, #fffaea, #fff1c6);
  color: #131316;
  border: 1.5px solid var(--ae-linea);
}
.tabs .tab.act, .sel-rol .chip.act {
  background: linear-gradient(180deg, var(--ae-amarillo-claro), var(--ae-amarillo));
  color: var(--ae-tinta);
  border-color: #e0a800;
  box-shadow: 0 6px 16px rgba(255, 180, 0, .40);
}
@media (hover: hover) {
  .tabs .tab:hover, .sel-rol .chip:hover { border-color: var(--ae-amarillo); color: var(--ae-tinta); }
}

/* ---------- Bienvenida: botones de rol ---------- */
.hero .logo { background: var(--ae-amarillo); }
.hero h2 { color: var(--ae-rojo-oscuro); }
.pregunta {
  color: var(--ae-tinta);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 0 6px;
  background: linear-gradient(transparent 58%, rgba(255, 196, 0, .65) 58%);
}
.rol-btn {
  background: linear-gradient(180deg, #fffefa, #fff6d6);
  border: 1.5px solid var(--ae-linea);
  border-left: 6px solid var(--ae-amarillo);
  box-shadow: 0 6px 18px rgba(150, 110, 0, .16);
}
.rol-btn .rol-nombre { color: var(--ae-tinta); }
.rol-btn .rol-desc { color: #131316; }
.rol-btn .rol-ico { background: var(--ae-amarillo-suave); }
.rol-btn.rol-cliente { border-left-color: #1e7fc2; }
.rol-btn.rol-cliente .rol-ico { background: #e2f1fd; }
.rol-btn.rol-repartidor { border-left-color: #1e9e4a; }
.rol-btn.rol-repartidor .rol-ico { background: #e3f6ea; }
.rol-btn.rol-restaurante { border-left-color: var(--ae-amarillo); }
.rol-btn.rol-restaurante .rol-ico { background: #ffefc2; }
.rol-btn:hover { border-color: var(--ae-amarillo); border-left-color: var(--ae-rojo); }

/* ---------- Restaurantes y platillos ---------- */
.res-ico { background: var(--ae-amarillo-suave); border: 1px solid var(--ae-linea); }
.res-info .meta { color: #131316; }
.estado-cerrado .res-info .nombre { color: #131316; }
.platillo { border-bottom: 1px solid #f7e6ac; }
.platillo-info .p-desc { color: #131316; }
.platillo-info .p-precio { color: var(--ae-rojo-oscuro); }
.agotado .p-nombre { color: #131316; }

/* ---------- Generador de menús ---------- */
.opcion-gen { border: 1.5px dashed #dfb83c; background: #fffbe8; }
.prog { background: #fffbe8; border: 1px solid var(--ae-linea); }
.insignia.pend {
  background: var(--ae-amarillo-suave);
  color: #8a5a00;
  border: 1px solid #e0a800;
}

/* ---------- Pedidos ---------- */
.pedido-cab .folio { color: var(--ae-tinta); }
.pedido-cab .hora { color: #131316; }
.pedido-items { color: #3d382c; }
.pedido-total { color: var(--ae-rojo-oscuro); }
.pedido-det { color: #131316; }

/* ---------- Tablas de reportes ---------- */
.tabla th { color: #131316; }
.tabla th, .tabla td { border-bottom: 1px solid #f7e6ac; }
@media (hover: hover) {
  .tabla tbody tr:hover { background: #fffdf0; }
}
.total-resumen { color: var(--ae-rojo-oscuro); }

/* ---------- Plataformas ---------- */
.plat-cab .plat-nombre { color: var(--ae-tinta); }
.plat-info { color: #131316; }
.plat-info b { color: var(--ae-tinta); }
.checkline { color: #131316; }

/* ---------- Avisos (fondo claro, letra oscura y línea de color) ---------- */
.aviso { background: #fff8e1; border-left-color: var(--ae-amarillo); color: #6b4e00; }
.aviso.azul { background: #e8f4ff; border-left-color: #1e7fc2; color: #0f4f7d; }
.aviso.verde { background: #e6f8ec; border-left-color: #1e9e4a; color: #0f5c2c; }
.aviso.rojo { background: #fdeaea; border-left-color: var(--ae-rojo); color: #8f1116; }

/* ---------- Insignias de estado (de color, con letra blanca) ---------- */
.insignia { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.origen-ae { background: var(--ae-amarillo); color: var(--ae-tinta); }
.origen-uber { background: #0a2647; color: #aef0ff; border: 1px solid #009e5f; }
.origen-rappi { background: #0a2647; color: #ff9a9a; border: 1px solid #e6005c; }
.origen-manual { background: #fff3cc; color: #8a5a00; border: 1px solid #e0a800; }
.est-ia, .est-ue, .est-uc { background: #e9e4d8; color: #5f5947; }
.est-nuevo { background: #1e7fc2; color: #ffffff; }
.est-aceptado { background: #e0a800; color: #3a2600; }
.est-preparacion { background: #c96a00; color: #ffffff; }
.est-listo { background: #1e9e4a; color: #ffffff; }
.est-camino { background: #0d8fd0; color: #ffffff; }
.est-entregado { background: #17803c; color: #ffffff; }
.est-cancelado { background: #c11b25; color: #ffffff; }

/* Estado de conexión con las plataformas */
.plat-no { background: #e9e4d8; color: #5f5947; }
.plat-pend { background: #e0a800; color: #3a2600; }
.plat-con { background: #1e9e4a; color: #ffffff; }
.plat-error { background: #c11b25; color: #ffffff; }
.plat-desc { background: #e9e4d8; color: #8a8171; }

/* ---------- Pie de página ---------- */
.pie { color: #131316; border-top: 1px solid var(--ae-linea); }
.pie a {
  color: var(--ae-rojo-oscuro);
  border-bottom: 1px dotted rgba(168, 18, 26, .45);
}
.pie a:hover { color: var(--ae-rojo); border-bottom-color: var(--ae-rojo); }
.nota-tab, .aviso-priv { color: #131316; }

/* ---------- Estados vacíos ---------- */
.vacio { color: #131316; }
.vacio .grande { filter: drop-shadow(0 8px 16px rgba(255, 180, 0, .40)); }

/* ---------- Avisos flotantes (toasts) ---------- */
.toast { box-shadow: 0 8px 24px rgba(90, 60, 0, .32); }
.toast.info { background: linear-gradient(180deg, #2a90d0, #146cb0); color: #ffffff; }
.toast.ok { background: linear-gradient(180deg, #2fb862, #17803c); color: #ffffff; }
.toast.error { background: linear-gradient(180deg, #e8393f, var(--ae-rojo-oscuro)); color: #ffffff; }

/* ---------- Modales y cargador ---------- */
.modal { background: #fffef8; border: 1.5px solid var(--ae-linea); color: var(--ae-tinta); }
.modal h3 { color: var(--ae-rojo-oscuro); }
.modal-fondo { background: rgba(48, 32, 0, .55); }
#cargando { background: rgba(48, 32, 0, .55); }
.spinner { border: 4px solid rgba(255, 255, 255, .3); border-top-color: var(--ae-amarillo); }

/* ---------- Barras de desplazamiento ---------- */
::-webkit-scrollbar-thumb { background: #e8c96a; }
::-webkit-scrollbar-thumb:hover { background: #d8b34a; }
.tabs::-webkit-scrollbar-thumb { background: #e8c96a; }

/* ---------- Foco visible ---------- */
:focus-visible { outline: 2px solid var(--ae-rojo); outline-offset: 2px; }

/* ---------- Al imprimir: fondo blanco y sin adornos de color ---------- */
@media print {
  html, body { background: #ffffff !important; color: #000000; }
  .card, .pedido, .res-card, .plat-card { background: #ffffff !important; box-shadow: none !important; }
  .card::before { display: none !important; }
  .barra::after { display: none !important; }
}