/*
 * Lebana — núcleo de diseño compartido por la web pública, el área de cliente
 * y gestión: la paleta y las medidas (tokens), los sellos de estado y las
 * animaciones. Lo propio de cada zona va en lebana.css (web y cliente) y en
 * gestion.css (gestión), que se cargan después de este fichero.
 */

:root {
    /* Marca */
    --lb-orange: #ff6b35;          /* acento: iconos, subrayados, detalles */
    --lb-orange-strong: #cf4416;   /* fondos con texto blanco (AA 4,7:1) */
    --lb-orange-deep: #b8370f;     /* hover y enlaces */
    --lb-orange-soft: #fff1ea;
    --lb-ink: #1b2233;             /* azul marino del logotipo */
    --lb-ink-2: #3a4357;
    --lb-muted: #5b6475;
    --lb-line: #e6e1d9;
    --lb-line-strong: #d3ccc1;
    --lb-paper: #faf8f5;
    --lb-surface: #ffffff;
    --lb-radius: 12px;
    --lb-radius-sm: 8px;
    --lb-focus: 0 0 0 3px rgba(255, 107, 53, 0.28);

    /* Estados (sellos) */
    --lb-pending-bg: #fff6e0;  --lb-pending-fg: #8a5a00;  --lb-pending-line: #efc66a;
    --lb-transit-bg: #eaf1ff;  --lb-transit-fg: #1f4fa8;  --lb-transit-line: #a9c2f2;
    --lb-done-bg: #e8f6ee;     --lb-done-fg: #17663d;     --lb-done-line: #9fd6b5;
    --lb-alert-bg: #fdecec;    --lb-alert-fg: #a32121;    --lb-alert-line: #f0a8a8;
    --lb-neutral-bg: #f1efeb;  --lb-neutral-fg: #4a5160;  --lb-neutral-line: #d8d2c8;

    /* Compatibilidad con las variables que ya usan las plantillas */
    --brand-50: var(--lb-orange-soft);
    --brand-100: #ffe1d2;
    --brand-400: var(--lb-orange);
    --brand-500: var(--lb-orange);
    --brand-600: var(--lb-orange-strong);
    --brand-700: var(--lb-orange-deep);
    --gray-50: var(--lb-paper);
    --gray-100: #f3f0eb;
    --gray-200: var(--lb-line);
    --gray-300: var(--lb-line-strong);
    --gray-500: var(--lb-muted);
    --gray-600: var(--lb-ink-2);
    --gray-700: var(--lb-ink-2);
    --text-color: var(--lb-ink);
    --surface: var(--lb-surface);
    --radius-lg: var(--lb-radius);
    --shadow-soft: none;
    --brand-gradient: var(--lb-orange-strong);
    --brand-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Sellos de estado                                                     */
/* ------------------------------------------------------------------ */

.lb-stamp {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    border: 1.5px solid var(--lb-neutral-line);
    background: var(--lb-neutral-bg);
    color: var(--lb-neutral-fg);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

.lb-stamp i {
    font-size: 0.75rem;
}

.lb-stamp--pending { background: var(--lb-pending-bg); color: var(--lb-pending-fg); border-color: var(--lb-pending-line); }
.lb-stamp--transit { background: var(--lb-transit-bg); color: var(--lb-transit-fg); border-color: var(--lb-transit-line); }
.lb-stamp--done    { background: var(--lb-done-bg);    color: var(--lb-done-fg);    border-color: var(--lb-done-line); }
.lb-stamp--alert   { background: var(--lb-alert-bg);   color: var(--lb-alert-fg);   border-color: var(--lb-alert-line); }

/* ------------------------------------------------------------------ */
/* Movimiento: curva y animaciones comunes                              */
/* ------------------------------------------------------------------ */

:root {
    --lb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes lb-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes lb-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@keyframes lb-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes lb-panel-in {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

@keyframes lb-panel-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(10px) scale(0.985); }
}

/* ------------------------------------------------------------------ */
/* Avisos y diálogos de lp-core.js (gestión y web)                     */
/* ------------------------------------------------------------------ */

/* Avisos flotantes (LP.toast). */
.lp-toasts {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(380px, calc(100vw - 2rem));
    pointer-events: none;
}

.lp-toast {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .75rem .85rem;
    border: 1px solid var(--lb-line);
    border-left: 4px solid var(--lb-neutral-line);
    border-radius: 10px;
    background: var(--lb-surface);
    box-shadow: var(--lp-float-shadow, 0 12px 28px rgba(27, 34, 51, 0.12));
    color: var(--lb-ink);
    font-size: .85rem;
    pointer-events: auto;
    animation: lb-pop .18s var(--lb-ease);
}

.lp-toast.is-leaving {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease;
}

.lp-toast__icon {
    margin-top: .1rem;
}

.lp-toast__body {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.lp-toast__title {
    display: block;
    font-weight: 600;
}

.lp-toast__close {
    border: 0;
    background: none;
    color: var(--lb-muted);
    padding: 0 .15rem;
    line-height: 1;
}

.lp-toast--success { border-left-color: var(--lb-done-fg); }
.lp-toast--success .lp-toast__icon { color: var(--lb-done-fg); }
.lp-toast--error   { border-left-color: var(--lb-alert-fg); }
.lp-toast--error .lp-toast__icon { color: var(--lb-alert-fg); }
.lp-toast--warning { border-left-color: var(--lb-pending-line); }
.lp-toast--warning .lp-toast__icon { color: var(--lb-pending-fg); }
.lp-toast--info    { border-left-color: var(--lb-transit-line); }
.lp-toast--info .lp-toast__icon { color: var(--lb-transit-fg); }

/* Diálogo de confirmación (LP.confirm). */
.lp-confirm .modal-body p:last-child {
    margin-bottom: 0;
}