/* =============================================================================
   PYMETECH · INTERFAZ 2.0 — el marco de las apps (menú, solapas, encabezados, tarjetas)

   Traducción del rediseño de Orden 2.0 que dibujó Martín Pedretti (DASSA, 23/09/2026:
   `dassa-orden/Recursos/MUESTRAS APP`, medido en `docs/rediseno/GLOSARIO-PIEZAS.md`) a la
   identidad de Pymetech Software. Santiago, 27/09/2026: «copiar todo ese diseño pero con la
   paleta violeta para las apps de Pymetech (y Smart ARCA), mantener la fuente Pymetech».

   Se hereda la FORMA —geometría, radios, densidad, jerarquía— y se cambia la IDENTIDAD:
     · rojo #BE1E2D          → gradiente de marca violeta→azul (topbar, píldora, solapa, encabezado)
     · íconos y títulos rojos→ azul de marca #3B4AEB
     · Montserrat / Work Sans→ Inter (Inter Display en títulos y cifras)
     · grises neutros        → la escala tinta-navy de la ficha (#0B1030 … #F8F9FC)
     · ámbar del badge       → ámbar semántico de Software #F5A524
   Radios: los de Orden 2.0 (decisión de Santiago, 27/09). Detalle en GLOSARIO-INTERFAZ-2.0.md.

   CSS plano, sin framework: sirve igual en una SPA con Tailwind, en un server-side o en una
   landing. Los componentes se piden por clase (`ps-*`) y leen TODO de las variables de abajo.
   ============================================================================= */

@font-face { font-family:'Inter'; src:url('/fonts/Inter-Light.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/Inter_18pt-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/Inter_18pt-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/Inter_18pt-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/Inter_18pt-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Inter Display'; src:url('/fonts/Inter_28pt-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Inter Display'; src:url('/fonts/Inter_28pt-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root {
  /* 🔴 BLOQUE LEVANTABLE. Todo lo que el marco 2.0 necesita vive acá. Para llevarlo a otra app
     se copia este bloque y la hoja de componentes; no se audita el código. Los nombres son los
     mismos que usa Orden 2.0 (`--nav-*`) salvo el acento, que en DASSA es un rojo plano y acá
     puede ser un gradiente: por eso se llama `--nav-accent` y no `--nav-red`.
     Son locales a la app que los carga (decisión del 27/09): no son los `--py-*`. */

  /* Color */
  --nav-accent: linear-gradient(135deg, #7A1FE0 0%, #5A2DE8 40%, #3B4AEB 100%); /* superficie activa */
  --nav-accent-solid: #5A2DE8;   /* el mismo acento cuando no puede ser gradiente (borde, texto) */
  --nav-accent-ink: #3B4AEB;     /* íconos y títulos activos sobre claro — 6,24:1 con blanco      */
  --nav-surface: #E6E8EF;        /* panel de solapa inactiva y contenedor de grupos (Orden #dedede) */
  --nav-slab: #D7DAE5;           /* fondo del área de contenido · solapa sin tablero (Orden #c4c4c4) */
  --nav-card: #FFFFFF;           /* tarjeta del grupo abierto · superficies                       */
  --nav-frame: #F8F9FC;          /* tarjeta de contenido (Orden #f4f4f4)                          */
  --nav-ink: #343B6B;            /* ítems del menú y trazo de íconos (Orden #4d4d4d)              */
  --nav-ink-strong: #0B1030;     /* encabezado de grupo, títulos (Orden #000)                     */
  --nav-ink-soft: #5A6186;       /* hijos de grupo, subtítulos (Orden #666)                       */
  --nav-ink-tab: #858BA8;        /* rótulo de solapa inactiva — sólo texto grande en negrita      */
  --nav-badge: #F5A524;          /* contador                                                      */
  --nav-line: #E6E8EF;
  --ok: #14B86A;   --ok-bg: #DCFBE9;
  --warn: #F5A524; --warn-bg: #FEF2D6; --warn-ink: #B67812;
  --err: #EF4444;  --err-bg: #FEE1E1;

  /* Medidas — leídas del SVG de Orden 2.0 (artboard 1920 × 961, 1 unidad = 1 px) */
  --nav-w: 252px;
  --nav-top-h: 94px;
  --nav-tab-h: 69px;
  --nav-row-h: 44px;
  --nav-row-gap: 4px;
  --nav-child-h: 26px;
  --nav-group-h: 41px;
  --nav-tab-fs: 19.45px;         /* rótulo de solapa: el de Orden es para siglas de 4 letras;
                                    con palabras enteras (VENTAS / COMPRAS) la app lo baja a 16 */
  --nav-gutter-x: 17px;          /* calle entre el fondo gris y la tarjeta de contenido */
  --nav-gutter-y: 13px;
  --nav-pad: 43px;               /* padding interno de la tarjeta hasta el título        */

  /* Radios — el lenguaje de Orden 2.0, del más chico al más grande */
  --nav-r-badge: 8.61px;
  --nav-r-child: 13.06px;
  --nav-r-pill: 17.33px;
  --nav-r-tab: 20px;
  --nav-r-group: 20.64px;
  --nav-r-frame: 27.88px;

  /* Tipografía — Inter para interfaz, Inter Display para títulos y cifras */
  --ui-font: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ui-font-display: 'Inter Display', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ui-ease: .2s cubic-bezier(.2,.7,.3,1);
  --ui-shadow-menu: 0 16px 34px -18px rgba(10,16,48,.5);
}

/* ── El marco ───────────────────────────────────────────────────────────────────────────── */
.ps-shell { display:grid; grid-template-columns:var(--nav-w) 1fr; grid-template-rows:var(--nav-top-h) 1fr;
  min-height:100vh; font-family:var(--ui-font); color:var(--nav-ink-strong); background:var(--nav-slab); }

/* Topbar de marca: la franja de color de ancho completo. Logo + barra + nombre de la app. */
.ps-top { grid-column:1 / -1; display:flex; align-items:center; gap:18px; padding:0 30px;
  background:var(--nav-accent); color:#fff; }
.ps-top .ps-logo { height:30px; width:auto; display:block; }
.ps-top .ps-sep { width:2px; height:28px; background:rgba(255,255,255,.85); border-radius:1px; }
.ps-top .ps-app { font-family:var(--ui-font-display); font-weight:600; font-size:22px; letter-spacing:-.01em; }
.ps-top .ps-top-der { margin-left:auto; display:flex; align-items:center; gap:18px; font-size:14px; font-weight:500; }

/* Menú lateral */
.ps-nav { background:var(--nav-card); display:flex; flex-direction:column; padding-bottom:18px; overflow-y:auto; }
/* Smart ARCA (27/09): única diferencia con el kit — el selector va en :where() para que no le gane
   a los tamaños que cada ícono de la app ya declara (h-4, size-4…). Los íconos sin tamaño siguen en 20. */
:where(.ps-nav, .ps-page) svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* La franja de solapas. NO son dos botones: es una franja donde la mitad activa es una forma con
   las dos esquinas inferiores redondeadas, recortada sobre un panel que redondea sólo la externa,
   y un ENCASTRE CÓNCAVO en la unión (máscara radial: el recorte inverso que border-radius no hace).
   El gradiente se pinta con el tamaño de la franja entera para que la solapa y el encastre sean la
   misma superficie y no dos cortes del gradiente. */
.ps-tabs { position:relative; display:flex; height:var(--nav-tab-h); background:var(--nav-surface);
  border-radius:0 0 var(--nav-r-tab) var(--nav-r-tab); flex-shrink:0; }
.ps-tabs::before, .ps-tabs::after { content:''; position:absolute; top:0; pointer-events:none;
  background:var(--nav-accent); background-size:var(--nav-w) var(--nav-tab-h); }
.ps-tabs::before { bottom:0; width:50%; border-radius:0 0 var(--nav-r-tab) var(--nav-r-tab); }
.ps-tabs::after { width:21px; height:21px; }
.ps-tabs[data-activa="izq"]::before { left:0; background-position:0 0; }
.ps-tabs[data-activa="izq"]::after { left:50%; background-position:calc(var(--nav-w) / -2) 0;
  -webkit-mask:radial-gradient(circle 21px at 100% 100%, transparent 99%, #000 100%);
          mask:radial-gradient(circle 21px at 100% 100%, transparent 99%, #000 100%); }
.ps-tabs[data-activa="der"]::before { right:0; background-position:calc(var(--nav-w) / -2) 0; }
.ps-tabs[data-activa="der"]::after { right:50%; background-position:calc(var(--nav-w) / -2 + 21px) 0;
  -webkit-mask:radial-gradient(circle 21px at 0% 100%, transparent 99%, #000 100%);
          mask:radial-gradient(circle 21px at 0% 100%, transparent 99%, #000 100%); }
/* Sin tablero activo la forma se queda a la izquierda, en el gris medio (así lo dibuja Orden). */
.ps-tabs[data-activa="ninguna"]::before { left:0; background:var(--nav-slab); }
.ps-tabs[data-activa="ninguna"]::after { left:50%; background:var(--nav-slab);
  -webkit-mask:radial-gradient(circle 21px at 100% 100%, transparent 99%, #000 100%);
          mask:radial-gradient(circle 21px at 100% 100%, transparent 99%, #000 100%); }
.ps-tab { position:relative; z-index:1; flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--ui-font-display); font-weight:700; font-size:var(--nav-tab-fs); letter-spacing:-.01em;
  color:var(--nav-ink-tab); text-decoration:none; }
.ps-tab.is-active { color:#fff; }
.ps-tab svg { width:18px; height:18px; }

/* Ítems sueltos: píldora de 208 × 44, r 17,33, texto 14 px, ícono de 20. */
.ps-rows { display:flex; flex-direction:column; gap:var(--nav-row-gap); padding:14px 22px 0; }
.ps-row { white-space:nowrap; display:flex; align-items:center; gap:18px; height:var(--nav-row-h); padding:0 12px 0 10px;
  border-radius:var(--nav-r-pill); font-size:14px; font-weight:500; color:var(--nav-ink);
  text-decoration:none; transition:background var(--ui-ease); }
.ps-row:hover { background:rgba(11,16,48,.04); }
.ps-row.is-active { background:var(--nav-accent); color:#fff; }
.ps-badge { margin-left:auto; min-width:30px; height:18px; padding:0 6px; display:inline-flex;
  align-items:center; justify-content:center; border-radius:var(--nav-r-badge); background:var(--nav-badge);
  color:#fff; font-family:var(--ui-font-display); font-weight:700; font-size:12px; }

/* Contenedor de grupos: caja gris de 231, r 20,64. El grupo abierto es una TARJETA BLANCA que flota
   adentro, no una lista expandida. */
.ps-groups { margin:18px 10px 0; padding:6px 0; background:var(--nav-surface); border-radius:var(--nav-r-group); }
.ps-group-h { display:flex; align-items:center; height:var(--nav-group-h); padding:0 18px 0 27px;
  font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--nav-ink-strong); }
.ps-group-h svg { margin-left:auto; width:14px; height:14px; }
.ps-group.is-open { margin:4px 11px; padding:0 5px 8px; background:var(--nav-card); border-radius:var(--nav-r-pill); }
.ps-group.is-open .ps-group-h { padding-left:16px; color:var(--nav-accent-ink); }
.ps-child { display:flex; align-items:center; height:var(--nav-child-h); padding:0 11px; margin-top:2px;
  border-radius:var(--nav-r-child); font-size:14px; font-weight:500; color:var(--nav-ink-soft); text-decoration:none; }
.ps-child.is-active { background:var(--nav-accent); color:#fff; }

/* ── El área de contenido ───────────────────────────────────────────────────────────────── */
.ps-main { padding:var(--nav-gutter-y) var(--nav-gutter-x); min-width:0; }
.ps-page { background:var(--nav-frame); border-radius:var(--nav-r-frame); min-height:calc(100vh - var(--nav-top-h) - 2 * var(--nav-gutter-y));
  padding:var(--nav-pad); }

/* Encabezado de página interior: ícono en azul + título; subtítulo abajo. Sin banda de color. */
.ps-head { display:flex; align-items:center; gap:14px; }
.ps-head svg { width:30px; height:30px; color:var(--nav-accent-ink); stroke-width:1.75; }
.ps-title { font-family:var(--ui-font-display); font-weight:700; font-size:32.9px; letter-spacing:-.02em; color:var(--nav-ink-strong); margin:0; }
.ps-sub { margin:6px 0 0; font-size:13px; color:var(--nav-ink-soft); }
.ps-toolbar { display:flex; align-items:center; gap:10px; margin-left:auto; }

/* Encabezado de tablero: el bloque de color redondeado adentro de la tarjeta. */
.ps-board { display:flex; align-items:center; gap:24px; padding:18px 26px; margin:calc(var(--nav-pad) * -1 + 10px) calc(var(--nav-pad) * -1 + 10px) 26px;
  background:var(--nav-accent); color:#fff; border-radius:var(--nav-r-frame) var(--nav-r-frame) var(--nav-r-frame) var(--nav-r-frame); }
.ps-board .ps-board-t { font-family:var(--ui-font-display); font-weight:700; font-size:43px; letter-spacing:-.02em; line-height:1; }
.ps-board .ps-board-f { font-size:12px; opacity:.9; margin-top:4px; }
.ps-board svg { width:40px; height:40px; stroke-width:1.6; }

/* Controles */
.ps-input { display:flex; align-items:center; gap:10px; height:42px; min-width:260px; padding:0 16px;
  border:1px solid var(--nav-slab); border-radius:var(--nav-r-pill); background:#fff; color:var(--nav-ink-soft); font-size:13px; }
.ps-board .ps-input { border:0; height:34px; }
.ps-board .ps-input svg, .ps-board .ps-btn svg { width:16px; height:16px; stroke-width:1.75; }
.ps-btn { display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 16px; border-radius:var(--nav-r-pill);
  font-size:13px; font-weight:600; border:1px solid var(--nav-slab); background:#fff; color:var(--nav-ink); }
.ps-btn svg { width:16px; height:16px; }
.ps-btn.is-primary { border:0; background:var(--nav-accent); color:#fff; }
.ps-board .ps-btn { border:0; background:rgba(255,255,255,.18); color:#fff; }
.ps-seg { display:inline-flex; background:#fff; border-radius:var(--nav-r-pill); padding:3px; gap:2px; }
.ps-seg span { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:74px; height:44px; padding:0 12px;
  border-radius:calc(var(--nav-r-pill) - 3px); color:var(--nav-ink); font-family:var(--ui-font-display); font-weight:700; font-size:14px; }
.ps-seg span small { font-family:var(--ui-font); font-weight:500; font-size:8px; letter-spacing:.06em; text-transform:uppercase; color:var(--nav-ink-soft); }
.ps-seg span.is-active { background:var(--nav-accent); color:#fff; }
.ps-seg span.is-active small { color:rgba(255,255,255,.85); }

/* Solapas segmentadas de una página (Orden: «Coordinación») y barra de filtros de color. */
.ps-tabline { display:flex; align-items:center; gap:4px; margin-top:22px; }
.ps-tabline .ps-t { height:30px; padding:0 14px; display:flex; align-items:center; border-radius:9px 9px 0 0;
  font-size:12px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--nav-ink); background:var(--nav-surface); }
.ps-tabline .ps-t.is-active { background:var(--nav-accent); color:#fff; }
.ps-filters { display:flex; align-items:center; gap:18px; padding:10px 16px; border-radius:0 var(--nav-r-pill) var(--nav-r-pill) var(--nav-r-pill);
  background:var(--nav-accent); color:#fff; font-size:12px; font-weight:600; }
.ps-filters .ps-seg { padding:2px; }
.ps-filters .ps-seg span { height:24px; min-width:0; font-family:var(--ui-font); font-weight:500; font-size:11.5px; color:var(--nav-ink); }
.ps-filters .ps-seg span.is-active { color:#fff; }

/* Cifras (KPI) */
.ps-kpis { display:flex; gap:10px; margin-top:18px; }
.ps-kpi { min-width:124px; padding:8px 14px 10px; background:#fff; border:1px solid var(--nav-line); border-radius:12px; }
.ps-kpi .k { font-size:9.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--nav-ink-soft); }
.ps-kpi .v { font-family:var(--ui-font-display); font-weight:700; font-size:30px; line-height:1.05; color:var(--nav-ink-strong); }
.ps-kpi.is-alerta .k, .ps-kpi.is-alerta .v { color:var(--err); }
/* El ámbar pleno no llega al contraste sobre blanco: el texto va en su tono oscuro. */
.ps-kpi.is-aviso .k, .ps-kpi.is-aviso .v { color:var(--warn-ink); }

/* Secciones plegables y tarjetas de estado */
.ps-section { margin-top:12px; background:#fff; border-radius:16px; padding:14px 18px; }
.ps-section-h { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--nav-ink-strong); }
.ps-section-h svg { width:15px; height:15px; color:var(--nav-accent-ink); }
.ps-section-h .n { margin-left:auto; color:var(--nav-accent-ink); }
.ps-status { width:280px; padding:12px 14px; background:#fff; border:2px solid var(--nav-accent-solid); border-radius:16px; }
.ps-status .e { font-size:9.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--nav-ink-soft); }
.ps-status .t { font-family:var(--ui-font-display); font-weight:700; font-size:19px; color:var(--nav-accent-ink); margin:2px 0; }
.ps-status .d { font-size:10.5px; color:var(--nav-ink-soft); }
.ps-status .ok { display:flex; align-items:center; gap:8px; margin-top:12px; padding:6px 10px; background:var(--ok-bg); border-radius:10px; font-size:10.5px; color:#0E8C4F; font-weight:600; }
.ps-status .ok svg { width:16px; height:16px; }
.ps-status.is-aviso { border-color:var(--warn); }
.ps-status.is-aviso .t { color:var(--warn-ink); }
.ps-chip { display:inline-flex; align-items:center; height:20px; padding:0 10px; border-radius:10px; font-size:10.5px; font-weight:600; color:#fff; }
.ps-chip.ok { background:var(--ok); } .ps-chip.err { background:var(--err); } .ps-chip.gris { background:var(--nav-surface); color:var(--nav-ink); }

/* Tabla: encabezados en azul y mayúsculas, filas limpias. */
.ps-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.ps-table th { text-align:left; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--nav-accent-ink); padding:8px 10px; }
.ps-table td { padding:9px 10px; border-top:1px solid var(--nav-line); color:var(--nav-ink); }
.ps-table td.num { text-align:right; font-variant-numeric:tabular-nums; }

/* Celular: el menú pasa a drawer; la franja y las píldoras van en porcentajes y sirven igual. */
@media (max-width: 900px) {
  .ps-shell { grid-template-columns:1fr; grid-template-rows:64px 1fr; }
  .ps-top { padding:0 16px; } .ps-top .ps-logo { height:22px; } .ps-top .ps-app { font-size:17px; }
  .ps-nav { display:none; }
  .ps-main { padding:10px; } .ps-page { padding:22px 16px; border-radius:22px; }
  .ps-title { font-size:26px; }
}