/* ============================================================================
 * buttons.css — Unified button system
 * ----------------------------------------------------------------------------
 * Loaded globally via BaseLayout.astro (after reset.css, before page styles).
 *
 * GOAL: Enforce WCAG 2.5.8 / Apple HIG touch target minimums (44×44px) on
 * EVERY interactive element across the app without requiring per-page CSS.
 *
 * The codebase has 18+ distinct .btn-* classes accumulated organically, each
 * declaring its own padding/font-size. Rather than refactoring all of them
 * (high risk of visual regression), this file applies a non-destructive
 * baseline that gives every button a guaranteed minimum hit area while letting
 * existing per-page styles override visual appearance (color, padding-x, etc).
 *
 * STRATEGY:
 *   1. Apply min-height:44px to all button-like elements as a baseline.
 *   2. Pages can OPT OUT via the .btn-compact class (e.g. icon-only toolbars
 *      where 44px would break a tight layout) — but they MUST provide an
 *      alternative hit area expansion.
 *   3. The new .btn / .btn--primary / .btn--secondary / .btn--ghost classes
 *      can be adopted gradually in new code; existing classes remain working.
 * ========================================================================== */

/* ────────────────────────────────────────────────────────────────────────────
 * 1. BASELINE — minimum touch target on ALL interactive elements
 *
 *    Selector covers:
 *      - <button>, <input type="submit|button|reset">
 *      - elements with role="button" (custom buttons)
 *      - all .btn-* classes existing in the codebase
 *
 *    Pages can opt out per-element with class="btn-compact".
 * ──────────────────────────────────────────────────────────────────────────── */
button:not(.btn-compact):not(.btn-bare):not(.lightbox-btn):not(.lb-btn):not(.fab):not(.admin-hamburger):not(.admin-drawer__close):not(.btn-responsive-hidden):not(.tecnico-card):not(.tecnico-lightbox__close),
input[type="submit"]:not(.btn-compact),
input[type="button"]:not(.btn-compact),
input[type="reset"]:not(.btn-compact),
[role="button"]:not(.btn-compact):not(.btn-bare),
.btn:not(.btn-compact),
.btn-buscar,
.btn-primary,
.btn-secondary,
.btn-login,
.btn-nuevo,
.btn-aprobar,
.btn-rechazar,
.btn-mp,
.btn-push-toggle,
.btn-tipo,
.btn-print,
.btn-ai-improve,
.btn-footer-logout,
.gw-btn,
.gw-tab,
.promo-btn,
.newsletter-btn,
.cmp-tab,
.filter-chip {
  min-height: var(--touch-target, 44px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Responsive visibility helpers
 *
 * Some buttons must remain hidden at certain viewports (e.g. the desktop
 * dropdown is invisible on mobile, the hamburger is invisible on desktop).
 * Component CSS can't override the high-specificity selectors above on its
 * own, so we provide explicit display rules here that win cleanly.
 *
 * .admin-hamburger uses the same media-query logic as AdminHeader.astro.
 * ─────────────────────────────────────────────────────────────────── */
.admin-hamburger {
  display: none;
}
@media (max-width: 819.98px) {
  .admin-hamburger {
    display: inline-flex;
  }
}
@media (min-width: 820px) {
  .admin-hamburger {
    display: none !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
 * 2. SPECIFIC FIXES for elements that need tighter overrides
 *    (these were audit findings — apply targeted padding/font bumps)
 * ──────────────────────────────────────────────────────────────────────────── */

/* Password reveal toggle — was 26×26 inside the input field */
.btn-eye {
  min-width: var(--touch-target, 44px);
  min-height: var(--touch-target, 44px);
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Garantía widget — primary CTA was 36px tall */
.gw-btn {
  padding: 10px 24px;
  font-size: 15px;
  min-height: var(--touch-target, 44px);
}

.gw-tab {
  padding: 10px 14px;
  font-size: 14px;
  min-height: var(--touch-target, 44px);
}

/* Landing promo buttons — were 34px tall */
.promo-btn {
  padding: 12px 22px;
  font-size: 14px;
  min-height: var(--touch-target, 44px);
}

/* Newsletter subscribe — was 38px */
.newsletter-btn {
  padding: 12px 22px;
  font-size: 14px;
  min-height: var(--touch-target, 44px);
}

/* Header text-links (consulta, mis-servicios) — were ~30px */
.header-staff,
.header-link {
  padding: 10px 8px;
  min-height: var(--touch-target, 44px);
  display: inline-flex;
  align-items: center;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 3. NEW UNIFIED .btn SYSTEM (opt-in, for new code)
 *
 *    Usage:
 *      <button class="btn btn--primary">Guardar</button>
 *      <button class="btn btn--secondary">Cancelar</button>
 *      <button class="btn btn--ghost">Cerrar</button>
 *      <button class="btn btn--danger">Eliminar</button>
 *      <button class="btn btn--sm">Acción menor</button>   (still ≥44px)
 *      <button class="btn btn--block">Full width</button>
 *      <button class="btn btn--icon" aria-label="Cerrar">×</button>
 * ──────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  min-height: var(--touch-target, 44px);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 8px);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
}

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

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--primary {
  background: var(--primary, #009EC2);
  color: #fff;
  border-color: var(--primary, #009EC2);
}
.btn--primary:hover:not(:disabled) {
  background: var(--primary-dark, #0087a8);
  border-color: var(--primary-dark, #0087a8);
}

.btn--secondary {
  background: var(--color-surface, #fff);
  color: var(--primary, #009EC2);
  border-color: var(--primary, #009EC2);
}
.btn--secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary, #009EC2) 8%, transparent);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text, #1a1a1a);
  border-color: transparent;
}
.btn--ghost:hover:not(:disabled) {
  background: color-mix(in srgb, currentColor 6%, transparent);
}

.btn--danger {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.btn--danger:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
}

.btn--sm {
  padding: 8px 14px;
  font-size: 13px;
  /* min-height stays at 44px — visual size shrinks via padding only */
}

.btn--block {
  width: 100%;
}

.btn--icon {
  padding: 0;
  width: var(--touch-target, 44px);
  height: var(--touch-target, 44px);
  min-width: var(--touch-target, 44px);
}

/* ────────────────────────────────────────────────────────────────────────────
 * 4. ADMIN — critical buttons that compress on mobile (audit findings)
 *
 *    These selectors are scoped enough to not collide with public pages.
 * ──────────────────────────────────────────────────────────────────────────── */

/* btn-estado: header pill in admin/[id] — was compressed to 26px below 1100px */
.btn-estado {
  min-height: var(--touch-target, 44px);
  padding: 8px 14px;
}

@media (max-width: 1100px) {
  .header-estado-area .btn-estado,
  .btn-estado {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-height: var(--touch-target, 44px) !important;
  }
}

/* btn-tipo: tipo de trabajo pill — was 26px below 900px */
@media (max-width: 900px) {
  .btn-tipo {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-height: var(--touch-target, 44px) !important;
  }
}

/* btn-print: icon-only on mobile — was 38px */
@media (max-width: 768px) {
  .btn-print {
    min-width: var(--touch-target, 44px) !important;
    min-height: var(--touch-target, 44px) !important;
  }
}

/* btn-delete-draft was 42×42 — bump to 44 */
.btn-delete-draft {
  min-width: var(--touch-target, 44px);
  min-height: var(--touch-target, 44px);
}

/* btn-nuevo on dashboard — was 38px tall */
.btn-nuevo {
  min-height: var(--touch-target, 44px);
}

/* ────────────────────────────────────────────────────────────────────────────
 * 4.5 NAV / FOOTER LINKS — bare <a> tags that need a tap area
 *
 *    These are anchors without classes that live in semantic containers
 *    (nav, footer, .faq-answer, .footer-col). Audit showed they were 16-18px
 *    tall — far below 44px. We expand the hit area without changing the
 *    visual size of the surrounding layout.
 * ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Navigation links inside <nav> */
  nav a:not([class*="logo"]):not(.skip-link) {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target, 44px);
    padding: 10px 4px;
  }

  /* Footer links — both block (full row) and inline (within paragraphs) */
  footer a:not([class*="logo"]):not(.skip-link),
  .site-footer a:not([class*="logo"]):not(.skip-link),
  .footer-col a,
  .footer-contact a,
  .contact-info a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target, 44px);
    padding: 6px 0;
  }

  /* tel: and mailto: links anywhere in the page — they're high-intent CTAs */
  a[href^="tel:"],
  a[href^="mailto:"],
  a[href*="wa.me"],
  a[href*="whatsapp.com"] {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target, 44px);
    padding: 6px 0;
  }

  /* FAQ answer links — currently inline 18px tall */
  .faq-answer a {
    display: inline-block;
    padding: 10px 2px;
    min-height: var(--touch-target, 44px);
    line-height: 24px;
  }

  /* Back link in admin login */
  .back {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target, 44px);
    padding: 10px 4px;
  }
}

/* Back-to-top circular button — circular, must enforce BOTH dimensions
   (regardless of viewport, since it's a floating icon-only button) */
.btt {
  min-width: var(--touch-target, 44px) !important;
  min-height: var(--touch-target, 44px) !important;
  width: var(--touch-target, 44px) !important;
  height: var(--touch-target, 44px) !important;
}

/* Skip-link is a11y-only; ensure it's tappable for users who keyboard-focus it */
.skip-link {
  min-height: var(--touch-target, 44px);
  display: inline-flex;
  align-items: center;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 5. ROBUSTNESS — fallback for .anim sections that depend on IntersectionObserver
 *
 *    If JS fails to fire (e.g. very slow connection, AT user), .anim elements
 *    remain visible after 1.5s instead of staying opacity:0 forever.
 * ──────────────────────────────────────────────────────────────────────────── */
.anim {
  /* Default: visible. The page's own JS will set opacity:0 then animate in. */
  /* We don't override here; just provide a CSS-only fallback timer. */
  animation: anim-fallback-visible 0.4s ease 2s forwards;
}

@keyframes anim-fallback-visible {
  to {
    opacity: 1;
    transform: none;
  }
}

/* If the user prefers reduced motion, never hide content for animation */
@media (prefers-reduced-motion: reduce) {
  .anim {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}