/* ===========================================================
   Bear Shift — KIT DE UI v2 (Fase 1: fundación)
   Todas las clases van prefijadas con u- para poder CONVIVIR con las viejas
   (.btn, .card, .chip, .badge, .modal…). La app se migra pantalla por pantalla
   en fases posteriores: si estas clases pisaran las viejas, cada fase rompería
   las pantallas todavía sin migrar.

   Regla de oro de este archivo: CERO colores hardcodeados. Todo sale de los
   tokens de styles.css. Si aparece un #hex aquí, es un bug de diseño: significa
   que hay un color que nadie puede cambiar desde un solo lugar.
   =========================================================== */

/* ---------- Base compartida ---------- */
.u-ico{ flex:none; display:inline-block; vertical-align:-.15em }

/* =====================================================================
   BOTONES
   Jerarquía: UN solo --primary sólido por vista. El resto secondary
   (contorno), ghost (sin caja) o dentro del menú ⋯. --danger nunca va
   suelto en una barra de acciones: vive al fondo del menú.
   ===================================================================== */
.u-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:36px; padding:var(--sp-2) var(--sp-4);
  border:1px solid transparent; border-radius:var(--r-sm);
  font-family:inherit; font-size:var(--fs-md); font-weight:var(--fw-med);
  line-height:1.2; text-align:center; white-space:nowrap; cursor:pointer;
  background:var(--surf-3); color:var(--fg);
  transition:background-color .13s ease, border-color .13s ease, color .13s ease;
}
.u-btn:disabled,.u-btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed }
.u-btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px }

.u-btn--primary{ background:var(--primary); color:var(--primary-fg); border-color:var(--primary) }
.u-btn--primary:hover:not(:disabled){ background:var(--primary-hover); border-color:var(--primary-hover) }

/* Secundario = contorno. Usa --border-strong porque el contorno ES el límite
   del control y necesita 3:1 (WCAG 1.4.11); --border no llega. */
.u-btn--secondary{ background:transparent; color:var(--fg); border-color:var(--border-strong) }
.u-btn--secondary:hover:not(:disabled){ background:var(--surf-3) }

.u-btn--ghost{ background:transparent; color:var(--fg-muted); border-color:transparent }
.u-btn--ghost:hover:not(:disabled){ background:var(--surf-3); color:var(--fg) }

.u-btn--danger{ background:var(--danger); color:var(--danger-fg); border-color:var(--danger) }
.u-btn--danger:hover:not(:disabled){ background:var(--danger-hover); border-color:var(--danger-hover) }

.u-btn--sm{ min-height:30px; padding:var(--sp-1) var(--sp-3); font-size:var(--fs-sm); gap:var(--sp-1) }
.u-btn--lg{ min-height:44px; padding:var(--sp-3) var(--sp-6); font-size:var(--fs-lg) }
.u-btn--block{ width:100%; display:flex }
/* Solo icono: cuadrado. El texto accesible lo pone kit.js (aria-label), aquí
   solo se quita el padding lateral para que no quede rectangular. */
.u-btn--icon{ padding:0; width:36px; min-width:36px }
.u-btn--icon.u-btn--sm{ width:30px; min-width:30px }
.u-btn--icon.u-btn--lg{ width:44px; min-width:44px }

/* =====================================================================
   TABS
   ===================================================================== */
.u-tabs{
  display:flex; gap:var(--sp-1); align-items:stretch;
  border-bottom:1px solid var(--border); margin-bottom:var(--sp-4);
  overflow-x:auto; scrollbar-width:none;
}
.u-tabs::-webkit-scrollbar{ display:none }
.u-tab{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4); margin-bottom:-1px;
  background:none; border:none; border-bottom:2px solid transparent;
  color:var(--fg-muted); font-family:inherit; font-size:var(--fs-md);
  font-weight:var(--fw-med); white-space:nowrap; cursor:pointer;
}
.u-tab:hover{ color:var(--fg) }
.u-tab:focus-visible{ outline:2px solid var(--ring); outline-offset:-2px; border-radius:var(--r-sm) }
.u-tab.is-active{ color:var(--fg); border-bottom-color:var(--primary) }
.u-tab__n{
  font-size:var(--fs-xs); font-weight:var(--fw-bold);
  background:var(--surf-3); color:var(--fg-muted);
  border-radius:999px; padding:0 var(--sp-2); min-width:20px;
}
.u-tab.is-active .u-tab__n{ background:var(--primary); color:var(--primary-fg) }

/* =====================================================================
   MENÚ ⋯
   El panel se inyecta en <body> con position:fixed (kit.js calcula la
   posición): dentro de una tabla con overflow un panel absolute queda
   RECORTADO, y esta app tiene tablas con scroll horizontal.
   ===================================================================== */
.u-menu__btn[aria-expanded="true"]{ background:var(--surf-3); color:var(--fg) }
.u-menu__panel{
  position:fixed; z-index:90; min-width:200px; max-width:280px; padding:var(--sp-1);
  background:var(--surf-3); border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--shadow);
  max-height:min(70vh,420px); overflow-y:auto;
}
.u-menu__item{
  display:flex; align-items:center; gap:var(--sp-3); width:100%;
  padding:var(--sp-2) var(--sp-3); border:none; border-radius:var(--r-sm);
  background:none; color:var(--fg); font-family:inherit; font-size:var(--fs-md);
  text-align:left; cursor:pointer;
}
.u-menu__item:hover:not(:disabled){ background:var(--surf-2) }
.u-menu__item:focus-visible{ outline:2px solid var(--ring); outline-offset:-2px }
.u-menu__item:disabled{ opacity:.45; cursor:not-allowed }
.u-menu__item--danger{ color:var(--danger-text) }
.u-menu__item--danger:hover:not(:disabled){ background:var(--tint-bad) }
.u-menu__sep{ height:1px; margin:var(--sp-1) 0; background:var(--border) }
.u-menu__lb{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* =====================================================================
   DIÁLOGO
   ===================================================================== */
.u-dialog__ov{
  position:fixed; inset:0; z-index:100; display:flex;
  align-items:center; justify-content:center; padding:var(--sp-6);
  background:var(--scrim); backdrop-filter:blur(3px);
}
.u-dialog__box{
  display:flex; flex-direction:column; width:100%; max-width:520px; max-height:88vh;
  background:var(--surf-3); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.u-dialog__box.is-wide{ max-width:760px }
.u-dialog__head{
  display:flex; align-items:flex-start; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-4) var(--sp-3); border-bottom:1px solid var(--border);
}
.u-dialog__title{ flex:1; margin:0; font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--fg) }
.u-dialog__body{ padding:var(--sp-4); overflow-y:auto; color:var(--fg); font-size:var(--fs-md) }
.u-dialog__body p{ margin:0 0 var(--sp-3) }
.u-dialog__body p:last-child{ margin-bottom:0 }
.u-dialog__foot{
  display:flex; justify-content:flex-end; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4) var(--sp-4); border-top:1px solid var(--border);
}
/* Aviso del diálogo destructivo: el icono ámbar/rojo antes del título. */
.u-dialog__warn{ color:var(--danger-text); flex:none; margin-top:2px }

/* =====================================================================
   DRAWER (panel lateral)
   ===================================================================== */
.u-drawer__ov{ position:fixed; inset:0; z-index:100; background:var(--scrim); display:flex }
.u-drawer__panel{
  display:flex; flex-direction:column;
  width:min(440px,92vw); max-width:100%; height:100%;
  background:var(--surf-2); border-left:1px solid var(--border);
  box-shadow:var(--shadow);
}
.u-drawer--right .u-drawer__ov{ justify-content:flex-end }
.u-drawer--left .u-drawer__ov{ justify-content:flex-start }
.u-drawer--left .u-drawer__panel{ border-left:none; border-right:1px solid var(--border) }
.u-drawer__head{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-4); border-bottom:1px solid var(--border);
}
.u-drawer__title{ flex:1; margin:0; font-size:var(--fs-lg); font-weight:var(--fw-bold) }
.u-drawer__body{ flex:1; padding:var(--sp-4); overflow-y:auto; font-size:var(--fs-md) }
.u-drawer__foot{
  display:flex; justify-content:flex-end; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--border);
}

/* =====================================================================
   TABLA
   ===================================================================== */
.u-tablewrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surf-2) }
.u-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-sm) }
.u-table th,.u-table td{
  padding:var(--sp-3) var(--sp-4); text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--border);
}
.u-table thead th{
  position:sticky; top:0; z-index:1;
  background:var(--surf-2); color:var(--fg-muted);
  font-size:var(--fs-xs); font-weight:var(--fw-med);
  text-transform:uppercase; letter-spacing:.04em;
}
.u-table tbody td{ color:var(--fg) }
.u-table tbody tr:last-child td{ border-bottom:none }
.u-table tbody tr:hover td{ background:var(--surf-3) }
.u-table--dense th,.u-table--dense td{ padding:var(--sp-2) var(--sp-3) }
/* Ojo con la especificidad: styles.css trae `th,td{text-align:left}` y la regla
   base de aquí es `.u-table th` (0,1,1). Un `.u-td--num` suelto (0,1,0) PERDÍA
   y las columnas de dinero salían a la izquierda. Se califican con .u-table. */
.u-table .u-td--num{ text-align:right; font-variant-numeric:tabular-nums }
.u-table .u-th--num{ text-align:right }
.u-tr--click{ cursor:pointer }
.u-tr--click:focus-visible{ outline:2px solid var(--ring); outline-offset:-2px }

/* =====================================================================
   BADGE + CHIP DE ESTADO
   Mismo aspecto base; el chip solo añade el icono del mapa UI.STATUS.
   Fondos OPACOS (tokens --tint-*), no rgba: así el contraste del texto es
   el mismo caiga el chip sobre surf-1, surf-2 o surf-3.
   ===================================================================== */
.u-badge,.u-chip{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  padding:2px var(--sp-2); border-radius:999px;
  font-size:var(--fs-xs); font-weight:var(--fw-med); line-height:1.6;
  white-space:nowrap; border:1px solid transparent;
}
.u-badge--neutral,.u-chip--neutral{ background:var(--tint-neutral); color:var(--fg-muted) }
.u-badge--info,.u-chip--info{ background:var(--tint-info); color:var(--info) }
.u-badge--ok,.u-chip--ok{ background:var(--tint-ok); color:var(--success) }
.u-badge--warn,.u-chip--warn{ background:var(--tint-warn); color:var(--warning) }
.u-badge--bad,.u-chip--bad{ background:var(--tint-bad); color:var(--danger-text) }

/* =====================================================================
   ESTADO VACÍO
   ===================================================================== */
.u-empty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--sp-3); padding:var(--sp-8) var(--sp-4); color:var(--fg-muted);
}
.u-empty__ico{ color:var(--fg-subtle) }
.u-empty__title{ font-size:var(--fs-lg); font-weight:var(--fw-med); color:var(--fg); margin:0 }
.u-empty__hint{ font-size:var(--fs-sm); color:var(--fg-muted); margin:0; max-width:44ch }
.u-empty__cta{ margin-top:var(--sp-1) }

/* =====================================================================
   STEPPER
   ===================================================================== */
/* nowrap + scroll horizontal en vez de wrap: al envolverse, el chevron
   separador quedaba colgando al final de la línea y parecía un error de
   render. Con scroll el orden se lee siempre de corrido (igual que .u-tabs). */
.u-stepper{ display:flex; flex-wrap:nowrap; gap:var(--sp-1); align-items:center;
  margin:0; padding:0; list-style:none; overflow-x:auto; scrollbar-width:none }
.u-stepper::-webkit-scrollbar{ display:none }
.u-step{ flex:none }
.u-step{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-1) var(--sp-3); border-radius:999px;
  font-size:var(--fs-sm); color:var(--fg-subtle);
  border:1px solid var(--border); background:transparent;
}
.u-step__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:999px; flex:none;
  background:var(--surf-3); color:var(--fg-muted);
  font-size:var(--fs-xs); font-weight:var(--fw-bold);
}
.u-step.is-done{ color:var(--fg-muted); border-color:var(--border) }
.u-step.is-done .u-step__n{ background:var(--tint-ok); color:var(--success) }
.u-step.is-current{ color:var(--fg); border-color:var(--primary); background:var(--surf-3) }
.u-step.is-current .u-step__n{ background:var(--primary); color:var(--primary-fg) }
.u-step__sep{ color:var(--fg-subtle); flex:none }

/* =====================================================================
   TOAST
   Contenedor propio (.u-toasts) para poder apilar varios. El #toast viejo de
   index.html sigue existiendo aparte; los dos conviven durante la migración.
   ===================================================================== */
.u-toasts{
  position:fixed; z-index:120; left:50%; bottom:var(--sp-6); transform:translateX(-50%);
  display:flex; flex-direction:column; gap:var(--sp-2); align-items:center;
  pointer-events:none; width:max-content; max-width:min(92vw,460px);
}
.u-toast{
  display:flex; align-items:center; gap:var(--sp-3); pointer-events:auto;
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md);
  background:var(--surf-3); border:1px solid var(--border); color:var(--fg);
  box-shadow:var(--shadow); font-size:var(--fs-md); font-weight:var(--fw-med);
}
.u-toast__msg{ flex:1; min-width:0 }
.u-toast--ok{ border-color:var(--success) }
.u-toast--ok .u-toast__ico{ color:var(--success) }
.u-toast--err{ border-color:var(--danger-text) }
.u-toast--err .u-toast__ico{ color:var(--danger-text) }
.u-toast--warn{ border-color:var(--warning) }
.u-toast--warn .u-toast__ico{ color:var(--warning) }
.u-toast__ico{ flex:none; color:var(--fg-muted) }
.u-toast__act{
  flex:none; background:none; border:none; padding:0 var(--sp-1);
  color:var(--ring); font-family:inherit; font-size:var(--fs-sm);
  font-weight:var(--fw-bold); cursor:pointer; text-decoration:underline;
}
.u-toast__act:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; border-radius:var(--r-sm) }

/* =====================================================================
   SKELETON
   Reemplaza los "tres puntos sobre fondo negro": el usuario ve la FORMA de
   lo que viene, no un vacío. Se apaga con prefers-reduced-motion (abajo).
   ===================================================================== */
.u-skel{
  display:block; border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--surf-2) 0%,var(--surf-3) 50%,var(--surf-2) 100%);
  background-size:200% 100%;
  animation:u-skel-slide 1.3s ease-in-out infinite;
}
.u-skel--line{ height:12px; margin-bottom:var(--sp-2) }
.u-skel--line:last-child{ width:60%; margin-bottom:0 }
.u-skel--row{ height:44px; margin-bottom:var(--sp-2); border-radius:var(--r-sm) }
.u-skel--card{ height:104px; margin-bottom:var(--sp-3); border-radius:var(--r-md) }
@keyframes u-skel-slide{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* =====================================================================
   RESPONSIVE — el equipo trabaja desde el celular.
   ===================================================================== */
@media (max-width:720px){
  /* Diálogo casi a pantalla completa: en 375px un modal centrado con padding
     deja el contenido en una columna de ~300px inservible. */
  .u-dialog__ov{ padding:0; align-items:stretch }
  .u-dialog__box,.u-dialog__box.is-wide{
    max-width:100%; max-height:100%; height:100%;
    border:none; border-radius:0;
  }
  .u-drawer__panel{ width:100%; border-left:none }
  .u-btn{ min-height:40px }
  .u-btn--sm{ min-height:34px }
  .u-menu__panel{ min-width:calc(100vw - var(--sp-8)); max-width:calc(100vw - var(--sp-8)) }
  .u-toasts{ left:var(--sp-3); right:var(--sp-3); bottom:var(--sp-3); transform:none; width:auto; max-width:none }
  .u-empty{ padding:var(--sp-6) var(--sp-3) }
}

@media (prefers-reduced-motion: reduce){
  .u-skel{ animation:none }
  .u-btn{ transition:none }
}