/* ============================================================
   Pixel Phone Admin — tema oscuro calido/pastel
   Layout heredado del panel de control (shell + sidebar + topbar),
   re-tokenizado y con las variables de Bootstrap 5 alineadas.
   ============================================================ */

/* La fuente Inter la carga el <link> de Google Fonts del layout (y del de
   acceso); el viejo @import duplicaba la descarga y bloqueaba el render. */

/* ── CSS Variables ──
   El color vive en oklch: los valores redondean al mismo sRGB de siempre (deriva
   medida de 0 por canal) y al estar en un espacio perceptual el paso de claro a
   oscuro entre una marca y su-hover es parejo, que es lo que hace legible el
   `color-mix` del resto del panel. */
:root {
  /* Brand colors */
  --primary: oklch(0.7371 0.0703 67.82);
  --primary-dk: oklch(0.6387 0.0678 66.89);
  --blue: oklch(0.7574 0.0673 242.57);
  --purple: oklch(0.7455 0.0616 305.96);
  --yellow: oklch(0.8230 0.0961 83.54);
  --red: oklch(0.7127 0.0993 32.95);
  --red-dk: oklch(0.6147 0.0993 32.95);
  --green: oklch(0.7683 0.0824 135.22);

  /* Surfaces */
  --bg-body: oklch(0.1896 0.0063 55.97);
  --bg-sidebar: oklch(0.2082 0.0087 59.15);
  --bg-main: oklch(0.1896 0.0063 55.97);
  --bg-card: oklch(0.2347 0.0121 67.18);
  --bg-card-header: oklch(0.2525 0.0143 67.10);
  --bg-input: oklch(0.2662 0.0152 62.71);
  --bg-hover: oklch(0.2662 0.0152 62.71);
  --bg-row-hover: oklch(0.2429 0.0134 72.18);

  /* Borders */
  --border-color: oklch(0.3042 0.0204 66.93);
  --border-card: oklch(0.2912 0.0184 67.00);

  /* Text */
  --text-primary: oklch(0.9194 0.0200 77.31);
  --text-secondary: oklch(0.7596 0.0351 73.08);
  --text-muted: oklch(0.5964 0.0360 71.57);
  --text-heading: oklch(0.9543 0.0176 81.33);

  /* Layout */
  --sidebar-width: 160px;
  --sidebar-collapsed: 60px;
  --topbar-height: 56px;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --shadow-lg: 0 4px 20px rgba(0,0,0,.5);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.5);
  --transition: 150ms ease;

  /* Rotulo sobre los rellenos de marca y anillo con el que el teclado marca el
     foco. El tan (`--primary`) sobre el fondo #161311 da 7.8:1 y sobre la ficha
     #221d18 da 7.1:1, holgado para el minimo de 3:1 que pide WCAG 2.4.11. */
  --on-primary: oklch(0.1896 0.0063 55.97);
  --focus-ring: 2px solid var(--primary);

  /* Receta comun de los badges del panel (chips, estados, avisos): `--tint` es la
     marca con la que cada elemento se pinta en su propia regla, y estos dos
     porcentajes son el relleno y el filo con que esa marca se aplica. */
  --tint-fill: 16%;
  --tint-edge: 35%;

  /* La flecha del desplegable. El color va literal porque dentro de un data URI
     no se resuelve `var()`: es --text-muted, oklch(0.5964 0.036 71.57) =
     #8d7c68. Es token y no regla repetida porque la comparten los dos unicos
     scopes del panel con un <select> nativo: `.form-grid` (los formularios que
     arma FormGridRenderer) y el paginador de Tabulator. */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238d7c68' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Reset / Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; -webkit-font-smoothing: antialiased; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-body);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Safari/iOS aplica "Boost Legibility" (infla las fuentes que considera
   pequeñas) y rompe las alturas medidas en `vh` y el ancho de las tablas.
   La propiedad se lee del elemento raíz, y solo existe con prefijo hasta
   Safari 17.4. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dk); }

/* Font Awesome 6 solo asigna la familia de marcas a .fa-brands y .fab. El panel
   usa la clase corta `fa` (heredada de v4), asi que el glifo de Google caia en
   la fuente solida, donde U+F1A0 no existe, y se dibujaba el tofu. Es el unico
   icono de marca del panel: los otros 16 son solidos y si estan en esa fuente.
   Esta regla va en el css del panel porque este archivo se enlaza despues del
   CDN, y con la misma especificidad (0,1,0) gana por orden de cascade. */
.fa-google { font-family: "Font Awesome 6 Brands"; font-weight: 400; }

/* Un solo anillo de foco para todo el panel. Va con :where() (especificidad 0)
   para que un componente lo pueda ajustar sin pelear, y en :focus-visible para
   que el click con mouse no lo dibuje. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}