/* ==========================================================================
   Componentes reutilizables (BEM)
   ========================================================================== */

/* ---- Logo Ycobe ---- */
.logo { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 800; letter-spacing: -.02em; color: var(--text); text-decoration: none; }
.logo__mark {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #2F5D50; font-size: .9rem; font-weight: 800;
}
.logo__text { font-size: var(--text-lg); }

/* ---- Botones ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 10px 18px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: var(--primary); color: var(--on-primary);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background .15s, transform .05s;
}
.btn:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn:active { transform: translateY(1px); }
.btn--block { width: 100%; }
.btn--lg { min-height: 52px; font-size: var(--text-lg); border-radius: var(--radius-lg); }
.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn--secondary:hover { background: var(--surface-2); color: var(--text); }
.btn--ghost-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn--ghost-danger:hover { background: var(--danger-soft); color: var(--danger); }
.btn--brand { background: var(--brand); color: var(--on-brand); }
.btn--brand:hover { background: color-mix(in srgb, var(--brand) 88%, black); color: var(--on-brand); }

.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); cursor: pointer; }
.link-button--danger { color: var(--danger); font-size: var(--text-sm); }
.inline-form { display: inline; margin: 0; }

/* ---- Tarjetas ---- */
.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  color: inherit; text-decoration: none;
  box-shadow: var(--shadow-sm);
}
a.card { transition: border-color .15s, box-shadow .15s; }
a.card:hover { border-color: var(--brand); box-shadow: var(--shadow); color: inherit; }
.card__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.card__title { font-weight: 700; }
.card__meta { color: var(--muted); font-size: var(--text-sm); }
.card--flat { box-shadow: none; }

/* ---- Chips (radio estilizado) ---- */
.chips { display: flex; gap: var(--space-2); overflow-x: auto; padding: 2px 2px var(--space-2); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { position: relative; flex: 0 0 auto; margin: 0; font-weight: 500; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip__face {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 56px; min-height: 44px; padding: 6px 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); cursor: pointer; font-size: var(--text-sm); line-height: 1.2;
}
.chip__face strong { font-size: var(--text-lg); }
.chip input:checked + .chip__face { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.chip input:focus-visible + .chip__face { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- Badges ---- */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 700;
  background: var(--accent-soft); color: var(--text);
}
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--muted { background: var(--surface-2); color: var(--muted); }

/* ---- Mensajes ---- */
.messages { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.message {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); margin-bottom: var(--space-2);
}
.message--success { background: var(--success-soft); border-color: transparent; color: var(--success); font-weight: 600; }
.message--error { background: var(--danger-soft); border-color: transparent; color: var(--danger); font-weight: 600; }

/* ---- Etiqueta de sección ---- */
.section-label {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: var(--space-5) 0 var(--space-3);
}

/* ---- Indicador de pasos ---- */
.steps { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-4); font-size: var(--text-xs); }
.steps li { flex: 1; text-align: center; padding-top: var(--space-2); border-top: 3px solid var(--border); color: var(--muted); }
.steps li.is-done { border-color: var(--brand); color: var(--text); }
.steps li.is-current { border-color: var(--brand); color: var(--text); font-weight: 700; }

/* ---- Tablas ---- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table th { color: var(--muted); font-weight: 600; background: var(--surface-2); }
.table input:not([type=checkbox]), .table select { min-width: 96px; min-height: 38px; padding: 6px 8px; }

/* ---- Listas de funciones/progreso ---- */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.check-list li:last-child { border-bottom: 0; }
.check-list .tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; flex: 0 0 auto; }
.check-list .is-included .tick { background: var(--success-soft); color: var(--success); }
.check-list .is-excluded { color: var(--muted); }
.check-list .is-excluded .tick { background: var(--surface-2); }

/* ---- Varios ---- */
.toolbar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.toolbar__title { margin: 0 var(--space-2); font-size: var(--text-xl); }
.toolbar__spacer { flex: 1; }
.secret {
  display: inline-block; font-family: ui-monospace, monospace; font-size: var(--text-lg);
  padding: var(--space-3) var(--space-4); background: var(--accent-soft);
  border: 1px dashed var(--accent); border-radius: var(--radius);
}
.empty { text-align: center; padding: var(--space-6) var(--space-4); color: var(--muted); }
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ---- Textos legales ---- */
.legal { max-width: 720px; }
.legal h2 { margin-top: var(--space-6); }
.legal p, .legal li { color: var(--text); }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: var(--space-2); }
.legal .table { margin: var(--space-3) 0; }
.legal__draft {
  background: var(--danger-soft); color: var(--danger);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius); margin-bottom: var(--space-5);
}
.legal__callout {
  background: var(--accent-soft); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius); margin: var(--space-4) 0;
}
.legal__data { margin: 0; }
.legal__data div { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.legal__data dt { color: var(--muted); }
.legal__data dd { margin: 0; }
.legal__nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: var(--text-sm); }

/* ---- Pie de página general ---- */
.site-footer { border-top: 1px solid var(--border); margin-top: var(--space-6); padding: var(--space-4) 0; color: var(--muted); font-size: var(--text-xs); }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; align-items: center; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.site-footer a { color: var(--muted); }