@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 400; font-display: swap; src: url('../fonts/pjs-400.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 500; font-display: swap; src: url('../fonts/pjs-500.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 600; font-display: swap; src: url('../fonts/pjs-600.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-display: swap; src: url('../fonts/pjs-700.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-display: swap; src: url('../fonts/pjs-800.woff2') format('woff2'); }

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html { -webkit-font-smoothing: antialiased; }
  body { @apply bg-canvas text-ink font-sans text-[14px] leading-5; }
  h1, h2, h3 { @apply tracking-head; }
  :focus-visible { outline: 2px solid #06B6D4; outline-offset: 2px; }
  [x-cloak] { display: none !important; }
}

@layer components {
  .num { font-variant-numeric: tabular-nums; }

  /* Superficies: tres niveles, no todo es una tarjeta igual */
  .panel      { @apply bg-white border border-line rounded-lg; }
  .panel-pad  { @apply p-5 md:p-6; }
  .panel-title{ @apply text-[17px] font-bold text-navy; }
  .panel-sub  { @apply text-[12.5px] text-ink-mute mt-0.5; }

  .kpi-label  { @apply text-[12.5px] font-semibold text-ink-mute; }
  .kpi-value  { @apply num text-[30px] leading-9 font-extrabold tracking-kpi text-navy; }
  .kpi-foot   { @apply text-[12px] text-ink-mute; }

  .chip       { @apply inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2 py-0.5 text-[11.5px] font-semibold num; }
  .chip-up    { @apply chip bg-emerald-soft text-emerald-dark; }
  .chip-down  { @apply chip bg-danger-soft text-danger; }
  .chip-flat  { @apply chip bg-slate-100 text-ink-mute; }
  .chip-warn  { @apply chip bg-amber-soft text-amber; }
  .chip-ai    { @apply chip bg-cyan-soft text-cyan-dark; }

  .nav-link   { @apply flex items-center gap-3 rounded-md px-3 py-2.5 text-[14px] font-medium text-ink-soft hover:bg-slate-100 transition-colors; }
  .nav-link.is-active { @apply bg-emerald-soft/60 text-navy font-semibold; box-shadow: inset 3px 0 0 #10B981; }

  .btn        { @apply inline-flex items-center justify-center gap-2 rounded-md px-3.5 py-2 text-[13px] font-semibold transition-colors; }
  .btn-ghost  { @apply btn border border-line bg-white text-navy hover:bg-slate-50; }
  .btn-navy   { @apply btn bg-navy text-white hover:bg-navy-500; }

  .tbl        { @apply w-full text-left text-[13px]; }
  .tbl th     { @apply px-4 py-2.5 text-[12px] font-semibold text-ink-mute border-b border-line bg-slate-50/70 whitespace-nowrap; }
  .tbl td     { @apply px-4 py-3 border-b border-line/70 align-top; }
  .tbl tr:last-child td { @apply border-b-0; }
  .tbl .r     { @apply text-right num whitespace-nowrap; }

  .field      { @apply w-full rounded-md border border-line bg-white px-3 py-2.5 text-[14px] text-navy placeholder:text-slate-400 focus:border-cyan focus:ring-2 focus:ring-cyan/20 outline-none; }

  /* Líneas del corte: estado de resultados leído de arriba hacia abajo */
  .er-row     { @apply grid grid-cols-[1fr_auto] items-baseline gap-4 px-5 py-3 border-b border-line/70; }
  .er-row.sub { @apply pl-10 py-2 text-[13px] text-ink-soft; }
  .er-row.tot { @apply bg-slate-50 font-bold text-navy; }
  .er-row.res { @apply bg-navy text-white font-extrabold text-[16px] border-b-0 rounded-b-lg; }
  .er-val     { @apply num text-right; }

  .bar-track  { @apply h-1.5 w-full rounded-full bg-slate-100 overflow-hidden; }
  .bar-fill   { @apply h-full rounded-full; }
}

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .panel { break-inside: avoid; border-color: #cbd5e1; }
  main { padding: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------
   Sidebar colapsable (escritorio): solo íconos, nombre al pasar el mouse
   --------------------------------------------------------------- */
@layer components {
  .nav-link { position: relative; }
}
@media (min-width: 1024px) {
  html.sb-col .app-grid { grid-template-columns: 72px 1fr; }
  html.sb-col .sidebar { width: 72px; }
  html.sb-col .sidebar .sb-text { display: none; }
  html.sb-col .sidebar .sb-logo { display: none; }
  html.sb-col .sidebar .sb-iso { display: block; }
  html.sb-col .sidebar .sb-head { padding-left: 0; padding-right: 0; display: flex; justify-content: center; }
  html.sb-col .sidebar nav { overflow: visible; padding-left: 0.75rem; padding-right: 0.75rem; }
  html.sb-col .sidebar .sb-group { padding: 0.75rem 0 0.25rem; }
  html.sb-col .sidebar .sb-group::before { content: ''; display: block; height: 1px; background: #E2E8F0; margin: 0 0.25rem; }
  html.sb-col .sidebar .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
  html.sb-col .sidebar .nav-link.is-active { box-shadow: none; }
  html.sb-col .sidebar .sb-user { margin: 0.75rem 0.5rem; padding: 0.5rem; display: flex; justify-content: center; border: 0; }
  html.sb-col .sidebar .nav-link[data-tip]:hover::after,
  html.sb-col .sidebar .nav-link[data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    background: #081A32; color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1;
    padding: 7px 10px; border-radius: 6px; white-space: nowrap; z-index: 60;
    box-shadow: 0 8px 20px -8px rgba(8, 26, 50, .45); pointer-events: none;
  }
  html.sb-col .sidebar .nav-link[data-tip]:hover::before,
  html.sb-col .sidebar .nav-link[data-tip]:focus-visible::before {
    content: ''; position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%);
    border: 6px solid transparent; border-right-color: #081A32; border-left: 0; z-index: 60; pointer-events: none;
  }
}

/* Texto de respuestas de BIXIO */
.bix-md p { margin: 0; }
.bix-md ul { margin: 0.35rem 0; padding-left: 1.1rem; list-style: disc; }
.bix-md li { margin: 0.15rem 0; }
.bix-md li::marker { color: #10B981; }
.bix-md strong { font-weight: 700; }