/* ============================================================================
   ALS EATS — capa de acabado visual (SOLO IMAGEN)
   ----------------------------------------------------------------------------
   · Se carga DESPUÉS de css/base.css (no lo reemplaza).
   · NO cambia el logo, NI los textos, NI las funciones (precios, pedidos, etc.).
   · Solo afina: color, profundidad, sombras, bordes, transiciones y detalles.
   · PARA REVERTIR: borra la línea
        <link rel="stylesheet" href="css/pro.css">
     en web/index.html y listo (todo vuelve a como estaba).
   ============================================================================ */

:root {
  --ae-oro: #f5b301;
  --ae-oro-claro: #ffd154;
  --ae-teal: #31a1c4;
  --ae-verde: #4cd07d;
  --ae-panel: #182524;
  --ae-panel-alto: #1d2c2b;
  --ae-borde: #264040;
  --ae-borde-claro: #33565a;
  --ae-anim: .18s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Fondo oscuro con brillos de color ---------- */
body {
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(245, 179, 1, .12), rgba(245, 179, 1, 0) 60%),
    radial-gradient(900px 520px at 92% -4%, rgba(49, 161, 196, .14), rgba(49, 161, 196, 0) 60%),
    linear-gradient(180deg, #0f1c1f 0%, #0a1416 100%);
  background-attachment: fixed;
}

/* ---------- Barra superior con profundidad, desenfoque y línea de color ---------- */
.barra {
  background: linear-gradient(180deg, rgba(15, 28, 31, .98), rgba(15, 28, 31, .86));
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid rgba(245, 179, 1, .18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.barra::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  opacity: .85;
  background: linear-gradient(90deg,
    rgba(245, 179, 1, 0),
    var(--ae-oro) 30%,
    var(--ae-teal) 70%,
    rgba(49, 161, 196, 0));
}
.barra .logo {
  box-shadow: 0 4px 16px rgba(245, 179, 1, .35);
  transition: transform var(--ae-anim), box-shadow var(--ae-anim);
}
.barra .logo:hover { transform: translateY(-1px) scale(1.03); }

/* ---------- Títulos de sección con barra dorada ---------- */
.titulo-sec::before {
  content: "";
  width: 5px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--ae-oro-claro), var(--ae-oro));
  box-shadow: 0 0 10px rgba(245, 179, 1, .40);
}

/* ---------- Tarjetas: color + borde fino + sombra + reacción al pasar ---------- */
.card,
.res-card,
.pedido,
.plat-card,
.panel-cab,
.gen-prod {
  position: relative;
  background: linear-gradient(180deg, var(--ae-panel-alto), var(--ae-panel));
  border-color: var(--ae-borde);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  transition: transform var(--ae-anim), box-shadow var(--ae-anim), border-color var(--ae-anim);
}
/* franja de color en la parte superior de las tarjetas principales */
.card::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 2px;
  border-radius: 2px;
  opacity: .85;
  background: linear-gradient(90deg, var(--ae-oro), rgba(49, 161, 196, .85));
}
@media (hover: hover) {
  .card:hover, .res-card:hover, .pedido:hover, .plat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .45);
    border-color: var(--ae-borde-claro);
  }
}

/* ---------- Botones: degradados de color y respuesta al tocar ---------- */
.btn {
  font-weight: 600;
  letter-spacing: .2px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
  transition: transform .12s ease, filter .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(180deg, var(--ae-oro-claro), var(--ae-oro));
  border-color: #c99200;
  box-shadow: 0 6px 18px rgba(245, 179, 1, .35);
}
.btn.primary:hover { box-shadow: 0 10px 26px rgba(245, 179, 1, .50); }
.btn.ok     { background: linear-gradient(180deg, #2a9257, #1f6e43); }
.btn.warn   { background: linear-gradient(180deg, #b27a00, #8a5a00); }
.btn.danger { background: linear-gradient(180deg, #a03131, #7a2323); }
.btn.ghost  { border-color: var(--ae-borde-claro); color: var(--ae-oro-claro); }

/* ---------- Botones de rol (cliente / restaurante / repartidor) con color ---------- */
.rol-btn {
  background: linear-gradient(180deg, #1d2c2b, #151f1f);
  border-left: 4px solid var(--ae-oro);
}
.rol-btn .rol-ico {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: rgba(245, 179, 1, .14);
}
.rol-btn.rol-cliente      { border-left-color: var(--ae-teal); }
.rol-btn.rol-cliente      .rol-ico { background: rgba(49, 161, 196, .16); }
.rol-btn.rol-restaurante  { border-left-color: var(--ae-oro); }
.rol-btn.rol-restaurante  .rol-ico { background: rgba(245, 179, 1, .16); }
.rol-btn.rol-repartidor   { border-left-color: var(--ae-verde); }
.rol-btn.rol-repartidor   .rol-ico { background: rgba(76, 208, 125, .16); }
.rol-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }

/* ---------- Campos de formulario: foco moderno ---------- */
.campo input, .campo select, .campo textarea {
  background: #101c1c;
  border-color: var(--ae-borde-claro);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #3d6468; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--ae-oro);
  box-shadow: 0 0 0 3px rgba(245, 179, 1, .18);
}

/* ---------- Pestañas y chips ---------- */
.tabs .tab, .sel-rol .chip, .rol-btn { transition: all var(--ae-anim); }
@media (hover: hover) {
  .tabs .tab:hover, .sel-rol .chip:hover { border-color: var(--ae-oro); color: #fff; }
}
.tabs .tab.act, .sel-rol .chip.act {
  border-color: var(--ae-oro);
  box-shadow: 0 6px 16px rgba(245, 179, 1, .32);
}

/* ---------- Cabeceras de panel ---------- */
.panel-cab { background: linear-gradient(180deg, rgba(245, 179, 1, .10), var(--ae-panel)); }
.panel-rol { text-shadow: 0 0 12px rgba(245, 179, 1, .35); }

/* ---------- Tablas de reportes ---------- */
.tabla tbody tr { transition: background .15s ease; }
@media (hover: hover) {
  .tabla tbody tr:hover { background: rgba(245, 179, 1, .05); }
}

/* ---------- Insignias y títulos (sutil) ---------- */
.insignia, .titulo-sec, .card h2 { letter-spacing: .2px; }
.insignia { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }

/* ---------- Pie de página ---------- */
.pie a {
  text-decoration: none;
  border-bottom: 1px dotted rgba(245, 179, 1, .5);
  transition: color var(--ae-anim), border-color var(--ae-anim);
}
.pie a:hover { color: var(--ae-oro); border-bottom-color: var(--ae-oro); }

/* ---------- Estados vacíos / cargando ---------- */
.vacio .grande { filter: drop-shadow(0 8px 16px rgba(245, 179, 1, .25)); }

/* ---------- Modales ---------- */
.modal { box-shadow: 0 24px 60px rgba(0, 0, 0, .55); border-color: var(--ae-borde-claro); }
.modal-fondo { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* ---------- Barras de desplazamiento discretas ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #2a3c3c; border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #3a5454; background-clip: content-box; }

/* ---------- Accesibilidad: foco visible ---------- */
:focus-visible { outline: 2px solid var(--ae-oro); outline-offset: 2px; }

/* ---------- Respeta “reducir movimiento” del sistema ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: .001s !important; }
}