/* ===================================================================
   Optipos.UI — ui.css  (REDISEÑO)
   Tokens globales de diseño. Drop-in: conserva los mismos nombres de
   variables y clases que la librería actual, con la nueva identidad
   (cobre + neutros cálidos). Tema claro = :root · Tema oscuro = .dark
   =================================================================== */

/* Las tres fuentes del sistema viajan dentro de esta librería, igual que los
   componentes. Así las tres aplicaciones usan la misma sin depender de la red:
   el POS funciona sin conexión, y antes se quedaba en la fuente del sistema
   porque nadie cargaba Schibsted Grotesk por ningún sitio. */
@font-face {
  font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Tipografía */
  --ui-font-sans: 'Schibsted Grotesk', system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui-font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", monospace;

  /* Radios */
  --ui-radius-xs: 0.375rem;
  --ui-radius-sm: 0.5rem;
  --ui-radius-md: 0.75rem;
  --ui-radius-lg: 1rem;
  --ui-radius-xl: 1.5rem;

  /* Alturas canónicas */
  --ui-height-xs: 1.625rem;
  --ui-height-sm: 2.125rem;
  --ui-height-md: 2.5rem;
  --ui-height-lg: 3rem;

  /* Padding estándar */
  --ui-px-sm: 0.625rem;
  --ui-px-md: 0.875rem;
  --ui-px-lg: 1.125rem;
  --ui-py-md: 0.625rem;

  /* Cobre de marca (gradiente + sólido) */
  --ui-brand-1: #e9a576;
  --ui-brand-2: #c87a4d;
  --ui-gradient: linear-gradient(135deg, #e9a576 0%, #c87a4d 100%);

  /* Superficie oscura constante. La usa el Toast, que se ve igual en los dos temas
     porque flota sobre la aplicación y no forma parte de ella. Los valores son los
     del tema oscuro de más abajo, para no inventar una paleta aparte: eso es lo que
     había, con un negro cálido del diseño anterior y cuatro semánticos propios. */
  --ui-inverse: #111727;
  --ui-inverse-foreground: #e8edf7;
  --ui-inverse-border: rgba(255,255,255,.08);
  --ui-inverse-success: #22d07a;
  --ui-inverse-warning: #f7b13b;
  --ui-inverse-destructive: #ff5a63;
  --ui-inverse-info: #7cb8ff;
}

/* ───────────────────────────────────────────────
   TEMA CLARO (por defecto)
─────────────────────────────────────────────── */
:root {
  /* Base */
  --ui-background: #f7f4f1;
  --ui-foreground: #16181d;
  --ui-card: #ffffff;
  --ui-card-foreground: #16181d;
  --ui-popover: #ffffff;
  --ui-popover-foreground: #16181d;
  --ui-border: #e6e2db;
  --ui-input: #ffffff;
  --ui-ring: #bd6438;
  --ui-overlay: rgba(28, 22, 16, 0.42);

  /* Brand — terracota profundo para contraste sobre claro */
  --ui-primary: #bd6438;
  --ui-primary-foreground: #ffffff;
  --ui-secondary: #efe9e2;
  --ui-secondary-foreground: #14233f;
  --ui-accent: #f0ebe4;
  --ui-accent-foreground: #16181d;

  /* Semánticos */
  --ui-success: #1f9d57;
  --ui-success-foreground: #ffffff;
  --ui-warning: #c87f24;
  --ui-warning-foreground: #ffffff;
  --ui-info: #2f6bbf;
  --ui-info-foreground: #ffffff;
  --ui-destructive: #c83b32;
  --ui-destructive-foreground: #ffffff;

  /* Neutral / muted */
  --ui-neutral: #ece7e1;
  --ui-neutral-foreground: #2a2723;
  --ui-muted: #f1ede8;
  --ui-muted-foreground: #6c6f78;

  /* Sombras (cálidas) */
  --ui-shadow-sm: 0 1px 2px rgba(40,28,18,0.06);
  --ui-shadow-md: 0 6px 18px -8px rgba(40,28,18,0.14), 0 2px 5px rgba(40,28,18,0.05);
  --ui-shadow-lg: 0 22px 48px -16px rgba(40,28,18,0.18), 0 6px 14px rgba(40,28,18,0.08);

  /* Sidebar */
  --ui-sidebar: #ffffff;
  --ui-sidebar-foreground: #16181d;
  --ui-sidebar-border: #e6e2db;
  --ui-sidebar-accent: #f1ede8;
  --ui-sidebar-accent-foreground: #16181d;

  /* RGB para rgba() — Android WebView fallbacks */
  --ui-primary-rgb: 189, 100, 56;
  --ui-success-rgb: 31, 157, 87;
  --ui-warning-rgb: 200, 127, 36;
  --ui-destructive-rgb: 200, 59, 50;
  --ui-info-rgb: 47, 107, 191;
  --ui-muted-rgb: 241, 237, 232;
  --ui-neutral-rgb: 236, 231, 225;
  --ui-accent-rgb: 240, 235, 228;
}

/* ───────────────────────────────────────────────
   TEMA OSCURO  (.dark)
─────────────────────────────────────────────── */
.dark {
  /* Base — medianoche azul profundo */
  --ui-background: #0a0f1a;
  --ui-foreground: #e8edf7;
  --ui-card: #111727;
  --ui-card-foreground: #e8edf7;
  --ui-popover: #1a2236;
  --ui-popover-foreground: #e8edf7;
  --ui-border: #1f2940;
  --ui-input: #1a2236;
  --ui-ring: #7cb8ff;
  --ui-overlay: rgba(4, 7, 14, 0.66);

  /* Brand — cobre, texto oscuro encima */
  --ui-primary: #e89968;
  --ui-primary-foreground: #2a1a0c;
  --ui-secondary: #1f2940;
  --ui-secondary-foreground: #e8edf7;
  --ui-accent: #1a2236;
  --ui-accent-foreground: #9ecbff;

  /* Semánticos vivos y limpios sobre oscuro */
  --ui-success: #22d07a;
  --ui-success-foreground: #04130a;
  --ui-warning: #f7b13b;
  --ui-warning-foreground: #241804;
  --ui-info: #7cb8ff;
  --ui-info-foreground: #06101f;
  --ui-destructive: #ff5a63;
  --ui-destructive-foreground: #2a0608;

  /* Neutral / muted */
  --ui-neutral: #1f2940;
  --ui-neutral-foreground: #e8edf7;
  --ui-muted: #111727;
  --ui-muted-foreground: #9aa3b8;

  /* Sombras (más profundas) */
  --ui-shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
  --ui-shadow-md: 0 8px 24px -8px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
  --ui-shadow-lg: 0 24px 60px -16px rgba(0,0,0,0.7), 0 6px 16px rgba(0,0,0,0.45);

  /* Sidebar — medianoche */
  --ui-sidebar: #080c15;
  --ui-sidebar-foreground: #e8edf7;
  --ui-sidebar-border: #1f2940;
  --ui-sidebar-accent: #141d30;
  --ui-sidebar-accent-foreground: #e8edf7;

  /* RGB para rgba() — Android WebView fallbacks */
  --ui-primary-rgb: 232, 153, 104;
  --ui-success-rgb: 34, 208, 122;
  --ui-warning-rgb: 247, 177, 59;
  --ui-destructive-rgb: 255, 90, 99;
  --ui-info-rgb: 124, 184, 255;
  --ui-muted-rgb: 17, 23, 39;
  --ui-neutral-rgb: 31, 41, 64;
  --ui-accent-rgb: 26, 34, 54;
}

/* ───────────────────────────────────────────────
   RESET / BASE
─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
  font-family: var(--ui-font-sans);
  background: var(--ui-background);
  color: var(--ui-foreground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Cifras tabulares para importes y datos */
.ui-mono { font-family: var(--ui-font-mono); font-variant-numeric: tabular-nums; }
.ui-tnum { font-variant-numeric: tabular-nums; }

/* Divisor horizontal consistente con el design system */
hr { height: 1px; background: var(--ui-border); border: 0; margin: 0; }

/* Foco accesible global */
:focus-visible { outline: 2px solid color-mix(in srgb, var(--ui-ring) 70%, transparent); outline-offset: 2px; }

/* Transición suave al cambiar tema — compartida por POS y Admin */
body { transition: background-color 0.2s ease, color 0.2s ease; }
*, *::before, *::after { transition-property: background-color, border-color, color; transition-duration: 0.15s; transition-timing-function: ease; }
.animate-spin, [class*="animate-"] { transition: none !important; }

/* ───────────────────────────────────────────────
   UTILIDADES DE LAYOUT — compartidas por POS y Admin
─────────────────────────────────────────────── */

/* Grid de detalle — dos columnas etiqueta/valor */
.detail-grid { display: grid; grid-template-columns: 7rem 1fr; align-items: start; column-gap: 1rem; row-gap: .75rem; font-size: 1rem; }
.detail-label { color: var(--ui-muted-foreground); font-size: .875rem; font-weight: 500; text-transform: uppercase; letter-spacing: .025em; padding-top: .125rem; }

/* Panel de lista con divisores horizontales */
.list-panel { overflow: hidden; border-radius: var(--ui-radius-lg); border: 1px solid var(--ui-border); }
.list-panel > * + * { border-top: 1px solid var(--ui-border); }

/* Contenedor centrado para estados de carga y vacío */
.loading-center { display: flex; align-items: center; justify-content: center; }

/* Fila de botones de acción en footers de modal */
.modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }

/* Fila de paginación centrada */
.pagination-row { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .75rem 0; }


/* ── Tabla de datos · tbl-* ───────────────────────────────────────────────────
   Las columnas llegan en --tbl-cols, que pone el contenedor <Table>. Las filas
   la heredan, así que ninguna tabla necesita una clase de rejilla propia.

   overflow-x en vez de hidden: las columnas suman más ancho del que suele haber
   y recortarlas hacía desaparecer información sin avisar. overflow-y explícito
   porque, si solo se declara un eje, el otro pasa de visible a auto y saldría
   una barra vertical de más.

   min-width:min-content es lo que impide que la fila se comprima; como las
   columnas flexibles se declaran con minmax(), ese mínimo no depende del texto
   y todas las filas miden lo mismo. */
.tbl       { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-card); overflow-x: auto; overflow-y: hidden; }
.tbl-tr    { display: grid; grid-template-columns: var(--tbl-cols); align-items: center; gap: 16px; padding: 0 16px; min-width: min-content; }
.tbl-th    { height: 42px; background: color-mix(in srgb, var(--ui-foreground) 3%, var(--ui-card)); border-bottom: 1px solid var(--ui-border); font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ui-muted-foreground); }
.tbl-row   { min-height: 58px; padding-top: .625rem; padding-bottom: .625rem; border-top: 1px solid color-mix(in srgb, var(--ui-border) 60%, transparent); font-size: .9rem; color: var(--ui-foreground); transition: background .12s; }
.tbl-row:hover { background: color-mix(in srgb, var(--ui-foreground) 4%, transparent); }

/* Tipografía de celda. Vive aquí y no en la aplicación porque solo se usa dentro
   de una tabla: dejarla fuera repartía la definición entre dos proyectos. */
.tbl-name  { font-weight: 600; }
.tbl-sub   { font-size: .76rem; color: var(--ui-muted-foreground); }
.tbl-muted { color: var(--ui-muted-foreground); }

/* ── Card · card-* ────────────────────────────────────────────────────────────
   Vive aquí y no en Card.razor.css a propósito. El CSS con ámbito de Blazor
   compila «.card-base» a «.card-base[b-xxxxx]», que por especificidad gana a
   cualquier utilidad de Tailwind: las Card que pasaban Class="border-dashed" o
   "hover:border-primary/40" no surtían efecto y nadie lo notaba. Sin ámbito, y
   cargándose antes que app.min.css, las utilidades vuelven a poder ajustar la
   tarjeta desde Class, que es para lo que está ese parámetro. */
.card-base{background:var(--ui-card);color:var(--ui-card-foreground);border-radius:var(--ui-radius-lg);border:1px solid var(--ui-border);box-shadow:var(--ui-shadow-md);}
.card-hoverable{transition:box-shadow .18s,border-color .18s,transform .18s;}
.card-hoverable:hover{box-shadow:var(--ui-shadow-lg);border-color:color-mix(in srgb,var(--ui-primary) 30%,var(--ui-border));transform:translateY(-2px);}
/* subpartes opcionales coherentes */
.card-header{padding:1rem 1.25rem;border-bottom:1px solid var(--ui-border);display:flex;align-items:center;gap:.75rem;}
.card-body{padding:1.25rem;}
.card-footer{padding:1rem 1.25rem;border-top:1px solid var(--ui-border);}
.card-title{font-weight:700;font-size:1rem;letter-spacing:-.01em;}


/* ── Spinner · spinner-* ──────────────────────────────────────────────────────
   Vive aquí y no en Spinner.razor.css porque hay un spinner que no puede ser el
   componente: el de arranque, que se pinta en index.html mientras carga el
   WebAssembly y no hay Blazor todavía. Con el CSS con ámbito, ese tenía que
   dibujarse a mano, y así es como acabó siendo más fino que todos los demás y,
   en el POS, de otro color. Sin ámbito, el arranque usa estas mismas clases.

   El trazo acompaña al diámetro, en torno al 8 %: si no, el pequeño parece un
   aro grueso al lado del mediano, y suelen verse a la vez. Mini se queda en 2px
   porque medio píxel se difumina en pantallas sin retina. */
.spinner-container{display:flex;flex-direction:column;align-items:center;gap:.75rem;}
.spinner-inline{flex-direction:row;gap:.4rem;}
.spinner-block{flex-direction:column;}
.spinner-message{color:var(--ui-muted-foreground);font-size:.875rem;}
.spinner-base{border-radius:50%;border-style:solid;border-color:color-mix(in srgb,var(--ui-muted-foreground) 22%,transparent);border-top-color:var(--sp-color);animation:spinner-rotate .8s linear infinite;}
.spinner-mini{width:.9rem;height:.9rem;border-width:2px;}
.spinner-sm{width:1.5rem;height:1.5rem;border-width:2px;}
.spinner-md{width:2.25rem;height:2.25rem;border-width:3px;}
.spinner-lg{width:3.25rem;height:3.25rem;border-width:4px;}
.spinner-primary{--sp-color:var(--ui-primary);}
.spinner-secondary{--sp-color:var(--ui-secondary-foreground);}
.spinner-success{--sp-color:var(--ui-success);}
.spinner-warning{--sp-color:var(--ui-warning);}
.spinner-info{--sp-color:var(--ui-info);}
.spinner-destructive{--sp-color:var(--ui-destructive);}
.spinner-neutral{--sp-color:var(--ui-neutral-foreground);}
.spinner-muted{--sp-color:var(--ui-muted-foreground);}
@keyframes spinner-rotate{to{transform:rotate(360deg);}}