/*
 * FARO.CSS — Estilos de la tarjeta de pedido de FARO.
 * COPIA de Pedidos_Bitacora/frontend/css/porproveedor.css (no editar aquí sin
 * traer el cambio de allá). Los colores de FARO se declaran SOLO dentro de
 * .faro-vista, para no pisar los de SCOF (que también usa --success, --warning…).
 */
.faro-vista {
    --text-muted: #5D87A0;
    --error: #B3261E;
    --promed-marino: #01446B;
    --text-main: #0C2230;
    --promed-acero: #5D87A0;
    --radius-md: 6px;
    --primary-light: #B7DBE8;
    --border-medium: #B8CBD7;
    --border-light: #DBE5EB;
    --bg-body: #eef3f6;
    --warning: #C2410C;
    --success: #0F7B55;
    --sp-2: 8px;
    --bg-surface: #ffffff;
    --sp-3: 12px;
    --warning-bg: #FBE8DE;
    --error-bg: #FBE4E2;
    --success-bg: #DCF0E7;
    --sp-6: 32px;
    --sp-4: 16px;
    --shadow-sm: 0 1px 2px rgba(1, 68, 107, 0.06);
    --radius-lg: 10px;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    color: var(--text-main);
}

/* ===== Copia de porproveedor.css ===== */
/* ═══════════════════════════════════════════════════════════════════
   ESTADO POR PROVEEDOR
   Vista de consulta para todo PROMED. Densa pero legible: quien entra
   aquí quiere una respuesta, no navegar.
   ═══════════════════════════════════════════════════════════════════ */

.pp-controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3, 12px);
    margin: var(--sp-4, 16px) 0 var(--sp-2, 8px);
}

.pp-buscar { flex: 1 1 260px; }

.pp-buscar input {
    width: 100%;
    padding: 9px 13px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--text-main, #0C2230);
    background: var(--bg-surface, #fff);
    border: 1.5px solid var(--border-medium, #B8CBD7);
    border-radius: var(--radius-md, 6px);
}

.pp-buscar input:focus {
    outline: none;
    border-color: var(--promed-marino, #01446B);
    box-shadow: 0 0 0 3px var(--primary-light, #B7DBE8);
}

.pp-check {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.875rem;
    color: var(--text-muted, #5D87A0);
    cursor: pointer;
    user-select: none;
}

.pp-recargar {
    padding: 9px 16px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--promed-marino, #01446B);
    background: transparent;
    border: 1.5px solid var(--border-medium, #B8CBD7);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
}

.pp-recargar:hover {
    background: var(--bg-body, #eef3f6);
    border-color: var(--promed-marino, #01446B);
}

.pp-resumen {
    margin: 0 0 var(--sp-3, 12px);
    font-size: 0.85rem;
    color: var(--text-muted, #5D87A0);
}

.pp-lista { display: flex; flex-direction: column; gap: var(--sp-3, 12px); }

.pp-vacio {
    padding: var(--sp-6, 24px);
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted, #5D87A0);
    background: var(--bg-surface, #fff);
    border: 1px dashed var(--border-medium, #B8CBD7);
    border-radius: var(--radius-md, 6px);
}

.pp-vacio--error { color: var(--error, #B3261E); border-color: var(--error, #B3261E); }

/* ─── El proveedor ─────────────────────────────────────────────── */

.pp-grupo {
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-light, #DBE5EB);
    border-radius: var(--radius-lg, 10px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(1, 68, 107, 0.06));
    overflow: hidden;
}

.pp-grupo-cabeza {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    width: 100%;
    padding: 14px 16px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-bottom: 1px solid transparent;
}

.pp-grupo-cabeza:hover { background: var(--bg-body, #eef3f6); }
.pp-grupo-cabeza[aria-expanded="true"] { border-bottom-color: var(--border-light, #DBE5EB); }

.pp-grupo-nombre {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--text-main, #0C2230);
}

.pp-grupo-cuenta {
    min-width: 24px;
    padding: 2px 8px;
    font-size: 0.78rem;
    font-weight: 650;
    text-align: center;
    color: var(--promed-marino, #01446B);
    background: var(--primary-light, #B7DBE8);
    border-radius: 99px;
}

.pp-grupo-alerta {
    padding: 2px 9px;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--error, #B3261E);
    background: var(--error-bg, #FBE4E2);
    border-radius: 99px;
}

.pp-grupo-cuerpo {
    padding: var(--sp-2, 8px);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pp-chevron {
    font-size: 0.7rem;
    color: var(--text-muted, #5D87A0);
    transition: transform 0.15s;
}

[aria-expanded="false"] .pp-chevron { transform: rotate(-90deg); }

/* ─── El pedido ────────────────────────────────────────────────── */

.pp-pedido {
    border: 1px solid var(--border-light, #DBE5EB);
    border-left: 3px solid var(--border-medium, #B8CBD7);
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
}

.pp-pedido--rojo     { border-left-color: var(--error, #B3261E); }
.pp-pedido--amarillo { border-left-color: var(--warning, #C2410C); }
.pp-pedido--verde    { border-left-color: var(--success, #0F7B55); }

.pp-pedido-cabeza {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    width: 100%;
    padding: 11px 13px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    background: transparent;
    border: 0;
}

.pp-pedido-cabeza:hover { background: var(--bg-body, #eef3f6); }

.pp-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--border-medium, #B8CBD7);
}

.pp-punto--rojo     { background: var(--error, #B3261E); }
.pp-punto--amarillo { background: var(--warning, #C2410C); }
.pp-punto--verde    { background: var(--success, #0F7B55); }

.pp-dip {
    font-family: var(--font-mono, monospace);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main, #0C2230);
}

.pp-estado {
    flex: 1;
    font-size: 0.82rem;
    color: var(--text-muted, #5D87A0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-dias {
    padding: 2px 8px;
    font-size: 0.74rem;
    font-weight: 650;
    border-radius: 99px;
    color: var(--text-muted, #5D87A0);
    background: var(--bg-body, #eef3f6);
}

.pp-dias--rojo     { color: var(--error, #B3261E);   background: var(--error-bg, #FBE4E2); }
.pp-dias--amarillo { color: var(--warning, #C2410C); background: var(--warning-bg, #FBE8DE); }
.pp-dias--verde    { color: var(--success, #0F7B55); background: var(--success-bg, #DCF0E7); }

.pp-pedido-cuerpo {
    padding: 0 13px 14px;
    border-top: 1px solid var(--border-light, #DBE5EB);
}

/* La frase que interpreta la fila. Es lo primero que se lee al abrir: un
   estado es una etiqueta, y «EN ADUANA» no dice si eso es normal o si lleva
   tres semanas atorado. */
.pp-lectura {
    margin: 12px 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-main, #0C2230);
}

/* ─── El rastreador ────────────────────────────────────────────────
   Como el de una paquetería: el icono grande arriba, la línea debajo.
   Es la forma que la gente de PROMED ya sabe leer sin que nadie le
   explique las 12 etapas.

   El movimiento no es adorno: el hito actual flota y el tramo que
   entra a él fluye, para que se distinga de un vistazo de los que ya
   pasaron —quietos— y de los que faltan —apagados—. */

.pp-rastro { margin: 0 0 16px; }

.pp-rastro-via {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-hito {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* ── El icono, arriba y grande ─────────────────────────────────── */

.pp-hito-icono {
    font-size: 1.45rem;
    line-height: 1;
    height: 1.6em;
    display: flex;
    align-items: center;
    transition: filter 0.2s, opacity 0.2s;
}

/* Lo que ya pasó: a color, pero quieto. */
.pp-hito--hecho .pp-hito-icono { opacity: 0.85; }

/* Lo que falta: apagado, para que no compita con el presente. */
.pp-hito--pendiente .pp-hito-icono { filter: grayscale(1); opacity: 0.35; }

/* Donde está el pedido AHORA: flota. */
.pp-hito--ahora .pp-hito-icono { animation: pp-flotar 2.4s ease-in-out infinite; }

@keyframes pp-flotar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* Detenido: tiembla una vez cada tanto, lo justo para pedir atención. */
.pp-hito--detenido .pp-hito-icono { animation: pp-temblar 3.5s ease-in-out infinite; }

@keyframes pp-temblar {
    0%, 86%, 100%   { transform: translateX(0); }
    89%, 95%        { transform: translateX(-2.5px); }
    92%, 98%        { transform: translateX(2.5px); }
}

/* ── La línea, debajo ──────────────────────────────────────────── */

.pp-hito-via {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 14px;
}

.pp-tramo {
    position: absolute;
    top: 50%;
    right: 50%;
    left: -50%;
    height: 3px;
    margin-top: -1.5px;
    background: var(--border-light, #DBE5EB);
    border-radius: 3px;
}

.pp-hito--hecho .pp-tramo,
.pp-hito--ahora .pp-tramo,
.pp-hito--detenido .pp-tramo { background: var(--promed-acero, #5D87A0); }

/* El tramo que entra al hito actual fluye: la carga va por ahí. */
.pp-hito--ahora .pp-tramo {
    background: linear-gradient(
        90deg,
        var(--promed-acero, #5D87A0) 0%,
        var(--primary-light, #B7DBE8) 50%,
        var(--promed-acero, #5D87A0) 100%
    );
    background-size: 200% 100%;
    animation: pp-fluir 1.6s linear infinite;
}

@keyframes pp-fluir {
    from { background-position: 100% 0; }
    to   { background-position: -100% 0; }
}

.pp-marca {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 0.56rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    border-radius: 50%;
    background: var(--bg-surface, #fff);
    border: 2.5px solid var(--border-medium, #B8CBD7);
    transition: background 0.2s, border-color 0.2s;
}

.pp-hito--hecho .pp-marca {
    background: var(--promed-acero, #5D87A0);
    border-color: var(--promed-acero, #5D87A0);
}

.pp-hito--ahora .pp-marca {
    background: var(--promed-marino, #01446B);
    border-color: var(--promed-marino, #01446B);
    animation: pp-latir 2s ease-out infinite;
}

/* El anillo que se expande y se apaga: el pulso del pedido vivo. */
@keyframes pp-latir {
    0%   { box-shadow: 0 0 0 0 rgba(1, 68, 107, 0.4); }
    70%  { box-shadow: 0 0 0 10px rgba(1, 68, 107, 0); }
    100% { box-shadow: 0 0 0 0 rgba(1, 68, 107, 0); }
}

.pp-hito--detenido .pp-marca {
    background: var(--error, #B3261E);
    border-color: var(--error, #B3261E);
}

.pp-hito--pendiente .pp-marca { opacity: 0.5; }

/* ── El nombre ─────────────────────────────────────────────────── */

.pp-hito-nombre {
    font-size: 0.68rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
    color: var(--text-muted, #5D87A0);
}

.pp-hito--ahora .pp-hito-nombre { color: var(--promed-marino, #01446B); font-weight: 700; }
.pp-hito--hecho .pp-hito-nombre { color: var(--text-main, #0C2230); }
.pp-hito--detenido .pp-hito-nombre { color: var(--error, #B3261E); font-weight: 700; }
.pp-hito--pendiente .pp-hito-nombre { opacity: 0.55; }

/* Un pedido cancelado no sigue su curso: se apaga entero y deja de moverse. */
.pp-rastro--cancelado .pp-rastro-via { opacity: 0.4; filter: grayscale(1); }
.pp-rastro--cancelado .pp-hito-icono { animation: none; }

.pp-rastro-frase {
    margin: 12px 0 0;
    font-size: 0.84rem;
    line-height: 1.5;
    text-align: center;
    color: var(--text-muted, #5D87A0);
}

.pp-rastro--detenido .pp-rastro-frase { color: var(--error, #B3261E); font-weight: 600; }

.pp-rastro-etapa {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted, #5D87A0);
    background: var(--bg-body, #eef3f6);
    border-radius: 99px;
}

/* Quien pidió menos movimiento ve lo mismo, quieto: el estado se distingue
   por color y por el anillo fijo, no por la animación. */
@media (prefers-reduced-motion: reduce) {
    .pp-hito-icono,
    .pp-hito--ahora .pp-tramo,
    .pp-hito--ahora .pp-marca { animation: none; }
    .pp-hito--ahora .pp-marca { box-shadow: 0 0 0 4px var(--primary-light, #B7DBE8); }
}

/* En pantalla estrecha el icono manda y el nombre encoge. */
@media (max-width: 420px) {
    .pp-hito-icono { font-size: 1.2rem; }
    .pp-hito-nombre { font-size: 0.58rem; }
}

.pp-siguiente, .pp-observacion {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--bg-body, #eef3f6);
    border-radius: var(--radius-md, 6px);
}

.pp-siguiente-etiqueta {
    display: block;
    margin-bottom: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, #5D87A0);
}

.pp-siguiente p, .pp-observacion p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-main, #0C2230);
}

.pp-alerta {
    display: flex;
    gap: 9px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--warning-bg, #FBE8DE);
    border-radius: var(--radius-md, 6px);
}

.pp-alerta p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-main, #0C2230);
}

.pp-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px 16px;
    margin: 0 0 12px;
}

.pp-dato--ancho { grid-column: 1 / -1; }

.pp-dato dt {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted, #5D87A0);
}

.pp-dato dd {
    margin: 2px 0 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text-main, #0C2230);
    word-break: break-word;
}

/* Qué tan de fiar es lo que se acaba de leer. Quien consulta tiene derecho a
   saber si la hoja está cruzada con el correo o si lleva semanas sin tocarse. */
.pp-confianza {
    margin: 0;
    padding-top: 10px;
    font-size: 0.78rem;
    border-top: 1px dashed var(--border-light, #DBE5EB);
    color: var(--text-muted, #5D87A0);
}

/* «Por cerrar»: la carga llegó y la fila sigue abierta. Necesita a alguien,
   pero no es un fuego — y mezclarlo con los rojos esconde los que sí lo son.
   Por eso lleva el azul de la casa y no el rojo de alarma. */
.pp-pedido--cerrar { border-left-color: var(--promed-acero, #5D87A0); }
.pp-punto--cerrar  { background: var(--promed-acero, #5D87A0); }

.pp-dias--cerrar {
    color: var(--promed-marino, #01446B);
    background: var(--primary-light, #B7DBE8);
}

.pp-grupo-cerrar {
    padding: 2px 9px;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--promed-marino, #01446B);
    background: var(--primary-light, #B7DBE8);
    border-radius: 99px;
}

.pp-confianza--rojo::before     { content: '\26A0  '; color: var(--error, #B3261E); }
.pp-confianza--verde::before    { content: '\2713  '; color: var(--success, #0F7B55); }
.pp-confianza--amarillo::before { content: '\2022  '; color: var(--warning, #C2410C); }

@media (max-width: 560px) {
    .pp-estado { display: none; }
    .pp-datos { grid-template-columns: 1fr; }
}


/* ===== Propio de SCOF: la ventana grande de estado de pedidos ===== */
.faro-vista .pp-lista { display: flex; flex-direction: column; gap: 10px; }
.faro-encabezado {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 14px; font-size: 12px; color: var(--text-muted);
}
.faro-encabezado b { color: var(--text-main); }
.faro-recargar {
    border: 1px solid var(--border-medium); background: var(--bg-surface); color: var(--promed-marino);
    border-radius: var(--radius-md); padding: 6px 12px; font-size: 11px; font-weight: 700; cursor: pointer;
}
.faro-recargar:hover { background: var(--bg-body); }
.faro-pie-tarjeta {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
    border-top: 1px dashed var(--border-light); margin-top: 12px; padding-top: 8px;
}
.faro-pie-tarjeta .pp-confianza { margin: 0; border: 0; padding: 0; }
.faro-abrir { font-size: 11px; font-weight: 700; color: var(--promed-marino); text-decoration: none; white-space: nowrap; }
.faro-abrir:hover { text-decoration: underline; }
.faro-cargando { padding: 40px 10px; text-align: center; color: var(--text-muted); font-size: 13px; }
.faro-ausente .pp-punto { background: var(--border-medium); }