/**
 * Controles interactivos unificados: tamaño, alineación y color por tipo.
 */
:root {
  --ui-height: 2.375rem;
  --ui-height-sm: 2rem;
  --ui-font: 0.875rem;
  --ui-font-sm: 0.8125rem;
  --ui-line: 1.25;
  --ui-weight: 500;
  --ui-px: 0.875rem;
  --ui-px-sm: 0.75rem;
  --ui-radius: 0.5rem;
  --ui-gap: 0.375rem;

  /* Primario — acción principal (guardar, enviar, filtrar) */
  --btn-primary-bg: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  --btn-primary-bg-hover: linear-gradient(135deg, #1d4ed8 0%, #4338ca 100%);
  --btn-primary-fg: #ffffff;
  --btn-primary-border: transparent;

  /* Secundario — cancelar, volver, acciones neutras */
  --btn-secondary-bg: rgba(30, 41, 59, 0.75);
  --btn-secondary-border: #475569;
  --btn-secondary-fg: #e2e8f0;
  --btn-secondary-bg-hover: rgba(51, 65, 85, 0.9);
  --btn-secondary-border-hover: #64748b;
  --btn-secondary-fg-hover: #f8fafc;

  /* Peligro — eliminar, anular, borrar */
  --btn-danger-bg: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  --btn-danger-bg-hover: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
  --btn-danger-fg: #ffffff;
  --btn-danger-border: rgba(248, 113, 113, 0.55);
  --btn-danger-soft-bg: rgba(239, 68, 68, 0.2);
  --btn-danger-soft-fg: #fecaca;

  /* Aviso — acciones especiales admin */
  --btn-warning-bg: rgba(245, 158, 11, 0.18);
  --btn-warning-border: rgba(251, 191, 36, 0.55);
  --btn-warning-fg: #fde68a;
  --btn-warning-bg-hover: rgba(245, 158, 11, 0.32);

  /* Navegación admin (panel, tarifas, usuarios…) */
  --btn-nav-bg: rgba(37, 99, 235, 0.2);
  --btn-nav-border: rgba(59, 130, 246, 0.5);
  --btn-nav-fg: #93c5fd;
  --btn-nav-bg-hover: rgba(37, 99, 235, 0.38);
  --btn-nav-fg-hover: #ffffff;
  --btn-nav-active-bg: rgba(37, 99, 235, 0.42);
  --btn-nav-active-border: #3b82f6;

  /* Enlaces de cuenta / usuario (Mi cuenta, mis reservas) */
  --btn-neutral-bg: rgba(15, 23, 42, 0.55);
  --btn-neutral-border: #334155;
  --btn-neutral-fg: #f1f5f9;
  --btn-neutral-bg-hover: rgba(37, 99, 235, 0.22);
  --btn-neutral-border-hover: #3b82f6;
  --btn-neutral-fg-hover: #e0e7ff;

  /* Verificar boletos */
  --btn-boletos-bg: rgba(124, 58, 237, 0.2);
  --btn-boletos-border: rgba(167, 139, 250, 0.5);
  --btn-boletos-fg: #c4b5fd;
  --btn-boletos-bg-hover: rgba(124, 58, 237, 0.38);
  --btn-boletos-fg-hover: #ede9fe;

  /* Cerrar sesión */
  --btn-logout-bg: rgba(239, 68, 68, 0.16);
  --btn-logout-border: rgba(248, 113, 113, 0.5);
  --btn-logout-fg: #fecaca;
  --btn-logout-bg-hover: rgba(239, 68, 68, 0.3);
  --btn-logout-fg-hover: #ffffff;

  /* Fantasma — detalle, filtros suaves */
  --btn-ghost-bg: transparent;
  --btn-ghost-border: #475569;
  --btn-ghost-fg: #94a3b8;
  --btn-ghost-bg-hover: rgba(37, 99, 235, 0.12);
  --btn-ghost-border-hover: #3b82f6;
  --btn-ghost-fg-hover: #bfdbfe;
}

[data-theme="light"] {
  --btn-secondary-bg: #f8fafc;
  --btn-secondary-border: #cbd5e1;
  --btn-secondary-fg: #475569;
  --btn-secondary-bg-hover: #f1f5f9;
  --btn-secondary-border-hover: #94a3b8;
  --btn-secondary-fg-hover: #1e293b;

  --btn-danger-soft-bg: rgba(254, 226, 226, 0.95);
  --btn-danger-soft-fg: #b91c1c;

  --btn-warning-bg: rgba(254, 243, 199, 0.9);
  --btn-warning-border: #fbbf24;
  --btn-warning-fg: #92400e;
  --btn-warning-bg-hover: rgba(253, 230, 138, 0.95);

  --btn-nav-bg: rgba(37, 99, 235, 0.1);
  --btn-nav-border: rgba(37, 99, 235, 0.35);
  --btn-nav-fg: #1d4ed8;
  --btn-nav-bg-hover: rgba(37, 99, 235, 0.2);
  --btn-nav-fg-hover: #1e3a8a;
  --btn-nav-active-bg: rgba(37, 99, 235, 0.22);
  --btn-nav-active-border: #2563eb;

  --btn-neutral-bg: #ffffff;
  --btn-neutral-border: #e2e8f0;
  --btn-neutral-fg: #334155;
  --btn-neutral-bg-hover: rgba(37, 99, 235, 0.08);
  --btn-neutral-border-hover: #93c5fd;
  --btn-neutral-fg-hover: #1e40af;

  --btn-boletos-bg: rgba(124, 58, 237, 0.1);
  --btn-boletos-border: rgba(124, 58, 237, 0.35);
  --btn-boletos-fg: #6d28d9;
  --btn-boletos-bg-hover: rgba(124, 58, 237, 0.18);
  --btn-boletos-fg-hover: #5b21b6;

  --btn-logout-bg: rgba(254, 226, 226, 0.9);
  --btn-logout-border: rgba(239, 68, 68, 0.4);
  --btn-logout-fg: #b91c1c;
  --btn-logout-bg-hover: rgba(254, 202, 202, 0.95);
  --btn-logout-fg-hover: #991b1b;

  --btn-ghost-border: #cbd5e1;
  --btn-ghost-fg: #64748b;
  --btn-ghost-fg-hover: #1d4ed8;
}

/* Contenedores */
.header-links,
.admin-header .header-links,
.page-header .header-links,
.filters,
.filtros,
.form-actions,
.modal-actions,
.modal .modal-actions,
.acciones-wrap,
.summary-actions,
.actions,
.header-row {
  align-items: center;
}

/* Base común (sin color) */
.ui-btn,
button:not(.theme-toggle):not(.btn-step):not(.password-toggle):not(.tab),
input[type="submit"],
input[type="button"]:not(.theme-toggle),
.btn-primary,
.btn-secondary,
.btn-small,
.btn-send,
.btn-clear-log,
.detail-toggle,
.admin-header .header-link,
.admin-header button.header-link,
.page-header .header-link,
.page-header .header-link-cuenta,
.page-header .header-link-boletos,
.page-header button.header-link,
.page-header .admin-nav .header-link,
a.header-link,
a.btn-small,
button.secondary,
button.danger,
#btn-resend-otp,
button.btn-admin-forzar,
.logout-btn,
.header-row button:not(.theme-toggle) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-gap);
  min-height: var(--ui-height);
  padding: 0 var(--ui-px);
  margin: 0;
  font-family: inherit;
  font-size: var(--ui-font);
  font-weight: var(--ui-weight);
  line-height: 1;
  text-align: center;
  border-radius: var(--ui-radius);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-small,
.detail-toggle,
.header-row button:not(.theme-toggle) {
  min-height: var(--ui-height-sm);
  padding: 0 var(--ui-px-sm);
  font-size: var(--ui-font-sm);
}

a.btn-small {
  display: inline-flex;
}

/* —— Primario —— */
button:not(.theme-toggle):not(.btn-step):not(.password-toggle):not(.header-link):not(.header-link-logout):not(.secondary):not(.btn-secondary):not(.detail-toggle):not(.btn-clear-log):not(.btn-admin-forzar):not(.danger):not([class*="btn-small"]),
input[type="submit"],
.btn-primary,
.btn-send,
#btn-save-items,
#btn-save-group:not(.secondary),
body:not(.panel-reservas) #btn-filtrar,
body:not(.panel-reservas) .btn-small:not(.btn-danger):not(.btn-secondary):not([style*="transparent"]) {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-fg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
}

button:not(.theme-toggle):not(.btn-step):not(.password-toggle):not(.header-link):not(.header-link-logout):not(.secondary):not(.btn-secondary):not(.detail-toggle):not(.btn-clear-log):not(.btn-admin-forzar):not(.danger):not([class*="btn-small"]):hover,
input[type="submit"]:hover,
.btn-primary:hover,
.btn-send:hover,
body:not(.panel-reservas) #btn-filtrar:hover,
body:not(.panel-reservas) .btn-small:not(.btn-danger):not(.btn-secondary):not([style*="transparent"]):hover {
  background: var(--btn-primary-bg-hover);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

button:disabled,
.btn-send:disabled,
input[type="submit"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* —— Secundario —— */
.btn-secondary,
button.secondary,
#btn-resend-otp,
.actions button.secondary,
.summary-actions button.secondary,
#btn-limpiar.btn-small,
.btn-small[style*="transparent"],
.modal-actions .btn-secondary,
#btn-cerrar-modal,
#btn-cerrar-detalle,
#btn-limpiar {
  background: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-fg);
}

.btn-secondary:hover,
button.secondary:hover,
#btn-resend-otp:hover,
.actions button.secondary:hover,
.summary-actions button.secondary:hover,
#btn-limpiar.btn-small:hover,
#btn-limpiar:hover,
.modal-actions .btn-secondary:hover,
#btn-cerrar-modal:hover,
#btn-cerrar-detalle:hover {
  background: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-border-hover);
  color: var(--btn-secondary-fg-hover);
}

/* —— Peligro —— */
button.danger,
.btn-danger,
.btn-small.btn-danger,
button.btn-clear-log,
#btn-delete-group {
  background: var(--btn-danger-bg);
  border-color: var(--btn-danger-border);
  color: var(--btn-danger-fg);
  box-shadow: 0 1px 2px rgba(127, 29, 29, 0.25);
}

button.danger:hover,
.btn-danger:hover,
.btn-small.btn-danger:hover,
#btn-delete-group:hover {
  background: var(--btn-danger-bg-hover);
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
}

button.btn-clear-log {
  background: var(--btn-danger-soft-bg);
  color: var(--btn-danger-soft-fg);
  border-color: var(--btn-danger-border);
  box-shadow: none;
}

button.btn-clear-log:hover {
  background: var(--btn-danger-bg-hover);
  color: var(--btn-danger-fg);
}

/* —— Aviso —— */
button.btn-admin-forzar {
  background: var(--btn-warning-bg);
  border-color: var(--btn-warning-border);
  color: var(--btn-warning-fg);
  font-size: var(--ui-font-sm);
}

button.btn-admin-forzar:hover {
  background: var(--btn-warning-bg-hover);
}

/* —— Navegación admin —— */
.admin-header .header-link,
.page-header .admin-nav .header-link,
.page-header .header-link:not(.header-link-cuenta):not(.header-link-boletos):not(.header-link-logout) {
  background: var(--btn-nav-bg);
  border-color: var(--btn-nav-border);
  color: var(--btn-nav-fg);
}

.admin-header .header-link:hover,
.page-header .admin-nav .header-link:hover,
.page-header .header-link:not(.header-link-cuenta):not(.header-link-boletos):not(.header-link-logout):hover {
  background: var(--btn-nav-bg-hover);
  border-color: var(--btn-nav-active-border);
  color: var(--btn-nav-fg-hover);
}

.admin-header .header-link.active,
.page-header .admin-nav .header-link.active {
  background: var(--btn-nav-active-bg);
  border-color: var(--btn-nav-active-border);
  color: var(--btn-nav-fg-hover);
}

/* —— Cuenta / usuario —— */
.page-header .header-link-cuenta,
a.header-link-cuenta {
  background: var(--btn-neutral-bg);
  border-color: var(--btn-neutral-border);
  color: var(--btn-neutral-fg);
}

.page-header .header-link-cuenta:hover {
  background: var(--btn-neutral-bg-hover);
  border-color: var(--btn-neutral-border-hover);
  color: var(--btn-neutral-fg-hover);
}

/* —— Verificar boletos —— */
.page-header .header-link-boletos,
a.header-link-boletos {
  background: var(--btn-boletos-bg);
  border-color: var(--btn-boletos-border);
  color: var(--btn-boletos-fg);
}

.page-header .header-link-boletos:hover {
  background: var(--btn-boletos-bg-hover);
  border-color: #8b5cf6;
  color: var(--btn-boletos-fg-hover);
}

/* —— Cerrar sesión —— */
.header-link-logout,
.logout-btn,
.admin-header .header-link-logout,
.page-header .header-link-logout {
  background: var(--btn-logout-bg);
  border-color: var(--btn-logout-border);
  color: var(--btn-logout-fg);
}

.header-link-logout:hover,
.logout-btn:hover,
.admin-header .header-link-logout:hover,
.page-header .header-link-logout:hover {
  background: var(--btn-logout-bg-hover);
  border-color: #f87171;
  color: var(--btn-logout-fg-hover);
}

.page-header .header-link-logout svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* —— Fantasma / detalle —— */
.detail-toggle,
.header-row button:not(.theme-toggle):not(.btn-add-header) {
  background: var(--btn-ghost-bg);
  border-color: var(--btn-ghost-border);
  color: var(--btn-ghost-fg);
}

.detail-toggle:hover,
.header-row button:not(.theme-toggle):not(.btn-add-header):hover {
  background: var(--btn-ghost-bg-hover);
  border-color: var(--btn-ghost-border-hover);
  color: var(--btn-ghost-fg-hover);
}

.btn-add-header {
  background: var(--btn-nav-bg);
  border-color: var(--btn-nav-border);
  color: var(--btn-nav-fg);
  min-height: var(--ui-height);
  padding: 0 var(--ui-px);
}

.btn-add-header:hover {
  background: var(--btn-nav-bg-hover);
  color: var(--btn-nav-fg-hover);
}

/* Modales */
.modal-actions button,
.modal .modal-actions .btn-primary,
.modal .modal-actions .btn-secondary {
  min-height: var(--ui-height);
  padding: 0 var(--ui-px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Tema claro/oscuro (icono) */
.theme-toggle-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}

.theme-toggle {
  box-sizing: border-box;
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0 !important;
  margin: 0;
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
  vertical-align: middle;
  line-height: 0;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  font-size: 0;
  border: 1px solid var(--border, #334155);
  background: var(--card-bg, rgba(15, 23, 42, 0.9));
  color: var(--text, #f9fafb);
}

.theme-toggle:hover {
  border-color: var(--primary, #2563eb);
  background: var(--btn-nav-bg);
}

.theme-toggle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.theme-toggle .icon-moon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}

.theme-toggle .icon-sun {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}

[data-theme="light"] .theme-toggle .icon-sun {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}

[data-theme="light"] .theme-toggle .icon-moon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.password-toggle,
.btn-step,
.tab {
  min-height: unset;
  padding: unset;
  font-size: unset;
  font-weight: unset;
}

/* Centrado (layout) */
.btn-secondary,
button.secondary,
#btn-resend-otp,
.logout-btn,
.page-header .header-link,
.admin-header .header-link,
.summary-actions button.secondary,
.actions button.secondary,
.header-row button:not(.theme-toggle),
.detail-toggle,
button.btn-admin-forzar,
.modal-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#btn-resend-otp,
.summary-actions button.secondary,
.actions button.secondary {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: var(--ui-px) !important;
  padding-right: var(--ui-px) !important;
}

.btn-small[style*="transparent"],
#btn-limpiar {
  padding-left: var(--ui-px-sm) !important;
  padding-right: var(--ui-px-sm) !important;
}

@media (max-width: 700px) {
  .filters button,
  .filtros button,
  .field button,
  .form-actions .btn-primary,
  .form-actions .btn-secondary,
  .modal-actions button,
  .summary-actions button {
    width: 100%;
  }

  .admin-header .header-link,
  .page-header .header-link,
  .page-header button.header-link {
    width: 100%;
    justify-content: center;
  }
}