/* =====================================================================
   VEX · Panel (cliente, proveedor, administrador)
   Panel lateral claro con el lenguaje de la portada (logo, secciones con nombre, borde fino) y
   contenido con la misma jerarquía: título de sección, descripción breve y tarjetas planas.
   Sin resplandores ni efectos continuos. En celular el panel lateral es un cajón.
   ===================================================================== */
/* Medidas del panel: un solo juego de radios (tarjetas 14px, piezas internas 10px) y separaciones */
.app { --gutter: clamp(16px, 3.5vw, 48px); --wrap-max: 1440px; --measure: 60ch; --side-w: 248px; --radius: 14px; --radius-sm: 10px; --gap: 1rem; }
body.app { background: var(--canvas); }
.app .blobs { display: none; }
.wrap { width: 100%; max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Pantalla de carga ---------- */
.boot { position: fixed; inset: 0; z-index: 500; display: grid; place-content: center; justify-items: center; gap: 1.2rem; background: var(--canvas); text-align: center; padding: 16px; transition: opacity 0.5s var(--ease), visibility 0.5s; }
.boot__logo { width: 64px; height: 64px; }
.boot p { color: var(--muted); max-width: 420px; }
.boot .btn { margin-top: 0.8rem; }
body:not(.is-booting) .boot { opacity: 0; visibility: hidden; }

/* ---------- Estructura ---------- */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.main { min-width: 0; display: flex; flex-direction: column; }

/* Panel lateral */
.side {
  position: sticky; top: 0; height: 100vh; z-index: 30;
  display: flex; flex-direction: column; gap: 1.25rem; padding: 1.1rem 0.85rem 1rem;
  background: var(--surface); border-right: 1px solid var(--line); overflow: hidden auto;
}
.side__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0.35rem 0; }
.side__close { display: none; }

.side__nav { display: grid; gap: 0.15rem; align-content: start; }
.nav-item { position: relative; display: flex; align-items: center; gap: 0.7rem; min-height: 42px; padding: 0.55rem 0.75rem; border-radius: 10px; text-decoration: none; font-size: 0.95rem; font-weight: 500; color: var(--muted); transition: color 0.2s, background 0.2s; }
.nav-item:hover { color: var(--text); background: var(--surface-2); }
.nav-item[aria-current="page"] { color: var(--text); background: var(--surface-2); font-weight: 600; }
/* Marca de la sección actual: barra fina con el color de acento */
.nav-item[aria-current="page"]::before { content: ''; position: absolute; left: 0; top: 0.55rem; bottom: 0.55rem; width: 3px; border-radius: 3px; background: var(--accent); }
.nav-item .i { flex: none; width: 19px; height: 19px; }
.nav-item[aria-current="page"] .i { color: var(--accent); }
:root[data-accent="mono"] .nav-item[aria-current="page"] .i { color: var(--text); }
.side .nav-item .i :is(path, circle, rect) { animation: none !important; stroke-dasharray: none; }
.nav-item > span { flex: 1; min-width: 0; }
.nav-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--bad); color: #fff; font: 600 0.7rem/1 var(--f-body); font-style: normal; }
.nav-badge[hidden] { display: none; }

.side__foot { position: relative; margin-top: auto; display: grid; gap: 0.6rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.side__row { display: flex; align-items: center; gap: 0.4rem; }

/* Saldo: dato claro con borde fino */
.credit-pill { display: flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0.4rem 0.75rem 0.4rem 0.45rem; border-radius: 12px; background: var(--canvas); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 0.85rem; transition: border-color 0.2s; }
.credit-pill:hover { border-color: var(--line-2); }
.credit-pill strong { font: 700 1.2rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.credit-pill span:last-child { color: var(--muted); }
.credit-pill__coin { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); }
.credit-pill__coin::before { content: ''; position: absolute; inset: 9px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }
:root[data-accent="mono"] .credit-pill__coin { background: var(--surface-2); }
.credit-pill.is-bump strong { animation: bump 0.6s var(--ease); }
@keyframes bump { 40% { transform: scale(1.12); } }

/* Apariencia (mismo botón compacto que la portada, estilos en base.css).
   Escritorio: el panel sale a la derecha de la barra lateral, alineado con el pie. Es fijo, así que la barra
   (que se desplaza) no lo recorta, no tapa la navegación y no cambia de ancho al abrirlo. */
.side__theme { flex: none; }
.side__theme .appearance__pop { position: fixed; top: auto; right: auto; bottom: 12px; left: calc(var(--side-w) + 8px); transform-origin: bottom left; }
/* Cajón del celular: no hay espacio a la derecha; el panel se abre dentro del pie, en su propia línea sobre
   la cuenta. (display: contents no cambia el DOM ni los eventos.) */
@media (max-width: 900px) {
  .side__row { flex-wrap: wrap; }
  .side__theme, .side__theme .accent { display: contents; }
  .side__theme .appearance__btn { flex: none; }
  .side__theme .appearance__pop { position: static; order: -1; flex: 1 1 100%; width: auto; box-shadow: none; background: var(--canvas); }
}

/* Cuenta: ocupa el resto de la fila; su menú se abre hacia arriba */
.account { position: relative; flex: 1; min-width: 0; }
.account__btn { display: flex; align-items: center; gap: 0.55rem; width: 100%; min-height: 44px; padding: 0.3rem 0.5rem 0.3rem 0.3rem; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--text); cursor: pointer; text-align: left; transition: background 0.2s; }
.account__btn:hover, .account__btn[aria-expanded="true"] { background: var(--surface-2); }
.account__name { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.account__name strong { font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-badge { font-size: 0.75rem; color: var(--muted); }
.account__chev { flex: none; width: 16px; height: 16px; color: var(--muted); transition: transform 0.2s; }
.account__btn[aria-expanded="true"] .account__chev { transform: rotate(180deg); }
.account__menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 40; display: grid; padding: 0.4rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.account__menu[hidden] { display: none; }
.account__item { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 42px; padding: 0.5rem 0.7rem; border: 0; border-radius: 10px; background: none; color: var(--text); font: 500 0.92rem var(--f-body); text-align: left; text-decoration: none; cursor: pointer; }
.account__item:hover { background: var(--surface-2); }
.account__item .i { width: 18px; height: 18px; color: var(--muted); }
.account__item--out { color: var(--bad-text); }
.account__item--out .i { color: currentColor; }
.avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--hero); color: #fff; font-weight: 600; font-size: 0.95rem; }
:root:not([data-accent="mono"]) .avatar { background: var(--accent); color: var(--on-accent); }
.avatar--sm { width: 34px; height: 34px; font-size: 0.8rem; }
.avatar--lg { width: 64px; height: 64px; font-size: 1.3rem; }

/* Barra superior: solo en celular */
.mbar { display: none; }

/* ---------- Celular y tableta: el panel lateral pasa a cajón ---------- */
.side__scrim { position: fixed; inset: 0; z-index: 35; background: var(--scrim); }
.side__scrim[hidden] { display: none; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side {
    position: fixed; left: 0; top: 0; bottom: 0; height: auto; width: min(300px, 86vw); z-index: 40;
    transform: translateX(-100%); visibility: hidden; transition: transform 0.25s var(--ease), visibility 0s 0.25s;
    box-shadow: var(--shadow-lg);
  }
  .side.is-open { transform: none; visibility: visible; transition: transform 0.25s var(--ease); }
  .side__close { display: grid; }
  .mbar {
    position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 0.75rem;
    min-height: 60px; padding: 0.5rem var(--gutter); background: var(--canvas); border-bottom: 1px solid var(--line);
  }
  .mbar .brand__mark { width: 26px; height: 26px; }
  .mbar__title { margin-left: auto; font-weight: 600; color: var(--muted); font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}
:root[data-motion="reduced"] .side { transition: none !important; }

/* Aviso de demostración / cuenta en revisión */
.banner-wrap:has(> .banner[hidden]) { display: none; }
.banner { margin-top: 1rem; padding: 0.55rem 0.85rem; border-radius: var(--radius-sm); display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; background: color-mix(in srgb, var(--warn) 6%, var(--surface)); color: var(--text); border: 1px solid color-mix(in srgb, var(--warn) 22%, var(--line)); font-size: 0.86rem; }
.banner .i { flex: none; width: 16px; height: 16px; color: var(--muted); }
.banner > span { flex: 1 1 14rem; min-width: 0; }
.banner--demo { background: var(--surface); border-color: var(--line); }
.banner__links { margin-left: auto; display: flex; gap: 0.25rem; padding: 3px; border-radius: 99px; background: var(--surface-2); }
.banner__links a { padding: 0.35rem 0.8rem; border-radius: 99px; text-decoration: none; font-size: 0.82rem; color: var(--muted); }
.banner__links a:hover { color: var(--text); }
.banner__links a.is-active { background: var(--accent); color: var(--on-accent); }

/* Contenido: misma jerarquía y ritmo vertical que las secciones de la portada */
.view { flex: 1; padding-block: clamp(1.5rem, 3vw, 2.25rem) 3rem; outline: none; }
.view__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 2vw, 1.75rem); }
.view__inner > *, .toolbar > * { min-width: 0; }
.view__inner.is-in > * { animation: viewIn 0.4s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Encabezados de página (como los títulos de sección de la portada) ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.page-head h2, .hello h2 { font-size: clamp(1.6rem, 2.4vw, 2.15rem); }
.page-head p, .hello__lead { margin-top: 0.4rem; max-width: var(--measure); color: var(--muted); font-size: 1rem; line-height: 1.55; }
.page-head__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- Tarjetas: superficie plana, borde fino, radio 14px ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 1.8vw, 1.35rem); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.panel__head h3, .section-title { font-size: 1.15rem; }
.panel__head > .i { width: 20px; height: 20px; color: var(--muted); }

.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--gap); }
.grid-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--gap); }
.grid-stats--wide { grid-template-columns: repeat(4, 1fr); }
.grid-stats--wide > :last-child { grid-column: span 2; }
@media (max-width: 1100px) { .grid-stats--wide { grid-template-columns: 1fr 1fr; } }
.grid-hero .grid-stats { grid-template-columns: 1fr 1fr; }
.grid-hero .grid-stats > :nth-child(3):last-child { grid-column: span 2; }
@media (max-width: 1100px) { .grid-hero { grid-template-columns: 1fr; } }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 1000px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* Indicador compacto: etiqueta con su icono pequeño en una línea, la cifra debajo y una nota opcional */
.stat { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 0.35rem 0.5rem; padding: 0.95rem 1.1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: border-color 0.2s; }
a.stat:hover { border-color: var(--line-2); }
.stat__icon { grid-row: 1; display: grid; place-items: center; width: 18px; height: 18px; color: var(--muted); }
.stat__icon .i { width: 16px; height: 16px; animation: none !important; }
.stat__label { grid-row: 1; font: 500 0.86rem var(--f-body); color: var(--muted); padding-right: 1rem; }
.stat__value, .stat__sub { grid-column: 1 / -1; }
.stat__value { font: 600 1.85rem/1.05 var(--f-display); font-variant-numeric: tabular-nums; }
.stat__sub { font-size: 0.8rem; color: var(--muted); }
/* Pendiente de atención: punto fijo, sin pulso */
.stat--alert::after { content: ''; position: absolute; top: 1.15rem; right: 1.1rem; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }

/* Tarjeta de saldo: la principal del inicio, plana y clara como la tarjeta de la portada */
.balance { position: relative; display: flex; flex-direction: column; gap: 0.45rem; padding: clamp(1.15rem, 2.2vw, 1.5rem); min-height: 200px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.balance__label { font: 500 0.9rem var(--f-body); color: var(--muted); }
.balance__value { display: flex; align-items: baseline; gap: 0.6rem; font: 600 clamp(2.8rem, 5vw, 3.8rem)/0.95 var(--f-display); font-variant-numeric: tabular-nums; }
.balance__value small { font: 500 1rem var(--f-body); color: var(--muted); }
.balance__eq { color: var(--muted); font-size: 0.92rem; }
.balance__actions { margin-top: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; padding-top: 0.9rem; }

/* ---------- Pestañas / filtros ---------- */
/* Barra de búsqueda y filtros: todos los controles miden 44px de alto. El buscador crece; los filtros
   y el selector de vista viajan juntos (.toolbar__group) y, si no caben, pasan completos a la fila siguiente. */
.toolbar { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.toolbar__group { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-width: 0; }
.toolbar__group > * { min-width: 0; }
.pills { display: flex; gap: 0.25rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 4px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); }
.pills::-webkit-scrollbar { display: none; }
.pill { flex: none; }
.pill { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.95rem; border-radius: 99px; border: 0; background: transparent; cursor: pointer; font-size: 0.84rem; color: var(--muted); transition: background 0.35s, color 0.3s, box-shadow 0.35s, transform 0.4s var(--spring); }
.pill:hover { color: var(--text); }
.pill.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .pill.is-active { background: var(--surface-3); }
.pill b { font: 500 0.7rem var(--f-mono); padding: 0.1rem 0.4rem; border-radius: 99px; background: var(--surface-3); color: var(--text); }
.pill.is-active b { background: var(--accent); color: var(--on-accent); }
/* Junto a filtros, el buscador crece y llena su fila si los filtros pasan a la siguiente; solo, se limita a 480px */
.search { position: relative; flex: 1 1 260px; min-width: min(100%, 220px); }
.toolbar > .search:only-child, .search:not(.toolbar > *) { max-width: 480px; }
.search input { width: 100%; min-height: 44px; padding: 0.6rem 1rem 0.6rem 2.7rem; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); outline: none; transition: border-color 0.25s, box-shadow 0.3s; }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.search .i { position: absolute; left: 1.05rem; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); }

/* ---------- Servicios ---------- */
/* Tarjeta neutral: el color de la categoría solo aparece como un cuadro pequeño junto a su nombre.
   Mismo alto por fila y el pie (precio + acción) siempre abajo. */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--gap); }
.svc { position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem 1.15rem 1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: border-color 0.2s; }
.svc:hover { border-color: var(--line-2); }
.svc.is-off { opacity: 0.55; }
.svc__cat { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--muted); }
.svc h3 { font-size: 1.12rem; line-height: 1.25; }
.svc p { color: var(--muted); font-size: 0.9rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.svc__meta { display: flex; gap: 0.35rem 0.9rem; flex-wrap: wrap; align-items: center; font-size: 0.8rem; color: var(--muted); }
.svc__meta span { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; }
.svc__meta .i { width: 15px; height: 15px; flex: none; }
.svc__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.price { font: 700 1.45rem/1 var(--f-display); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.price small { font: 400 0.76rem var(--f-body); color: var(--muted); margin-left: 0.3rem; letter-spacing: 0; }

.summary { display: grid; gap: 0.5rem; padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.summary div { display: flex; justify-content: space-between; gap: 1rem; }
.summary div span:last-child { font-family: var(--f-mono); text-align: right; }
.summary .is-total { padding-top: 0.5rem; border-top: 1px dashed var(--line-2); font-weight: 600; }
.summary .is-neg { color: var(--bad-text); }
.summary small { font-family: var(--f-body); }
/* Ficha del servicio antes de pagar: categoría, plazo y quién lo gestiona */
.buy-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.4rem 1.2rem; margin: 0; }
.buy-facts dt { font-size: 0.8rem; color: var(--muted); }
.buy-facts dd { margin: 0.1rem 0 0; font-weight: 500; }
.buy-note { display: flex; gap: 0.55rem; align-items: flex-start; line-height: 1.5; }
.buy-note .i { width: 18px; height: 18px; margin-top: 2px; }
.buy-note a { color: var(--text); text-underline-offset: 3px; }
.req { padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); white-space: pre-wrap; font-size: 0.92rem; }
.req strong { display: block; margin-bottom: 0.3rem; font-weight: 500; font-size: 0.8rem; color: var(--muted); }

/* ---------- Pedidos ---------- */
/* Tarjeta: arriba servicio, folio y fecha a la izquierda; estado e importe a la derecha */
.orders { display: grid; gap: 0.75rem; }
.order { padding: 1rem 1.15rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 0.8rem; transition: border-color 0.2s; animation: viewIn 0.4s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.order:hover { border-color: var(--line-2); }
.order__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem 1rem; flex-wrap: wrap; }
.order__head > div:first-child { min-width: 0; flex: 1 1 240px; }
.order__code { font: 400 0.76rem var(--f-mono); color: var(--muted); }
.order h4 { font-size: 1.12rem; line-height: 1.3; margin: 0.1rem 0 0.15rem; }
.order__head .muted { font-size: 0.84rem; }
.order__side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
/* En pantallas angostas estado e importe forman una sola línea bajo el título */
@media (max-width: 600px) { .order:not(.orders--compact .order) .order__actions .btn { flex: 1 1 auto; } }
@media (max-width: 600px) { .order:not(.orders--compact .order) .order__side { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; } }
.credits-tag { font: 600 1.05rem var(--f-display); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Botón para ver los datos del cliente: píldora con icono, texto y flecha que gira al abrir */
.order__notes summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0.45rem 0.9rem 0.45rem 0.75rem; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: 500 0.86rem/1.2 var(--f-body); user-select: none; transition: border-color 0.12s, background-color 0.12s; }
.order__notes summary::-webkit-details-marker { display: none; }
.order__notes summary:hover { border-color: var(--text); }
.order__notes summary .i { width: 16px; height: 16px; color: var(--muted); }
.order__notes summary::after { content: ''; flex: none; width: 7px; height: 7px; margin: 0 0.1rem 0 0.15rem; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s ease; }
.order__notes[open] summary { background: var(--surface-2); }
.order__notes[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.order__notes[open] > summary { margin-bottom: 0.65rem; }
.order__notes p, .order__reply p { white-space: pre-wrap; margin-top: 0.4rem; font-size: 0.9rem; }
.order__reply { padding: 0.75rem 0.9rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.order__reply strong { font-weight: 500; font-size: 0.8rem; color: var(--muted); }
.order__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; padding-top: 0.8rem; border-top: 1px solid var(--line); }

/* Jerarquía de acciones del pedido (solo visual; cada botón hace lo mismo que antes).
   Rechazar es secundaria: borde fino y texto rojo, a la izquierda del grupo.
   La principal depende del estado: pendiente → Tomar pedido; en proceso → Subir archivo y entregar. */
.order__actions .btn--danger { order: -1; background: transparent; color: var(--bad-text); border-color: var(--line-2); box-shadow: none; }
.order__actions .btn--danger:hover { border-color: currentColor; }

/* Avance: tres tramos finos con su nombre debajo (no parecen botones) */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; max-width: 600px; }
.timeline li { display: grid; gap: 0.35rem; font: 500 0.78rem var(--f-body); color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline li span { display: block; height: 3px; border-radius: 99px; background: var(--line); }
.timeline li.is-done span { background: var(--muted); }
.timeline li.is-current { color: var(--text); font-weight: 600; }
.timeline li.is-current span { background: var(--accent); }
:root[data-accent="mono"] .timeline li.is-current span { background: var(--text); }
.timeline--cancel { padding: 0.5rem 0.8rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bad) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--bad) 20%, var(--line)); color: var(--bad-text); font-size: 0.84rem; }

/* ---------- Listas breves dentro de una tarjeta (recargas pendientes del dashboard, historial de recargas) ----------
   Líneas separadas por un borde fino, sin tarjetas dentro de la tarjeta. Los listados completos usan .stable. */
.rows { display: grid; }
.row { display: grid; grid-template-columns: minmax(200px, 1.6fr) repeat(3, minmax(90px, 1fr)) auto; gap: 1rem; align-items: center; padding: 0.75rem 0; animation: viewIn 0.4s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.row + .row { border-top: 1px solid var(--line); }
.row__who { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.row__who div { min-width: 0; display: grid; }
.row__who strong { font-weight: 600; }
.row__who strong, .row__who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row small { color: var(--muted); font-size: 0.78rem; }
.row__cell { display: grid; gap: 0.1rem; min-width: 0; }
.row__cell > span { overflow-wrap: anywhere; font-size: 0.9rem; }
.row__cell--mono span { font-variant-numeric: tabular-nums; }
.row__actions { display: flex; gap: 0.4rem; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
/* Con tres o más elementos, las acciones bajan a su propia línea, alineadas a la derecha */
.row > .row__actions:has(> :nth-child(3)) { grid-column: 1 / -1; }
.row .avatar--sm .i { width: 16px; height: 16px; }
@media (max-width: 900px) { .row { grid-template-columns: 1fr 1fr; } .row__who { grid-column: 1 / -1; } .row__actions { grid-column: 1 / -1; justify-content: flex-start; } }

/* Destinatario y CLABE (pagos) y celdas de dos líneas */
.pay-bank { display: grid; gap: 0.1rem; min-width: 0; }
.pay-bank .mono { font-family: var(--f-mono); font-size: 0.86rem; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.pay-bank small { color: var(--muted); font-size: 0.78rem; }
.srow__lead > div { display: grid; gap: 0.15rem; min-width: 0; }
/* Tono de un aviso: punto de color pequeño junto a su nombre */
.tone-label { display: inline-flex; align-items: center; gap: 0.35rem; }
.tone-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
:root[data-accent="mono"] .tone-label--info i { background: var(--muted); }
.tone-label--importante i { background: var(--warn); }
.tone-label--promo i { background: var(--ok); }

/* Selectores dentro de barras de filtros: mismo alto que el buscador */
.toolbar .field--inline { min-width: 190px; flex: 0 1 220px; }
:is(.toolbar, .filters) .field--inline select { min-height: 44px; padding-block: 1.15rem 0.3rem; border-radius: 99px; }
:is(.toolbar, .filters) .field--inline > span { top: 0.78rem; }
:is(.toolbar, .filters) .field--inline select + span { transform: translateY(-0.55rem) scale(0.72); }

/* Agregar / quitar */
.seg2 { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); }
.seg2 input { position: absolute; opacity: 0; pointer-events: none; }
.seg2 label { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem; border-radius: 99px; cursor: pointer; color: var(--muted); transition: background 0.35s, color 0.3s, box-shadow 0.35s; }
.seg2 label .i { width: 16px; height: 16px; }
.seg2 input:checked + label { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .seg2 input:checked + label { background: var(--surface-3); }
.seg2 input#op-sub:checked + label { color: var(--bad); }
.seg2 input:focus-visible + label { outline: 2px solid var(--accent); }
.quick { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: -0.3rem; }
.quick .pill { border: 1px solid var(--line); background: var(--surface); font-family: var(--f-mono); }
.quick .pill:hover { border-color: var(--text); }

.done-box { display: grid; gap: 0.8rem; justify-items: center; text-align: center; animation: rise 0.5s var(--ease); }
.done-box__icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); animation: popIn 0.6s var(--spring); }
.done-box__icon .i { width: 28px; height: 28px; stroke-width: 2.2; }
.done-box .bank__row { width: 100%; text-align: left; padding: 0.8rem 1rem; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); }
.done-box .bank__row span { font-size: 1.1rem; letter-spacing: 0.04em; }

/* Movimientos */
.ledger { display: grid; }
.ledger__item { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 0.15rem; border-bottom: 1px solid var(--line); animation: viewIn 0.4s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 25ms); }
.ledger__item:last-child { border-bottom: 0; }
.ledger__icon { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.ledger__icon .i { width: 17px; height: 17px; }
.ledger__icon--in { color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, transparent); }
.ledger__icon--out { color: var(--bad); background: color-mix(in srgb, var(--bad) 9%, transparent); }
.ledger__text { flex: 1; min-width: 0; display: grid; }
.ledger__text strong { font-weight: 500; }
.ledger__text small { color: var(--muted); font-size: 0.82rem; }
.ledger__amount { font: 700 1.15rem var(--f-display); letter-spacing: 0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledger__amount.is-in { color: var(--ok); }
.ledger__amount.is-out { color: var(--bad); }

/* Recargar */
.bank { display: grid; }
.bank__row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.bank__row:last-child { border-bottom: 0; }
.bank__row small { display: block; color: var(--muted); font-size: 0.76rem; }
.bank__row span { font-family: var(--f-mono); overflow-wrap: anywhere; }
.copy-btn { position: relative; overflow: hidden; flex: none; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 36px; padding: 0.4rem 0.8rem; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); cursor: pointer; font-size: 0.8rem; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.copy-btn:hover { border-color: var(--text); }
.copy-btn.is-copied { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.copy-btn .i { width: 15px; height: 15px; }
.rate { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.95rem; margin-top: 1rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-size: 0.9rem; }
.rate .i { color: var(--muted); }
.rate strong { font-family: var(--f-mono); font-weight: 500; }
.calc { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 1rem; padding: 0.85rem 1rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.calc strong { font: 700 1.8rem var(--f-display); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }

/* Perfil */
.profile-card { display: flex; align-items: center; gap: 1rem; }
.profile-card h3 { font-size: 1.3rem; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.2rem; font-size: 0.92rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

.receipt { width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
iframe.receipt { height: 70vh; }

/* ---------- Vacíos, carga, error ---------- */
.empty { display: grid; justify-items: center; gap: 0.5rem; text-align: center; padding: 2.25rem 1.25rem; border-radius: var(--radius); border: 1px dashed var(--line-2); background: var(--surface); }
.empty__art { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.empty__art .i { width: 24px; height: 24px; animation: none !important; }
.empty h4 { font-size: 1.15rem; }
.empty p { color: var(--muted); max-width: 420px; font-size: 0.92rem; }
.empty .btn { margin-top: 0.5rem; }
.empty--error .empty__art { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }

.skeleton { display: grid; gap: 1rem; }
.skel { border-radius: var(--radius); background: linear-gradient(100deg, var(--surface) 40%, var(--surface-2) 50%, var(--surface) 60%) 0 0 / 300% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }

.divider { height: 1px; background: var(--line); margin: 0.4rem 0; }
.tag-warn { display: inline-flex; gap: 0.4rem; align-items: center; padding: 0.35rem 0.7rem; border-radius: 99px; background: color-mix(in srgb, var(--warn) 9%, transparent); color: var(--warn); font-size: 0.82rem; }
.tag-warn .i { width: 16px; height: 16px; }
.app .chip { font: 600 0.78rem/1 var(--f-body); }
.app .chip i { animation: none; }
.pill { font-size: 0.86rem; }
:root:not([data-theme="dark"]) .modal__panel { border-color: transparent; }

/* Iconos en reposo: quietos dentro del panel (solo reaccionan al pasar el cursor) */
.app :is(.banner .i, .drop__icon .i, .notice__icon .i, .alert-chip .i, .stat--alert .stat__icon .i) { animation: none !important; }

/* =====================================================================
   DASHBOARD
   Colores de estado validados (validate_palette.js, claro #fff y oscuro #222226):
   entregado #0ca30c · en proceso #2a78d6/#3987e5 · pendiente #c98500 · cancelado #d03b3b
   ===================================================================== */
.view { --viz-1: var(--accent); --viz-good: #0ca30c; --viz-info: #2a78d6; --viz-warn: #c98500; --viz-bad: #d03b3b; --delta-up: #006300; }
:root[data-theme="dark"] .view { --viz-info: #3987e5; --delta-up: #0ca30c; }

.dash-filters { justify-content: flex-start; }
.dash-alerts { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }
.alert-chip { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0.4rem 0.85rem; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); text-decoration: none; font-size: 0.86rem; transition: border-color 0.2s; }
.alert-chip b { font: 700 1.05rem var(--f-display); color: var(--text); }
.alert-chip .i { width: 17px; height: 17px; }
.alert-chip.is-on { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); color: var(--text); }
.alert-chip.is-on .i { color: var(--warn); }
.alert-chip:hover { border-color: var(--line-2); }

#dash { display: grid; gap: var(--gap); transition: opacity 0.2s; }
#dash.is-refreshing { opacity: 0.5; }
.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.dash-kpis { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.dash-chart--wide { grid-column: span 2; }
.dash-grid > .dash-chart:last-child { grid-column: span 2; }
@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dash-hero, .dash-kpis, .dash-chart--wide, .dash-grid > .dash-chart:last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) { .dash-grid, .dash-kpis { grid-template-columns: minmax(0, 1fr); } .dash-grid > * { grid-column: 1 / -1 !important; } }

.dash-label { font: 500 0.88rem var(--f-body); color: var(--muted); }
.dash-hero { display: flex; flex-direction: column; gap: 0.6rem; }
.dash-hero__value { font: 700 clamp(2.8rem, 4.8vw, 3.8rem)/0.95 var(--f-display); letter-spacing: 0.01em; margin-top: 0.4rem; }
.dash-mini { margin: auto 0 0; padding-top: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; border-top: 1px solid var(--line); }
.dash-mini dt { font-size: 0.8rem; color: var(--muted); }
.dash-mini dd { margin: 0.15rem 0 0; font: 700 1.5rem var(--f-display); }
.dash-kpis .stat { gap: 0.25rem; }

.delta { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; font-size: 0.86rem; flex-wrap: wrap; }
.delta .i { width: 15px; height: 15px; stroke-width: 2.2; }
.delta small { font-weight: 400; color: var(--muted); }
.delta--up { color: var(--delta-up); }
.delta--down { color: var(--bad); }
.delta--flat { color: var(--muted); }

/* ---------- Gráficas ---------- */
.viz { position: relative; min-height: 120px; }
.viz-svg { display: block; overflow: visible; }
.viz-grid { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.viz-base { stroke: var(--line-2); stroke-width: 1; shape-rendering: crispEdges; }
.viz-tick { fill: var(--muted); font: 500 12px var(--f-body); }
.viz-dlabel { fill: var(--text); font: 700 15px var(--f-display); letter-spacing: 0.03em; }
.viz-bar { fill: var(--c); transform-box: fill-box; transform-origin: 50% 100%; transition: opacity 0.2s, filter 0.2s; animation: barGrow 0.9s var(--ease) backwards; animation-delay: var(--d); }
@keyframes barGrow { from { transform: scaleY(0); } }
.viz-svg.is-hovering .viz-bar:not(.is-hot) { opacity: 0.35; }
.viz-bar.is-hot { filter: brightness(1.2); }
.viz-hit { fill: transparent; cursor: crosshair; outline: none; }
.viz-hit:focus-visible { stroke: var(--accent); stroke-width: 2; }
.viz-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; animation: draw 1.4s var(--ease) backwards; }
.viz-area { fill: var(--c); opacity: 0.1; animation: fadeIn 1s 0.5s backwards; }
.viz-dot { fill: var(--c); stroke: var(--surface); stroke-width: 2; }
.viz-cross { stroke: var(--line-2); stroke-width: 1; opacity: 0; transition: opacity 0.15s; }
.viz-dot--hover { opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.viz-svg.is-hovering .viz-cross, .viz-svg.is-hovering .viz-dot--hover { opacity: 1; }

.viz-tip { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; min-width: 150px; padding: 0.65rem 0.8rem; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--shadow); opacity: 0; transition: opacity 0.15s; color: var(--text); }
.viz-tip.is-on { opacity: 1; }
.viz-tip__title { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.3rem; }
.viz-tip__title::first-letter { text-transform: uppercase; }
.viz-tip__row { display: flex; align-items: center; gap: 0.45rem; }
.viz-tip__row i { width: 12px; height: 2px; border-radius: 2px; flex: none; }
.viz-tip__row strong { font: 700 1.15rem var(--f-display); letter-spacing: 0.02em; }
.viz-tip__row span { font-size: 0.8rem; color: var(--muted); }

.viz-stack__bar { display: flex; gap: 2px; height: 46px; margin: 0.4rem 0 1.2rem; border-radius: 6px; overflow: hidden; }
.viz-seg { flex-basis: 0; min-width: 6px; display: grid; place-items: center; background: var(--c); color: var(--ink, #fff); font: 700 1rem var(--f-display); letter-spacing: 0.03em; outline-offset: -3px; transform-origin: left; animation: segIn 0.9s var(--ease) backwards; animation-delay: var(--d); transition: filter 0.2s; cursor: default; }
.viz-seg:hover, .viz-seg:focus-visible { filter: brightness(1.15); }
.viz-seg--empty { flex: 1; background: var(--surface-2); color: var(--muted); font: 400 0.9rem var(--f-body); }
@keyframes segIn { from { transform: scaleX(0); } }
.viz-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.viz-legend li { display: grid; grid-template-columns: 10px 18px 1fr auto 3rem; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.viz-legend .i { width: 16px; height: 16px; color: var(--muted); }
.viz-legend strong { font: 700 1.1rem var(--f-display); text-align: right; font-variant-numeric: tabular-nums; }
.viz-legend small { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.viz-key { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }

.viz-rank { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.viz-rank li { display: grid; gap: 0.35rem; border-radius: 8px; outline-offset: 4px; cursor: default; }
.viz-rank__label { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-rank__track { display: flex; align-items: center; gap: 0.6rem; }
.viz-rank__bar { height: 12px; width: var(--w); min-width: 4px; background: var(--c); border-radius: 0 4px 4px 0; transform-origin: left; animation: segIn 1s var(--ease) backwards; animation-delay: var(--d); transition: filter 0.2s; }
.viz-rank li:hover .viz-rank__bar, .viz-rank li:focus-visible .viz-rank__bar { filter: brightness(1.2); }
.viz-rank strong { font: 700 1.05rem var(--f-display); white-space: nowrap; }
.viz-empty { color: var(--muted); padding: 2rem 0; text-align: center; }

.viz-table { margin-top: 0.9rem; border-top: 1px solid var(--line); padding-top: 0.6rem; }
.viz-table summary { cursor: pointer; font-size: 0.82rem; color: var(--muted); list-style: none; display: inline-flex; gap: 0.4rem; align-items: center; }
.viz-table summary::before { content: "+"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2); color: var(--text); transition: transform 0.4s var(--spring); }
.viz-table[open] summary::before { transform: rotate(45deg); }
.viz-table__wrap { max-height: 260px; overflow: auto; margin-top: 0.6rem; }
.viz-table table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.viz-table th, .viz-table td { padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--line); text-align: left; }
.viz-table td { text-align: right; }
.viz-table thead th { font-weight: 600; color: var(--muted); position: sticky; top: 0; background: var(--surface); }
.viz-table tbody th { font-weight: 400; }

[data-drawn] :is(.viz-bar, .viz-line, .viz-area) { animation: none; }

/* ---------- Recargas verificadas con el CEP de Banxico ---------- */
.refcode { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1rem; margin-top: 1rem; padding: 0.8rem 1rem; border-radius: var(--radius-sm); border: 1px dashed var(--line-2); background: var(--surface-2); }
.refcode small { display: block; color: var(--muted); font-size: 0.8rem; }
.refcode strong { font: 700 1.1rem var(--f-mono); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.cep-note { padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.cep-ok { color: var(--ok) !important; font-weight: 600; }
.cep-warn { color: var(--warn) !important; }
.cep-kv { width: 100%; text-align: left; padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.cep-kv dd { overflow-wrap: anywhere; }
.motivos .pill { white-space: normal; text-align: left; font-family: var(--f-body); }
.motivos .pill.is-active { border-color: var(--bad); color: var(--bad); }

/* ---------- Propuestas de servicio ---------- */
.proposals { display: grid; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.proposals > .empty { border: 0; border-radius: 0; }
.proposal { display: grid; gap: 0.7rem; padding: 1rem 1.15rem; animation: viewIn 0.4s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.proposal + .proposal { border-top: 1px solid var(--line); }
.proposal.is-new { box-shadow: inset 3px 0 0 var(--accent); }
.proposal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem 1rem; flex-wrap: wrap; }
.proposal__head h4 { font-size: 1.12rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.proposal__contact { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.proposal__contact .mono { font-family: var(--f-mono); letter-spacing: 0.03em; }
.proposal__text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.proposal__text { max-width: 80ch; color: var(--text); }
.proposal__foot { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }

/* ---------- Campos personalizados del servicio ---------- */
.fb { display: grid; gap: 0.8rem; padding: 1rem; border-radius: var(--radius-sm); border: 1px dashed var(--line-2); background: var(--surface-2); }
.fb__head strong { display: block; font-weight: 600; }
.fb__head small { color: var(--muted); font-size: 0.82rem; }
.fb__presets { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fb__presets .pill { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; border: 1px solid var(--line); }
.fb__presets .pill .i { width: 14px; height: 14px; }
.fb__list { display: grid; gap: 0.6rem; }
.fb__row { display: grid; grid-template-columns: 28px minmax(0, 1.6fr) minmax(130px, 1fr) auto auto; gap: 0.5rem 0.6rem; align-items: center; padding: 0.7rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); animation: viewIn 0.4s var(--ease) both; }
.fb__num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font: 700 0.8rem var(--f-display); }
.fb__req { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; white-space: nowrap; cursor: pointer; }
.fb__req input { accent-color: var(--accent); width: 16px; height: 16px; }
.fb__tools { display: flex; gap: 0.25rem; }
.fb__tools .icon-btn { width: 34px; height: 34px; }
.fb__tools [data-move="-1"] .i { transform: rotate(90deg); }
.fb__tools [data-move="1"] .i { transform: rotate(90deg); }
.fb__opts, .fb__help { grid-column: 2 / -1; }
.fb__add { justify-self: start; }
@media (max-width: 720px) {
  .fb__row { grid-template-columns: 28px 1fr; }
  .fb__type, .fb__req, .fb__tools, .fb__opts, .fb__help { grid-column: 2; }
}
.cf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; padding: 1rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.cf-title { grid-column: 1 / -1; font-size: 1.05rem; }
.cf { display: grid; gap: 0.25rem; min-width: 0; }
.cf:has(textarea), .cf:has(.drop) { grid-column: 1 / -1; }
@media (max-width: 600px) { .cf-grid { grid-template-columns: 1fr; } }
.answers { margin: 0.6rem 0; }
.answers .mono { font-family: var(--f-mono); letter-spacing: 0.04em; }

/* ---------- Avisos ---------- */
/* Discretos: fondo casi neutro, borde fino con un toque del tono y una franja de color a la izquierda */
.notices { display: grid; gap: 0.5rem; }
.notice { --tone: var(--accent); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; padding: 0.55rem 0.6rem 0.55rem 0.85rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--tone) 4%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tone) 18%, var(--line)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--tone) 70%, transparent); animation: viewIn 0.4s var(--ease) both; transition: opacity 0.3s, transform 0.3s var(--ease); }
:root[data-accent="mono"] .notice:not(.notice--importante, .notice--promo) { --tone: var(--muted); }
.notice--importante { --tone: var(--warn); }
.notice--promo { --tone: var(--ok); }
.notice.is-leaving { opacity: 0; transform: translateY(-6px); }
.notice__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: transparent; color: var(--tone); }
.notice__icon .i { width: 18px; height: 18px; }
.notice__text { display: grid; gap: 0.1rem; min-width: 0; }
.notice__text strong { font-weight: 600; font-size: 0.92rem; }
.notice__text p { color: var(--muted); font-size: 0.86rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.notice__close { width: 32px; height: 32px; border-color: transparent; background: transparent; }
.notice__text small { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; font-size: 0.8rem; }

/* ---------- Entrega con varios archivos ---------- */
.up-list, .order__files ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.up-list li, .order__files li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0.6rem; align-items: center; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); animation: viewIn 0.35s var(--ease) both; }
.up-list li span, .order__files li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.up-list small { color: var(--muted); font-size: 0.78rem; }
.up-list .icon-btn { width: 30px; height: 30px; }
.order__files li { grid-template-columns: auto minmax(0, 1fr) auto; }
.order__files { display: grid; gap: 0.6rem; }
.order__files > strong { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.92rem; }
.order__files .i { width: 18px; height: 18px; }

/* =====================================================================
   Colores por categoría: cada elemento con .has-cat recibe --cat-h (tono)
   ===================================================================== */
.has-cat { --cat: hsl(var(--cat-h, 262) 70% 52%); --cat-soft: hsl(var(--cat-h, 262) 85% 52% / 0.1); --cat-line: hsl(var(--cat-h, 262) 70% 52% / 0.32); }
:root[data-theme="dark"] .has-cat { --cat: hsl(var(--cat-h, 262) 80% 68%); --cat-soft: hsl(var(--cat-h, 262) 80% 60% / 0.12); --cat-line: hsl(var(--cat-h, 262) 80% 66% / 0.34); }

/* Filtro por categoría: chips neutrales; el color de la categoría queda en el cuadro pequeño */
.cat-legend { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cat-chip { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 38px; padding: 0.35rem 0.7rem 0.35rem 0.65rem; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 500 0.86rem var(--f-body); cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.cat-chip i { width: 8px; height: 8px; border-radius: 2px; background: var(--cat); }
.cat-chip b { font: 600 0.76rem var(--f-body); min-width: 1.6em; padding: 0.1rem 0.4rem; border-radius: 99px; background: var(--surface-2); color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.cat-chip .i { width: 15px; height: 15px; }
.cat-chip:hover { border-color: var(--line-2); }
.cat-chip.is-active { background: var(--text); border-color: var(--text); color: var(--canvas); }
.cat-chip.is-active b { background: color-mix(in srgb, var(--canvas) 18%, transparent); color: var(--canvas); }

/* Tarjeta de servicio: neutral, con el cuadro de color junto al nombre de la categoría */
.svc--cat .svc__cat::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--cat); }

@media (max-width: 600px) {
  .cat-legend { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 4px; scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity; }
  .cat-legend::-webkit-scrollbar { display: none; }
  .cat-chip { flex: none; scroll-snap-align: start; }
}

/* =====================================================================
   Listados del panel: pestañas, filtros y tablas de datos (referencia: Servicios del catálogo)
   Una sola superficie con separadores finos, encabezado de columnas, datos secundarios en gris
   y acciones con etiqueta. Cada listado define sus columnas con --cols (y el ancho de acciones con --act-w).
   ===================================================================== */
/* Pestañas secundarias: texto subrayado, sin cápsula */
.tabs-line { border-bottom: 1px solid var(--line); }
.tabs-line .pills { gap: 1.4rem; padding: 0; border: 0; border-radius: 0; background: none; }
.tabs-line .pills .pill { margin-bottom: -1px; padding: 0.55rem 0.1rem; border-radius: 0; border-bottom: 2px solid transparent; background: none; box-shadow: none; color: var(--muted); font-weight: 500; }
.tabs-line .pills .pill.is-active { background: none; color: var(--text); border-bottom-color: var(--text); }
.tabs-line .pill b { background: var(--surface-2); color: var(--muted); }
.tabs-line .pills .pill.is-active b { background: var(--surface-3); color: var(--text); }

/* Filtros: buscador y selectores del mismo alto en una fila; en pantallas menores, filas ordenadas.
   --filters cambia las columnas cuando hay menos controles. */
.filters { display: grid; grid-template-columns: var(--filters, minmax(0, 2fr) repeat(3, minmax(0, 1fr))); gap: 0.75rem; align-items: center; }
.filters--2 { --filters: minmax(0, 2fr) minmax(0, 1fr); }
.filters--select { --filters: minmax(0, 260px); }
.filters .search { max-width: none; min-width: 0; }
.filters .field--inline { min-width: 0; }
.filters :is(.search input, .field--inline select) { height: 48px; min-height: 48px; }
@media (max-width: 1100px) { .filters:not(.filters--2, .filters--select) { --filters: repeat(3, minmax(0, 1fr)); } .filters:not(.filters--2, .filters--select) .search { grid-column: 1 / -1; } }
@media (max-width: 600px) { .filters { --filters: minmax(0, 1fr); } }

/* Tabla */
.stable { --act-w: 312px; --cols: minmax(180px, 2fr) minmax(120px, 1.1fr) minmax(104px, 0.8fr) minmax(96px, 0.8fr) 118px var(--act-w); }
.stable__list { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.stable__head, .srow { display: grid; grid-template-columns: var(--cols); gap: 1rem; align-items: center; padding: 0.75rem 1rem; }
.stable__head { padding-block: 0.6rem; background: var(--surface-2); border-bottom: 1px solid var(--line); font: 600 0.78rem var(--f-body); color: var(--muted); }
.stable__head .is-num, .srow__num { padding-right: 0.75rem; text-align: right; }
.srow + .srow { border-top: 1px solid var(--line); }
.srow:hover { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.srow.is-off :is(.srow__main, .srow__cell) { opacity: 0.6; }
.srow__main { display: grid; gap: 0.2rem; min-width: 0; }
.srow__lead { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.srow__title { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.srow__sub { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem 0.4rem; min-width: 0; font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; }
.srow__sub i { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--cat); }
.srow__text { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.86rem; color: var(--muted); }
.srow__cell { display: grid; gap: 0.1rem; min-width: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.srow__cell small { font-size: 0.78rem; color: var(--muted); }
.srow__cell > small:first-child { display: none; } /* etiqueta de la columna: solo en el formato de bloque */
.srow__num > span { white-space: nowrap; color: var(--muted); font-size: 0.82rem; }
.srow__num b { font: 700 1.05rem var(--f-display); color: var(--text); font-variant-numeric: tabular-nums; }
.srow__vis { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }
.srow__vis .switch { gap: 0.55rem; font-size: 0.86rem; font-weight: 500; color: var(--muted); }
.srow__vis input:checked ~ .srow__state { color: var(--text); }
.srow__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.35rem; }
.srow__actions .btn { min-height: 36px; padding: 0.4rem 0.75rem; gap: 0.4rem; }
.srow__actions .btn .i { width: 16px; height: 16px; }
.srow__note { font-size: 0.8rem; color: var(--muted); text-align: right; }
/* Acción destructiva: discreta hasta que se apunta; el rojo solo marca que es destructiva */
.srow__del { background: transparent; color: var(--muted); border-color: transparent; }
.srow__del:hover, .srow__del:focus-visible { color: var(--bad-text); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
/* Listado con acciones debajo de los datos (filas con muchas acciones, como Recargas) */
.stable--stacked .srow__actions { grid-column: 1 / -1; padding-top: 0.6rem; border-top: 1px dashed var(--line); }
/* Dentro de una tarjeta: sin segundo borde, alineado con el contenido de la tarjeta */
.panel .stable__list { border: 0; border-radius: 0; background: none; }
.panel :is(.srow, .stable__head) { padding-inline: 0; }
.panel .stable__head { background: none; }
.panel .srow:hover { background: none; }

/* Columnas de cada listado */
.stable--users { --act-w: 460px; --cols: minmax(200px, 2fr) minmax(96px, 0.7fr) minmax(90px, 0.6fr) minmax(110px, 0.8fr) var(--act-w); }
.stable--recargas { --cols: minmax(200px, 1.5fr) minmax(110px, 0.7fr) minmax(90px, 0.6fr) minmax(200px, 1.6fr); }
.stable--pagos { --act-w: 320px; --cols: minmax(190px, 1.4fr) minmax(120px, 0.8fr) minmax(200px, 1.6fr) var(--act-w); }
.stable--dias { --cols: minmax(220px, 1.8fr) minmax(90px, 0.6fr) minmax(110px, 0.7fr) minmax(130px, 0.8fr) minmax(150px, 1fr); }
.stable--cats { --act-w: 230px; --cols: minmax(200px, 2fr) minmax(90px, 0.6fr) minmax(110px, 0.8fr) 118px var(--act-w); }
.stable--mine { --act-w: 230px; --cols: minmax(220px, 2.4fr) minmax(110px, 0.8fr) minmax(100px, 0.8fr) 118px var(--act-w); }
.stable--avisos { --act-w: 230px; --cols: minmax(220px, 2.4fr) minmax(110px, 0.8fr) minmax(150px, 1fr) 190px var(--act-w); }

/* Escritorio medio y celular: las acciones secundarias (.btn--tool) quedan solo con icono, con nombre accesible
   y descripción al pasar el cursor. En pantallas anchas y en tableta, donde hay espacio, muestran su etiqueta. */
@media (min-width: 1201px) and (max-width: 1499px) {
  .stable { --act-w: 172px; }
  .stable--users { --act-w: 240px; }
  .stable--pagos { --act-w: 210px; }
  .stable--cats, .stable--mine, .stable--avisos { --act-w: 136px; }
  .srow__actions .btn--tool { width: 36px; padding: 0; }
  .srow__actions .btn--tool > span { display: none; }
}
/* Celular: solo se reducen a icono las acciones que comparten fila con la visibilidad; las demás ocupan
   su propia fila con etiqueta y se reparten el ancho */
@media (max-width: 600px) {
  .srow__vis:not(:has(.chip)) ~ .srow__actions .btn--tool { width: 36px; padding: 0; }
  .srow__vis:not(:has(.chip)) ~ .srow__actions .btn--tool > span { display: none; }
  .srow__actions:not(.srow__vis:not(:has(.chip)) ~ .srow__actions) .btn { flex: 1 1 auto; padding-inline: 0.55rem; gap: 0.3rem; }
}
/* Tableta y celular: cada fila es un bloque compacto dentro de la misma superficie:
   título arriba · datos en tres columnas con su etiqueta · visibilidad y acciones al final */
@media (max-width: 1200px) {
  .stable__head { display: none; }
  .srow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem 1rem; padding: 0.9rem 1rem; }
  .srow__main { grid-column: 1 / -1; }
  .srow__cell { align-self: start; }
  .srow__cell > small:first-child { display: block; }
  .srow__num { padding-right: 0; text-align: left; }
  .srow__vis { grid-column: 1; }
  .srow__actions { grid-column: 1 / -1; }
  .srow__vis ~ .srow__actions { grid-column: 2 / -1; }
  .srow__note { text-align: left; }
}
/* Celular: datos en tres columnas; la visibilidad y las acciones comparten la última fila */
@media (max-width: 600px) {
  .srow { gap: 0.6rem 0.75rem; padding: 0.85rem; }
  .srow__actions { gap: 0.25rem; }
  .srow__vis:has(.chip) { grid-column: 1 / -1; }
  .srow__vis:has(.chip) ~ .srow__actions { grid-column: 1 / -1; }
}

/* Buscador de pedidos */
.search--wide { flex: 999 1 300px; max-width: none; }
.search-hint { margin-top: -0.5rem; font-size: 0.85rem; }

/* =====================================================================
   Pedidos en vista compacta (admin y proveedor): una fila por pedido
   ===================================================================== */
.viewmode { flex: none; display: flex; gap: 0.2rem; padding: 3px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); }
.viewmode .icon-btn { width: 36px; height: 36px; border-color: transparent; background: transparent; box-shadow: none; color: var(--muted); }
.viewmode .icon-btn[aria-pressed="true"] { background: var(--surface); color: var(--text); border-color: var(--line); box-shadow: var(--shadow-sm); }

.orders--compact { gap: 0.45rem; }
.orders--compact .order { grid-template-columns: minmax(0, 1fr) 150px 120px 124px; align-items: center; gap: 0.35rem 1.1rem; padding: 0.6rem 0.75rem 0.6rem 1rem; border-radius: var(--radius-sm); animation-duration: 0.35s; animation-delay: calc(var(--i, 0) * 25ms); }
.orders--compact .order__head { display: contents; }
.orders--compact .order__head > div:first-child { grid-column: 1; grid-row: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.6rem; align-items: baseline; }
.orders--compact .order__code { grid-row: 1; font-size: 0.78rem; }
.orders--compact .order h4 { grid-row: 1; margin: 0; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orders--compact .order__head .muted { grid-column: 1 / -1; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.1rem; }
.orders--compact .order__side { grid-column: 3; grid-row: 1; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.orders--compact .order__side .credits-tag { font-size: 0.9rem; }
/* Avance como barra de 3 segmentos */
.orders--compact .timeline { grid-column: 2; grid-row: 1; display: flex; gap: 4px; }
.orders--compact .timeline li { flex: 1; gap: 0; font-size: 0; }
.orders--compact .timeline--cancel { grid-column: 2; grid-row: 1; padding: 0.2rem 0.55rem; font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Acciones solo con icono (el nombre aparece al pasar el cursor) */
.orders--compact .order__actions { grid-column: 4; grid-row: 1; padding: 0; border: 0; flex-wrap: nowrap; gap: 0.35rem; justify-content: flex-end; }
.orders--compact .order__actions .btn { width: 36px; min-height: 36px; padding: 0; gap: 0; }
.orders--compact .order__actions .btn > span { display: none; }
.orders--compact .order__actions .btn .i { width: 17px; height: 17px; }
.orders--compact .order > :is(details, .order__reply, .order__files) { grid-column: 1 / -1; }
.orders--compact .order__notes { margin-top: -0.15rem; }
.orders--compact .order__notes summary { min-height: 30px; padding: 0.2rem 0.7rem 0.2rem 0.6rem; gap: 0.4rem; font-size: 0.78rem; }
.orders--compact .order__notes summary .i { width: 14px; height: 14px; }
.orders--compact .order__notes summary::after { width: 6px; height: 6px; }
.orders--compact .order__reply { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.4rem 0.75rem; font-size: 0.85rem; min-width: 0; }
.orders--compact .order__reply strong { flex: none; }
.orders--compact .order__reply p { margin: 0; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.orders--compact .order__files > strong { font-size: 0.8rem; }
.orders--compact .order__files li { padding: 0.3rem 0.6rem; }
@media (max-width: 860px) {
  .orders--compact .order { grid-template-columns: minmax(0, 1fr) auto; }
  .orders--compact .order__actions { justify-content: flex-end; }
  .orders--compact .order__head > div:first-child { grid-column: 1; }
  .orders--compact .order__side { grid-column: 2; }
  .orders--compact :is(.timeline, .timeline--cancel) { grid-column: 1; grid-row: 2; max-width: 220px; }
  .orders--compact .order__actions { grid-column: 2; grid-row: 2; }
}
/* Celular: folio sobre el nombre del servicio para que el nombre no se corte */
@media (max-width: 600px) {
  .orders--compact .order__head > div:first-child { grid-template-columns: minmax(0, 1fr); }
  .orders--compact :is(.order__code, .order h4) { grid-row: auto; }
  .orders--compact .order h4 { white-space: normal; }
}

/* Verificación en dos pasos */
.mfa-on { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: 14px; background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.mfa-on .i { width: 22px; height: 22px; }
.mfa-on span { color: var(--text); }
.mfa-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; color: var(--muted); font-size: 0.9rem; }
.mfa-qr { width: 180px; height: 180px; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.mfa-enroll code { word-break: break-all; user-select: all; padding: 0.1rem 0.35rem; border-radius: 6px; background: var(--surface-2); }

/* Listas largas de pedidos: el navegador no dibuja las filas que están fuera de la pantalla */
.orders--compact .order { content-visibility: auto; contain-intrinsic-size: auto 96px; }

/* ---------- Ajustes: grupos con título; la cuenta a la izquierda y créditos y Banxico a la derecha ---------- */
.settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.settings__group:first-child { grid-row: span 2; }
.settings__head { display: grid; gap: 0.25rem; }
.settings__group .switch { align-items: flex-start; line-height: 1.4; }
.settings__actions { grid-column: 1 / -1; position: sticky; bottom: 0; z-index: 5; margin: 0; padding: 0.75rem 0; background: var(--canvas); border-top: 1px solid var(--line); }
@media (max-width: 1000px) { .settings { grid-template-columns: minmax(0, 1fr); } .settings__group:first-child { grid-row: auto; } }

/* Celular: indicadores en dos columnas para que no ocupen la pantalla entera antes del contenido */
@media (max-width: 600px) {
  .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .grid-stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat { padding: 0.8rem 0.9rem; }
  .stat__value { font-size: 1.55rem; }
}

/* =====================================================================
   Badges del menú: color de acento suave (no rojo de error) y punto en el menú del celular
   ===================================================================== */
.nav-badge { min-width: 22px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font: 600 0.72rem/1 var(--f-body); font-variant-numeric: tabular-nums; }
:root[data-accent="mono"] .nav-badge { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
.mbar__menu.has-badge::after { content: ''; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }

/* =====================================================================
   Tarjeta de pedido (vista detallada): título y estado arriba; folio · fecha · créditos
   en una línea; avance con puntos a lo ancho; frase de qué sigue; datos y acciones en la misma franja.
   La vista compacta (proveedor/admin) no cambia.
   ===================================================================== */
.orders--compact :is(.order__price, .order__status) { display: none; }
.orders:not(.orders--compact) .order { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0.85rem; padding: 1.1rem 1.25rem; }
.orders:not(.orders--compact) .order > * { grid-column: 1 / -1; }
/* Encabezado */
.orders:not(.orders--compact) .order .order__head { flex-wrap: nowrap; align-items: flex-start; }
.orders:not(.orders--compact) .order__head > div:first-child { flex: 1 1 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.45rem; }
.orders:not(.orders--compact) .order h4 { order: -1; flex-basis: 100%; margin: 0 0 0.1rem; font-size: 1.12rem; }
.orders:not(.orders--compact) .order__head :is(.order__code, .muted, .order__price) { font-size: 0.84rem; color: var(--muted); }
.orders:not(.orders--compact) .order__head :is(.muted, .order__price)::before { content: '·'; margin-right: 0.45rem; }
.orders:not(.orders--compact) .order__price { font-weight: 600; color: var(--text) !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.orders:not(.orders--compact) .order .order__side { flex: none; flex-direction: row; align-items: center; }
.orders:not(.orders--compact) .order__side .credits-tag { display: none; }
/* Avance: puntos unidos por una línea */
.orders:not(.orders--compact) .timeline { max-width: none; gap: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.orders:not(.orders--compact) .timeline li { position: relative; gap: 0; padding-top: 20px; font-size: 0.8rem; }
.orders:not(.orders--compact) .timeline li span { position: absolute; top: 5px; left: 6px; right: -6px; height: 2px; background: var(--line-2); }
.orders:not(.orders--compact) .timeline li:last-child span { display: none; }
.orders:not(.orders--compact) .timeline li::before { content: ''; position: absolute; z-index: 1; top: 0; left: 0; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-2); }
.orders:not(.orders--compact) .timeline li.is-done::before { background: var(--muted); border-color: var(--muted); }
.orders:not(.orders--compact) .timeline li.is-done span { background: var(--muted); }
.orders:not(.orders--compact) .timeline li.is-current::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
:root[data-accent="mono"] .orders:not(.orders--compact) .timeline li.is-current::before { background: var(--text); border-color: var(--text); }
.orders:not(.orders--compact) .timeline li.is-current span { background: var(--line-2); }
.orders:not(.orders--compact) .order[data-status="entregado"] .timeline li.is-current::before { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); }
/* Qué está pasando y qué sigue */
.order__status { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--text); }
/* Datos del cliente y acciones en la misma franja (en pantallas anchas) */
.orders:not(.orders--compact) .order__actions { padding-top: 0; border-top: 0; }
.orders:not(.orders--compact) :is(.order__reply, .order__files) { order: 4; }
.orders:not(.orders--compact) .order__notes { order: 5; }
.orders:not(.orders--compact) .order__actions { order: 6; }
@media (min-width: 601px) {
  .orders:not(.orders--compact) .order__notes { grid-column: 1; align-self: start; }
  .orders:not(.orders--compact) .order:has(> .order__notes) > .order__actions { grid-column: 2; align-self: start; }
}
/* Celular: el estado sube sobre el título y la línea de folio · fecha · créditos usa todo el ancho */
@media (max-width: 600px) {
  .orders:not(.orders--compact) .order .order__head { flex-wrap: wrap; row-gap: 0.5rem; }
  .orders:not(.orders--compact) .order .order__side { order: -1; flex-basis: 100%; }
  .orders:not(.orders--compact) .order__head > div:first-child { flex-basis: 100%; }
}

/* =====================================================================
   Pedidos en celular (≤ 600 px). En PC no cambia nada.
   ===================================================================== */
@media (max-width: 600px) {
  /* Vista detallada: estado a la izquierda y créditos a la derecha en la primera línea;
     debajo título y folio · fecha (los créditos ya no quedan sueltos en otro renglón) */
  .orders:not(.orders--compact) .order { padding: 1rem; row-gap: 0.8rem; }
  .orders:not(.orders--compact) .order .order__side { justify-content: space-between; }
  .orders:not(.orders--compact) .order__side .credits-tag { display: inline; font-size: 0.95rem; }
  .orders:not(.orders--compact) .order__head .order__price { display: none; }

  /* Vista compacta: una tarjeta ordenada en lugar de columnas apretadas
     1) estado · créditos  2) folio, servicio, cliente y fecha completos  3) avance + acciones */
  .orders--compact .order { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.6rem; padding: 0.85rem 0.9rem; }
  .orders--compact .order__side { grid-column: 1 / -1; grid-row: 1; flex-direction: row; align-items: center; justify-content: space-between; }
  .orders--compact .order__head > div:first-child { grid-column: 1 / -1; grid-row: 2; }
  .orders--compact .order__head .muted { white-space: normal; }
  .orders--compact :is(.timeline, .timeline--cancel) { grid-column: 1; grid-row: 3; max-width: none; align-self: center; }
  .orders--compact .order__actions { grid-column: 2; grid-row: 3; }
  .orders--compact .order__actions .btn { width: 40px; min-height: 40px; }

  /* Datos del cliente: fila desplegable a todo el ancho, con los datos dentro del mismo recuadro */
  .order__notes { border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); }
  .order__notes summary,
  .orders--compact .order__notes summary { display: flex; width: 100%; min-height: 44px; padding: 0.55rem 0.9rem; gap: 0.55rem; border: 0; border-radius: 13px; background: transparent; font-size: 0.88rem; }
  .order__notes summary::after,
  .orders--compact .order__notes summary::after { width: 7px; height: 7px; margin-left: auto; }
  .orders--compact .order__notes summary .i { width: 16px; height: 16px; }
  .order__notes[open] summary { background: transparent; border-bottom: 1px solid var(--line); border-radius: 13px 13px 0 0; }
  .order__notes[open] > summary { margin-bottom: 0; }
  .order__notes > :not(summary) { margin: 0; padding: 0.75rem 0.9rem; }
  .order__notes > :not(summary) + :not(summary) { padding-top: 0; }
  /* Cada dato: etiqueta pequeña arriba y valor abajo */
  .order__notes .kv { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .order__notes .kv dt { font-size: 0.78rem; }
  .order__notes .kv dd + dt { margin-top: 0.55rem; }
}

/* =====================================================================
   Mi perfil: encabezado con la identidad y el estado de seguridad; debajo,
   Datos personales y Seguridad (dos pasos primero; la contraseña se abre con un botón).
   ===================================================================== */
.pf-id { display: flex; align-items: center; gap: 1.1rem; margin-bottom: var(--gap); }
.pf-id .avatar--lg { flex: none; width: 64px; height: 64px; font-size: 1.35rem; }
.pf-id__main { min-width: 0; display: grid; gap: 0.35rem; }
.pf-id__name { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.6rem; }
.pf-id__name h3 { font-size: clamp(1.2rem, 2.6vw, 1.45rem); overflow-wrap: anywhere; }
.pf-id__main > .muted { margin: 0; font-size: 0.92rem; overflow-wrap: anywhere; }
.pf-role { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line-2); font: 600 0.78rem var(--f-body); }
.pf-role[data-role="admin"] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.pf-badges { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pf-badges li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 99px; font-size: 0.82rem; font-weight: 500; background: var(--surface-2); color: var(--muted); }
.pf-badges .i { width: 15px; height: 15px; }
.pf-badges li[data-state="on"] { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok-text, var(--ok)); }
.pf-badges li[data-state="off"] { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }

.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.pf-grid .panel__head { margin-bottom: 0.2rem; }
.pf-locked input { opacity: 0.7; cursor: not-allowed; }

/* Bloques de la sección Seguridad */
.pf-block { display: grid; gap: 0.7rem; }
.pf-block__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; }
.pf-block__head h4 { font-size: 1rem; }
.pf-block > .muted { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.pf-block #mfaState .form-actions { justify-content: flex-start; }

/* Proveedor: acceso a su cuenta para recibir pagos */
.pf-link { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.7rem 1rem; }
.pf-link > div { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.pf-link > div > .i { flex: none; width: 22px; height: 22px; color: var(--muted); }
.pf-link span { display: grid; gap: 0.1rem; }
.pf-link small { color: var(--muted); font-size: 0.85rem; }
.pf-link .btn .i { width: 15px; height: 15px; }

@media (max-width: 900px) { .pf-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .pf-id { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .pf-id .avatar--lg { width: 56px; height: 56px; }
  .pf-block__head .btn { width: 100%; }
  .pf-link .btn { width: 100%; justify-content: center; }
}

/* Recargar: aviso de que Banxico puede tardar y de cómo contactar a soporte */
.rc-aviso { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
.rc-aviso > .i { flex: none; width: 17px; height: 17px; margin-top: 0.15rem; color: var(--text); }
.rc-aviso p { margin: 0; }
.rc-aviso b { color: var(--text); }
.rc-aviso__contacto { display: inline-block; margin-left: 0.15rem; font-weight: 600; color: var(--text); }
.rc-aviso__contacto a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Pedidos del proveedor separados por estado: títulos de sección con su contador */
.orders__group { display: flex; align-items: center; gap: 0.55rem; margin: 1rem 0 0.1rem; font-size: 1rem; font-weight: 600; }
.orders__group:first-child { margin-top: 0; }
.orders__group::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.orders__group[data-status="pendiente"]::before { background: var(--warn); }
.orders__group[data-status="en_proceso"]::before { background: var(--info); }
.orders__group[data-status="entregado"]::before { background: var(--ok); }
.orders__group[data-status="cancelado"]::before { background: var(--bad); }
.orders__group span { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.orders--compact .orders__group { margin-top: 0.75rem; }
.orders__more { justify-self: start; font-size: 0.9rem; font-weight: 500; }

/* Menú lateral: acceso a soporte técnico por WhatsApp, separado de las secciones */
.nav-item--support { margin-top: 0.6rem; box-shadow: 0 -1px 0 var(--line); border-radius: 0 0 10px 10px; padding-top: 0.85rem; }
.nav-item--support small { flex: none; padding: 0.15rem 0.5rem; border-radius: 99px; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok-text, var(--ok)); font-size: 0.7rem; font-weight: 600; }