/* ═══════════════════════════════════════════════════
   BRAVU DESIGN SYSTEM · CSS compartido · v1.0
   Fuente de verdad visual. Importar en toda pantalla:
   <link rel="stylesheet" href="/bravu-ds.css">
   ═══════════════════════════════════════════════════ */

:root{
  /* Tipografía */
  --font:'Plus Jakarta Sans',sans-serif;
  --body:'DM Sans',sans-serif;
  --mono:'DM Mono',monospace;
  /* Escala texto */
  --text-xs:11px;--text-sm:12px;--text-base:14px;--text-md:15px;
  --text-lg:17px;--text-xl:20px;--text-2xl:24px;--text-3xl:30px;--text-4xl:38px;
  /* Neutrales */
  --t1:#0f172a;--t2:#334155;--tm:#64748b;--t3:#94a3b8;--t4:#cbd5e1;
  --border:#e8eaed;--border-soft:#eef1f5;--surface:#fff;--canvas:#f8f9fb;
  /* Obsidiana */
  --ob:#05070f;--ob-900:#05070f;--ob-800:#0b0f19;--ob-700:#141926;
  /* Acentos marca */
  --or:#f97316;--or-600:#ea580c;--or-d:rgba(249,115,22,0.10);--or-b:rgba(249,115,22,0.22);
  --mg:#db2777;--mg-d:rgba(219,39,119,0.10);
  --pu:#a855f7;--pu-d:rgba(168,85,247,0.10);--pu-b:rgba(168,85,247,0.24);
  /* Semánticos */
  --gn:#10b981;--gn-d:rgba(16,185,129,0.10);--gn-b:rgba(16,185,129,0.26);
  --am:#f59e0b;--am-d:rgba(245,158,11,0.10);--am-b:rgba(245,158,11,0.26);
  --rd:#ef4444;--rd-d:rgba(239,68,68,0.08);--rd-b:rgba(239,68,68,0.22);
  --bl:#3b82f6;--bl-d:rgba(59,130,246,0.10);--bl-b:rgba(59,130,246,0.24);
  /* Firma */
  --gradient:linear-gradient(90deg,#f97316,#db2777,#a855f7);
  --gradient-135:linear-gradient(135deg,#f97316,#db2777,#a855f7);
  /* Espaciado */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;
  /* Radios */
  --r-sm:8px;--r-md:10px;--r-lg:13px;--r-xl:16px;--r-2xl:20px;--r-full:100px;
  /* Sombras */
  --sh-sm:0 1px 2px rgba(0,0,0,0.04);
  --sh-md:0 1px 3px rgba(0,0,0,0.04),0 4px 12px rgba(0,0,0,0.04);
  --sh-lg:0 4px 16px rgba(0,0,0,0.06),0 12px 32px rgba(0,0,0,0.04);
  --sh-or:0 4px 14px rgba(249,115,22,0.28);
  /* Transiciones */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --dur-fast:.15s;--dur:.22s;--dur-slow:.3s;
}

/* ── Botones ── */
.ds-btn{font-family:var(--font);font-weight:700;font-size:var(--text-base);border-radius:var(--r-lg);padding:12px 20px;border:1px solid transparent;cursor:pointer;transition:all var(--dur) var(--ease);display:inline-flex;align-items:center;gap:8px;position:relative;overflow:hidden}
.ds-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none}
.ds-btn:active{transform:scale(.97)}
.ds-btn-primary{background:var(--ob-900);color:#fff}
.ds-btn-primary:hover{background:var(--ob-700);box-shadow:var(--sh-md)}
.ds-btn-brand{background:var(--gradient);color:#fff;box-shadow:var(--sh-or)}
.ds-btn-brand:hover{box-shadow:0 6px 20px rgba(249,115,22,0.4);transform:translateY(-1px)}
.ds-btn-secondary{background:var(--surface);color:var(--t2);border-color:var(--border)}
.ds-btn-secondary:hover{border-color:var(--t4);background:var(--canvas)}
.ds-btn-ghost{background:transparent;color:var(--or);border-color:var(--or-b)}
.ds-btn-ghost:hover{background:var(--or-d)}
.ds-btn-danger{background:var(--rd-d);color:var(--rd);border-color:var(--rd-b)}
.ds-btn-danger:hover{background:var(--rd);color:#fff}
.ds-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.ds-btn-loading{color:transparent!important;pointer-events:none}
.ds-btn-loading::after{content:'';position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;left:calc(50% - 8px);top:calc(50% - 8px);animation:ds-spin .6s linear infinite}
@keyframes ds-spin{to{transform:rotate(360deg)}}

/* ── Inputs ── */
.ds-field{margin-bottom:16px}
.ds-label{display:block;font-family:var(--font);font-size:var(--text-xs);font-weight:700;color:var(--tm);text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px}
.ds-input{width:100%;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-md);padding:11px 14px;font-family:var(--body);font-size:var(--text-base);color:var(--t1);outline:none;transition:all var(--dur-fast) var(--ease)}
.ds-input::placeholder{color:var(--t3)}
.ds-input:focus{border-color:var(--or);box-shadow:0 0 0 3px var(--or-d)}
.ds-input.error{border-color:var(--rd)}
.ds-input.error:focus{box-shadow:0 0 0 3px var(--rd-d)}
.ds-input.success{border-color:var(--gn)}

/* ── Badges ── */
.ds-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font);font-size:var(--text-xs);font-weight:700;padding:4px 11px;border-radius:var(--r-full);border:1px solid}
.ds-badge-neutral{background:var(--canvas);color:var(--tm);border-color:var(--border)}
.ds-badge-brand{background:var(--or-d);color:var(--or);border-color:var(--or-b)}
.ds-badge-success{background:var(--gn-d);color:var(--gn);border-color:var(--gn-b)}
.ds-badge-warning{background:var(--am-d);color:var(--am);border-color:var(--am-b)}
.ds-badge-danger{background:var(--rd-d);color:var(--rd);border-color:var(--rd-b)}
.ds-badge-info{background:var(--bl-d);color:var(--bl);border-color:var(--bl-b)}
.ds-badge-dot::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}

/* ── Switch segmentado ── */
.ds-seg{display:inline-flex;position:relative;background:#eef0f3;border-radius:11px;padding:3px;box-shadow:inset 0 1px 2px rgba(0,0,0,0.05);cursor:pointer}
.ds-seg-thumb{position:absolute;top:3px;bottom:3px;width:calc(50% - 3px);background:var(--or);border-radius:8px;transition:transform var(--dur-slow) var(--ease),background var(--dur) var(--ease);box-shadow:0 1px 3px rgba(0,0,0,0.12);left:3px}
.ds-seg.right .ds-seg-thumb{transform:translateX(100%);background:var(--gn)}
.ds-seg-opt{position:relative;z-index:1;padding:7px 16px;font-family:var(--font);font-size:var(--text-sm);font-weight:700;color:var(--tm);transition:color var(--dur);user-select:none}
.ds-seg:not(.right) .ds-seg-opt:first-of-type{color:#fff}
.ds-seg.right .ds-seg-opt:last-of-type{color:#fff}

/* ── Toggle ── */
.ds-toggle{position:relative;width:44px;height:26px;background:var(--border);border-radius:var(--r-full);cursor:pointer;transition:background var(--dur) var(--ease)}
.ds-toggle.on{background:var(--or)}
.ds-toggle-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,0.2);transition:transform var(--dur) var(--ease)}
.ds-toggle.on .ds-toggle-knob{transform:translateX(18px)}

/* ── Card interactiva ── */
.ds-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:18px;transition:all var(--dur) var(--ease)}
.ds-card-interactive{cursor:pointer}
.ds-card-interactive:hover{border-color:var(--or-b);box-shadow:var(--sh-lg);transform:translateY(-2px)}

/* ── Estados ── */
.ds-spinner{width:28px;height:28px;border:3px solid var(--or-d);border-top-color:var(--or);border-radius:50%;animation:ds-spin .7s linear infinite}
.ds-check{width:40px;height:40px;border-radius:50%;background:var(--gn);display:flex;align-items:center;justify-content:center;animation:ds-pop .4s var(--ease)}
.ds-check svg{width:20px;height:20px;stroke:#fff;stroke-width:3;fill:none}
@keyframes ds-pop{0%{transform:scale(0)}60%{transform:scale(1.15)}100%{transform:scale(1)}}

/* ── Fila desplazable (con /bravu-fila.js) ── */
/* Contenedor .ds-fila > primer hijo = la fila. Degradado donde hay más chips; flechas solo con mouse.
   --ds-fila-fondo: color de fondo de la fila (el degradado se funde con él).
   --ds-fila-borde: alto del borde inferior de la fila, para que el degradado no lo tape. */
.ds-fila{position:relative;flex-shrink:0;min-width:0;--ds-fila-fondo:var(--surface);--ds-fila-borde:0px}
.ds-fila::before,.ds-fila::after{content:'';position:absolute;top:0;bottom:var(--ds-fila-borde);width:36px;pointer-events:none;opacity:0;transition:opacity var(--dur-fast) var(--ease);z-index:1}
.ds-fila::before{left:0;background:linear-gradient(90deg,var(--ds-fila-fondo) 20%,transparent)}
.ds-fila::after{right:0;background:linear-gradient(270deg,var(--ds-fila-fondo) 20%,transparent)}
.ds-fila.ds-fila-prev::before,.ds-fila.ds-fila-next::after{opacity:1}
.ds-fila-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:28px;height:28px;padding:0;border-radius:var(--r-full);border:1.5px solid var(--border);background:var(--surface);color:var(--t1);box-shadow:var(--sh-sm);display:none;align-items:center;justify-content:center;cursor:pointer}
.ds-fila-nav:hover{border-color:var(--ob-900)}
.ds-fila-nav:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.ds-fila-nav svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.5;fill:none}
.ds-fila-nav.prev{left:4px}
.ds-fila-nav.next{right:4px}
@media (hover:hover) and (pointer:fine){
  .ds-fila.ds-fila-prev .ds-fila-nav.prev,.ds-fila.ds-fila-next .ds-fila-nav.next{display:flex}
}

/* ── Desplegable propio (con /bravu-selector.js) ── */
/* Abre DEBAJO de la casilla, alineado, con fondo translucido (el menu del sistema en Mac se abre encima y la tapa).
   El contenedor que lo tenga no debe recortar (overflow visible) para que el panel se vea. */
.ds-sel{position:relative}
.ds-sel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1.5px solid var(--border);border-radius:var(--r-md);padding:10px 12px;background:var(--surface);font-family:var(--body);font-size:14px;color:var(--t1);cursor:pointer;text-align:left;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.ds-sel-btn:hover{border-color:var(--t3)}
.ds-sel-btn[aria-expanded="true"],.ds-sel-btn:focus-visible{border-color:var(--or);box-shadow:0 0 0 3px var(--or-d);outline:none}
.ds-sel-chev{width:16px;height:16px;stroke:var(--t3);stroke-width:2;fill:none;flex-shrink:0;transition:transform var(--dur-fast) var(--ease)}
.ds-sel-btn[aria-expanded="true"] .ds-sel-chev{transform:rotate(180deg)}
.ds-sel-panel{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);border:1px solid rgba(15,23,42,.08);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:6px;max-height:260px;overflow-y:auto;animation:ds-sel-abre var(--dur-fast) var(--ease)}
@keyframes ds-sel-abre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ds-sel-op{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;border:0;border-radius:var(--r-sm);background:transparent;font-family:var(--body);font-size:14px;color:var(--t1);cursor:pointer;text-align:left}
.ds-sel-op:hover,.ds-sel-op:focus{background:rgba(15,23,42,.06);outline:none}
.ds-sel-op[aria-selected="true"]{font-weight:700}
.ds-sel-op small{color:var(--tm);font-size:11px;font-weight:600;margin-left:6px}
.ds-sel-ok{width:16px;height:16px;stroke:var(--or);stroke-width:2.5;fill:none;flex-shrink:0}

/* ── Ovi con mensaje (Lote Ovi, 7 nov 2026) ──
   La mascota de Bravu en momentos vacíos o de logro: imagen + título + una frase.
   Uso: <div class="ds-ovi"><img src="/ovi/generico_pensativo.webp" alt="" width="120" height="120" loading="lazy">
        <p class="ds-ovi-titulo">No encontré nada</p><p class="ds-ovi-texto">Prueba con otra palabra.</p></div>
   La imagen es decorativa (alt=""): el mensaje lo dice el texto. Nunca dentro de la caja mientras se vende ni en el
   catálogo del cliente. Imágenes en /ovi/ (webp livianas). Los selectores van con .ds-ovi delante para ganarle a
   estilos de la pantalla como `.empty-state p`. */
.ds-ovi{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px 16px}
.ds-ovi img{width:120px;height:120px;object-fit:contain;margin-bottom:4px}
.ds-ovi .ds-ovi-titulo{margin:0;font-family:var(--font);font-size:var(--text-md);font-weight:700;color:var(--t1)}
.ds-ovi .ds-ovi-texto{margin:0;font-family:var(--body);font-size:var(--text-base);color:var(--tm);line-height:1.5;max-width:300px}
.ds-ovi .ds-ovi-texto a{color:var(--or);font-weight:600;text-decoration:none}
@media (max-width:600px){.ds-ovi{padding:16px 12px}.ds-ovi img{width:96px;height:96px}}
/* Saludo de Ovi en una entrada (ej. /entrar): solo la imagen, encima del título. */
.ds-ovi-saludo{display:block;width:84px;height:auto;margin:0 auto 6px}

/* ── Celular: campos de 16 px (Lote Pantallas en celular, 6 nov 2026, TD-141) ──
   El iPhone acerca la pantalla al tocar un campo con letra de menos de 16 px y la deja corrida.
   Solo en pantallas táctiles (en computador no cambia nada). Una sola regla para todas las pantallas del
   sistema de diseño; las que no usan este archivo llevan la misma regla en su <style> (ver TD-144). */
@media (hover:none) and (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  select,textarea{font-size:16px!important}
}