/* Panel del dueño — capa visual "Bandeja limpia" (propuesta A, octubre 2026).
   Se carga DESPUÉS de app.css y solo en /admin: el portal de clientes no la ve.
   Solo cambia el aspecto. Los botones, el orden y el comportamiento son los
   mismos de admin.js; por eso aquí no hay clases nuevas, solo las que ya existen.

   Cubre todo el panel: cabecera, indicadores, catálogo, pestañas y las
   cuatro secciones (pedidos, oferta de la semana, clientes y feriados). */

/* Manrope alojada en el propio servidor: la CSP del portal (style-src 'self')
   bloquea Google Fonts. */
@font-face {
    font-family: "Manrope";
    src: url("/fonts/manrope-latin.woff2") format("woff2");
    font-weight: 400 800;
    font-display: swap;
}

body.panel-admin {
    --sombra-suave: 0 1px 2px rgba(43, 73, 96, 0.06), 0 8px 24px rgba(43, 73, 96, 0.06);
    --sombra-alta: 0 2px 4px rgba(43, 73, 96, 0.06), 0 16px 36px rgba(43, 73, 96, 0.12);
    --pizarra: #3D5166;
    --ambar: #f0b429;

    background: #f4f6f9;
    font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15.5px;
}

.panel-admin .pantalla--ancha { max-width: 60rem; }

/* --- cabecera ----------------------------------------------------------- */

.panel-admin .barra {
    border: 0;
    border-radius: 18px;
    box-shadow: var(--sombra-suave);
    padding: 0.9rem 1.1rem;
}

.panel-admin .barra__local { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }

/* --- indicadores (pendientes / confirmados / anulados) -------------------- */

.panel-admin .tarjetas-resumen { gap: 0.75rem; }

.panel-admin .tarjeta-resumen {
    position: relative;
    overflow: hidden;
    text-align: left;
    border: 0;
    border-radius: 18px;
    background: #fff;
    padding: 1rem 1.1rem 1rem 1.3rem;
    box-shadow: var(--sombra-suave);
}

/* El acento de la izquierda: rojo solo en "pendientes", que es lo que hay que
   atender. Los otros quedan en pizarra suave. */
.panel-admin .tarjeta-resumen::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--pizarra);
    opacity: 0.35;
}

.panel-admin .tarjeta-resumen--destacada { background: #fff; }
.panel-admin .tarjeta-resumen--destacada::before { background: var(--rojo); opacity: 1; }

.panel-admin .tarjeta-resumen__numero { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.panel-admin .tarjeta-resumen__texto { text-transform: none; font-weight: 600; color: var(--pizarra); margin-top: 0.25rem; }
.panel-admin .tarjeta-resumen__monto { font-weight: 700; color: var(--navy); }

/* --- catálogo ----------------------------------------------------------- */

.panel-admin .sync { border: 0; border-radius: 18px; background: #fff; box-shadow: var(--sombra-suave); }

/* --- pestañas y filtros ------------------------------------------------- */

.panel-admin .chips { gap: 0.4rem; }

.panel-admin .chip {
    border-radius: 10px;
    border-color: transparent;
    background: #e8edf2;
    color: var(--pizarra);
    font-weight: 700;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.panel-admin .chip:hover { background: #dde4eb; }

.panel-admin .chip.chip--activo {
    background: var(--navy);
    color: #fff;
    box-shadow: 0 4px 12px rgba(43, 73, 96, 0.25);
}

/* --- tarjetas (pedidos, ofertas, clientes, feriados) ------------------- */

/* Cada tarjeta con su alto: abrir el detalle o la edición de una no estira
   a la de al lado. */
.panel-admin .productos { gap: 0.8rem; align-items: start; }

/* El borde de la izquierda dice el estado sin leer la etiqueta. Sin estado
   (feriados) queda en pizarra. */
.panel-admin .productos > .producto {
    border: 0;
    border-left: 4px solid #c3ccd5;
    border-radius: 16px;
    background: #fff;
    padding: 1.1rem 1.2rem;
    box-shadow: var(--sombra-suave);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Ámbar: espera algo (pedido pendiente, cliente por aprobar, oferta
   programada). Lima: activo. Gris: cerrado. Rojo claro: rechazado. */
.panel-admin .productos > .producto:has(> .producto__cabecera .estado--pendiente) { border-left-color: var(--ambar); }
.panel-admin .productos > .producto:has(> .producto__cabecera .estado--confirmado),
.panel-admin .productos > .producto:has(> .producto__cabecera .estado--aprobado) { border-left-color: var(--lima); }
.panel-admin .productos > .producto:has(> .producto__cabecera .estado--anulado),
.panel-admin .productos > .producto:has(> .producto__cabecera .estado--suspendido) { border-left-color: #c3ccd5; }
.panel-admin .productos > .producto:has(> .producto__cabecera .estado--rechazado) { border-left-color: #e8a0a0; }

/* La oferta vigente es la que se está vendiendo: rojo de marca. Con el id
   para ganarle a la regla por estado de arriba (su etiqueta es "vigente" en
   verde, estado--confirmado). */
.panel-admin #lista-ofertas > .producto.producto--vigente {
    border-left-color: var(--rojo);
    background: linear-gradient(100deg, #fff 0%, #fff8f7 100%);
}

/* Solo se levanta con mouse: en el celular el "hover" queda pegado al tocar. */
@media (hover: hover) {
    .panel-admin .productos > .producto:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
}

/* Un correo o una dirección larga se corta en vez de ensanchar la tarjeta (en
   el celular empujaba la pantalla de clientes hacia el lado). */
.panel-admin .productos > .producto { min-width: 0; }
.panel-admin .productos .producto__nombre { font-size: 1rem; font-weight: 800; overflow-wrap: anywhere; }
.panel-admin .productos .producto__meta { font-size: 0.86rem; overflow-wrap: anywhere; }
.panel-admin .productos .precio { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); }
.panel-admin .estado { border-radius: 999px; font-weight: 700; padding: 0.2rem 0.6rem; }

.panel-admin .productos > .producto > .controles {
    /* Un cliente tiene hasta cinco acciones: en el celular pasan a otra fila
       en vez de salirse de la tarjeta. Mismo orden. */
    flex-wrap: wrap;
    row-gap: 0.3rem;
    border-top: 1px solid #eef1f4;
    padding-top: 0.7rem;
    margin-top: 0.6rem;
}

/* --- formularios (nueva oferta, agregar feriado, editar cliente) -------- */

.panel-admin .titulo-seccion { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; color: var(--navy); }

.panel-admin .tarjeta.panel {
    border: 0;
    border-radius: 18px;
    box-shadow: var(--sombra-suave);
    padding: 1.3rem 1.3rem 1.4rem;
    margin-bottom: 1.4rem;
}

.panel-admin .campo label { font-weight: 700; color: var(--navy); }

.panel-admin .campo input,
.panel-admin .campo select,
.panel-admin .campo textarea,
.panel-admin .campo input[type="date"],
.panel-admin .campo input[type="number"] {
    border-radius: 12px;
    border-color: #d5dde4;
    background-color: #fbfcfd;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.panel-admin .campo input:focus,
.panel-admin .campo select:focus,
.panel-admin .campo textarea:focus {
    border-color: var(--navy);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(43, 73, 96, 0.12);
    outline: none;
}

/* El botón principal del formulario, a lo ancho y con el mismo trato que Confirmar. */
.panel-admin .tarjeta.panel .boton {
    border-radius: 12px;
    min-height: 48px;
    box-shadow: 0 6px 16px rgba(204, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.panel-admin .tarjeta.panel .boton:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(204, 0, 0, 0.3); }
.panel-admin .tarjeta.panel .boton:active { transform: translateY(0) scale(0.99); }

/* Buscador de productos de la oferta. */
.panel-admin .sugerencias { border: 0; border-radius: 12px; box-shadow: var(--sombra-alta); }
.panel-admin .sugerencia { padding: 0.7rem 0.9rem; border-bottom-color: #eef1f4; }
.panel-admin .elegido { border-radius: 10px; padding: 0.55rem 0.75rem; }

/* --- clientes ----------------------------------------------------------- */

.panel-admin .contador { border-radius: 999px; font-weight: 800; }

.panel-admin .filtro-dias {
    background: #fff;
    border-radius: 14px;
    padding: 0.6rem 0.9rem;
    box-shadow: var(--sombra-suave);
}

.panel-admin .filtro-dias select { border-radius: 10px; border-color: #d5dde4; padding: 0.45rem 0.6rem; font: inherit; }

/* Ficha abierta del cliente: equipos, edición e historial. */
.panel-admin .detalle__caja { border-radius: 14px; }
.panel-admin .equipo { border: 0; border-radius: 12px; background: #f4f6f9; }
.panel-admin .historial-datos li { border-radius: 12px; }
.panel-admin .alerta-equipos { border-radius: 12px; }

/* --- avisos y vacíos ---------------------------------------------------- */

.panel-admin .aviso { border-radius: 12px; }

.panel-admin .vacio {
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--sombra-suave);
    font-weight: 600;
}

/* --- botones ------------------------------------------------------------ */

.panel-admin .boton-agregar {
    border-radius: 12px;
    min-height: 44px;
    padding: 0 1.2rem;
    box-shadow: 0 6px 16px rgba(204, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.panel-admin .boton-agregar:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(204, 0, 0, 0.3); }
.panel-admin .boton-agregar:active { transform: translateY(0) scale(0.98); }
.panel-admin .boton-agregar:disabled { transform: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
    .panel-admin .productos > .producto,
    .panel-admin .boton-agregar,
    .panel-admin .tarjeta.panel .boton,
    .panel-admin .chip { transition: none; }
    .panel-admin .productos > .producto:hover,
    .panel-admin .boton-agregar:hover,
    .panel-admin .tarjeta.panel .boton:hover { transform: none; }
}

/* --- alerta de pedido nuevo -------------------------------------------- */

/* Pegada arriba mientras haya pedidos sin ver: se ve aunque el panel esté
   recorrido hacia abajo. Rojo de marca: es lo que hay que atender. */
.panel-admin .alerta-pedido {
    position: sticky;
    top: 0.5rem;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    margin-bottom: 0.9rem;
    padding: 0.85rem 1rem 0.85rem 1.1rem;
    border-radius: 16px;
    background: #fff;
    border-left: 5px solid var(--rojo);
    box-shadow: 0 10px 30px rgba(204, 0, 0, 0.22);
    animation: alerta-entra 0.35s ease-out, alerta-pulso 2s ease-in-out 0.35s infinite;
}

.panel-admin .alerta-pedido__texto { margin: 0; display: grid; gap: 0.1rem; min-width: 0; }
.panel-admin .alerta-pedido__texto strong { font-size: 1.05rem; font-weight: 800; color: var(--rojo); }
.panel-admin .alerta-pedido__texto span { font-size: 0.92rem; font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
.panel-admin .alerta-pedido__acciones { display: flex; align-items: center; gap: 0.4rem; }

@keyframes alerta-entra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes alerta-pulso {
    0%, 100% { box-shadow: 0 10px 30px rgba(204, 0, 0, 0.22); }
    50% { box-shadow: 0 10px 34px rgba(204, 0, 0, 0.42); }
}

/* Barra con el estado de las alertas y sus botones. */
.panel-admin .alertas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.9rem;
    padding: 0.7rem 1rem 0.7rem 1.2rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--sombra-suave);
    border-left: 4px solid #c3ccd5;
}

.panel-admin .alertas--activas { border-left-color: var(--lima); }
.panel-admin .alertas__estado { margin: 0; font-size: 0.88rem; font-weight: 600; color: var(--pizarra); flex: 1 1 16rem; }
.panel-admin .alertas__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }

/* El pedido al que se llegó desde la alerta, marcado unos segundos. */
.panel-admin #lista-pedidos > .producto.producto--resaltado {
    box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.45), var(--sombra-alta);
}

@media (prefers-reduced-motion: reduce) {
    .panel-admin .alerta-pedido { animation: none; }
}