/* DB_WCAG_SAFE_START
   WCAG improvements WITHOUT breaking branding:
   - focus-visible
   - readable line-height
   - better text rendering
   - targeted contrast helpers (hero text)
*/

:root{
  --db-focus: #ff8c42; /* accent naranja visible sobre azul */
  --db-focus-outline: 3px solid var(--db-focus);
  --db-focus-offset: 3px;
}

/* Better readability without changing your palette */
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body{
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Accessible focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: var(--db-focus-outline);
  outline-offset: var(--db-focus-offset);
}

/* Inputs: keep your theme, just ensure clear focus */
input:focus,
select:focus,
textarea:focus{
  box-shadow: 0 0 0 3px rgba(255,140,66,.35);
}

/* Mobile readability bump (doesn't force colors) */
@media (max-width: 600px){
  body{ line-height: 1.7; }
  .hero h1, .hero-title{ font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .hero p, .hero-subtitle{ font-size: 1.05rem; }
}

/* Targeted contrast helper for hero text over gradients (common issue) */
.hero, .db-hero, .hero-wrap{
  /* no background changes; only ensure text remains readable */
}
.hero h1, .hero-title,
.hero p, .hero-subtitle,
.hero .tagline{
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* Buttons: ensure minimum hit area without changing look */
button, .btn-login, .btn-secondary, .btn-compact, .db-btn{
  min-height: 44px;
}

/* DB_WCAG_SAFE_END */

/* DB_FOCUS_ENHANCED_START */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #ff8c42 !important; /* Vibrant orange */
  outline-offset: 3px !important;
  box-shadow: 0 0 8px #ff8c42 !important;
}
/* DB_FOCUS_ENHANCED_END */

/* DB_FORM_ERRORS_CSS_START */
.form-errors{
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 107, 53, .35);
  background: rgba(255, 107, 53, .10);
  color: #1b1b1b;
}
.form-errors ul{ margin: 0; padding-left: 18px; }
.form-errors li{ margin: 4px 0; }
.form-errors:empty{ display:none; }
/* DB_FORM_ERRORS_CSS_END */

/* DB_HIDE_ORANGE_DOT_START */
/* Hide small static orange dot in login cards */
.db-login-card > div > div > div[style*="background-color: rgb(255, 107, 53)"],
.db-login-card > div > div > div[style*="background-color: #ff6b35"],
.db-login-card .orange-dot, /* if class used */
.db-login-card .static-dot {
  display: none !important;
}
/* DB_HIDE_ORANGE_DOT_END */

/* DB_TEMP_HIDE_LOGIN_DOT_START */
/* Temporary: hide small circular/orange artifacts inside login cards only */
.db-login-card .dot,
.db-login-card .bubble,
.db-login-card .particle,
.db-login-card .orb,
.db-login-card .circle,
.db-login-card .loader,
.db-login-card .spinner {
  display: none !important;
}
/* DB_TEMP_HIDE_LOGIN_DOT_END */

/* DB_HIDE_PINK_DOTS_START */
/* Oculta las bolitas rosas decorativas dentro de las tarjetas de login */
.db-login-card > div > div > div[style*="background-color: rgb(255, 107, 53)"],
.db-login-card .orange-dot,
.db-login-card .static-dot {
  display: none !important;
}
/* DB_HIDE_PINK_DOTS_END */


/* DB_LOGIN_NO_DOT_NO_MOTION_START */
/* Login: remove decorative dot + disable related motion/animations */

/* 1) Kill common dot classes (covers most cases) */
.orange-dot,
.static-dot,
.db-dot,
.db-divider-dot,
.db-login-dot,
.db-login-divider-dot {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* 2) Kill any pseudo-element dot used as decoration */
.db-login-card::before,
.db-login-card::after,
.db-login-header__brand::before,
.db-login-header__brand::after,
.db-login-grid::before,
.db-login-grid::after {
  content: none !important;
  display: none !important;
}

/* 3) Disable motion on login area (animations/transitions) */
.db-login-wrap *,
.db-login-header *,
.db-login-grid *,
.db-login-card * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* 4) Respect user preference too */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* DB_LOGIN_NO_DOT_NO_MOTION_END */


/* DB_LOGIN_REMOVE_BADGES_START */
/* Remove the decorative circle/badge inside login cards (bottom area) */

/* 1) If it is a pseudo-element */
.db-login-card::before,
.db-login-card::after {
  content: none !important;
  display: none !important;
}

/* 2) If it is a real element (common patterns) */
.db-login-card .badge,
.db-login-card .pill,
.db-login-card .dot,
.db-login-card .circle,
.db-login-card .decor,
.db-login-card [class*="dot"],
.db-login-card [class*="badge"],
.db-login-card [class*="circle"],
.db-login-card [style*="border-radius: 999px"],
.db-login-card [style*="border-radius:999px"],
.db-login-card [style*="border-radius: 50%"],
.db-login-card [style*="border-radius:50%"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* 3) Disable any motion related to that decoration */
.db-login-card * {
  animation: none !important;
  transition: none !important;
}
/* DB_LOGIN_REMOVE_BADGES_END */