/* ═══════════════════════════════════════════════════════════════════════════
   Sailing Manager — Design Tokens & Base Components
   Loaded in ALL contexts (admin, frontend, portal).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand (overridden by Fase 10 branding if club customises) ───────── */
  --sm-brand-50:   #E1F5EE;
  --sm-brand-100:  #9FE1CB;
  --sm-brand-200:  #5DCAA5;
  --sm-brand-400:  #1D9E75;
  --sm-brand-500:   #1a2d42;
  --sm-brand-700:   #085041;
  --sm-brand-900:   #04342C;
  --sm-brand-navy:  #1a2d42;
  --sm-brand-light: #223b5c;
  --sm-navy:        #1a2d42;

  /* ── Status palette (fixed, not customisable) ───────────────────────── */
  --sm-green:        #3B6D11;
  --sm-green-bg:     #EAF3DE;
  --sm-green-border: #C0DD97;

  --sm-blue:         #185FA5;
  --sm-blue-bg:      #E6F1FB;
  --sm-blue-border:  #B5D4F4;

  --sm-amber:        #854F0B;
  --sm-amber-bg:     #FAEEDA;
  --sm-amber-border: #FAC775;

  --sm-red:          #A32D2D;
  --sm-red-bg:       #FCEBEB;
  --sm-red-border:   #F09595;

  --sm-purple:       #5B21B6;
  --sm-purple-bg:    #EDE9FE;
  --sm-purple-border:#C4B5FD;

  /* ── Neutrals ───────────────────────────────────────────────────────── */
  --sm-bg:           #ffffff;
  --sm-bg-soft:      #fafafa;
  --sm-border:       #ebebeb;
  --sm-border-soft:  #f4f4f5;
  --sm-text:         #1a2d42;
  --sm-text-muted:   #71717a;
  --sm-text-subtle:  #a1a1aa;

  /* ── Radii ──────────────────────────────────────────────────────────── */
  --sm-radius-sm:  6px;
  --sm-radius-md:  8px;
  --sm-radius-lg:  12px;

  /* ── Spacing ────────────────────────────────────────────────────────── */
  --sm-space-xs:  4px;
  --sm-space-sm:  8px;
  --sm-space-md:  12px;
  --sm-space-lg:  16px;
  --sm-space-xl:  24px;

  /* ── Typography ─────────────────────────────────────────────────────── */
  --sm-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sm-font-xs:   10px;
  --sm-font-sm:   11px;
  --sm-font-base: 12px;
  --sm-font-md:   13px;
  --sm-font-lg:   15px;
  --sm-font-xl:   18px;

  /* ── Transitions ────────────────────────────────────────────────────── */
  --sm-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --sm-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ═══════════════════════════════════════════════════════════════════════════
   BADGE
   ═══════════════════════════════════════════════════════════════════════════ */

.sm-badge {
  display:        inline-flex;
  align-items:    center;
  padding:        2px 8px;
  font-family:    var(--sm-font-family);
  font-size:      var(--sm-font-sm);
  font-weight:    600;
  line-height:    1.6;
  border-radius:  99px;
  white-space:    nowrap;
  border:         1px solid transparent;
}

.sm-badge--green {
  color:            var(--sm-green);
  background:       var(--sm-green-bg);
  border-color:     var(--sm-green-border);
}
.sm-badge--blue {
  color:            var(--sm-blue);
  background:       var(--sm-blue-bg);
  border-color:     var(--sm-blue-border);
}
.sm-badge--amber {
  color:            var(--sm-amber);
  background:       var(--sm-amber-bg);
  border-color:     var(--sm-amber-border);
}
.sm-badge--red {
  color:            var(--sm-red);
  background:       var(--sm-red-bg);
  border-color:     var(--sm-red-border);
}
.sm-badge--gray {
  color:            var(--sm-text-muted);
  background:       var(--sm-border-soft);
  border-color:     var(--sm-border);
}


/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.sm-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  padding:         8px 16px;
  font-family:     var(--sm-font-family);
  font-size:       var(--sm-font-md);
  font-weight:     600;
  line-height:     1.4;
  border-radius:   var(--sm-radius-md);
  border:          1px solid transparent;
  cursor:          pointer;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background .15s var(--sm-ease),
                   border-color .15s var(--sm-ease),
                   color .15s var(--sm-ease),
                   box-shadow .15s var(--sm-ease);
}
.sm-btn:focus-visible {
  outline:        2px solid var(--sm-brand-500);
  outline-offset: 2px;
}
.sm-btn:disabled,
.sm-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor:  not-allowed;
}

.sm-btn--primary {
  background:   var(--sm-brand-500);
  color:        #fff;
  border-color: var(--sm-brand-500);
}
.sm-btn--primary:hover:not(:disabled) {
  background:   var(--sm-brand-navy);
  border-color: var(--sm-brand-navy);
}

.sm-btn--outline {
  background:   transparent;
  color:        var(--sm-text);
  border-color: var(--sm-border);
}
.sm-btn--outline:hover:not(:disabled) {
  background:   var(--sm-bg-soft);
  border-color: var(--sm-text-subtle);
}

.sm-btn--danger-outline {
  background:   transparent;
  color:        var(--sm-red);
  border-color: var(--sm-red-border);
}
.sm-btn--danger-outline:hover:not(:disabled) {
  background:   var(--sm-red-bg);
  border-color: var(--sm-red);
}

.sm-btn--green {
  background:   var(--sm-green);
  color:        #fff;
  border-color: var(--sm-green);
}
.sm-btn--green:hover:not(:disabled) {
  background:   #2F5A0D;
  border-color: #2F5A0D;
}

.sm-btn--block {
  display:    block;
  width:      100%;
  text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.sm-card {
  background:    var(--sm-bg);
  border:        1px solid var(--sm-border);
  border-radius: var(--sm-radius-lg);
  padding:       var(--sm-space-lg);
}
.sm-card--soft {
  background: var(--sm-bg-soft);
  border:     none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════════════════════ */

.sm-tabs {
  display:       flex;
  gap:           2px;
  border-bottom: 1px solid var(--sm-border);
  padding:       0;
  margin:        0;
  list-style:    none;
}

.sm-tabs__item {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       8px 14px;
  font-family:   var(--sm-font-family);
  font-size:     var(--sm-font-md);
  font-weight:   500;
  color:         var(--sm-text-muted);
  background:    transparent;
  border:        none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor:        pointer;
  transition:    color .15s var(--sm-ease),
                 border-color .15s var(--sm-ease);
}
.sm-tabs__item:hover {
  color: var(--sm-text);
}
.sm-tabs__item:focus-visible {
  outline:        2px solid var(--sm-brand-500);
  outline-offset: -2px;
}
.sm-tabs__item--active {
  color:        var(--sm-brand-500);
  border-color: var(--sm-brand-500);
  font-weight:  600;
}

.sm-tabs__count {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  min-width:     20px;
  height:        20px;
  padding:       0 6px;
  font-size:     var(--sm-font-xs);
  font-weight:   700;
  border-radius: 99px;
  background:    var(--sm-border);
  color:         var(--sm-text-muted);
}
.sm-tabs__item--active .sm-tabs__count {
  background: var(--sm-brand-500);
  color:      #fff;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ROW (list items)
   ═══════════════════════════════════════════════════════════════════════════ */

.sm-row {
  display:     flex;
  align-items: center;
  gap:         var(--sm-space-md);
  padding:     var(--sm-space-md) var(--sm-space-lg);
  border-bottom: 1px solid var(--sm-border-soft);
  cursor:      pointer;
  transition:  background .1s var(--sm-ease);
}
.sm-row:hover {
  background: var(--sm-bg-soft);
}
.sm-row:focus-visible {
  outline:        2px solid var(--sm-brand-500);
  outline-offset: -2px;
}
.sm-row--selected {
  background: #e8edf2;
}
.sm-row:last-child {
  border-bottom: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS (Fase 8 foundations)
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes sm-sonar {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0; }
}

@keyframes sm-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes sm-fadeSlideUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sm-flipScore {
  0%   { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

@keyframes sm-checkCircle {
  0%   { stroke-dashoffset: 166; }
  100% { stroke-dashoffset: 0; }
}

@keyframes sm-checkMark {
  0%   { stroke-dashoffset: 48; }
  100% { stroke-dashoffset: 0; }
}

@keyframes sm-barGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes sm-podiumRise {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* Pop-in desde top: ligera caída + overshoot, da el feel "boing" */
@keyframes sm-toastIn {
  0%   { transform: translateY(-32px) scale(0.78); opacity: 0; }
  55%  { transform: translateY(6px)   scale(1.05); opacity: 1; }
  80%  { transform: translateY(-2px)  scale(0.99); opacity: 1; }
  100% { transform: translateY(0)     scale(1);    opacity: 1; }
}

@keyframes sm-toastOut {
  0%   { transform: translateY(0)     scale(1);    opacity: 1; }
  35%  { transform: translateY(3px)   scale(1.04); opacity: 1; }
  100% { transform: translateY(-28px) scale(0.78); opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SKELETON
   ═══════════════════════════════════════════════════════════════════════════ */

.sm-skeleton {
  background:      linear-gradient(90deg, var(--sm-border-soft) 25%, var(--sm-border) 50%, var(--sm-border-soft) 75%);
  background-size: 200% 100%;
  animation:       sm-skeleton 1.2s ease-in-out infinite;
  border-radius:   var(--sm-radius-sm);
}


/* ═══════════════════════════════════════════════════════════════════════════
   TOAST (notification system)
   ═══════════════════════════════════════════════════════════════════════════ */

.sm-toast-container {
  position:        fixed;
  top:             var(--sm-space-xl);
  left:            50%;
  transform:       translateX(-50%);
  /* > .sm-list-page (z=100000) y > admin bar de WP. Mantener al menos
     1e6 para quedar por encima de cualquier overlay del shell v3. */
  z-index:         1000000;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--sm-space-sm);
  pointer-events:  none;
  max-width:       calc(100vw - var(--sm-space-xl) * 2);
}

/* Por defecto los .sm-toast emitidos inline (echo PHP) quedan ocultos
   hasta que admin.js los hoiste al .sm-toast-container. Evita FOUC. */
.sm-toast { display: none; }

.sm-toast-container .sm-toast {
  display:        flex;
  align-items:    center;
  gap:            var(--sm-space-md);
  min-width:      280px;
  max-width:      min(480px, 92vw);
  padding:        var(--sm-space-md) var(--sm-space-lg);
  background:     var(--sm-bg);
  border:         1px solid var(--sm-border);
  border-radius:  var(--sm-radius-lg);
  box-shadow:     0 8px 28px rgba(0,0,0,0.18);
  font-family:    var(--sm-font-family);
  font-size:      var(--sm-font-md);
  color:          var(--sm-text);
  pointer-events: auto;
  animation:      sm-toastIn .42s cubic-bezier(.34, 1.56, .64, 1) both;
  position:       relative;
  overflow:       hidden;
  transform-origin: top center;
}
.sm-toast-container .sm-toast--exit {
  animation: sm-toastOut .26s cubic-bezier(.55, 0, .68, .53) both;
}

.sm-toast__icon {
  flex-shrink: 0;
  width:       20px;
  height:      20px;
}

.sm-toast--success { border-left: 3px solid var(--sm-green); }
.sm-toast--error   { border-left: 3px solid var(--sm-red);   }
.sm-toast--info    { border-left: 3px solid var(--sm-blue);  }

.sm-toast--success .sm-toast__icon { color: var(--sm-green); }
.sm-toast--error   .sm-toast__icon { color: var(--sm-red);   }
.sm-toast--info    .sm-toast__icon { color: var(--sm-blue);  }

.sm-toast__progress {
  position:   absolute;
  bottom:     0;
  left:       0;
  height:     2px;
  background: var(--sm-text-subtle);
  transition: width linear;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LIVE BADGE (sonar)
   ═══════════════════════════════════════════════════════════════════════════ */

.sm-live {
  display:      inline-flex;
  align-items:  center;
  gap:          6px;
  font-family:  var(--sm-font-family);
  font-size:    var(--sm-font-sm);
  font-weight:  700;
  color:        var(--sm-red);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sm-live__dot {
  position: relative;
  width:    8px;
  height:   8px;
}
.sm-live__dot::before,
.sm-live__dot::after,
.sm-live__dot span {
  position:      absolute;
  inset:         0;
  border-radius: 50%;
}
.sm-live__dot span {
  background: var(--sm-red);
}
.sm-live__dot::before,
.sm-live__dot::after {
  content:    '';
  background: var(--sm-red);
  animation:  sm-sonar 1.8s var(--sm-ease) infinite;
}
.sm-live__dot::after {
  animation-delay: 0.6s;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════ */

.screen-reader-text {
  position:    absolute !important;
  width:       1px !important;
  height:      1px !important;
  padding:     0 !important;
  margin:      -1px !important;
  overflow:    hidden !important;
  clip:        rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border:      0 !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
}