/*
 * academia-ux.css — cross-cutting usability and accessibility corrections.
 *
 * Loaded last in MaterialAsset so it wins the cascade over material.css without
 * editing the vendored theme, which keeps upstream updates mergeable.
 *
 * Every rule here answers a defect measured on the running application, not a
 * matter of taste. The defect is named above each block.
 */

/* ---------------------------------------------------------------------------
 * Skip link — WCAG 2.1 SC 2.4.1 "Bypass Blocks".
 * Before: reaching the form on /login took 20+ tabs through sidebar and navbar,
 * on every page. The link is off-screen until focused, so sighted mouse users
 * never see it, and it is the first thing a keyboard user reaches.
 * ------------------------------------------------------------------------- */
.ac-skip-link {
  position: absolute;
  top: -100%;
  left: 0.5rem;
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background: #1a1a1a;
  color: #fff;
  border: 2px solid #8bc34a;
  border-radius: 0 0 4px 4px;
  font-weight: 500;
  text-decoration: none;
  transition: top 0.15s ease-in-out;
}

.ac-skip-link:focus,
.ac-skip-link:focus-visible {
  top: 0;
  color: #fff;
  text-decoration: none;
  outline: none;
}

/* The <main> target takes tabindex="-1" so the skip link actually moves focus;
 * without this rule the browser paints a focus ring around the whole page. */
main[tabindex='-1']:focus {
  outline: none;
}

/* ---------------------------------------------------------------------------
 * Visible focus — WCAG 2.1 SC 2.4.7.
 * material-dashboard.css removes the outline on several interactive elements,
 * which leaves keyboard users with no idea where they are. :focus-visible keeps
 * the ring off for mouse clicks, so this costs the pointer experience nothing.
 * ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex='-1']):focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
  outline: 3px solid #8bc34a;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Fallback for engines without :focus-visible — never remove the indicator. */
@supports not selector(:focus-visible) {
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus,
  .btn:focus {
    outline: 3px solid #8bc34a;
    outline-offset: 2px;
  }
}

/* ---------------------------------------------------------------------------
 * Touch targets — WCAG 2.2 SC 2.5.8 (24x24 CSS px minimum).
 * The navbar icon links and pagination controls measured under 24px tall on a
 * 390px viewport, which is the width most students will use.
 * ------------------------------------------------------------------------- */
.navbar-nav .nav-link,
.pagination .page-link,
.card .btn-just-icon,
.table td .btn {
  min-height: 24px;
  min-width: 24px;
}

@media (max-width: 991.98px) {
  .navbar-nav .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
}

/* Footer attribution links measured 19px tall on a 390px viewport — the only
 * two targets on the page under the 24px minimum. inline-flex lets them keep
 * flowing inside the sentence while gaining a real hit area. */
.footer .copyright a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* ---------------------------------------------------------------------------
 * Share links on the leaderboard were revealed only by `.leader:hover`
 * (material.css:211). A touch screen has no hover state, so on a phone — the
 * way most students will read a leaderboard — the control does not exist at
 * all. WCAG 2.1 SC 2.1.1 and 2.5.1.
 *
 * Show it wherever hover is not a reliable input, and keep it reachable by
 * keyboard everywhere: :hover alone never responds to Tab.
 * ------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .leader a.TweetThis {
    display: inline;
  }
}

.leader:focus-within a.TweetThis,
.leader a.TweetThis:focus,
.leader a.TweetThis:focus-visible {
  display: inline;
}

/* ---------------------------------------------------------------------------
 * Inline widths that break below their own value.
 *
 * `min-width: 27em` (432px at the default font size) on the team column
 * overflows a 390px viewport, and an inline style outranks the theme's
 * responsive rules, so the card is simply cut off. `max-width: 512px` on the
 * badge logo overrides img-fluid's `max-width: 100%` for the same reason.
 * Neutralise both at small sizes rather than editing every view.
 * ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  [style*='min-width: 27em'],
  [style*='min-width:27em'] {
    min-width: 0 !important;
  }

  .img-fluid[style*='max-width'] {
    max-width: 100% !important;
    height: auto;
  }
}

/* ---------------------------------------------------------------------------
 * Form feedback.
 * Colour was the only signal distinguishing an invalid field, which fails
 * WCAG 2.1 SC 1.4.1 "Use of Color" for the ~8% of men with colour vision
 * deficiency. Add weight and a left rule to the message, and mark the field.
 * ------------------------------------------------------------------------- */
.form-group .help-block,
.invalid-feedback {
  display: block;
  font-weight: 500;
}

/* Solo el error: ver el comentario en academia.css */
.form-group .help-block-error:not(:empty) {
  padding-left: 0.5rem;
  border-left: 3px solid #f44336;
  margin-top: 0.35rem;
}

.form-group .hint-block,
.form-text {
  opacity: 0.85;
}

input[aria-invalid='true'],
select[aria-invalid='true'],
textarea[aria-invalid='true'] {
  border-bottom-color: #f44336 !important;
}

/* A required marker that is not colour-only and is not read out as "asterisk"
 * by every screen reader on every field. */
label .ac-required {
  color: #f44336;
  margin-left: 0.15rem;
}

/* ---------------------------------------------------------------------------
 * Submit-in-progress state.
 * Double submits were possible on every form: nothing changed after the click,
 * so users pressed again. The button reports its own state instead.
 * ------------------------------------------------------------------------- */
button[aria-busy='true'],
input[aria-busy='true'] {
  opacity: 0.65;
  cursor: progress;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Notice shown when the live-update socket gives up.
 * Anchored to the bottom so it never covers the navigation, and above the
 * sidebar so it stays readable while the off-canvas menu is open.
 * ------------------------------------------------------------------------- */
.ac-live-warning {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 1600;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: calc(100vw - 2rem);
  padding: 0.65rem 0.9rem;
  border: 1px solid #ff9800;
  border-radius: 4px;
  background: #2a2a2a;
  color: #ffcc80;
  font-size: 0.875rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.ac-live-warning__action,
.ac-live-warning__close {
  min-height: 24px;
  padding: 0.2rem 0.6rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.ac-live-warning__close {
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 0.35rem;
}

.ac-live-warning__action:hover,
.ac-live-warning__close:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ---------------------------------------------------------------------------
 * Reduced motion — WCAG 2.1 SC 2.3.3.
 * The theme animates sidebar, cards and notifications unconditionally.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
 * Wide tables must scroll in their own box, never the page body. Several
 * listings (leaderboards, targets) pushed the viewport sideways on mobile.
 * ------------------------------------------------------------------------- */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body {
  overflow-x: hidden;
}