/* Reusable components shared by core and plugins. */

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.05s ease;
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

/* ── Modal (<dialog>) ────────────────────────────────────────────────
 * Centrado automático por la spec. Usar con .showModal() para que el
 * navegador bloquee la página y muestre el backdrop. */
.modal {
  border: 0;
  padding: 0;
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
  max-width: 28rem;
  width: calc(100% - var(--space-6));
  color: var(--text-default);
  /* Centrado robusto — algunos resets sobreescriben el margin:auto
   * implícito que aplican los navegadores a dialog:modal. */
  margin: auto;
  inset: 0;
}

.modal::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}

.modal-body {
  padding: var(--space-6);
}

.modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  color: var(--text-strong);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}

.modal-message {
  font-size: var(--font-size-sm);
  color: var(--text-default);
  margin: 0 0 var(--space-6);
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Icon-only square button — usa <Icon> dentro, con title="..." para tooltip. */
.btn-icon {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon svg {
  width: 16px;
  height: 16px;
}

/* Compact button modifier — usado en modal-actions y otras zonas
 * donde el default (padding var(--space-4) horizontal) queda pesado. */
.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}
.btn-primary:hover {
  background: var(--color-primary-strong);
}

.btn-secondary {
  background: var(--surface-card);
  color: var(--text-default);
  border-color: var(--border-strong);
}
.btn-secondary:hover {
  background: var(--surface-muted);
}

.btn-danger {
  background: var(--state-danger);
  color: var(--text-inverse);
}
.btn-danger:hover {
  background: color-mix(in srgb, var(--state-danger) 80%, black);
}

/* ── Forms ───────────────────────────────────────────────────────────── */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.form-field label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-strong);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="number"],
.form-field input[type="url"],
.form-field select,
.form-field textarea {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-default);
  font-size: var(--font-size-sm);
  font-family: inherit;
  width: 100%;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--text-subtle);
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: var(--neutral-400);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.form-field input[type="file"] {
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--text-default);
  font-size: var(--font-size-sm);
  width: 100%;
  cursor: pointer;
}

.form-field input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-default);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.form-field input[type="file"]::file-selector-button:hover {
  background: var(--surface-muted);
}

/* Checkbox label — keep inline. */
.form-field label:has(input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-default);
  font-weight: var(--font-weight-normal);
  cursor: pointer;
}

.form-field input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Row of inputs (two columns on desktop, stack on mobile). */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 540px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Action bar at the bottom of forms. */
.form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

/* ── Tables ──────────────────────────────────────────────────────────── */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.table th,
.table td {
  padding: var(--space-3) var(--space-6);
  text-align: left;
  border-bottom: 1px solid var(--border-default);
  vertical-align: middle;
}

.table th {
  font-weight: var(--font-weight-bold);
  color: var(--text-muted);
  background: var(--surface-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-3) var(--space-6);
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr {
  transition: background-color 0.1s ease;
}

.table tbody tr:hover {
  background: var(--surface-muted);
}

/* Inline inputs (selects en filas de tabla, etc.) — sin .form-field. */
.input,
.select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-default);
  font-size: var(--font-size-sm);
  font-family: inherit;
}

.input:focus,
.select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.select {
  cursor: pointer;
}

/* ── Custom <select> (CSS Customizable Select API) ───────────────────────
 * Activa el dropdown nativo estilizable en navegadores que lo soportan
 * (Chromium 130+). Resto cae al dropdown nativo del OS sin problema.
 * Spec: https://developer.chrome.com/blog/rfc-customizable-select         */

.select,
.form-field select {
  appearance: base-select;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 12px 12px;
}

/* Quita la flecha por defecto del UA cuando base-select está activo. */
.select::picker-icon,
.form-field select::picker-icon {
  display: none;
}

/* El popup del dropdown — caja flotante con tokens del sistema. */
::picker(select) {
  appearance: base-select;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
  margin-top: var(--space-1);
  min-width: anchor-size(width);
  font-size: var(--font-size-sm);
}

/* Cada <option> dentro del picker. */
::picker(select) option {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-default);
  cursor: pointer;
}

::picker(select) option:hover,
::picker(select) option:focus {
  background: var(--surface-muted);
  outline: none;
}

::picker(select) option:checked {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

/* Oculta el check ✓ por defecto del UA — el highlight ya comunica selección. */
::picker(select) option::checkmark {
  display: none;
}

/* ── Cards ───────────────────────────────────────────────────────────── */

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

/* Small uppercase label sitting at the top of dashboard mini-cards. */
.card-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-3);
}

/* Real heading for cards that wrap a full content block (forms, panels). */
.card-heading {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--text-strong);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
  line-height: 1.2;
}

.card-subheading {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-6);
  line-height: 1.5;
}

/* Card variant for tables (table provides own internal padding).
 * Use as `<div class="card card-flush">`. */
.card-flush {
  padding: 0;
  overflow: hidden;
}

.card-flush-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.card-flush-header-info {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  margin: 0;
}

.card-flush-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-default);
  background: var(--surface-muted);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* ── Alerts ──────────────────────────────────────────────────────────── */

.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
}

.alert-error {
  background: var(--state-danger-soft);
  color: var(--state-danger);
  border: 1px solid color-mix(in srgb, var(--state-danger) 25%, white);
}

.alert-success {
  background: var(--state-success-soft);
  color: var(--state-success);
  border: 1px solid color-mix(in srgb, var(--state-success) 25%, white);
}

/* ── Utility classes ─────────────────────────────────────────────────── */

/* Muted body text. Use instead of inline `style="color: var(--text-muted)"`. */
.text-muted {
  color: var(--text-muted);
}

/* Page-level intro paragraph under .admin-page-title. */
.admin-page-intro {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  margin: calc(var(--space-6) * -1) 0 var(--space-6);
}

/* Header de página con título + acción derecha (botón "Nuevo X", etc). */
.admin-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.admin-toolbar-info {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

/* Inline code chip — útil para mostrar slugs, ids, paths. */
.chip-code {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  border: 1px solid var(--border-default);
  font-family: var(--font-mono);
  font-size: 0.78em;
  color: var(--text-default);
}