/* TICKD Design System 1.0.0 — drop-in stylesheet
   Requiere Montserrat + Phosphor Icons (ver CLAUDE.md).
   Temas: [data-theme="tickd"] (default) · [data-theme="park"] */

:root,
[data-theme="tickd"] {
  --tk-navy: #201050;
  --tk-navy-light: #2C1A66;
  --tk-accent: #F00060;
  --tk-accent-dark: #C7004F;
  --tk-accent-soft: rgba(240, 0, 96, 0.06);
  --tk-accent-shadow: 0 12px 22px -10px rgba(240, 0, 96, 0.65);

  --tk-page: #F2F1F8;
  --tk-surface: #FFFFFF;
  --tk-surface-alt: #E6E6F2;
  --tk-surface-deep: #DCDBEE;

  --tk-ink: #1B1436;
  --tk-slate: #4F4880;
  --tk-muted: #928CB8;
  --tk-line: #E4E2EF;
  --tk-line-strong: #C9C6E2;
}

[data-theme="park"] {
  --tk-navy: #1E6B4E;
  --tk-navy-light: #14503A;
  --tk-accent: #1E6B4E;
  --tk-accent-dark: #14503A;
  --tk-accent-soft: rgba(30, 107, 78, 0.08);
  --tk-accent-shadow: 0 12px 22px -10px rgba(30, 107, 78, 0.5);
  --tk-lime: #A8C64F;

  --tk-page: #F4F6F3;
  --tk-surface: #FFFFFF;
  --tk-surface-alt: #F4F6F3;
  --tk-surface-deep: #F9FBF8;

  --tk-ink: #16241E;
  --tk-slate: #5A6B62;
  --tk-muted: #93A29A;
  --tk-line: #E3E9E4;
  --tk-line-strong: #CFDACF;
}

:root {
  --tk-success: #1B916B;
  --tk-warning: #F7992D;
  --tk-warning-dark: #DB8420;
  --tk-warning-surface: #FFF8EE;
  --tk-danger: #D22F3F;

  --tk-font: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;

  --tk-1: 4px;  --tk-2: 8px;  --tk-3: 12px; --tk-4: 16px; --tk-5: 20px;
  --tk-6: 24px; --tk-7: 32px; --tk-8: 40px; --tk-9: 52px; --tk-10: 64px;

  --tk-r-control: 12px;
  --tk-r-card: 16px;
  --tk-r-card-lg: 20px;
  --tk-r-container: 24px;
  --tk-r-pill: 999px;

  --tk-sh-card: 0 16px 34px -20px rgba(22, 36, 30, 0.3);
  --tk-sh-raised: 0 30px 60px -30px rgba(22, 36, 30, 0.35);
  --tk-sh-modal: 0 32px 64px -24px rgba(0, 0, 0, 0.45);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tk-page);
  color: var(--tk-ink);
  font-family: var(--tk-font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--tk-accent); text-decoration: none; font-weight: 700; }
a:hover { color: var(--tk-accent-dark); }

/* ---------- tipografía ---------- */
.tk-display { font-size: 30px; font-weight: 800; letter-spacing: -0.7px; line-height: 1.15; margin: 0; }
.tk-h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; margin: 0; }
.tk-h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.35px; line-height: 1.25; margin: 0; }
.tk-h3 { font-size: 16px; font-weight: 800; letter-spacing: -0.25px; line-height: 1.3; margin: 0; }
.tk-card-title { font-size: 14px; font-weight: 800; letter-spacing: -0.2px; line-height: 1.3; }

.tk-body { font-size: 13px; font-weight: 400; line-height: 1.55; color: var(--tk-slate); }
.tk-body-long { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--tk-slate); }
.tk-small { font-size: 12px; font-weight: 500; color: var(--tk-slate); }
.tk-meta { font-size: 11px; font-weight: 600; color: var(--tk-muted); }

.tk-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--tk-accent);
}
.tk-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--tk-muted);
}

/* ---------- layout ---------- */
.tk-page { max-width: 1160px; margin: 0 auto; padding: var(--tk-8) var(--tk-7) var(--tk-10); }
.tk-stack { display: flex; flex-direction: column; gap: var(--tk-3); }
.tk-row { display: flex; align-items: center; gap: var(--tk-3); }
.tk-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tk-divider { height: 1px; background: var(--tk-line); border: 0; margin: var(--tk-5) 0; }
.tk-perforation { border-top: 1px dashed var(--tk-line); padding-top: var(--tk-2); margin-top: var(--tk-2); }

/* ---------- superficies ---------- */
.tk-card {
  background: var(--tk-surface);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-r-card);
  padding: var(--tk-4);
  min-width: 0;
}
.tk-card--lg { border-radius: var(--tk-r-card-lg); padding: var(--tk-5); }
.tk-card--raised { box-shadow: var(--tk-sh-card); }
.tk-card--tinted { background: var(--tk-surface-alt); border-color: transparent; }
.tk-card--accent { border: 1.5px solid var(--tk-accent); background: var(--tk-accent-soft); }

/* barra de categoría a la izquierda */
.tk-card--barred { display: flex; padding: 0; overflow: hidden; }
.tk-card--barred > .tk-bar { width: 6px; flex-shrink: 0; background: var(--tk-accent); }
.tk-card--barred > .tk-card-body { flex: 1; min-width: 0; padding: var(--tk-4); }

.tk-appbar {
  background: var(--tk-navy);
  color: #fff;
  padding: var(--tk-4) var(--tk-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--tk-3);
}
.tk-appbar .tk-label { color: rgba(255, 255, 255, 0.62); }

/* ---------- botones ---------- */
.tk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tk-2);
  font-family: var(--tk-font); font-size: 13px; font-weight: 700;
  padding: 13px 20px; border-radius: var(--tk-r-control);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background 0.18s ease-out, border-color 0.18s ease-out, color 0.18s ease-out;
}
.tk-btn:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 2px; }

.tk-btn--primary { background: var(--tk-accent); color: #fff; box-shadow: var(--tk-accent-shadow); }
.tk-btn--primary:hover { background: var(--tk-accent-dark); }

.tk-btn--secondary { background: var(--tk-surface); color: var(--tk-navy); border-color: var(--tk-navy); }
.tk-btn--secondary:hover { background: var(--tk-surface-alt); }

.tk-btn--ghost { background: var(--tk-surface); color: var(--tk-slate); border-color: var(--tk-line); }
.tk-btn--ghost:hover { border-color: var(--tk-accent); color: var(--tk-accent); }

.tk-btn--dark { background: #111014; color: #fff; }
.tk-btn--dark:hover { background: #000; }

.tk-btn[disabled], .tk-btn--disabled {
  background: var(--tk-line); color: var(--tk-muted);
  box-shadow: none; cursor: not-allowed; border-color: transparent;
}

/* acción en columna: icono arriba, etiqueta abajo */
.tk-btn-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--tk-surface-alt); border: 1px solid var(--tk-line);
  border-radius: 14px; padding: 13px 6px; cursor: pointer;
  font-family: var(--tk-font); font-size: 11px; font-weight: 700; color: var(--tk-ink);
}
.tk-btn-tile i { font-size: 19px; color: var(--tk-accent); }
.tk-btn-tile:hover { border-color: var(--tk-accent); color: var(--tk-accent); }

/* ---------- pastillas y estados ---------- */
.tk-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--tk-surface-alt); color: var(--tk-slate);
  padding: 6px 12px; border-radius: var(--tk-r-pill);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.tk-chip--accent { background: var(--tk-accent); color: #fff; }
.tk-chip--outline { background: transparent; border: 1px solid var(--tk-line); }
.tk-chip--success { background: rgba(27, 145, 107, 0.12); color: var(--tk-success); }
.tk-chip--warning { background: var(--tk-warning-surface); color: var(--tk-warning-dark); }
.tk-chip--danger { background: rgba(210, 47, 63, 0.1); color: var(--tk-danger); }

/* ---------- avisos ---------- */
.tk-notice {
  display: flex; gap: var(--tk-3); align-items: flex-start;
  border-radius: 14px; padding: 13px 15px;
  background: var(--tk-surface-alt); border: 1px solid var(--tk-line);
}
.tk-notice > i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.tk-notice-title { font-size: 12.5px; font-weight: 700; color: var(--tk-ink); line-height: 1.4; }
.tk-notice-text { font-size: 11.5px; font-weight: 400; color: var(--tk-slate); line-height: 1.5; margin-top: 3px; }

.tk-notice--warning { background: var(--tk-warning-surface); border-color: rgba(247, 153, 45, 0.35); }
.tk-notice--warning > i { color: var(--tk-warning); }
.tk-notice--success { background: rgba(27, 145, 107, 0.07); border-color: rgba(27, 145, 107, 0.28); }
.tk-notice--success > i { color: var(--tk-success); }
.tk-notice--danger { background: rgba(210, 47, 63, 0.05); border-color: rgba(210, 47, 63, 0.26); }
.tk-notice--danger > i { color: var(--tk-danger); }

/* ---------- formularios ---------- */
.tk-field { display: block; }
.tk-field > .tk-label { display: block; margin-bottom: var(--tk-2); }
.tk-input {
  width: 100%; padding: 14px 16px;
  border: 1.5px solid var(--tk-line); border-radius: var(--tk-r-control);
  background: var(--tk-surface); color: var(--tk-ink);
  font-family: var(--tk-font); font-size: 13px; font-weight: 500; outline: none;
}
.tk-input:focus { border-color: var(--tk-accent); }
.tk-input::placeholder { color: var(--tk-muted); font-weight: 400; }

/* ---------- pares dato/valor ---------- */
.tk-datalist { display: flex; flex-direction: column; gap: 10px; }
.tk-datarow { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.tk-datarow dt { font-size: 12.5px; font-weight: 500; color: var(--tk-slate); white-space: nowrap; margin: 0; }
.tk-datarow dd { font-size: 13px; font-weight: 700; color: var(--tk-ink); text-align: right; margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------- tabla ---------- */
.tk-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tk-table th {
  text-align: left; padding: 12px 14px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--tk-muted); border-bottom: 1px solid var(--tk-line); white-space: nowrap;
}
.tk-table td { padding: 13px 14px; border-bottom: 1px solid var(--tk-line); font-weight: 500; color: var(--tk-slate); }
.tk-table td strong { font-weight: 700; color: var(--tk-ink); }
.tk-table tbody tr:hover { background: var(--tk-surface-deep); }

/* ---------- barra de progreso ---------- */
.tk-progress { height: 5px; background: var(--tk-line); border-radius: var(--tk-r-pill); overflow: hidden; display: block; }
.tk-progress > span { display: block; height: 100%; background: var(--tk-accent); border-radius: var(--tk-r-pill); }

/* ---------- sello de tinta ---------- */
.tk-stamp {
  --stamp-color: var(--tk-accent);
  display: inline-block; flex-shrink: 0;
  transform: rotate(-7deg);
  border: 2.5px solid var(--stamp-color);
  border-radius: 5px;
  padding: 3px 9px;
  color: var(--stamp-color);
  font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  opacity: 0.95;
  mix-blend-mode: multiply;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stamp-color) 30%, transparent);
  -webkit-mask-image: var(--tk-stamp-noise);
  mask-image: var(--tk-stamp-noise);
}
.tk-stamp--danger { --stamp-color: var(--tk-danger); transform: rotate(6deg); }
.tk-stamp--slate { --stamp-color: var(--tk-slate); transform: rotate(-4deg); }

:root {
  --tk-stamp-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.2 0 0 0 -0.62'/%3E%3C/filter%3E%3Crect width='300' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- motivo de 3 puntos ---------- */
.tk-dots { display: inline-flex; align-items: center; gap: 10px; }
.tk-dots > span { width: 6px; height: 6px; border-radius: 50%; background: var(--tk-navy); }
.tk-dots > span:nth-child(2) { background: var(--tk-accent); }

/* ---------- impresión ---------- */
@media print {
  body { background: #fff; }
  .tk-card, .tk-notice { box-shadow: none; }
  .tk-btn, .tk-btn-tile { display: none; }
  .tk-stamp { mix-blend-mode: normal; }
}