/**
 * Innar — Sistema de botones unificado (diseño moderno v1.4)
 * Carga después de style.css para sobrescribir variantes legacy.
 */

:root {
  --btn-radius: 10px;
  --btn-radius-sm: 8px;
  --btn-font-weight: 600;
  --btn-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  --btn-shadow-hover: 0 6px 18px rgba(15, 23, 42, 0.12);
}

/* ── Base compartida (acciones estándar) ─────────────────────────────────── */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-login,
.btn-logout,
.btn-ok,
.btn-cancel,
.confirm-actions .btn-ok,
.confirm-actions .btn-cancel,
.cita-modal-action-btn,
.btn-dropdown-item,
.recibo-export-btn,
.session-expired-toast-btn,
.sop-btn,
.sop-btn-primary,
.sop-btn-ghost,
.sop-btn-teal,
.sop-btn-sm {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px !important;
  border-radius: var(--btn-radius) !important;
  font-size: 0.88rem !important;
  font-weight: var(--btn-font-weight) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
  box-sizing: border-box;
}

.btn-primary:active,
.btn-secondary:active,
.btn-success:active,
.btn-danger:active,
.btn-warning:active,
.btn-info:active,
.sop-btn:active {
  transform: scale(0.98);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-success:disabled,
.btn-danger:disabled,
.btn-warning:disabled,
.btn-info:disabled,
button:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Tamaño pequeño */
.btn-sm,
.sop-btn-sm {
  padding: 7px 14px !important;
  font-size: 0.8rem !important;
  border-radius: var(--btn-radius-sm) !important;
}

/* ── Primario (marca Innar) ─────────────────────────────────────────────── */
.btn-primary,
.btn-ok:not(.danger),
.confirm-actions .btn-ok:not(.danger),
.sop-btn-primary {
  background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-darker) 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(45, 74, 71, 0.35) !important;
}

.btn-primary:hover,
.btn-ok:not(.danger):hover,
.confirm-actions .btn-ok:not(.danger):hover,
.sop-btn-primary:hover {
  background: linear-gradient(135deg, var(--c-darker) 0%, #152a28 100%) !important;
  box-shadow: 0 6px 20px rgba(45, 74, 71, 0.45) !important;
}

/* ── Secundario / ghost ─────────────────────────────────────────────────── */
.btn-secondary,
.btn-cancel,
.confirm-actions .btn-cancel,
.sop-btn-ghost {
  background: #fff !important;
  color: #334155 !important;
  border: 2px solid #e2e8f0 !important;
  box-shadow: var(--btn-shadow) !important;
}

.btn-secondary:hover,
.btn-cancel:hover,
.confirm-actions .btn-cancel:hover,
.sop-btn-ghost:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: var(--btn-shadow-hover) !important;
}

/* ── Semánticos ─────────────────────────────────────────────────────────── */
.btn-success {
  background: linear-gradient(135deg, var(--c-success) 0%, var(--c-success-dark) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35) !important;
}

.btn-success:hover {
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.45) !important;
}

.btn-danger,
.btn-ok.danger,
.confirm-actions .btn-ok.danger {
  background: linear-gradient(135deg, var(--c-danger) 0%, var(--c-danger-dark) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;
}

.btn-danger:hover,
.btn-ok.danger:hover {
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45) !important;
}

.btn-warning {
  background: linear-gradient(135deg, var(--c-warning) 0%, var(--c-warning-dark) 100%) !important;
  color: #1f2937 !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
}

.btn-warning:hover {
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45) !important;
}

.btn-info,
.sop-btn-teal {
  background: linear-gradient(135deg, var(--c-info) 0%, var(--c-info-hover) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(3, 105, 161, 0.35) !important;
}

.btn-info:hover,
.sop-btn-teal:hover {
  box-shadow: 0 6px 20px rgba(3, 105, 161, 0.45) !important;
}

/* Teal armado soportes */
.sop-btn-teal {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35) !important;
}

.sop-btn-teal:hover {
  box-shadow: 0 6px 20px rgba(13, 148, 136, 0.45) !important;
}

.sop-btn-danger {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;
}

.sop-btn-danger:hover {
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45) !important;
}

/* ── Login / menú superior ────────────────────────────────────────────────── */
.btn-login {
  width: 100%;
  padding: 13px 18px !important;
  font-size: 1rem !important;
  background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-darker) 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(45, 74, 71, 0.4) !important;
  border-radius: 12px !important;
}

.btn-login:hover {
  box-shadow: 0 8px 24px rgba(45, 74, 71, 0.5) !important;
}

.btn-logout {
  padding: 8px 16px !important;
  background: #fff !important;
  color: #475569 !important;
  border: 2px solid #e2e8f0 !important;
  box-shadow: var(--btn-shadow) !important;
}

.btn-logout:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* ── Volver (sidebar) ───────────────────────────────────────────────────── */
.btn-volver {
  border-radius: var(--btn-radius) !important;
  font-weight: var(--btn-font-weight) !important;
  transition: background 0.15s, box-shadow 0.15s, color 0.15s !important;
}

.btn-volver:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

/* ── Exportar recibos ─────────────────────────────────────────────────────── */
.recibo-export-btn {
  padding: 9px 16px !important;
  background: #fff !important;
  color: var(--c-dark) !important;
  border: 2px solid #d1d5db !important;
  font-weight: 600 !important;
}

.recibo-export-btn:hover {
  border-color: var(--c-primary) !important;
  background: #f0f9f7 !important;
  box-shadow: 0 4px 12px rgba(138, 166, 161, 0.25) !important;
}

.recibo-export-excel:hover {
  border-color: #16a34a !important;
  background: #f0fdf4 !important;
}

.recibo-export-pdf:hover {
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
}

/* ── Dropdown menú cita ─────────────────────────────────────────────────── */
.btn-dropdown-item {
  width: 100%;
  justify-content: flex-start !important;
  padding: 12px 16px !important;
  background: transparent !important;
  color: #1f2937 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

.btn-dropdown-item:hover {
  background: #f1f5f9 !important;
  transform: none !important;
}

/* ── Botones de icono (tablas) — pulido sin cambiar tamaño ───────────────── */
.btn-editar,
.btn-eliminar,
.btn-prioridad-up,
.btn-prioridad-down,
.btn-recibo-anular,
.btn-recibo-pdf,
.btn-recibo-pagar,
.btn-recibo-tipo-pago,
.btn-recibo-obs,
.btn-usr-del,
.btn-usr-edit,
.btn-usr-hist,
.btn-usr-reset,
.btn-usr-speak,
.btn-usr-toggle {
  border-radius: var(--btn-radius-sm) !important;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s !important;
}

.btn-editar:hover:not(:disabled),
.btn-eliminar:hover:not(:disabled),
.btn-prioridad-up:hover:not(:disabled),
.btn-prioridad-down:hover:not(:disabled),
.btn-recibo-pdf:hover,
.btn-recibo-pagar:hover,
.btn-recibo-tipo-pago:hover:not(:disabled),
.btn-recibo-anular:hover:not(:disabled),
.btn-recibo-obs:hover:not(:disabled),
.btn-usr-edit:hover,
.btn-usr-del:hover,
.btn-usr-hist:hover,
.btn-usr-reset:hover {
  transform: translateY(-1px);
}

/* Recibos — acciones tabla (mismo aspecto que PDF / pagar / editar) */
button.btn-recibo-tipo-pago,
button.btn-recibo-obs {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s, transform 0.1s !important;
}

button.btn-recibo-tipo-pago {
  border: 1px solid #bbf7d0 !important;
  background: #f0fdf4 !important;
  color: #15803d !important;
}

button.btn-recibo-tipo-pago svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  pointer-events: none;
}

button.btn-recibo-tipo-pago:hover:not(:disabled) {
  background: #dcfce7 !important;
  border-color: #4ade80 !important;
  color: #166534 !important;
  transform: translateY(-1px);
}

button.btn-recibo-obs {
  border: 1px solid #d1fae5 !important;
  background: #ecfdf5 !important;
}

button.btn-recibo-obs img {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
  filter: invert(40%) sepia(80%) saturate(400%) hue-rotate(120deg) brightness(90%);
}

button.btn-recibo-obs:hover:not(:disabled) {
  background: #d1fae5 !important;
  border-color: #6ee7b7 !important;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.2) !important;
  transform: translateY(-1px);
}

/* Cerrar modal */
.btn-close-x,
.btn-close-modal {
  border-radius: var(--btn-radius-sm) !important;
  transition: background 0.15s, color 0.15s !important;
}

.btn-close-x:hover,
.btn-close-modal:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Sidebar navegación — radio y hover suave */
.sidebar-btn,
.sidebar-btn-danger,
.agenda-page-btn,
.electro-page-btn {
  border-radius: var(--btn-radius) !important;
  transition: background 0.15s, box-shadow 0.15s, color 0.15s !important;
}

html:not(.innar-shell-light) .sidebar-btn.active,
html:not(.innar-shell-light) .agenda-page-btn.active,
html:not(.innar-shell-light) .electro-page-btn.active {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
}

/* Calendario nav */
.ccal-nav-btn,
.cal-nav-btn {
  border-radius: var(--btn-radius-sm) !important;
  transition: background 0.15s, box-shadow 0.15s !important;
}

.ccal-nav-btn:hover,
.cal-nav-btn:hover {
  box-shadow: var(--btn-shadow) !important;
}

/* Monitor equipos */
.meq-back-btn,
.meq-date-hoy {
  border-radius: var(--btn-radius) !important;
  font-weight: 600 !important;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s !important;
}

.meq-back-btn:hover {
  transform: translateX(-2px);
}

/* Estado cita (pills) */
.btn-estado-opcion {
  border-radius: 12px !important;
  transition: filter 0.15s, box-shadow 0.15s, transform 0.1s !important;
}

.btn-estado-opcion:hover {
  transform: translateY(-1px);
  box-shadow: var(--btn-shadow-hover) !important;
}

/* Flujo agenda — conservar colores por estado (no forzar primario) */
.flujo-btn-sm {
  border-radius: var(--btn-radius-sm) !important;
  font-weight: 600 !important;
  transition: box-shadow 0.15s, transform 0.1s !important;
  background: #fff !important;
  color: inherit !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  border: 1.5px solid #d1d5db !important;
  padding: 10px 14px !important;
}

.flujo-btn-sm:hover {
  box-shadow: var(--btn-shadow) !important;
}

.flujo-btn-sm.confirmado {
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
  background: #eff6ff !important;
}

.flujo-btn-sm.en-sala {
  border-color: #67e8f9 !important;
  color: #0e7490 !important;
  background: #ecfeff !important;
}

.flujo-btn-sm.iniciar {
  border-color: #fdba74 !important;
  color: #c2410c !important;
  background: #fff7ed !important;
}

.flujo-btn-sm.cancelar {
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
  background: #fff !important;
}

.flujo-btn-sm.no-asistio {
  border-color: #d1d5db !important;
  color: #6b7280 !important;
  background: #fff !important;
}

.flujo-btn-sm.pausar {
  background: #f59e0b !important;
  color: #78350f !important;
  border: none !important;
}

/* Multi-select — mismo aspecto que select nativo */
.ms-trigger {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 10px 36px 10px 12px !important;
  background: #fff !important;
  background-image: none !important;
  border: 2px solid var(--innar-border, #e2e8f0) !important;
  border-radius: var(--innar-radius, 10px) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: #374151 !important;
  cursor: pointer !important;
  text-align: left !important;
  box-shadow: none !important;
  min-height: var(--innar-control-h, 44px) !important;
  box-sizing: border-box !important;
}

.ms-trigger:hover {
  border-color: var(--c-primary) !important;
  background: #fff !important;
  color: #374151 !important;
}

.ms-trigger.ms-has-value {
  border-color: var(--c-primary) !important;
  background: #f8fafc !important;
}

.ms-arrow {
  color: #64748b !important;
  flex-shrink: 0 !important;
}

.ms-open .ms-arrow {
  color: var(--c-dark, #2d4a47) !important;
}

/* Tag `button` genérico sin clase de icono — alinear a primario si queda suelto */
button:not(.menu-card):not(.btn-close-x):not(.btn-close-modal):not(.btn-editar):not(.btn-eliminar):not(.btn-prioridad-up):not(.btn-prioridad-down):not(.btn-recibo-anular):not(.btn-recibo-pdf):not(.btn-recibo-pagar):not(.btn-recibo-tipo-pago):not(.btn-recibo-obs):not(.btn-usr-del):not(.btn-usr-edit):not(.btn-usr-hist):not(.btn-usr-reset):not(.btn-usr-speak):not(.btn-usr-toggle):not(.btn-estado):not(.btn-estado-small):not(.sidebar-btn):not(.agenda-page-btn):not(.electro-page-btn):not(.card-collapse-btn):not(.toggle-password-btn):not(.meq-back-btn):not(.meq-date-nav):not(.meq-refresh-btn):not(.meq-date-hoy):not(.ccal-nav-btn):not(.cal-nav-btn):not(.recibo-export-btn):not(.flujo-btn-sm):not(.btn-dropdown-item):not(.btn-estado-opcion):not(.cita-modal-icon-btn):not(.cita-modal-footer-btn):not(.medico-select-btn):not([class*="cita-modal-btn-"]):not(.ms-trigger):not([class*="btn-"]):not([id^="monitorDate"]):not(#btnRefreshMonitor) {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-hover) 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--btn-radius) !important;
  padding: 10px 18px !important;
  font-weight: var(--btn-font-weight) !important;
  box-shadow: 0 4px 12px rgba(138, 166, 161, 0.35) !important;
}

button:not(.menu-card):not(.btn-close-x):not(.meq-date-nav):not(.meq-refresh-btn):not(.meq-date-hoy):not(.cita-modal-icon-btn):not(.cita-modal-footer-btn):not(.medico-select-btn):not([class*="cita-modal-btn-"]):not(.ms-trigger):not([class*="btn-"]):not([id^="monitorDate"]):not(#btnRefreshMonitor):hover {
  box-shadow: 0 6px 16px rgba(138, 166, 161, 0.45) !important;
}

/* ── Modal cita médica (después del botón genérico para no ser pisado) ───── */
button.cita-modal-icon-btn {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #475569 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  box-shadow: none !important;
}

button.cita-modal-icon-btn:hover {
  background: #fff !important;
  color: #1f3634 !important;
  border-color: var(--c-primary) !important;
}

button.cita-modal-icon-btn svg {
  display: block !important;
  flex-shrink: 0 !important;
  pointer-events: none;
}

button.cita-modal-icon-btn svg,
button.cita-modal-icon-btn svg * {
  color: inherit !important;
  stroke: currentColor !important;
}

button.cita-modal-icon-btn svg circle[fill="currentColor"],
button.cita-modal-icon-btn svg [fill="currentColor"] {
  fill: currentColor !important;
}

button.cita-modal-icon-btn.cita-modal-close-btn:hover {
  color: #dc2626 !important;
  border-color: #fca5a5 !important;
}

.cita-modal-footer-actions .cita-modal-footer-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: var(--btn-radius) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  min-width: 120px !important;
  border: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.cita-modal-footer-actions .cita-modal-footer-btn svg {
  flex-shrink: 0 !important;
  display: block !important;
}

.cita-modal-footer-actions .cita-modal-footer-btn:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
}

.cita-modal-footer-actions .cita-modal-footer-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  filter: none !important;
}

.cita-modal-footer-actions .cita-modal-footer-btn[hidden] {
  display: none !important;
}

.cita-modal-footer-actions .cita-modal-footer-btn.cita-modal-btn-teal {
  background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
  color: #fff !important;
}

.cita-modal-footer-actions .cita-modal-footer-btn.cita-modal-btn-amber {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: #78350f !important;
}

.cita-modal-footer-actions .cita-modal-footer-btn.cita-modal-btn-blue {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  color: #fff !important;
}

.cita-modal-footer-actions .cita-modal-footer-btn.cita-modal-btn-orange {
  background: linear-gradient(135deg, #fb923c, #f97316) !important;
  color: #fff !important;
}

.cita-modal-footer-actions .cita-modal-footer-btn.cita-modal-btn-green {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: #fff !important;
}

.cita-modal-footer-actions .cita-modal-footer-btn.cita-modal-btn-red {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #fff !important;
}

/* Loading state */
.btn-loading {
  position: relative !important;
  color: transparent !important;
  pointer-events: none !important;
}