/* ═══════════════════════════════════════════════════
   IUBello Accessibility Widget - Estilos
   ═══════════════════════════════════════════════════ */

/* ─── Variables ─── */
:root {
  --iubello-azul: #195387;
  --iubello-azul-hover: #2a6ba3;
  --iubello-verde: #22c55e;
  --iubello-verde-hover: #16a34a;
  --iubello-blanco: #ffffff;
  --iubello-negro: #1a1a1a;
  --iubello-rojo: #ef4444;
  --iubello-radius: 9999px;
  --iubello-shadow: 0 10px 25px -5px rgba(0,0,0,.15), 0 8px 10px -6px rgba(0,0,0,.1);
  --iubello-shadow-sm: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --iubello-font-scale: 1;
}

/* ─── Container ─── */
.iubello-widget-container {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
}

@media (min-width: 640px) {
  .iubello-widget-container {
    right: 1.25rem;
    bottom: 1.25rem;
  }
}

/* ─── Button group ─── */
.iubello-widget-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
}

/* ─── Generic floating button ─── */
.iubello-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  border-radius: var(--iubello-radius);
  box-shadow: var(--iubello-shadow);
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  outline: none;
  text-decoration: none;
}

.iubello-btn:hover {
  transform: scale(1.1);
}

.iubello-btn:focus-visible {
  outline: 2px solid var(--iubello-azul);
  outline-offset: 2px;
}

/* ─── Contact button (green) ─── */
.iubello-btn-contact {
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--iubello-verde);
  color: var(--iubello-blanco);
}

.iubello-btn-contact:hover {
  background-color: var(--iubello-verde-hover);
}

.iubello-btn-contact svg {
  width: 1.75rem;
  height: 1.75rem;
}

@media (min-width: 640px) {
  .iubello-btn-contact {
    width: 4rem;
    height: 4rem;
  }
  .iubello-btn-contact svg {
    width: 2rem;
    height: 2rem;
  }
}

/* ─── Accessibility button (blue with ring) ─── */
.iubello-btn-a11y {
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--iubello-azul);
  color: var(--iubello-blanco);
  box-shadow: var(--iubello-shadow), 0 0 0 4px var(--iubello-blanco);
}

.iubello-btn-a11y:hover {
  background-color: var(--iubello-azul-hover);
}

.iubello-btn-a11y svg {
  width: 2.5rem;
  height: 2.5rem;
}

@media (min-width: 640px) {
  .iubello-btn-a11y {
    width: 4rem;
    height: 4rem;
  }
  .iubello-btn-a11y svg {
    width: 3rem;
    height: 3rem;
  }
}

/* ─── Scroll to top button (blue) ─── */
.iubello-btn-scroll-top {
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--iubello-azul);
  color: var(--iubello-blanco);
}

.iubello-btn-scroll-top:hover {
  background-color: var(--iubello-azul-hover);
}

.iubello-btn-scroll-top svg {
  width: 1.5rem;
  height: 1.5rem;
}

@media (min-width: 640px) {
  .iubello-btn-scroll-top {
    width: 4rem;
    height: 4rem;
  }
  .iubello-btn-scroll-top svg {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* ─── Scroll top wrapper animation ─── */
.iubello-scroll-top-wrap {
  overflow: hidden;
  transition: height 0.5s ease, opacity 0.5s ease;
  height: 3.5rem;
  opacity: 1;
}

@media (min-width: 640px) {
  .iubello-scroll-top-wrap {
    height: 4rem;
  }
}

.iubello-scroll-top-wrap.iubello-hidden {
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.iubello-scroll-top-wrap.iubello-visible {
  height: 3.5rem;
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 640px) {
  .iubello-scroll-top-wrap.iubello-visible {
    height: 4rem;
  }
}

/* ─── Contact dropdown (horizontal to the left) ─── */
.iubello-widget-contact-wrap {
  position: relative;
}

.iubello-contact-dropdown {
  position: absolute;
  right: 4rem;
  bottom: 0;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  background: var(--iubello-blanco);
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  border: 1px solid rgba(0,0,0,.1);
  padding: 0.5rem;
  white-space: nowrap;
  animation: iubello-slide-in 0.2s ease;
}

@media (min-width: 640px) {
  .iubello-contact-dropdown {
    right: 5rem;
  }
}

.iubello-contact-dropdown.iubello-hidden {
  display: none;
}

@keyframes iubello-slide-in {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ─── Social buttons in dropdown ─── */
.iubello-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--iubello-radius);
  box-shadow: var(--iubello-shadow-sm);
  transition: transform 0.3s ease, opacity 0.3s ease;
  text-decoration: none;
  color: var(--iubello-blanco);
}

.iubello-social-btn:hover {
  transform: scale(1.1);
}

.iubello-social-btn:focus-visible {
  outline: 2px solid var(--iubello-azul);
  outline-offset: 2px;
}

.iubello-social-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}

@media (min-width: 640px) {
  .iubello-social-btn {
    width: 3.5rem;
    height: 3.5rem;
  }
  .iubello-social-btn svg {
    width: 1.75rem;
    height: 1.75rem;
  }
}

.iubello-social-whatsapp {
  background-color: #25D366;
}
.iubello-social-whatsapp:hover {
  background-color: #128C7E;
}

.iubello-social-facebook {
  background-color: #1877F2;
}
.iubello-social-facebook:hover {
  background-color: #166FE5;
}

.iubello-social-instagram {
  background: linear-gradient(135deg, #833AB4, #FD1D1D, #FCAF45);
}
.iubello-social-instagram:hover {
  opacity: 0.9;
}

.iubello-social-twitter {
  background-color: #1a1a1a;
}
.iubello-social-twitter:hover {
  background-color: #333;
}

.iubello-social-linkedin {
  background-color: #0077B5;
}
.iubello-social-linkedin:hover {
  background-color: #006399;
}

/* ─── Accessibility panel ─── */
.iubello-widget-a11y-wrap {
  position: relative;
}

.iubello-a11y-panel {
  position: absolute;
  bottom: 5rem;
  right: 0;
  width: calc(100vw - 2rem);
  max-width: calc(100vw - 2rem);
  background: var(--iubello-blanco);
  color: var(--iubello-negro);
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  border: 1px solid rgba(0,0,0,.1);
  overflow: hidden;
  animation: iubello-panel-in 0.2s ease;
}

@media (min-width: 640px) {
  .iubello-a11y-panel {
    width: 20rem;
    max-width: calc(100vw - 2.5rem);
    bottom: 6rem;
  }
}

.iubello-a11y-panel.iubello-hidden {
  display: none;
}

@keyframes iubello-panel-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Panel header ─── */
.iubello-a11y-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid rgba(0,0,0,.1);
  background: rgba(0,0,0,.03);
}

.iubello-a11y-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--iubello-negro);
}

.iubello-a11y-reset {
  background: none;
  border: none;
  color: var(--iubello-rojo);
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s;
  padding: 0;
}

.iubello-a11y-reset:hover {
  color: #dc2626;
}

/* ─── Panel body ─── */
.iubello-a11y-body {
  padding: 1rem;
  max-height: 60vh;
  overflow-y: auto;
}

/* ─── Font size section ─── */
.iubello-a11y-fontsize {
  margin-bottom: 0;
}

.iubello-a11y-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(0,0,0,.55);
  margin-bottom: 0.5rem;
}

.iubello-a11y-fontsize-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0,0,0,.03);
  padding: 0.25rem;
  border-radius: 0.5rem;
}

.iubello-fontsize-btn {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
  color: var(--iubello-negro);
  font-weight: 400;
}

.iubello-fontsize-btn:first-child,
.iubello-fontsize-btn:last-child {
  font-weight: 700;
}

.iubello-fontsize-btn:hover:not(:disabled) {
  background: var(--iubello-blanco);
  box-shadow: var(--iubello-shadow-sm);
}

.iubello-fontsize-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── Divider ─── */
.iubello-a11y-divider {
  border: none;
  border-top: 1px solid rgba(0,0,0,.1);
  margin: 1rem 0;
}

/* ─── Toggle options ─── */
.iubello-a11y-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.iubello-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(0,0,0,.1);
  background: var(--iubello-blanco);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  text-align: left;
  color: var(--iubello-negro);
}

.iubello-toggle-btn:hover {
  background: rgba(0,0,0,.03);
}

.iubello-toggle-btn:focus-visible {
  outline: 2px solid var(--iubello-azul);
  outline-offset: 2px;
}

.iubello-toggle-icon {
  display: flex;
  color: var(--iubello-azul);
}

.iubello-toggle-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.iubello-toggle-label {
  font-size: 0.875rem;
  font-weight: 500;
  flex: 1;
}

.iubello-toggle-check {
  display: none;
  color: var(--iubello-blanco);
}

.iubello-toggle-check svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Active toggle state */
.iubello-toggle-active {
  background-color: var(--iubello-azul);
  color: var(--iubello-blanco);
  border-color: var(--iubello-azul);
}

.iubello-toggle-active:hover {
  background-color: var(--iubello-azul-hover);
}

.iubello-toggle-active .iubello-toggle-icon {
  color: var(--iubello-blanco);
}

.iubello-toggle-active .iubello-toggle-check {
  display: flex;
}

/* ─── Panel footer ─── */
.iubello-a11y-footer {
  text-align: center;
  font-size: 0.75rem;
  color: rgba(0,0,0,.3);
  padding-top: 0.75rem;
}

/* ─── Hidden utility ─── */
.iubello-hidden {
  display: none !important;
}

/* ═══════════════════════════════════════════════════
   Accessibility Mode Styles
   ═══════════════════════════════════════════════════ */

/* ─── High Contrast Mode ─── */
body.high-contrast {
  --background: #000000;
  --foreground: #FFFF00;
  background-color: #000000 !important;
  color: #FFFF00 !important;
}

body.high-contrast a {
  color: #00FFFF !important;
}

body.high-contrast button,
body.high-contrast input,
body.high-contrast select,
body.high-contrast textarea {
  border-color: #FFFF00 !important;
  color: #FFFF00 !important;
  background-color: #000000 !important;
}

body.high-contrast img {
  filter: contrast(1.2) brightness(0.9);
}

/* Exclude the widget itself from high contrast */
body.high-contrast .iubello-widget-container,
body.high-contrast .iubello-widget-container * {
  color: revert;
  background-color: revert;
  border-color: revert;
  filter: none;
}

body.high-contrast .iubello-a11y-panel {
  background: var(--iubello-blanco) !important;
  color: var(--iubello-negro) !important;
}

body.high-contrast .iubello-a11y-panel * {
  color: inherit;
}

body.high-contrast .iubello-a11y-header h3 {
  color: var(--iubello-negro) !important;
}

body.high-contrast .iubello-toggle-btn:not(.iubello-toggle-active) {
  background: var(--iubello-blanco) !important;
  color: var(--iubello-negro) !important;
}

body.high-contrast .iubello-toggle-active {
  background-color: var(--iubello-azul) !important;
  color: var(--iubello-blanco) !important;
}

/* ─── Highlight Links Mode ─── */
body.highlight-links a {
  background-color: #FFFF00 !important;
  color: #000000 !important;
  text-decoration: underline !important;
  padding: 1px 3px;
  border-radius: 2px;
}

/* Exclude widget links */
body.highlight-links .iubello-widget-container a {
  background-color: revert !important;
  color: revert !important;
  text-decoration: none !important;
  padding: revert;
}

body.highlight-links .iubello-social-btn {
  color: var(--iubello-blanco) !important;
  background-color: revert !important;
}

/* ─── Stop Animations Mode ─── */
body.stop-animations *,
body.stop-animations *::before,
body.stop-animations *::after {
  animation: none !important;
  scroll-behavior: auto !important;
}

body.stop-animations [data-preserve-transition="true"],
body.stop-animations [data-preserve-transition="true"] * {
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
}

body.stop-animations *:not([data-preserve-transition="true"]) {
  transition: none !important;
}

/* ─── Epilepsy Safe Mode ─── */
body.epilepsy-mode img,
body.epilepsy-mode svg:not(.iubello-widget-container svg),
body.epilepsy-mode video,
body.epilepsy-mode canvas {
  filter: saturate(50%) brightness(90%) !important;
}

body.epilepsy-mode *,
body.epilepsy-mode *::before,
body.epilepsy-mode *::after {
  animation: none !important;
  scroll-behavior: auto !important;
}

/* Exclude the widget from epilepsy mode filters */
body.epilepsy-mode .iubello-widget-container,
body.epilepsy-mode .iubello-widget-container *,
body.epilepsy-mode .iubello-widget-container img,
body.epilepsy-mode .iubello-widget-container svg {
  filter: none !important;
}

body.epilepsy-mode .iubello-widget-container [data-preserve-transition="true"],
body.epilepsy-mode .iubello-widget-container [data-preserve-transition="true"] * {
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
}

/* ═══════════════════════════════════════════════════
   Mobile adjustments
   ═══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .iubello-widget-container {
    right: 0.75rem;
    bottom: 0.75rem;
    gap: 0.5rem;
  }

  .iubello-a11y-panel {
    width: calc(100vw - 1.5rem);
    max-width: calc(100vw - 1.5rem);
  }

  .iubello-contact-dropdown {
    right: 3.75rem;
    gap: 0.375rem;
    padding: 0.375rem;
  }

  .iubello-social-btn {
    width: 2.5rem;
    height: 2.5rem;
  }

  .iubello-social-btn svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}