/* Caldereta · theme.css
   Tokens y componentes. Cargar despues de Tailwind CDN (orden importa). */

:root {
  /* Color */
  --ink-100: #F1F5F9;
  --ink-500: #475569; /* slate-600 - 5.75:1 sobre ink-100, 7.07:1 sobre white (AA) */
  --ink-700: #334155;
  --ink-900: #0F172A;
  --line-200: #E2E8F0;
  --surface: #FFFFFF;
  --primary-50:  #EFF6FF;
  --primary-200: #BFDBFE;
  --primary-600: #2563EB;
  --primary-700: #1D4ED8;
  --accent-50:  #FFF7ED;
  --accent-600: #C2410C; /* orange-700 - 5.5:1 sobre accent-50, 5.86:1 sobre white (AA) */
  --ok-50:  #DCFCE7;
  --ok-600: #15803D;
  --warn-50: #FFFBEB;
  --warn-600: #B45309;
  --err-50: #FEF2F2;
  --err-600: #DC2626;

  /* Radii */
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Shadows */
  --sh-card: 0 1px 3px 0 rgba(15,23,42,.08);
  --sh-pop:  0 8px 24px 0 rgba(15,23,42,.12);
  --sh-focus: 0 0 0 3px rgba(37,99,235,.25);

  /* Motion */
  --t-fast: 150ms ease-out;
  --t-mid:  200ms ease-out;
}

/* Body base. Tailwind aplica el font-sans por la config inline; reforzamos
   color de tinta y antialias para evitar inconsistencias entre navegadores. */
html, body { background: var(--ink-100); color: var(--ink-900); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
[x-cloak] { display: none !important; }

/* ===== Botones ===== */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
}
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled,
.btn-danger:disabled,
.btn-success:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary  { background: var(--primary-600); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-700); }
.btn-secondary { background: var(--surface); color: var(--ink-700); border-color: var(--line-200); }
.btn-secondary:hover:not(:disabled) { background: var(--ink-100); }
.btn-ghost    { background: transparent; color: var(--primary-600); }
.btn-ghost:hover:not(:disabled) { background: var(--primary-50); }
.btn-danger   { background: var(--err-50); color: var(--err-600); }
.btn-danger:hover:not(:disabled) { background: #fee2e2; }
.btn-success  { background: var(--ok-50); color: var(--ok-600); }
.btn-success:hover:not(:disabled) { background: #bbf7d0; }

/* Botón compacto (≥ 36 px) para acciones secundarias en filas densas */
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 13px; }

/* Botón icono cuadrado tactil (44 px) */
.btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--r-md); }

/* ===== Forms ===== */
.input, .select, textarea.input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-900);
  font-size: 16px;     /* 16 px = evita auto-zoom de iOS */
  line-height: 1.4;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input::placeholder { color: var(--ink-500); }
.input:focus, .select:focus, textarea.input:focus {
  outline: none;
  border-color: var(--primary-600);
  box-shadow: var(--sh-focus);
}
.input:disabled { background: var(--ink-100); color: var(--ink-500); cursor: not-allowed; }

.label  { display: block; font-size: 14px; font-weight: 500; color: var(--ink-700); margin-bottom: 6px; }
.helper { font-size: 12px; color: var(--ink-500); margin-top: 4px; }
.error-msg { font-size: 14px; color: var(--err-600); margin-top: 6px; }

/* Focus visible universal: hace que todo elemento interactivo tenga focus claro */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-radius: var(--r-md);
}

/* ===== Badges y chips ===== */
.badge-open, .badge-closed {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}
.badge-open { background: var(--ok-50); color: var(--ok-600); }
.badge-open::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--ok-600); }
.badge-closed { background: var(--ink-100); color: var(--ink-700); }

.chip-cat {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-md);
  background: var(--accent-50); color: var(--accent-600);
}

.chip-participant {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 6px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600; border: 2px solid var(--c, var(--ink-700));
  /* Fallback para navegadores sin color-mix (Safari <16.2): fondo neutro tintado.
     Si el navegador entiende color-mix, la segunda declaracion sobreescribe. */
  background: var(--primary-50);
  background: color-mix(in srgb, var(--c, var(--ink-700)) 12%, white);
  color: var(--c, var(--ink-700));
  cursor: pointer; transition: transform var(--t-fast);
}
.chip-participant:hover { transform: translateY(-1px); }
.chip-participant.selected { box-shadow: var(--sh-focus); }

.dot-participant {
  display: inline-block; width: 8px; height: 8px; border-radius: 999px;
  background: var(--c, var(--ink-500)); vertical-align: middle; margin-right: 4px;
}

/* ===== Cards ===== */
.card {
  background: var(--surface); border: 1px solid var(--line-200);
  border-radius: var(--r-lg); box-shadow: var(--sh-card);
  padding: 16px;
}
@media (min-width: 640px) { .card { padding: 20px; } }
.card-divider { border-top: 1px solid var(--line-200); padding-top: 16px; margin-top: 16px; }

/* ===== Modal (fullscreen movil, centrado desktop) ===== */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.6);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 50; padding: 0;
}
@media (min-width: 640px) { .modal-backdrop { align-items: center; padding: 16px; } }

.modal-panel {
  background: var(--surface); width: 100%; max-width: 100%;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-pop);
  padding: 20px; max-height: 90vh; overflow-y: auto;
  animation: modalUp var(--t-mid);
}
@media (min-width: 640px) {
  .modal-panel { max-width: 420px; border-radius: var(--r-xl); animation: modalIn var(--t-mid); }
}
@keyframes modalUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes modalIn { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ===== Sheet inferior (acciones secundarias en movil) ===== */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.5);
  z-index: 40; display: flex; align-items: flex-end;
}
.sheet-panel {
  background: var(--surface); width: 100%;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 8px 0 24px; box-shadow: var(--sh-pop);
  animation: modalUp var(--t-mid);
}
.sheet-handle {
  width: 40px; height: 4px; border-radius: 999px;
  background: var(--line-200); margin: 8px auto 12px;
}
.sheet-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 20px;
  font-size: 16px; color: var(--ink-900); background: transparent;
  border: none; cursor: pointer; text-align: left;
}
.sheet-item:hover { background: var(--ink-100); }
.sheet-item.danger { color: var(--err-600); }
.sheet-item.success { color: var(--ok-600); }
.sheet-item .icon { width: 24px; text-align: center; opacity: .8; }
.sheet-divider { height: 1px; background: var(--line-200); margin: 4px 0; }

/* ===== Swatch picker (new.html step 3) =====
   El numero de columnas (10) esta acoplado a window.PARTICIPANT_COLORS.length.
   Si el array cambia, ajustar tambien aqui. */
.swatch-grid { display: grid; grid-template-columns: repeat(10, minmax(0,1fr)); gap: 6px; }
@media (max-width: 359px) {
  /* En pantallas ≤320 px las 10 columnas dan ~23 px por swatch (bajo WCAG AA).
     Bajamos a 5 columnas (2 filas) para conservar tap target tactil. */
  .swatch-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
}
.swatch {
  width: 100%; aspect-ratio: 1/1; border-radius: 999px;
  cursor: pointer; border: 3px solid transparent;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.swatch:hover { transform: scale(1.08); }
.swatch.selected { border-color: var(--ink-900); box-shadow: var(--sh-focus); }

/* ===== Pestañas (view.html) ===== */
.tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--line-200); }
.tab {
  padding: 12px 14px; font-size: 14px; font-weight: 600;
  color: var(--ink-500); background: transparent; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast);
  min-height: 48px;
}
.tab:hover { color: var(--primary-700); background: var(--primary-50); }
.tab.active { color: var(--primary-700); border-bottom-color: var(--primary-600); }

/* ===== Toast ===== */
.toast {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: var(--ink-900); color: #fff; font-size: 14px;
  padding: 10px 16px; border-radius: var(--r-md); box-shadow: var(--sh-pop);
  z-index: 60;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Utility para color por participante via CSS var ===== */
.c-part { --c: var(--p-color, var(--ink-700)); }