/* ============================================================
   TEMA HOSPITAL GAMES — capa visual sobre Bootstrap 5
   No modifica la lógica de calibración.
   Herramienta original: DualShock Calibration GUI (MIT, the_al)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;1,800&family=Inter:wght@300;400;500;600&display=swap');

:root,
[data-bs-theme="dark"] {
  --hg-bg:        #08090C;
  --hg-panel:     #12141A;
  --hg-panel-2:   #171A21;
  --hg-line:      #23262F;
  --hg-line-2:    #33373F;
  --hg-txt:       #F1F3F6;
  --hg-mute:      #8E96A3;
  --hg-red:       #E30613;
  --hg-red-2:     #FF2A38;
  --hg-green:     #2FD693;

  --hg-disp: 'Barlow Condensed', system-ui, sans-serif;
  --hg-body: 'Inter', system-ui, sans-serif;

  /* Bootstrap: sustituye el azul por el rojo de la marca */
  --bs-primary:        #E30613;
  --bs-primary-rgb:    227, 6, 19;
  --bs-link-color:     #FF2A38;
  --bs-link-hover-color: #FF6b74;
  --bs-body-bg:        #08090C;
  --bs-body-color:     #F1F3F6;
  --bs-border-color:   #23262F;
  --bs-tertiary-bg:    #12141A;
  --bs-secondary-bg:   #171A21;
  --bs-emphasis-color: #FFFFFF;
}

body {
  background: var(--hg-bg);
  color: var(--hg-txt);
  font-family: var(--hg-body);
  font-weight: 300;
  padding-bottom: 96px;
  background-image:
    radial-gradient(60ch 40ch at 82% -5%, rgba(227, 6, 19, .16), transparent 65%),
    radial-gradient(50ch 35ch at 8% 0%, rgba(227, 6, 19, .09), transparent 65%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

h1, h2, h3, h4, h5, .card-header, .modal-title, .accordion-button {
  font-family: var(--hg-disp);
  letter-spacing: .03em;
}
h1, h2, h3 { font-weight: 700; }

/* ---------------- NAVBAR ---------------- */
.navbar {
  background: rgba(11, 12, 16, .95) !important;
  border-bottom: 1px solid var(--hg-line);
  backdrop-filter: blur(10px);
}
.hg-brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.hg-brand img { height: 42px; width: auto; }
.hg-brand .t { line-height: 1.05; }
.hg-brand .t b {
  display: block; font-family: var(--hg-disp); font-weight: 700;
  font-size: 1.15rem; letter-spacing: .04em; color: #fff;
}
.hg-brand .t span {
  display: block; font-size: .62rem; letter-spacing: .2em; color: var(--hg-red-2);
  font-weight: 500; margin-top: .15rem;
}
.navbar .nav-link { color: #C9CFD8 !important; font-size: .9rem; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: #fff !important; }
.navbar-toggler {
  border-color: var(--hg-line-2);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FF2A38' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* franja roja bajo la barra */
.hg-stripe { height: 3px; background: linear-gradient(90deg, var(--hg-red), transparent 70%); }

/* ---------------- ENCABEZADO ---------------- */
.hg-hero {
  border-bottom: 1px solid var(--hg-line);
  padding: 2.2rem 0 1.8rem;
  margin-bottom: 1.5rem;
}
.hg-hero .k {
  font-family: var(--hg-disp); font-weight: 600; letter-spacing: .2em;
  color: var(--hg-red-2); font-size: .9rem; margin: 0;
}
.hg-hero h1 {
  font-family: var(--hg-disp); font-weight: 800; font-style: italic;
  font-size: clamp(1.9rem, 5vw, 3rem); margin: .2rem 0 .5rem; letter-spacing: .01em;
}
.hg-hero p { color: var(--hg-mute); margin: 0; max-width: 62ch; font-size: .95rem; }
.hg-hero .back {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem;
  border: 1px solid var(--hg-line-2); border-radius: 6px; padding: .5rem 1rem;
  font-size: .85rem; color: var(--hg-txt); text-decoration: none; transition: .2s;
}
.hg-hero .back:hover { border-color: var(--hg-red); color: #fff; }

/* ---------------- TARJETAS ---------------- */
.card {
  background: var(--hg-panel);
  border: 1px solid var(--hg-line);
  border-radius: 10px;
}
.card-header {
  background: var(--hg-panel-2);
  border-bottom: 1px solid var(--hg-line);
  font-weight: 700; letter-spacing: .05em;
}
#left-stick-card:hover, #right-stick-card:hover { border-color: var(--hg-line-2); }
.stick-card-active {
  border: 1px solid var(--hg-red) !important;
  box-shadow: 0 0 18px rgba(227, 6, 19, .28) !important;
}
.stick-card-active .card-header {
  background-color: var(--hg-red) !important;
  color: #fff !important;
}

/* ---------------- BOTONES ---------------- */
.btn { border-radius: 6px; font-weight: 500; }
.btn-primary {
  background: var(--hg-red); border-color: var(--hg-red);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--hg-red-2); border-color: var(--hg-red-2);
  box-shadow: 0 0 18px rgba(227, 6, 19, .4);
}
.btn-outline-primary { color: var(--hg-red-2); border-color: var(--hg-red); }
.btn-outline-primary:hover {
  background: var(--hg-red); border-color: var(--hg-red); color: #fff;
}
.btn-outline-secondary { color: #C9CFD8; border-color: var(--hg-line-2); }
.btn-outline-secondary:hover { background: var(--hg-panel-2); border-color: var(--hg-mute); color: #fff; }
.btn-success { background: #1FAF54; border-color: #1FAF54; }

/* botón grande de conectar */
#btnconnect {
  font-family: var(--hg-disp); font-weight: 700; font-size: 1.25rem;
  letter-spacing: .08em; padding: .8rem 2rem;
}

/* ---------------- PESTAÑAS ---------------- */
.nav-tabs { border-bottom: 1px solid var(--hg-line); }
.nav-tabs .nav-link {
  color: var(--hg-mute); border: 1px solid transparent; border-radius: 8px 8px 0 0;
  font-family: var(--hg-disp); font-weight: 700; letter-spacing: .06em; font-size: 1.05rem;
}
.nav-tabs .nav-link:hover { color: #fff; border-color: transparent transparent var(--hg-line-2); }
.nav-tabs .nav-link.active {
  color: #fff; background: var(--hg-panel);
  border-color: var(--hg-line) var(--hg-line) var(--hg-panel);
  box-shadow: inset 0 3px 0 var(--hg-red);
}

/* ---------------- ACORDEÓN ---------------- */
.accordion-item { background: var(--hg-panel); border-color: var(--hg-line); }
.accordion-button {
  background: var(--hg-panel-2); color: var(--hg-txt);
  font-weight: 700; letter-spacing: .04em;
}
.accordion-button:not(.collapsed) {
  background: rgba(227, 6, 19, .14); color: #fff;
  box-shadow: inset 0 -1px 0 var(--hg-line);
}
.accordion-button::after {
  filter: invert(38%) sepia(85%) saturate(4000%) hue-rotate(345deg) brightness(95%);
}
#quickTestAccordion .accordion-collapse .accordion-body {
  background-color: rgba(227, 6, 19, .05);
}

/* ---------------- MODALES ---------------- */
.modal-content {
  background: var(--hg-panel); border: 1px solid var(--hg-line-2); border-radius: 12px;
}
.modal-header, .modal-footer { border-color: var(--hg-line); }
.modal-header { background: var(--hg-panel-2); }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* ---------------- FORMULARIOS ---------------- */
.form-control, .form-select {
  background: var(--hg-panel-2); border-color: var(--hg-line-2); color: var(--hg-txt);
}
.form-control:focus, .form-select:focus {
  background: var(--hg-panel-2); border-color: var(--hg-red); color: var(--hg-txt);
  box-shadow: 0 0 0 .2rem rgba(227, 6, 19, .2);
}
.form-range::-webkit-slider-thumb { background: var(--hg-red); }
.form-range::-moz-range-thumb { background: var(--hg-red); }

/* ---------------- VARIOS ---------------- */
.dropdown-menu {
  background: var(--hg-panel); border: 1px solid var(--hg-line-2);
}
.dropdown-item { color: #C9CFD8; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--hg-panel-2); color: #fff; }
.progress { background: var(--hg-panel-2); }
.progress-bar { background: var(--hg-red); }
.alert-warning {
  background: rgba(227, 6, 19, .1); border-color: rgba(227, 6, 19, .4); color: #FFC9CC;
}
.alert-info { background: rgba(47, 214, 147, .08); border-color: rgba(47, 214, 147, .35); color: #B6F2D8; }
.badge.bg-primary { background: var(--hg-red) !important; }
dl.row dd { font-family: 'Barlow Condensed', monospace; color: #fff; font-size: 1.05rem; }
dl.row dt { color: var(--hg-mute); font-weight: 400; }
.blink-text { color: var(--hg-red-2); }
hr { border-color: var(--hg-line); }
::selection { background: var(--hg-red); color: #fff; }

/* dibujos de los sticks: que respiren sobre fondo oscuro */
canvas { border-radius: 8px; }

/* ---------------- PIE ---------------- */
footer.fixed-bottom {
  background: rgba(11, 12, 16, .96) !important;
  border-top: 1px solid var(--hg-line) !important;
  backdrop-filter: blur(10px);
}
footer .hg-foot-brand {
  font-family: var(--hg-disp); font-weight: 700; letter-spacing: .05em; color: #fff;
}
footer .hg-wa {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #1FAF54; color: #fff; border-radius: 30px;
  padding: .45rem 1rem; font-size: .85rem; font-weight: 500; text-decoration: none;
}
footer .hg-wa:hover { background: #25c962; color: #fff; }
footer, footer p, footer a.link-body-emphasis { color: var(--hg-mute) !important; }
footer a { color: var(--hg-red-2); }

@media (max-width: 576px) {
  .hg-brand img { height: 34px; }
  .hg-brand .t b { font-size: .95rem; }
  body { padding-bottom: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------------- AVISO DE AUTOCONEXIÓN ---------------- */
.hg-auto {
  max-width: 1140px;
  margin: 0 auto 1rem;
  padding: .8rem 1.2rem;
  border-radius: 8px;
  font-size: .9rem;
  border: 1px solid var(--hg-line-2);
  background: var(--hg-panel);
  color: var(--hg-txt);
}
.hg-auto.ok      { border-color: rgba(47,214,147,.5);  background: rgba(47,214,147,.08);  color: #B6F2D8; }
.hg-auto.espera  { border-color: rgba(227,6,19,.45);   background: rgba(227,6,19,.08);    color: #FFC9CC; }