/*
 * Panel de aprobación (APROB-002)
 * Vista: src/app/views/flujo_aprobacion/panel.blade.php (lo inyecta aprobaciones.js).
 * Neutros slate, estados emerald/amber/rose/sky y acento violeta, como la maqueta.
 */

/* ---------- Contenedor y cabecera ---------- */
.aprob-panel.panel {
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    background-color: #fff;
}
.aprob-panel > .aprob-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    border-radius: 12px 12px 0 0;
    color: #0f172a;
}
.aprob-panel > .aprob-head > strong {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
}
/* Icono en recuadro violeta (Font Awesome puede llegar como <i> o como <svg>) */
.aprob-panel > .aprob-head > strong > i,
.aprob-panel > .aprob-head > strong > .svg-inline--fa {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    padding: 8px;
    border: 1px solid #ddd6fe;
    border-radius: 10px;
    background-color: #f5f3ff;
    color: #7c3aed;
    text-align: center;
    line-height: 14px;
}
.aprob-panel > .panel-body {
    padding: 16px;
}

/* ---------- Pastillas de estatus ---------- */
.aprob-panel .label.aprob-pill {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background-color: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
}
.aprob-panel .label.aprob-pill.label-success { background-color: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.aprob-panel .label.aprob-pill.label-warning { background-color: #fffbeb; border-color: #fde68a; color: #b45309; }
.aprob-panel .label.aprob-pill.label-danger  { background-color: #fff1f2; border-color: #fecdd3; color: #be123c; }
.aprob-panel .label.aprob-pill.label-info    { background-color: #f0f9ff; border-color: #bae6fd; color: #0369a1; }

/* ---------- Mensajes y solicitante ---------- */
.aprob-panel .aprob-alert {
    margin-bottom: 12px;
    border-radius: 8px;
}
.aprob-panel .panel-body > .aprob-alert:last-child {
    margin-bottom: 0;
}
.aprob-panel .aprob-solicitud {
    margin-bottom: 12px;
    color: #64748b;
}
.aprob-panel .aprob-solicitud strong {
    color: #0f172a;
}

/* ---------- Pasos como tarjetas ---------- */
.aprob-panel .aprob-pasos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 0 0 12px;
    padding: 14px;
    list-style: none;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    counter-reset: aprob-paso;
}
.aprob-panel .aprob-paso {
    position: relative;
    padding: 14px 16px;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    counter-increment: aprob-paso;
    --paso-bg: #f1f5f9; --paso-bd: #e2e8f0; --paso-fg: #64748b;
}
.aprob-panel .aprob-paso.is-success { --paso-bg: #ecfdf5; --paso-bd: #a7f3d0; --paso-fg: #047857; }
.aprob-panel .aprob-paso.is-warning { --paso-bg: #fffbeb; --paso-bd: #fde68a; --paso-fg: #b45309; }
.aprob-panel .aprob-paso.is-danger  { --paso-bg: #fff1f2; --paso-bd: #fecdd3; --paso-fg: #be123c; }
.aprob-panel .aprob-paso.is-info    { --paso-bg: #f0f9ff; --paso-bd: #bae6fd; --paso-fg: #0369a1; }
/* Número del paso */
.aprob-panel .aprob-paso::before {
    content: counter(aprob-paso);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: 10px;
    border: 1px solid var(--paso-bd);
    border-radius: 50%;
    background-color: var(--paso-bg);
    color: var(--paso-fg);
    font-size: 13px;
    font-weight: 700;
}
.aprob-panel .aprob-paso > strong {
    display: block;
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
}
.aprob-panel .aprob-paso > .aprob-pill {
    position: absolute;
    top: 14px;
    right: 14px;
}
.aprob-panel .aprob-paso > br {
    display: none;
}
.aprob-panel .aprob-paso > .text-muted {
    display: block;
    margin-top: 4px;
    color: #64748b;
}

/* ---------- Acciones ---------- */
.aprob-panel .aprob-acciones textarea {
    margin-bottom: 8px;
    border-color: #cbd5e1;
    border-radius: 8px;
}
.aprob-panel .aprob-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.aprob-panel .aprob-delegar {
    margin-top: 8px;
}
.aprob-panel .aprob-delegar select {
    width: auto;
    max-width: 100%;
    border-radius: 6px;
}

/* ---------- Historial y solicitudes anteriores ---------- */
.aprob-panel .aprob-historial {
    margin-top: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background-color: #fff;
}
.aprob-panel .aprob-historial > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: #0f172a;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    border-radius: 12px;
}
.aprob-panel .aprob-historial > summary::-webkit-details-marker { display: none; }
.aprob-panel .aprob-historial > summary:hover { background-color: #f8fafc; }
.aprob-panel .aprob-historial > summary::before {
    content: "\21BA"; /* ↺ */
    color: #7c3aed;
    font-size: 16px;
    line-height: 1;
}
.aprob-panel .aprob-historial > summary::after {
    content: "\203A"; /* › */
    margin-left: auto;
    color: #64748b;
    font-size: 18px;
    line-height: 1;
    transition: transform .2s ease;
}
.aprob-panel .aprob-historial[open] > summary {
    border-bottom: 1px solid #f1f5f9;
    border-radius: 12px 12px 0 0;
}
.aprob-panel .aprob-historial[open] > summary::after {
    transform: rotate(90deg);
}
.aprob-panel .aprob-historial > ul {
    margin: 0;
    padding: 4px 14px;
}

/* Renglón del historial con icono por acción */
.aprob-panel .aprob-h {
    position: relative;
    padding: 12px 0 12px 40px;
    color: #475569;
    --h-bg: #f1f5f9; --h-bd: #e2e8f0; --h-fg: #64748b; --h-ico: "\2022";
}
.aprob-panel .aprob-h + .aprob-h {
    border-top: 1px solid #f1f5f9;
}
.aprob-panel .aprob-h::before {
    content: var(--h-ico);
    position: absolute;
    left: 0;
    top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--h-bd);
    border-radius: 50%;
    background-color: var(--h-bg);
    color: var(--h-fg);
    font-size: 13px;
    font-weight: 700;
}
.aprob-panel .aprob-h.is-aprobado  { --h-bg: #ecfdf5; --h-bd: #a7f3d0; --h-fg: #047857; --h-ico: "\2713"; } /* ✓ */
.aprob-panel .aprob-h.is-rechazado { --h-bg: #fff1f2; --h-bd: #fecdd3; --h-fg: #be123c; --h-ico: "\2715"; } /* ✕ */
.aprob-panel .aprob-h.is-devuelto  { --h-bg: #f0f9ff; --h-bd: #bae6fd; --h-fg: #0369a1; --h-ico: "\21A9"; } /* ↩ */
.aprob-panel .aprob-h.is-enviado   { --h-bg: #f5f3ff; --h-bd: #ddd6fe; --h-fg: #7c3aed; --h-ico: "\27A4"; } /* ➤ */
.aprob-panel .aprob-h.is-delegado  { --h-bg: #f5f3ff; --h-bd: #ddd6fe; --h-fg: #7c3aed; --h-ico: "\21C4"; } /* ⇄ */
.aprob-panel .aprob-h:is(.is-cancelado, .is-omitido, .is-invalidado) { --h-ico: "\2298"; } /* ⊘ */
.aprob-panel .aprob-h > strong {
    color: #0f172a;
}
.aprob-panel .aprob-h > br {
    display: none;
}
.aprob-panel .aprob-h > .aprob-comentario {
    display: block;
    margin-top: 6px;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background-color: #f8fafc;
    color: #334155;
}

.aprob-panel .aprob-previa {
    padding: 8px 0;
    color: #475569;
}
.aprob-panel .aprob-previa + .aprob-previa {
    border-top: 1px solid #f1f5f9;
}