/* mitablero · componentes compartidos (dirección A).
   Fuente única: public/shared/. Cada superficie lleva una copia (server/scripts/sync-design.js).
   Solo usa tokens --t-* de tokens.css. Todas las clases llevan el prefijo c- para no chocar con
   los estilos existentes de cada superficie: una pantalla cambia solo cuando su HTML las adopta.
   Muestra de todos los componentes y estados: public/shared/_components.html (solo dev). */

/* ---------- Foco visible unificado ----------
   Un solo anillo para todo lo enfocable con teclado. :where() mantiene especificidad 0, así que
   una regla propia de la superficie puede ajustarlo (p.ej. offset negativo en listas). */
:where(a, button, input, select, textarea, summary, [tabindex], [contenteditable]):focus-visible {
  outline: 3px solid var(--t-focus);
  outline-offset: 2px;
}

.c-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Botones ---------- */
.c-btn {
  --c-btn-bg: var(--t-surface);
  --c-btn-fg: var(--t-ink);
  --c-btn-bd: var(--t-line-strong);
  --c-btn-bg-h: var(--t-surface-2);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--t-s2);
  box-sizing: border-box;
  min-height: var(--t-h-control); min-width: var(--t-h-control);
  padding: 0 var(--t-s4);
  border: 1px solid var(--c-btn-bd); border-radius: var(--t-r-ctl);
  background: var(--c-btn-bg); color: var(--c-btn-fg);
  font: 650 var(--t-fs-ui)/1.2 var(--t-font);
  text-decoration: none; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-dur), border-color var(--t-dur), color var(--t-dur);
}
.c-btn:hover { background: var(--c-btn-bg-h); }
.c-btn:active { transform: translateY(1px); }
.c-btn > svg { width: 18px; height: 18px; flex: none; }
.c-btn--primary { --c-btn-bg: var(--t-action); --c-btn-fg: var(--t-on-action); --c-btn-bd: var(--t-action); --c-btn-bg-h: var(--t-action-d); }
.c-btn--primary:hover { border-color: var(--t-action-d); }
.c-btn--secondary { /* valores por defecto */ }
.c-btn--ghost { --c-btn-bg: transparent; --c-btn-fg: var(--t-action-d); --c-btn-bd: transparent; --c-btn-bg-h: var(--t-action-tint); font-weight: 650; }
/* Destructivo: texto rojo en menús y confirmaciones; lleno solo en el modal de confirmación. */
.c-btn--danger { --c-btn-bg: transparent; --c-btn-fg: var(--t-danger); --c-btn-bd: transparent; --c-btn-bg-h: var(--t-danger-soft); }
.c-btn--danger-solid { --c-btn-bg: var(--t-danger); --c-btn-fg: #FFFFFF; --c-btn-bd: var(--t-danger); --c-btn-bg-h: #8F1C13; }
.c-btn--icon { width: var(--t-h-control); padding: 0; }
.c-btn--block { display: flex; width: 100%; }
/* Barras densas de escritorio: 36 visibles, zona táctil de 44 con un pseudo-elemento. */
@media (pointer: fine) {
  .c-btn--sm { position: relative; min-height: var(--t-h-control-sm); min-width: var(--t-h-control-sm); padding: 0 var(--t-s3); }
  .c-btn--sm.c-btn--icon { width: var(--t-h-control-sm); }
  .c-btn--sm::after { content: ""; position: absolute; inset: calc((var(--t-h-control-sm) - var(--t-h-control)) / 2); }
}
.c-btn:disabled, .c-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.c-btn:disabled:hover, .c-btn[aria-disabled="true"]:hover { background: var(--c-btn-bg); }
.c-btn[aria-busy="true"] { cursor: progress; }
.c-btn[aria-busy="true"] > svg { display: none; }
.c-btn[aria-busy="true"]::before {
  content: ""; width: 16px; height: 16px; flex: none; box-sizing: border-box;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: c-spin .7s linear infinite;
}
@keyframes c-spin { to { transform: rotate(360deg); } }

/* ---------- Menú ⋯ ----------
   Estructura: .c-menu > button.c-btn--icon[aria-haspopup=menu][aria-expanded] + .c-menu__panel[role=menu][hidden]. */
.c-menu { position: relative; display: inline-block; }
.c-menu__panel {
  position: absolute; z-index: 40; top: calc(100% + var(--t-s1)); right: 0;
  min-width: 200px; max-width: 260px; box-sizing: border-box;
  padding: var(--t-s1); margin: 0; list-style: none;
  background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-r-md);
  box-shadow: var(--t-shadow-2);
}
.c-menu__panel[hidden] { display: none; }
.c-menu__panel--start { right: auto; left: 0; }
.c-menu__item {
  display: flex; align-items: center; gap: var(--t-s3); width: 100%; box-sizing: border-box;
  min-height: var(--t-h-control); padding: 0 var(--t-s3);
  border: 0; border-radius: var(--t-r-sm); background: transparent; color: var(--t-ink);
  font: 600 var(--t-fs-ui)/1.2 var(--t-font); text-align: left; text-decoration: none; cursor: pointer;
}
.c-menu__item > svg { width: 16px; height: 16px; flex: none; color: var(--t-muted); }
.c-menu__item:hover, .c-menu__item:focus-visible { background: var(--t-surface-2); }
.c-menu__item:focus-visible { outline-offset: -3px; }
.c-menu__item--danger, .c-menu__item--danger > svg { color: var(--t-danger); }
.c-menu__item--danger:hover { background: var(--t-danger-soft); }
.c-menu__sep { height: 1px; margin: var(--t-s1) var(--t-s2); background: var(--t-line); border: 0; }

/* ---------- Tarjeta ---------- */
.c-card {
  background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-r-lg);
  padding: 20px var(--t-s5); color: var(--t-ink);
}
.c-card__title { margin: 0 0 var(--t-s1); font: 700 var(--t-fs-base)/1.3 var(--t-font); color: var(--t-ink); }
.c-card__meta { margin: 0; font-size: var(--t-fs-sm); color: var(--t-muted); }
.c-card__body { margin-top: var(--t-s4); }
.c-card__inset { background: var(--t-surface-2); border-radius: var(--t-r-md); padding: var(--t-s3) var(--t-s4); }
.c-card--link { display: block; text-decoration: none; cursor: pointer; transition: box-shadow var(--t-dur), border-color var(--t-dur); }
.c-card--link:hover { box-shadow: var(--t-shadow-2); border-color: var(--t-line-strong); }

/* ---------- Modal (<dialog> nativo) ---------- */
.c-modal {
  width: min(480px, calc(100vw - 2 * var(--t-s4))); max-height: calc(100dvh - 2 * var(--t-s5));
  box-sizing: border-box; padding: 0; border: 0; border-radius: var(--t-r-modal);
  background: var(--t-surface); color: var(--t-ink); box-shadow: var(--t-shadow-3);
  font-family: var(--t-font);
}
.c-modal--wide { width: min(720px, calc(100vw - 2 * var(--t-s4))); }
.c-modal::backdrop { background: var(--t-overlay); }
.c-modal[open] { display: flex; flex-direction: column; }
.c-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--t-s3); padding: var(--t-s4) var(--t-s4) 0 var(--t-s5); }
.c-modal__title { margin: 0; font: 600 22px/1.2 var(--t-font-display); color: var(--t-ink); }
.c-modal__body { padding: var(--t-s4) var(--t-s5); overflow: auto; font-size: var(--t-fs-base); line-height: 1.5; color: var(--t-ink-2); }
.c-modal__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--t-s2); padding: var(--t-s4) var(--t-s5) var(--t-s5); }
.c-modal__foot .c-modal__aside { margin-right: auto; } /* destructiva a la izquierda en modales de edición */
@media (prefers-reduced-motion: no-preference) {
  .c-modal[open] { animation: c-modal-in 180ms ease-out; }
  @keyframes c-modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
}

/* ---------- Campos de formulario ----------
   Estructura: .c-field > label.c-label + control + .c-help + .c-error (ligados con aria-describedby). */
.c-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--t-s4); }
.c-label { font: 600 var(--t-fs-sm)/1.3 var(--t-font); color: var(--t-ink-2); }
.c-label .c-optional { font-weight: 400; color: var(--t-muted); }
.c-input, .c-select, .c-textarea {
  box-sizing: border-box; width: 100%; min-height: var(--t-h-control);
  padding: 0 var(--t-s3);
  border: 1px solid var(--t-line-strong); border-radius: var(--t-r-ctl);
  background: var(--t-surface); color: var(--t-ink);
  font: 400 var(--t-fs-md)/1.4 var(--t-font); /* 16 px: iOS no hace zoom al enfocar */
  transition: border-color var(--t-dur);
}
.c-textarea { min-height: 96px; padding: 10px var(--t-s3); resize: vertical; }
.c-input::placeholder, .c-textarea::placeholder { color: var(--t-muted); opacity: 1; }
.c-input:hover, .c-select:hover, .c-textarea:hover { border-color: var(--t-muted); }
.c-input:focus-visible, .c-select:focus-visible, .c-textarea:focus-visible { outline-offset: 1px; border-color: var(--t-focus); }
.c-select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2355636A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.c-input:disabled, .c-select:disabled, .c-textarea:disabled { background-color: var(--t-surface-2); color: var(--t-muted); cursor: not-allowed; }
.c-help { margin: 0; font-size: var(--t-fs-sm); line-height: 1.4; color: var(--t-muted); }
.c-error { display: flex; gap: 6px; align-items: flex-start; margin: 0; font: 600 var(--t-fs-sm)/1.4 var(--t-font); color: var(--t-danger); }
.c-error[hidden] { display: none; }
.c-input[aria-invalid="true"], .c-select[aria-invalid="true"], .c-textarea[aria-invalid="true"] { border-color: var(--t-danger); box-shadow: inset 0 0 0 1px var(--t-danger); }

/* ---------- Lista / fila ---------- */
.c-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.c-row {
  position: relative; display: flex; align-items: center; gap: var(--t-s3);
  min-height: var(--t-h-control); box-sizing: border-box; padding: 10px var(--t-s3);
  border-radius: var(--t-r-ctl); color: var(--t-ink); text-decoration: none;
}
.c-row--hit { cursor: pointer; }
.c-row--hit:hover { background: var(--t-surface-2); }
.c-row:focus-visible { outline-offset: -3px; }
.c-row[aria-current], .c-row[aria-selected="true"], .c-row.is-selected {
  background: var(--t-surface); box-shadow: var(--t-shadow-1), inset 3px 0 0 var(--t-action);
}
.c-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.c-row__title { font: 600 var(--t-fs-ui)/1.3 var(--t-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-row[aria-current] .c-row__title, .c-row.is-selected .c-row__title { font-weight: 700; }
.c-row__meta { font-size: var(--t-fs-sm); color: var(--t-muted); }
.c-row__end { flex: none; display: flex; align-items: center; gap: var(--t-s1); }
/* Acción de fila: oculta hasta hover/foco solo con puntero fino; en táctil siempre visible. */
@media (hover: hover) and (pointer: fine) {
  .c-row__end--reveal { opacity: 0; transition: opacity var(--t-dur); }
  .c-row:hover .c-row__end--reveal, .c-row:focus-within .c-row__end--reveal { opacity: 1; }
}
.c-row--inactive .c-row__title { color: var(--t-muted); }
.c-list__group { padding: var(--t-s4) var(--t-s3) var(--t-s1); font: 600 var(--t-fs-xs)/1.3 var(--t-font); color: var(--t-muted); }

/* ---------- Pestañas ----------
   Estructura: .c-tabs[role=tablist] > button.c-tab[role=tab][aria-selected]. */
.c-tabs {
  display: flex; gap: var(--t-s5); border-bottom: 1px solid var(--t-line);
  overflow-x: auto; scrollbar-width: none;
}
.c-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {
  .c-tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}
.c-tab {
  flex: none; display: inline-flex; align-items: center; min-height: var(--t-h-control);
  margin-bottom: -1px; padding: 0 2px;
  border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--t-muted); font: 600 var(--t-fs-ui)/1.2 var(--t-font); text-decoration: none; cursor: pointer;
}
.c-tab:hover { color: var(--t-ink); }
.c-tab[aria-selected="true"], .c-tab[aria-current="page"] { color: var(--t-ink); border-bottom-color: var(--t-action); }
.c-tab:focus-visible { outline-offset: -3px; border-radius: var(--t-r-sm); }

/* ---------- Chips ---------- */
.c-chip {
  display: inline-flex; align-items: center; gap: var(--t-s1);
  min-height: 24px; box-sizing: border-box; padding: 0 10px;
  border-radius: var(--t-r-pill);
  background: var(--t-surface-2); color: var(--t-ink-2);
  font: 700 var(--t-fs-xs)/1 var(--t-font); white-space: nowrap;
}
.c-chip--teal { background: var(--t-action-soft); color: var(--t-action-d); }
.c-chip--amber { background: var(--t-warn-soft); color: var(--t-warn); }

/* ---------- Estado vacío ---------- */
.c-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--t-s2);
  padding: var(--t-s7) var(--t-s5); color: var(--t-muted);
}
.c-empty > svg { width: 40px; height: 40px; color: var(--t-muted); margin-bottom: var(--t-s1); }
.c-empty__title { margin: 0; font: 700 var(--t-fs-md)/1.3 var(--t-font); color: var(--t-ink); }
.c-empty__text { margin: 0; max-width: 40ch; font-size: var(--t-fs-ui); line-height: 1.5; }
.c-empty .c-btn { margin-top: var(--t-s3); }

/* ---------- Mensaje en línea (error de carga, aviso dentro de la pantalla) ---------- */
.c-inline-msg {
  display: flex; align-items: flex-start; gap: var(--t-s3);
  padding: var(--t-s3) var(--t-s4); border-radius: var(--t-r-md);
  background: var(--t-action-tint); color: var(--t-ink);
  font-size: var(--t-fs-ui); line-height: 1.45;
}
.c-inline-msg > svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--t-action-d); }
.c-inline-msg--danger { background: var(--t-danger-soft); }
.c-inline-msg--danger > svg { color: var(--t-danger); }
.c-inline-msg--warn { background: var(--t-warn-soft); }
.c-inline-msg--warn > svg { color: var(--t-warn); }
.c-inline-msg--success { background: var(--t-success-soft); }
.c-inline-msg--success > svg { color: var(--t-success); }
.c-inline-msg .c-btn { margin: -10px 0 -10px auto; }

/* ---------- Toast ----------
   Región fija .c-toasts[role=status][aria-live=polite]; cada .c-toast es una línea con a lo más una acción. */
.c-toasts {
  position: fixed; z-index: 60; left: 50%; bottom: calc(var(--t-s5) + env(safe-area-inset-bottom));
  transform: translateX(-50%); width: max-content; max-width: calc(100vw - 2 * var(--t-s4));
  display: flex; flex-direction: column; align-items: center; gap: var(--t-s2); pointer-events: none;
}
.c-toast {
  display: flex; align-items: center; gap: var(--t-s4);
  min-height: var(--t-h-control); box-sizing: border-box; padding: var(--t-s2) var(--t-s2) var(--t-s2) var(--t-s4);
  border-radius: 14px; background: var(--t-ink); color: #FFFFFF; box-shadow: var(--t-shadow-3);
  font: 600 var(--t-fs-ui)/1.35 var(--t-font); pointer-events: auto;
}
.c-toast:not(:has(.c-toast__action)) { padding-right: var(--t-s4); }
.c-toast__action {
  min-height: 36px; padding: 0 var(--t-s3); border: 0; border-radius: var(--t-r-sm);
  background: transparent; color: var(--t-toast-action); font: 700 var(--t-fs-ui)/1 var(--t-font); cursor: pointer;
}
.c-toast__action:hover { background: rgba(255, 255, 255, .08); }
.c-toast__action:focus-visible { outline-color: var(--t-toast-action); outline-offset: 0; }
.c-toast--static { position: static; } /* solo para la página de muestra */
@media (prefers-reduced-motion: no-preference) {
  .c-toast { animation: c-toast-in 200ms ease-out; }
  @keyframes c-toast-in { from { opacity: 0; transform: translateY(8px); } }
}

/* ---------- Skeleton de carga ---------- */
.c-skel {
  display: block; border-radius: var(--t-r-sm); background: var(--t-surface-2);
  min-height: 12px;
}
.c-skel--text { height: 12px; margin: 6px 0; }
.c-skel--title { height: 18px; width: 45%; margin: 4px 0 10px; }
.c-skel--row { height: var(--t-h-control); border-radius: var(--t-r-ctl); }
.c-skel--circle { width: 32px; height: 32px; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .c-skel {
    background: linear-gradient(90deg, var(--t-surface-2) 0%, var(--t-bg) 50%, var(--t-surface-2) 100%) 0 0 / 200% 100%;
    animation: c-skel 1.4s ease-in-out infinite;
  }
  @keyframes c-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
}

@media (prefers-reduced-motion: reduce) {
  .c-btn, .c-card--link, .c-input, .c-select, .c-textarea, .c-row__end--reveal { transition: none; }
  .c-btn[aria-busy="true"]::before { animation-duration: 2s; }
}