/* ========================================
   FRANDE ONE · ANIMACIONES Y MAQUETAS DEL SISTEMA
   Las maquetas reproducen el aspecto REAL de Frande One (capturas de la guía):
   barra lateral #0F172A→#1E293B, acento #2563EB, tarjetas blancas con borde izquierdo azul,
   íconos en degradado, total RD$ en azul, botón COBRAR en verde, KDS ámbar/cian/verde.
   Todo es decorativo (aria-hidden) y su información existe también como texto.
   Con «reducir movimiento» se muestra el estado final.
   ======================================== */

.erp-mock {
    --erp-bg: #f6f8fb;
    --erp-card: #ffffff;
    --erp-border: #e5e7eb;
    --erp-text: #1f2937;
    --erp-muted: #4b5563;
    --erp-accent: #2563eb;
    --erp-blue-text: #1d4ed8;
    --erp-green: #15803d;
    --erp-red: #b91c1c;
    --erp-side-a: #0f172a;
    --erp-side-b: #1e293b;
    position: relative;
    display: grid;
    grid-template-columns: 8.2rem minmax(0, 1fr);
    min-height: 21rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--erp-border);
    background: var(--erp-bg);
    box-shadow: 0 24px 60px -20px rgba(15, 13, 63, 0.35);
    font-family: 'Inter', var(--fo-font-body), system-ui, sans-serif;
    font-size: 0.8rem;
    color: var(--erp-text);
    text-align: left;
    user-select: none;
}

.erp-mock *,
.erp-mock *::before,
.erp-mock *::after {
    box-sizing: border-box;
}

.erp-side {
    background: linear-gradient(180deg, var(--erp-side-a), var(--erp-side-b));
    color: #cbd5e1;
    padding: 0.8rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.erp-side-brand {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 0.6rem;
}

.erp-side-brand i {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 4px;
    background: linear-gradient(135deg, #25a1fb, #2563eb);
}

.erp-side span {
    display: block;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.erp-side span.is-active {
    background: rgba(37, 99, 235, 0.25);
    color: #ffffff;
    box-shadow: inset 3px 0 0 #3b82f6;
}

.erp-main {
    padding: 0.85rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.erp-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.85rem;
}

.erp-tag {
    font-weight: 600;
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #fef3c7;
    color: #78350f;
    border: 1px solid #f59e0b;
}

/* KPIs */
.erp-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.erp-kpi {
    background: var(--erp-card);
    border-radius: 10px;
    border-left: 3px solid #3b82f6;
    padding: 0.55rem 0.6rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.erp-kpi i {
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 6px;
    margin-bottom: 0.35rem;
    background: linear-gradient(135deg, #1e40af, #3b82f6);
}

.erp-kpi:nth-child(2) i { background: linear-gradient(135deg, #db2777, #f472b6); }
.erp-kpi:nth-child(3) i { background: linear-gradient(135deg, #059669, #34d399); }

.erp-kpi small {
    display: block;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--erp-muted);
}

.erp-kpi b {
    display: block;
    font-size: clamp(0.72rem, 1.1vw, 0.9rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.erp-card {
    background: var(--erp-card);
    border-radius: 10px;
    border: 1px solid var(--erp-border);
    padding: 0.6rem 0.7rem;
    min-width: 0;
}

.erp-card h4 {
    margin: 0 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--erp-text);
    font-family: inherit;
    letter-spacing: 0;
}

.erp-chart svg {
    width: 100%;
    height: 4.5rem;
    display: block;
}

.erp-chart path.erp-line {
    fill: none;
    stroke: #2563eb;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 0;
}

.erp-chart path.erp-area {
    fill: url(#erpArea);
    opacity: 1;
}

/* Filas genéricas (carrito, tablas) */
.erp-rows {
    display: grid;
    gap: 0.3rem;
}

.erp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.35rem 0.1rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.74rem;
}

.erp-row em {
    font-style: normal;
    color: var(--erp-muted);
    font-size: 0.66rem;
    display: block;
}

.erp-totals {
    display: grid;
    gap: 0.15rem;
    font-size: 0.72rem;
    color: var(--erp-muted);
}

.erp-totals div {
    display: flex;
    justify-content: space-between;
}

.erp-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 800;
    color: var(--erp-text);
}

.erp-total b {
    font-size: 1.2rem;
    color: var(--erp-blue-text);
}

.erp-cobrar {
    display: block;
    text-align: center;
    padding: 0.55rem;
    border-radius: 8px;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: linear-gradient(90deg, #15803d, #0f766e);
}

.erp-ncf {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.66rem;
    color: #065f46;
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-weight: 600;
}

/* Insignias de estado (como las del sistema) */
.erp-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    border-radius: 6px;
    white-space: nowrap;
}

.erp-badge--blue { background: #dbeafe; color: #1e40af; }
.erp-badge--green { background: #dcfce7; color: #166534; }
.erp-badge--amber { background: #fef3c7; color: #92400e; }
.erp-badge--red { background: #fee2e2; color: #991b1b; }
.erp-badge--gray { background: #e5e7eb; color: #374151; }
.erp-badge--purple { background: #ede9fe; color: #5b21b6; }
.erp-badge--dark { background: #1f2937; color: #ffffff; }

/* KDS del restaurante */
.erp-kds {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    min-height: 11rem;
}

.erp-kds-col {
    background: var(--erp-card);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--erp-border);
}

.erp-kds-col > b {
    display: block;
    padding: 0.35rem 0.45rem;
    font-size: 0.66rem;
    color: #1f2937;
}

.erp-kds-col:nth-child(1) > b { background: #fbbf24; }
.erp-kds-col:nth-child(2) > b { background: #22d3ee; }
.erp-kds-col:nth-child(3) > b { background: #15803d; color: #ffffff; }

.erp-kds-card {
    margin: 0.35rem;
    padding: 0.35rem 0.45rem;
    border-radius: 6px;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    font-size: 0.66rem;
}

.erp-kds-card strong {
    display: block;
    font-size: 0.7rem;
}

/* Agenda (Salud) */
.erp-agenda {
    display: grid;
    gap: 0.3rem;
}

.erp-slot {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    gap: 0.4rem;
    align-items: center;
    padding: 0.4rem 0.45rem;
    border-radius: 8px;
    background: var(--erp-card);
    border-left: 3px solid #0891b2;
    font-size: 0.72rem;
}

.erp-slot time {
    font-weight: 700;
    color: #0e7490;
}

/* Pipeline (Taller) */
.erp-pipe {
    display: grid;
    gap: 0.35rem;
}

.erp-pipe div {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) 1rem;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    font-weight: 600;
}

.erp-pipe s {
    display: block;
    height: 0.8rem;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
    text-decoration: none;
}

.erp-pipe s::after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left;
    transform: scaleX(var(--v, 0));
    background: var(--c, #64748b);
    border-radius: inherit;
}

/* Barra de progreso (préstamos) */
.erp-progress {
    height: 0.55rem;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.erp-progress::after {
    content: "";
    display: block;
    height: 100%;
    transform-origin: left;
    transform: scaleX(var(--v, 0));
    background: linear-gradient(90deg, #15803d, #22c55e);
}

/* ---------- Selector «¿Qué negocio tienes?» ---------- */
.fx-picker {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    gap: var(--fo-space-6);
    align-items: start;
}

.fx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 var(--fo-space-4);
    padding: 0;
    list-style: none;
}

.fx-chip {
    min-height: 2.75rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    border: 1.5px solid var(--fo-border-strong);
    background: var(--fo-surface);
    color: var(--fo-foreground);
    font: 600 var(--fo-text-sm) / 1.2 var(--fo-font-body);
    cursor: pointer;
    transition: background-color var(--fo-duration) var(--fo-ease), border-color var(--fo-duration) var(--fo-ease), color var(--fo-duration) var(--fo-ease);
}

.fx-chip:hover {
    border-color: var(--fo-primary);
}

.fx-chip[aria-checked="true"] {
    background: var(--fo-primary);
    border-color: var(--fo-primary);
    color: #ffffff;
}

.fx-picker-summary {
    font-size: var(--fo-text-lg);
    line-height: 1.6;
    color: var(--fo-foreground-secondary);
    min-height: 5.5em;
}

.fx-picker-summary strong {
    color: var(--fo-foreground);
}

.fx-view {
    display: none;
}

.fx-view.is-active {
    display: contents;
}

/* ---------- Entradas escalonadas dentro de maquetas ---------- */
.fx-in {
    opacity: 1;
    transform: none;
}

.fx-armed .fx-in {
    opacity: 0;
    transform: translateY(8px);
}

.fx-armed.fx-play .fx-in {
    animation: fx-in 420ms var(--fo-ease) forwards;
    animation-delay: calc(var(--i, 0) * 260ms);
}

@keyframes fx-in {
    to { opacity: 1; transform: none; }
}

.fx-armed .erp-line {
    stroke-dashoffset: 400;
}

.fx-armed.fx-play .erp-line {
    animation: fx-draw 1100ms var(--fo-ease) 200ms forwards;
}

.fx-armed .erp-area {
    opacity: 0;
}

.fx-armed.fx-play .erp-area {
    animation: fx-fade 600ms ease 1100ms forwards;
}

@keyframes fx-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes fx-fade {
    to { opacity: 1; }
}

.fx-armed .erp-pipe s::after,
.fx-armed .erp-progress::after {
    transform: scaleX(0);
}

.fx-armed.fx-play .erp-pipe s::after,
.fx-armed.fx-play .erp-progress::after {
    transform: scaleX(var(--v, 0));
    transition: transform 900ms var(--fo-ease) 300ms;
}

/* Estados que cambian (KDS, taller, agenda, e-CF) */
.fx-state-a,
.fx-state-b {
    transition: opacity 300ms ease;
}

/* Sin animación se ve el estado final (b); animando, se ve (a) y al terminar cambia a (b) */
.fx-state-a { display: none; }
.fx-armed .fx-state-a { display: inline-block; }
.fx-armed .fx-state-b { display: none; }
.fx-armed.fx-done .fx-state-a { display: none; }
.fx-armed.fx-done .fx-state-b { display: inline-block; }

/* La conversación no se ve hasta que empieza a reproducirse */
.fx-armed:not(.fx-play) .chat-msg { visibility: hidden; }

/* ---------- Flujo conectado (venta → inventario → e-CF → contabilidad) ---------- */
.fx-flow {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--fo-space-4);
    counter-reset: fx-flow;
    position: relative;
}

.fx-flow::before {
    content: "";
    position: absolute;
    top: 2.1rem;
    left: 12%;
    right: 12%;
    height: 3px;
    background: var(--fo-border);
    border-radius: 3px;
}

.fx-flow::after {
    content: "";
    position: absolute;
    top: 2.1rem;
    left: 12%;
    right: 12%;
    height: 3px;
    background: var(--fo-primary);
    border-radius: 3px;
    transform-origin: left;
    transform: scaleX(1);
}

.fx-armed.fx-flow::after {
    transform: scaleX(0);
}

.fx-armed.fx-play.fx-flow::after {
    transform: scaleX(1);
    transition: transform 2400ms linear 200ms;
}

.fx-flow li {
    position: relative;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 0.5rem;
}

.fx-flow-node {
    position: relative;
    z-index: 1;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--fo-surface);
    border: 3px solid var(--fo-primary);
    color: var(--fo-link);
    box-shadow: var(--fo-shadow-md);
}

.fx-flow-node svg {
    width: 1.6rem;
    height: 1.6rem;
}

.fx-flow li strong {
    font-family: var(--fo-font-display);
    color: var(--fo-foreground);
}

.fx-flow li p {
    margin: 0;
    font-size: var(--fo-text-sm);
    color: var(--fo-foreground-secondary);
    line-height: 1.5;
}

.fx-flow .erp-badge {
    font-size: 0.7rem;
}

.fx-armed.fx-flow .fx-flow-node {
    border-color: var(--fo-border-strong);
    color: var(--fo-muted);
}

.fx-armed.fx-play.fx-flow li .fx-flow-node {
    animation: fx-node 400ms var(--fo-ease) forwards;
    animation-delay: calc(var(--i, 0) * 650ms + 200ms);
}

@keyframes fx-node {
    to { border-color: var(--fo-primary); color: var(--fo-link); transform: scale(1.06); }
}

/* ---------- Conversación de Frande One Chat ---------- */
.chat-mock {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--fo-border);
    background: #efeae2;
    box-shadow: var(--fo-shadow-lg);
    max-width: 24rem;
    margin-inline: auto;
    font-family: var(--fo-font-body);
}

.chat-mock-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    background: #0f5132;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
}

.chat-mock-head i {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #d1fae5;
}

.chat-mock-head small {
    display: block;
    font-weight: 400;
    font-size: 0.72rem;
    color: #d1fae5;
}

.chat-mock-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.9rem;
    min-height: 17rem;
    list-style: none;
    margin: 0;
}

.chat-msg {
    max-width: 80%;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    font-size: 0.86rem;
    line-height: 1.4;
    color: #111827;
    background: #ffffff;
    align-self: flex-start;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.chat-msg--out {
    align-self: flex-end;
    background: #d9fdd3;
}

.chat-msg small {
    display: block;
    text-align: right;
    font-size: 0.66rem;
    color: #4b5563;
    margin-top: 0.15rem;
}

.chat-msg--note {
    align-self: center;
    background: #fef3c7;
    color: #78350f;
    font-size: 0.74rem;
    text-align: center;
}

.chat-typing {
    align-self: flex-start;
    display: none;
    gap: 0.2rem;
    padding: 0.55rem 0.7rem;
    background: #ffffff;
    border-radius: 10px;
}

.chat-typing i {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #6b7280;
    animation: fx-dot 900ms infinite ease-in-out;
}

.chat-typing i:nth-child(2) { animation-delay: 150ms; }
.chat-typing i:nth-child(3) { animation-delay: 300ms; }

@keyframes fx-dot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-3px); opacity: 1; }
}

.fx-armed .chat-typing.is-on {
    display: inline-flex;
}

/* Canales que convergen */
.fx-channels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr);
    align-items: center;
    gap: var(--fo-space-4);
}

.fx-channels ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.6rem;
}

.fx-channels li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--fo-radius-md);
    background: var(--fo-surface);
    border: 1px solid var(--fo-border);
    font-weight: 600;
}

.fx-channels .fx-arrow {
    height: 3px;
    background: var(--fo-primary);
    border-radius: 3px;
    transform-origin: left;
}

.fx-armed .fx-channels .fx-arrow,
.fx-armed.fx-channels .fx-arrow {
    transform: scaleX(0);
}

.fx-armed.fx-play .fx-arrow {
    transform: scaleX(1);
    transition: transform 700ms var(--fo-ease) 500ms;
}

.fx-inbox {
    padding: 0.8rem;
    border-radius: var(--fo-radius-lg);
    background: var(--fo-surface);
    border: 2px solid var(--fo-primary);
}

.fx-inbox b {
    display: block;
    font-family: var(--fo-font-display);
    margin-bottom: 0.4rem;
}

.fx-inbox div {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--fo-border);
    font-size: var(--fo-text-sm);
    color: var(--fo-foreground-secondary);
}

/* Controles */
.fx-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--fo-space-4);
}

.fx-caption {
    text-align: center;
    font-size: var(--fo-text-sm);
    color: var(--fo-foreground-secondary);
    margin-top: var(--fo-space-3);
}

.fx-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--fo-space-7);
    align-items: center;
}

@media (max-width: 960px) {
    .fx-hero-grid,
    .fx-picker {
        grid-template-columns: 1fr;
    }

    .fx-flow {
        grid-template-columns: 1fr 1fr;
    }

    .fx-flow::before,
    .fx-flow::after {
        display: none;
    }
}

@media (max-width: 560px) {
    .erp-mock {
        grid-template-columns: 1fr;
    }

    .erp-side {
        display: none;
    }

    .erp-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .erp-kpi:nth-child(3) {
        display: none;
    }

    .fx-channels {
        grid-template-columns: 1fr;
    }

    .fx-channels .fx-arrow {
        display: none;
    }
}

/* Reducir movimiento: estado final, sin nada en movimiento */
@media (prefers-reduced-motion: reduce) {
    .fx-armed .fx-in,
    .fx-armed .erp-area {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .fx-armed .erp-line {
        stroke-dashoffset: 0 !important;
        animation: none !important;
    }

    .fx-armed .erp-pipe s::after,
    .fx-armed .erp-progress::after,
    .fx-armed.fx-flow::after,
    .fx-armed .fx-arrow {
        transform: scaleX(var(--v, 1)) !important;
        transition: none !important;
    }

    .chat-typing i {
        animation: none;
    }
}

.fo-picker-title {
    font-size: var(--fo-text-3xl);
    line-height: 1.15;
    margin: 0 0 var(--fo-space-3);
}

.fo-hero-visual-erp {
    min-width: 0;
}