/* ============================================================
   EQ v2 — vistas de aplicación (reservas + nueva reserva)
   Requiere eq-skin-v2.css (variables + hero + botones)
   ============================================================ */

.eqapp{
  max-width:1180px;
  margin:0 auto 40px;
  padding:0 18px;
  font-family:'Instrument Sans',sans-serif;
  color:var(--eq-ink,#2b2c3a);
}

/* ---------- Encabezado del bloque ---------- */
.eqapp .enc{margin-bottom:18px}
.eqapp .enc .lbl,
.eqapp .hoja .lbl,
.tarjeta .lbl{
  display:inline-block;
  font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:#fff;background:var(--eq-clay,#C25A38);
  padding:4px 11px;border-radius:999px;font-weight:700;
  font-family:'Space Grotesk',sans-serif;
}
.eqapp .enc h2,
.eqapp .hoja .enc h2{
  font-family:'Space Grotesk',sans-serif;
  color:var(--eq-navy2,#1A1A78);
  font-size:26px;margin:10px 0 0;font-weight:700;
}

/* ---------- Switch de vista ---------- */
.modo-vista{
  display:inline-flex;background:#ececf3;border-radius:12px;padding:5px;gap:4px;margin:6px 0 18px;flex-wrap:wrap;
}
.modo-vista .modo{
  padding:9px 18px;border-radius:9px;cursor:pointer;font-weight:600;font-size:14px;color:#555;
  transition:all .15s;user-select:none;
}
.modo-vista .modo:hover{color:var(--eq-navy2,#1A1A78)}
.modo-vista .modo.on{background:#fff;color:var(--eq-navy2,#1A1A78);box-shadow:0 1px 4px rgba(0,0,0,.1)}

/* ---------- Barra de canchas / días ---------- */
.canchasbar,.diasbar{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;
}
.canchasbar .tcancha,.diasbar .dia{
  padding:9px 16px;border-radius:10px;cursor:pointer;
  background:#fff;border:1.5px solid var(--eq-line,#ececf3);
  font-weight:600;font-size:14px;color:#4a4b5a;transition:all .15s;user-select:none;
}
.canchasbar .tcancha:hover,.diasbar .dia:hover{border-color:var(--eq-orange,#E8892B);color:var(--eq-navy2,#1A1A78)}
.canchasbar .tcancha.on,.diasbar .dia.on{
  background:var(--eq-navy2,#1A1A78);color:#fff;border-color:var(--eq-navy2,#1A1A78);
  box-shadow:0 3px 10px rgba(25,26,78,.22);
}

/* 23-08-2026: la barra de dias de la vista "por dia" usa los mismos rotulos que la cabecera
   de la grilla semanal: "Lunes 17/08" … "Domingo 23/08" + los dias de la semana siguiente que
   ya se pueden reservar, marcados "prox.". */
.diasbar .dia{display:inline-flex;align-items:baseline;gap:6px;line-height:1.2}
.diasbar .dia .dfec{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;opacity:.8}
.diasbar .dia.dia-hoy{border-color:var(--eq-orange,#E8892B)}
.diasbar .dia.dia-hoy .dfec{color:var(--eq-orange,#E8892B);opacity:1}
.diasbar .dia.dia-hoy.on .dfec{color:var(--eq-yellow,#F5D63D)}
.diasbar .dia.dia-prox{border-style:dashed}
.diasbar .dia.dia-nores{opacity:.6}
.diasbar .dia.dia-pasado{opacity:.42}
.diasbar .dia.dia-nores.on,.diasbar .dia.dia-pasado.on{opacity:1}

/* ---------- Leyenda ---------- */
.leyenda{
  display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px;
  font-size:13px;color:#555;align-items:center;
}
.leyenda span{display:inline-flex;align-items:center;gap:7px}
.leyenda i{width:14px;height:14px;border-radius:4px;display:inline-block;border:1px solid rgba(0,0,0,.08)}
.leyenda .l-libre i{background:#e4f5ea;border-color:#8fd3a8}
.leyenda .l-noche i{background:#e7e6fb;border-color:#a9a4ee}
.leyenda .l-ocupado i{background:#eceef1;border-color:#c4c8cf}
.leyenda .l-mio i{background:var(--eq-yellow,#F5D63D);border-color:#d9bd1f}
.leyenda .l-proc i{background:#ffe6cc;border-color:#f0b072}

/* ---------- Navegación de semana ---------- */
.sem-nav{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:#fff;border:1px solid var(--eq-line,#ececf3);border-radius:14px;
  padding:14px 18px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.sem-nav .centro{text-align:center;flex:1}
.sem-nav h2{font-family:'Space Grotesk',sans-serif;color:var(--eq-navy2,#1A1A78);font-size:22px;margin:0 0 4px}
.sem-nav .meta{font-size:13px;color:var(--eq-muted,#5a5f7a);line-height:1.5}
.sem-nav .meta .ok-txt{color:#1c7c43;font-weight:600}
.sem-nav .meta .link-sutil{color:var(--eq-orange,#E8892B);font-weight:600;text-decoration:none}
.sem-nav .meta .link-sutil:hover{text-decoration:underline}
.sem-nav .flecha{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--eq-navy2,#1A1A78);color:#fff;font-size:20px;text-decoration:none;
  transition:background .15s,transform .05s;
}
.sem-nav .flecha:hover{background:var(--eq-orange,#E8892B)}
.sem-nav .flecha:active{transform:scale(.94)}

/* ---------- Grilla semanal (turnos x días) ---------- */
.tsem-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.tsem{width:100%;border-collapse:separate;border-spacing:8px;min-width:920px}
.tsem thead th{
  background:var(--eq-navy2,#1A1A78);color:#fff;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;
  padding:11px 8px;border-radius:9px;text-align:center;white-space:nowrap;vertical-align:middle;
}
.tsem thead th:first-child{background:transparent;width:70px}
.tsem td.turno-lbl{
  font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--eq-navy2,#1A1A78);
  text-align:center;font-size:13px;background:#ececf3;border-radius:9px;width:70px;
}
.tsem td{vertical-align:top}

/* ---------- Chips de estado ---------- */
.chip{
  display:flex;flex-direction:column;gap:2px;
  border-radius:10px;padding:9px 10px;min-height:64px;
  border:1px solid transparent;font-size:12.5px;line-height:1.35;
}
.chip .hora{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;color:#33344a}
.chip .estado{font-weight:600}
.chip .meta{color:#6a6b7a;font-size:11.5px;word-break:break-word}

.chip.libre{background:#e9f7ef;border-color:#bfe6cf}
.chip.libre .estado{color:#1c7c43}
.chip.libre.noche{background:#edecfc;border-color:#cdc9f4}
.chip.libre.noche .estado{color:#4b3fbf}
.chip.ocupado{background:#eef0f2;border-color:#dbdfe4}
.chip.ocupado .estado{color:#7a7f88}
.chip.mio{background:#fff7d6;border-color:var(--eq-yellow,#F5D63D)}
.chip.mio .estado{color:#9a6b00}
.chip.proc{background:#fff0df;border-color:#f4c48b}
.chip.proc .estado{color:#c86a12}

/* ---------- Vista por día (móvil / por cancha) ---------- */
.grupo-cancha{
  background:#fff;border:1px solid var(--eq-line,#ececf3);border-radius:14px;
  padding:16px;margin-bottom:14px;box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.grupo-cancha h3{
  font-family:'Space Grotesk',sans-serif;color:var(--eq-navy2,#1A1A78);
  font-size:17px;margin:0 0 12px;
}
.grupo-cancha .bloques{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;
}

/* ============================================================
   Nueva reserva (wizard)
   ============================================================ */
.eqapp .hoja{
  background:#fff;border:1px solid var(--eq-line,#ececf3);border-radius:18px;
  padding:26px;box-shadow:0 2px 10px rgba(25,26,78,.06);
}
.pasos{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 22px}
.pasos .paso{
  padding:7px 15px;border-radius:999px;font-size:13px;font-weight:600;
  background:#ececf3;color:#5a5f7a;
}
.pasos .paso.on{background:var(--eq-navy2,#1A1A78);color:#fff}

.res-ficha{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:#f6f6fb;border:1px solid var(--eq-line,#ececf3);border-radius:14px;
  padding:16px 18px;margin-bottom:16px;
}
.res-ficha .cancha{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--eq-navy2,#1A1A78);font-size:18px}
.res-ficha .fecha{color:#6a6b7a;font-size:14px;margin-top:2px}
.tagd{padding:7px 14px;border-radius:999px;font-weight:700;font-size:13px}
.tagd.noche-t{background:#edecfc;color:#4b3fbf}
.tagd.dia-t{background:#fff3d6;color:#9a6b00}

.restr{display:flex;flex-wrap:wrap;gap:8px}
.rtag{
  display:inline-block;padding:5px 12px;border-radius:999px;
  background:#eef0f2;color:#5a5b6a;font-size:12.5px;font-weight:600;
}

.tarjeta{
  background:#fff;border:1px solid var(--eq-line,#ececf3);border-radius:14px;
  padding:20px;margin-bottom:16px;
}
.tarjeta h3{font-family:'Space Grotesk',sans-serif;color:var(--eq-ink,#2b2c3a)}
.campo{margin-bottom:14px}
.campo label{display:block;font-size:13px;font-weight:600;color:#5a5b6a;margin-bottom:6px}
.campos-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.tarifa-mini,.tabla-valores{width:100%;border-collapse:collapse;margin-top:6px}
.tarifa-mini th,.tabla-valores th{
  text-align:left;font-size:12px;text-transform:uppercase;color:#5a5f7a;
  padding:8px 10px;border-bottom:2px solid #eee;
}
.tarifa-mini td,.tabla-valores td{padding:9px 10px;border-bottom:1px solid #f0f0f5;font-size:14px}

.resumen{margin-top:12px}
.linea-r{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 4px;font-size:15px;
}
.linea-r.total{
  border-top:2px solid #eee;margin-top:6px;padding-top:14px;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;color:var(--eq-navy2,#1A1A78);
}
#valorapagar,#totalProductos{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--eq-clay,#C25A38)}

.hoja-pie{display:flex;justify-content:flex-end;gap:12px;margin-top:22px;flex-wrap:wrap}

.aviso{padding:12px 16px;border-radius:11px;font-size:14px}
.aviso.error{background:#fdeaea;color:#c0392b;border:1px solid #f3c2c2}

/* chosen widgets se ven consistentes */
.eqapp .chosen-container{font-family:'Instrument Sans',sans-serif}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .eq-hero h2{font-size:26px}
  .eqapp .enc h2{font-size:22px}
  .campos-2{grid-template-columns:1fr}
  .sem-nav{flex-wrap:nowrap}
  .sem-nav h2{font-size:18px}
  .hoja-pie{justify-content:stretch}
  .hoja-pie .btn-eq{flex:1;text-align:center}
}


/* ============================================================
   FIX cabecera portal socio + panel admin
   .header-section es position:absolute;top:0;z-index:99 y los wrappers
   .eqp-wrap/.adm-wrap arrancaban en y=0 -> el logo/menu se solapaba con el
   contenido y los links blancos quedaban sobre fondo blanco.
   Se usa "body ." para ganarle al <style> inline de _nav.php/_anav.php.
   ============================================================ */
body .eqp-wrap,
body .adm-wrap{position:relative;padding-top:205px;max-width:1120px}
body .eqp-wrap::before,
body .adm-wrap::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:100vw;height:288px;z-index:1;
  background:linear-gradient(rgba(25,26,78,.86),rgba(26,26,120,.94)),
             url('/images/breadcrumbtenis-bg.jpg') center center/cover no-repeat;
  background-color:#191A4E;
}
body .eqp-head,
body .adm-wrap > .adm-h{position:relative;z-index:2}
body .eqp-head h2{color:#fff!important;text-shadow:0 2px 12px rgba(0,0,0,.22)}
body .eqp-head > div > div{color:#c9caf2!important}
body .eqp-ava{border:3px solid rgba(255,255,255,.28);box-shadow:0 4px 16px rgba(0,0,0,.22)}
body .adm-h{color:#fff!important;font-size:34px;text-shadow:0 2px 12px rgba(0,0,0,.22);margin-bottom:18px!important}
body .eqp-tabs,
body .adm-tabs{
  position:relative;z-index:2;background:#fff;
  border:1px solid #ececf3;border-bottom:1px solid #ececf3;border-radius:14px;
  padding:8px;gap:6px;box-shadow:0 6px 22px rgba(25,26,78,.14);margin-bottom:22px;
}
body .eqp-tabs a,body .adm-tabs a{border-radius:9px}
@media (max-width:768px){
  body .eqp-wrap,body .adm-wrap{padding-top:150px}
  body .eqp-wrap::before,body .adm-wrap::before{height:250px}
  body .adm-h{font-size:26px}
  body .eqp-head h2{font-size:22px}
}
/* === BLOQUE A: CHROME GLOBAL === */

/* ============================================================
   1. CABECERA UNIFICADA — .breadcrumb-section calca a .eq-hero
   ============================================================ */

/* Banda navy full-bleed con la foto velada, misma geometria que .eq-hero.
   El JS del tema (.set-bg) escribe background-image INLINE, por eso es
   imprescindible !important aqui: es la unica forma de velar la foto. */
body .breadcrumb-section{
  position:relative;
  height:auto;
  min-height:420px;
  padding:210px 20px 56px;   /* deja pasar el menu absoluto de arriba */
  margin-bottom:34px;
  text-align:center;
  color:#fff;
  background-color:var(--eq-navy,#191A4E);
  background-image:linear-gradient(rgba(25,26,78,.80),rgba(26,26,120,.88)),
                   url('/images/breadcrumbtenis-bg.jpg')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
/* El .container interno solo centra: no debe estrechar la banda */
body .breadcrumb-section > .container{max-width:1180px;position:relative;z-index:1}
body .breadcrumb-section .breadcrumb-text{margin:0}

/* Titulo blanco 56px Space Grotesk, identico al de .eq-hero */
body .breadcrumb-section .breadcrumb-text h2{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:56px;
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:#fff;
  margin:0 0 12px;
  text-shadow:0 2px 14px rgba(0,0,0,.25);
}

/* Migas blancas, mismo tamano y peso que .eq-hero .miga */
body .breadcrumb-section .bt-option{
  font-family:'Space Grotesk',sans-serif;
  font-size:17px;font-weight:700;color:#fff;
}
body .breadcrumb-section .bt-option a{
  position:static;margin-right:0;
  font-size:17px;font-weight:700;color:#fff;text-decoration:none;
}
body .breadcrumb-section .bt-option a:hover{color:var(--eq-yellow,#F5D63D)}
/* Se anula el chevron FontAwesome 4 del tema: con FA6 no resuelve y sale tofu */
body .breadcrumb-section .bt-option a:after{content:none;display:none}
/* Separador propio en blanco + pagina actual en naranjo (igual que .eq-hero) */
body .breadcrumb-section .bt-option span{
  font-family:'Space Grotesk',sans-serif;
  font-size:17px;font-weight:700;
  margin-left:8px;color:var(--eq-orange,#E8892B);
}
body .breadcrumb-section .bt-option span::before{
  content:'\203A';margin-right:8px;color:#fff;
}

/* Mismos cortes responsive que .eq-hero */
@media (max-width:768px){
  body .breadcrumb-section{min-height:300px;padding:140px 18px 44px}
  body .breadcrumb-section .breadcrumb-text h2{font-size:36px}
  body .breadcrumb-section .bt-option,
  body .breadcrumb-section .bt-option a,
  body .breadcrumb-section .bt-option span{font-size:15px}
}
@media (max-width:640px){
  body .breadcrumb-section .breadcrumb-text h2{font-size:26px}
}

/* ============================================================
   2. PAGINAS SIN CABECERA — el menu es absolute/top:0 y BLANCO.
      Sin banda detras, los enlaces quedan invisibles sobre blanco
      y encima pisan el logo. Se reserva sitio y se pinta la banda.
   ============================================================ */
body #content{
  position:relative;
  padding-top:220px;          /* holgura para el nav absoluto (55px + logo) */
  padding-bottom:40px;
  font-family:'Instrument Sans',sans-serif;
  color:var(--eq-ink,#2b2c3a);
}
/* Banda navy full-bleed detras del menu (no llega a tocar el contenido) */
body #content::before{
  content:'';
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:100vw;max-width:100vw;height:200px;z-index:0;pointer-events:none;
  background-color:var(--eq-navy,#191A4E);
  background-image:linear-gradient(rgba(25,26,78,.86),rgba(26,26,120,.94)),
                   url('/images/breadcrumbtenis-bg.jpg');
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
/* Si la vista ya trae cabecera propia, se retiran padding y banda */
body #content:has(.breadcrumb-section),
body #content:has(.eq-hero),
body #content:has(.eqp-wrap),
body #content:has(.adm-wrap){padding-top:0}
body #content:has(.breadcrumb-section)::before,
body #content:has(.eq-hero)::before,
body #content:has(.eqp-wrap)::before,
body #content:has(.adm-wrap)::before{display:none}

/* .container que abre #content: gutters propios y siempre sobre la banda */
body #content > .container:first-child,
body #content > .container-fluid:first-child{
  position:relative;z-index:1;
  max-width:1180px;padding-left:18px;padding-right:18px;
}

/* Titulos crudos del scaffolding Yii, con la tipografia del club */
body #content > h1,
body #content > h2{
  position:relative;z-index:1;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:30px;line-height:1.15;
  color:var(--eq-navy2,#1A1A78);
  margin:0 0 18px;
  max-width:1180px;padding:0 18px;
}

/* Scaffolding de layouts/column2.php: .span-19 y .span-5 no tienen estilo */
body .span-19{position:relative;width:100%;float:none;clear:both}
/* Por si .span-19 llegara sin #content dentro, hereda el mismo respiro */
body .span-19:not(:has(#content)){padding-top:220px}
body .span-5{
  display:block;width:100%;max-width:1180px;
  margin:0 auto 40px;padding:0 18px;
  font-family:'Instrument Sans',sans-serif;
}
/* Portlet "Operations" del sidebar como tarjeta clara */
body #sidebar .portlet{background:#fff;border:1px solid var(--eq-line,#ececf3);border-radius:12px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
body #sidebar .portlet-title{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;color:var(--eq-navy2,#1A1A78);margin:0 0 8px}
body #sidebar .operations{list-style:none;margin:0;padding:0}
/* min-height 44px = area tactil en movil */
body #sidebar .operations li a{display:block;padding:10px 12px;border-radius:9px;min-height:44px;line-height:24px;color:var(--eq-ink,#2b2c3a);text-decoration:none;font-weight:600;font-size:14px}
body #sidebar .operations li a:hover{background:#f2f2f7;color:var(--eq-navy2,#1A1A78)}

@media (max-width:768px){
  body #content{padding-top:170px}
  body #content::before{height:155px}
  body #content > h1,body #content > h2{font-size:24px}
  body .span-19:not(:has(#content)){padding-top:170px}
}

/* ============================================================
   3. SISTEMA UNICO DE BOTONES — todos calcan a .btn-eq
   (el prefijo "body " gana a los <style> incrustados en los PHP)
   ============================================================ */
body .btn-eq,
body .eqp-btn,
body .adm-btn,
body .site-btn,
body .btn.btn-primary,
body .btn.btn-success,
body .btn.btn-default,
body .btn.btn-info,
body .btn.btn-outline-success,
body .btn.btn-outline-info,
body .btn.btn-danger,
body .btn.btn-outline-danger,
body .btn.btn-outline-warning,
body .btn.btn-secondary,
body #content .primary-btn,
body .eqapp .primary-btn,
body .eqp-wrap .primary-btn,
body .adm-wrap .primary-btn{
  display:inline-block;
  background:var(--eq-navy2,#1A1A78);
  color:#fff;
  border:1px solid transparent;
  padding:12px 26px;             /* 18 + 24 + 2 = 44px de alto tactil */
  border-radius:11px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:15px;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  text-transform:none;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(25,26,78,.16);
  transition:background .15s ease,box-shadow .15s ease,transform .05s ease;
}
/* Hover: navy mas claro */
body .btn-eq:hover,
body .eqp-btn:hover,
body .adm-btn:hover,
body .site-btn:hover,
body .btn.btn-primary:hover,
body .btn.btn-success:hover,
body .btn.btn-default:hover,
body .btn.btn-info:hover,
body .btn.btn-outline-success:hover,
body .btn.btn-outline-info:hover,
body .btn.btn-secondary:hover,
body #content .primary-btn:hover,
body .eqapp .primary-btn:hover,
body .eqp-wrap .primary-btn:hover,
body .adm-wrap .primary-btn:hover{
  background:#26268f;color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(25,26,78,.24);
}
/* Activo: baja 1px */
body .btn-eq:active,
body .eqp-btn:active,
body .adm-btn:active,
body .site-btn:active,
body .btn.btn-primary:active,
body .btn.btn-success:active,
body .btn.btn-default:active,
body .btn.btn-info:active,
body .btn.btn-danger:active,
body .btn.btn-outline-danger:active,
body .btn.btn-outline-success:active,
body .btn.btn-outline-info:active{transform:translateY(1px);box-shadow:0 1px 4px rgba(25,26,78,.2)}

/* Foco visible accesible (teclado) */
body .btn-eq:focus-visible,
body .eqp-btn:focus-visible,
body .adm-btn:focus-visible,
body .site-btn:focus-visible,
body .btn:focus-visible,
body .btn-mini:focus-visible{
  outline:3px solid var(--eq-yellow,#F5D63D);outline-offset:2px;
}

/* Variante peligro / rojo arcilla (blanco sobre #B85216 = 4.9:1) */
body .btn-eq.peligro,
body .btn.btn-danger,
body .btn.btn-outline-danger,
body .btn.btn-outline-warning{
  background:var(--eq-clay-d,#B85216);color:#fff;border-color:transparent;
}
body .btn-eq.peligro:hover,
body .btn.btn-danger:hover,
body .btn.btn-outline-danger:hover,
body .btn.btn-outline-warning:hover{background:#9c440f;color:#fff;border-color:transparent}

/* Variante secundaria gris (blanco sobre #5a5a6e = 6.7:1) */
body .btn-eq.sec,
body .btn-eq.gray,
body .adm-btn.gray,
body .eqp-btn.gray,
body .btn.btn-secondary{background:#5a5a6e;color:#fff;border-color:transparent}
body .btn-eq.sec:hover,
body .btn-eq.gray:hover,
body .adm-btn.gray:hover,
body .eqp-btn.gray:hover,
body .btn.btn-secondary:hover{background:#484857;color:#fff;border-color:transparent}

/* Bootstrap 4 repinta el fondo en :active/:focus con (0,4,0): aqui se le gana */
body .btn.btn-primary:not(:disabled):not(.disabled):active,
body .btn.btn-success:not(:disabled):not(.disabled):active,
body .btn.btn-info:not(:disabled):not(.disabled):active,
body .btn.btn-outline-success:not(:disabled):not(.disabled):active,
body .btn.btn-outline-info:not(:disabled):not(.disabled):active,
body .btn.btn-primary:focus,body .btn.btn-success:focus,
body .btn.btn-info:focus{background:#26268f;color:#fff;border-color:transparent}
body .btn.btn-danger:not(:disabled):not(.disabled):active,
body .btn.btn-outline-danger:not(:disabled):not(.disabled):active,
body .btn.btn-outline-warning:not(:disabled):not(.disabled):active,
body .btn.btn-danger:focus{background:#9c440f;color:#fff;border-color:transparent}
body .btn.btn-secondary:not(:disabled):not(.disabled):active,
body .btn.btn-secondary:focus{background:#484857;color:#fff;border-color:transparent}

/* Deshabilitado: gris apagado, sin sombra ni cursor */
body .btn-eq[disabled],body .btn-eq:disabled,
body .eqp-btn[disabled],body .eqp-btn:disabled,
body .adm-btn[disabled],body .adm-btn:disabled,
body .btn[disabled],body .btn:disabled,body .btn.disabled{
  background:var(--eq-muted,#5a5f7a);color:#fff;border-color:transparent;
  box-shadow:none;cursor:not-allowed;opacity:1;transform:none;
}

/* Tamano pequeno (se recupera a 44px en movil, mas abajo) */
body .btn-eq.sm,
body .btn.btn-sm,
body .btn-sm,
body .adm-btn.sm,
body .eqp-btn.sm,
body .btn-mini{
  padding:9px 16px;font-size:13px;border-radius:9px;line-height:1.2;
}
/* Tamano grande */
body .btn.btn-lg,
body .btn.btn-md,
body .btn-eq.lg{padding:15px 32px;font-size:16px;border-radius:12px}
body .btn-eq.auto{min-width:150px}  /* ancho comodo cuando se pide */

/* ============================================================
   4. MODALES, AVISOS Y SPINNER
   ============================================================ */
body .modal-content{
  background:#fff;color:var(--eq-ink,#2b2c3a);
  border:0;border-radius:16px;overflow:hidden;
  box-shadow:0 20px 60px rgba(25,26,78,.35);
}
body .modal-header{border:0;padding:20px 26px 8px;align-items:center}
body .modal-title{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;
  line-height:1.2;color:var(--eq-navy2,#1A1A78);
}
body .modal-body{
  padding:18px 26px;font-family:'Instrument Sans',sans-serif;
  color:#4a4b5a;font-size:15px;line-height:1.55;
}
body .modal-footer{
  border:0;padding:6px 26px 22px;gap:10px;
  display:flex;flex-wrap:wrap;justify-content:flex-end;
}
/* Boton de cierre con area tactil suficiente */
body .modal-header .close,
body .modal-header .btn-close{
  color:var(--eq-navy2,#1A1A78);opacity:.6;font-size:28px;line-height:1;
  min-width:44px;min-height:44px;padding:8px;margin:-8px -8px -8px auto;
  background:none;border:0;cursor:pointer;
}
body .modal-header .close:hover,
body .modal-header .btn-close:hover{opacity:1}

/* Avisos: mismo radio, borde y tipografia en las 4 severidades */
body .alert,
body .aviso,
body .msg,
body .eqp-msg,
body .adm-msg,
body .errorSummary{
  border-radius:12px;border:1px solid transparent;
  padding:13px 16px;margin-bottom:16px;
  font-family:'Instrument Sans',sans-serif;font-size:15px;line-height:1.5;font-weight:500;
}
/* Error / peligro */
body .alert.alert-danger,
body .aviso.error,body .msg.err,
body .eqp-msg.m-err,body .adm-msg.mm-err,
body .errorSummary{background:#fdeaea;color:#a5281b;border-color:#f3c2c2}
/* Exito */
body .alert.alert-success,
body .aviso.exito,body .aviso.ok,body .msg.ok,
body .eqp-msg.m-ok,body .adm-msg.mm-ok{background:#e4f5ea;color:#14663a;border-color:#b7e2c8}
/* Informativo */
body .alert.alert-info,
body .aviso.info,body .msg.info{background:#e9ecfb;color:#26268f;border-color:#c3c8f0}
/* Advertencia */
body .alert.alert-warning,
body .aviso.warn,body .msg.warn{background:#fff4d9;color:#7a5400;border-color:#f0dca6}
/* El .alert del tema a veces viene con .col-md-*: se le quita el padding de grilla */
body .alert[class*="col-"]{float:none;width:auto;margin-left:0;margin-right:0}

/* Resumen de errores de Yii */
body .errorSummary p{margin:0 0 6px;font-weight:700}
body .errorSummary ul{margin:0;padding-left:18px}
body .errorSummary li{margin:2px 0}
body .errorMessage{
  display:block;margin-top:6px;
  font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:600;color:#a5281b;
}

/* Cargando / spinner */
body .cargando-eq{
  padding:34px 10px;text-align:center;
  font-family:'Instrument Sans',sans-serif;color:var(--eq-muted,#5a5f7a);
}
body .cargando-eq h4{
  margin:12px 0 0;font-family:'Space Grotesk',sans-serif;font-size:18px;
  color:var(--eq-navy2,#1A1A78);
}
body .spin{
  display:inline-block;width:34px;height:34px;border-radius:50%;
  border:4px solid #e3e3ef;border-top-color:var(--eq-orange,#E8892B);
  animation:eqspin .8s linear infinite;vertical-align:middle;
}
@keyframes eqspin{to{transform:rotate(360deg)}}
/* Respeta la preferencia de movimiento reducido */
@media (prefers-reduced-motion:reduce){
  body .spin{animation-duration:2.4s}
  body .btn-eq,body .eqp-btn,body .adm-btn,body .btn{transition:none}
}

/* ============================================================
   5. AREAS TACTILES EN MOVIL (>=44px) Y BOTONES A ANCHO COMODO
   ============================================================ */
@media (max-width:768px){
  body .btn-eq,body .eqp-btn,body .adm-btn,body .site-btn,
  body .btn:not(.close):not(.btn-close),body .btn-mini,
  body .btn-eq.sm,body .adm-btn.sm,body .eqp-btn.sm,body .btn.btn-sm{
    min-height:44px;padding:12px 20px;font-size:15px;
  }
  body .modal-footer{justify-content:stretch}
  body .modal-footer > .btn-eq,
  body .modal-footer > .btn{flex:1 1 auto}
}
/* === BLOQUE B: AUTH + CUENTA + PORTALES === */

/* ============================================================
   1. AUTENTICACIÓN (login, crear cuenta, recuperar, cambiar)
   ============================================================ */

/* Contenedor de página para formularios de una sola columna */
.auth-solo{max-width:520px;margin:0 auto 42px}

/* Escenario de login: relato a la izquierda, tarjeta a la derecha */
.escenario{
  display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;margin-bottom:42px;
}
.escenario .lado h2{
  font-family:'Space Grotesk',sans-serif;color:var(--eq-navy2,#1A1A78);
  font-size:30px;line-height:1.15;margin:12px 0 12px;font-weight:700;
}
.escenario .lado p{font-size:15.5px;line-height:1.65;color:#5a5b6a;margin:0;max-width:46ch}

/* Tarjeta de autenticación */
.auth-card,
.auth-solo > .tarjeta{
  background:#fff;border:1px solid var(--eq-line,#ececf3);border-radius:14px;
  padding:28px;margin:0 auto 16px;width:100%;max-width:460px;
  box-shadow:0 8px 30px rgba(25,26,78,.10);
}
.auth-solo > .auth-card,
.auth-solo > .tarjeta{max-width:520px}
.auth-card h2{font-family:'Space Grotesk',sans-serif;color:var(--eq-navy2,#1A1A78);font-weight:700}
.auth-card .lbl{margin-bottom:10px}

/* Pestañas Ingresar / Crear cuenta (segmented control) */
.tabs-auth{
  display:flex;flex-wrap:wrap;gap:4px;background:var(--eq-line,#ececf3);
  border-radius:12px;padding:5px;margin:0 0 20px;
}
.tabs-auth .tab,
.tabs-auth > a,
.tabs-auth > span{
  flex:1 1 120px;display:flex;align-items:center;justify-content:center;
  min-height:42px;padding:9px 14px;border-radius:9px;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;
  color:#5a5b6a;text-decoration:none;text-align:center;cursor:pointer;
  transition:background .15s ease,color .15s ease;user-select:none;
}
.tabs-auth .tab:hover{color:var(--eq-navy2,#1A1A78)}
.tabs-auth .tab.on,
.tabs-auth .tab.active{
  background:#fff;color:var(--eq-navy2,#1A1A78);box-shadow:0 1px 4px rgba(0,0,0,.10);cursor:default;
}
.tabs-auth .tab:focus-visible{outline:2px solid var(--eq-orange,#E8892B);outline-offset:2px}

/* Campos dentro de la tarjeta de autenticación */
.auth-card .form-control,
.auth-solo .form-control{
  width:100%;min-height:44px;height:auto;box-sizing:border-box;
  border:1px solid #d8d8e0;border-radius:10px;padding:11px 13px;
  font-family:'Instrument Sans',sans-serif;font-size:15px;color:var(--eq-ink,#2b2c3a);
  background:#fff;box-shadow:none;transition:border-color .15s ease,box-shadow .15s ease;
}
.auth-card .form-control:focus,
.auth-solo .form-control:focus{
  border-color:var(--eq-navy2,#1A1A78);box-shadow:0 0 0 3px rgba(26,26,120,.12);outline:none;
}
.auth-card .form-control::placeholder{color:#a9a9ba}
.auth-card .btn-eq,
.auth-solo .btn-eq{width:100%;min-height:46px;margin-top:4px}
.auth-card .btn-eq:focus-visible,
.auth-solo .btn-eq:focus-visible{outline:3px solid rgba(232,137,43,.55);outline-offset:2px}

/* RUN + dígito verificador en una sola línea */
.campo-rut{display:flex;align-items:center;gap:9px}
.campo-rut b{color:var(--eq-muted,#5a5f7a);font-size:18px;line-height:1}
.campo-rut .dv{max-width:78px;text-align:center}

/* Nota de campos obligatorios */
.obligatorio{font-size:12.5px;color:var(--eq-muted,#5a5f7a);margin:2px 0 16px}

/* Separador interno de la tarjeta */
.divisor{height:1px;background:var(--eq-line,#ececf3);margin:20px 0}

/* Pie de la tarjeta de autenticación */
.auth-pie{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--eq-line,#ececf3);
  text-align:center;font-size:13.5px;color:var(--eq-muted,#5a5f7a);line-height:1.6;
}
.auth-pie a{
  display:inline-block;padding:6px 2px;color:var(--eq-orange,#E8892B);
  font-weight:600;text-decoration:none;
}
.auth-pie a:hover{text-decoration:underline}
.auth-pie a:focus-visible{outline:2px solid var(--eq-orange,#E8892B);outline-offset:3px;border-radius:6px}

/* Enlace sutil reutilizable (fuera de .sem-nav) */
.auth-card .link-sutil,
.auth-solo .link-sutil,
.cuenta-card .link-sutil{color:var(--eq-orange,#E8892B);font-weight:600;text-decoration:none}
.auth-card .link-sutil:hover,
.auth-solo .link-sutil:hover,
.cuenta-card .link-sutil:hover{text-decoration:underline}

/* Avisos dentro de autenticación y mi cuenta */
.auth-card .aviso,
.auth-solo .aviso{background:var(--eq-bg,#f6f6fb);border:1px solid var(--eq-line,#ececf3);line-height:1.55}
.aviso.exito{background:#e9f7ef;color:#1c7c43;border:1px solid #bfe6cf}
.aviso.warn{background:#fff7d6;color:#8a6100;border:1px solid var(--eq-yellow,#F5D63D)}
.aviso a{color:var(--eq-clay,#C25A38);font-weight:600;text-decoration:none}
.aviso a:hover{text-decoration:underline}

/* ============================================================
   2. MI CUENTA
   ============================================================ */
.pill-user{
  display:inline-block;vertical-align:middle;margin-left:9px;
  background:var(--eq-yellow,#F5D63D);color:var(--eq-navy,#191A4E);
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.04em;padding:4px 12px;border-radius:999px;
}
.cuenta-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:34px;
}
.cuenta-card{
  display:block;background:#fff;border:1px solid var(--eq-line,#ececf3);border-radius:14px;
  padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.04);color:var(--eq-ink,#2b2c3a);
  text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
a.cuenta-card,
a.cuenta-card:hover,
a.cuenta-card:focus{text-decoration:none;color:var(--eq-ink,#2b2c3a)}
.cuenta-card:hover{
  transform:translateY(-2px);box-shadow:0 8px 24px rgba(25,26,78,.10);border-color:#dcdce8;
}
a.cuenta-card:focus-visible{outline:3px solid var(--eq-orange,#E8892B);outline-offset:3px}
.cuenta-card h3{
  font-family:'Space Grotesk',sans-serif;color:var(--eq-navy2,#1A1A78);
  font-size:17px;font-weight:700;margin:0 0 8px;
}
.cuenta-card p{font-size:14px;line-height:1.6;color:#5a5b6a;margin:0}
.cuenta-card .dato{font-weight:700;color:var(--eq-ink,#2b2c3a)}

/* ============================================================
   3. PORTAL SOCIO (.eqp-*) + PANEL ADMIN (.adm-*)
   Prefijo "body " para ganar al <style> incrustado de _nav/_anav.
   NO se tocan .eqp-wrap / .adm-wrap ni sus ::before.
   ============================================================ */

/* El contenido siempre por encima de la banda navy (::before, z-index:1) */
body .eqp-wrap > *,
body .adm-wrap > *{position:relative;z-index:2}

/* Tarjeta estándar unificada */
body .eqp-card,
body .adm-card{
  background:#fff;border:1px solid var(--eq-line,#ececf3);border-radius:14px;
  padding:20px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.04);
}

/* Grillas responsivas unificadas */
body .eqp-grid,
body .adm-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;
}

/* Etiquetas de campo unificadas */
body .eqp-lbl,
body .adm-lbl{
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--eq-muted,#5a5f7a);margin-bottom:6px;
}

/* Inputs unificados */
body .eqp-in,
body .adm-in{
  width:100%;min-height:44px;box-sizing:border-box;
  border:1px solid #d8d8e0;border-radius:10px;padding:11px 13px;
  font-family:'Instrument Sans',sans-serif;font-size:14.5px;color:var(--eq-ink,#2b2c3a);
  background:#fff;transition:border-color .15s ease,box-shadow .15s ease;
}
body .eqp-in:hover,
body .adm-in:hover{border-color:#c3c3d2}
body .eqp-in:focus,
body .adm-in:focus{
  border-color:var(--eq-navy2,#1A1A78);box-shadow:0 0 0 3px rgba(26,26,120,.12);outline:none;
}
body .eqp-in::placeholder,
body .adm-in::placeholder{color:#a9a9ba}
body .eqp-in[type=file],
body .adm-in[type=file]{padding:9px 12px;font-size:13.5px}
body .eqp-wrap input[type=checkbox],
body .adm-wrap input[type=checkbox]{width:18px;height:18px;accent-color:var(--eq-navy2,#1A1A78);margin-right:7px}

/* Botones de portal armonizados con .btn-eq (sin redefinir .btn-eq) */
body .eqp-btn,
body .adm-btn{
  font-family:'Space Grotesk',sans-serif;font-weight:600;border-radius:11px;
  padding:11px 20px;font-size:14.5px;line-height:1.2;
}
body .eqp-btn:focus-visible,
body .adm-btn:focus-visible{outline:3px solid rgba(232,137,43,.55);outline-offset:2px}
body .eqp-tabs a:focus-visible,
body .adm-tabs a:focus-visible{outline:3px solid var(--eq-orange,#E8892B);outline-offset:2px}

/* Tablas unificadas */
body .eqp-tbl,
body .adm-tbl{width:100%;border-collapse:collapse;font-family:'Instrument Sans',sans-serif}
body .eqp-tbl th,
body .adm-tbl th{
  text-align:left;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--eq-muted,#5a5f7a);
  padding:11px 10px;border-bottom:1px solid var(--eq-line,#ececf3);white-space:nowrap;
}
body .eqp-tbl td,
body .adm-tbl td{
  padding:11px 10px;border-bottom:1px solid var(--eq-line,#ececf3);font-size:14px;vertical-align:middle;
}
body .eqp-tbl tbody tr,
body .adm-tbl tbody tr{transition:background .12s ease}
body .eqp-tbl tbody tr:hover,
body .adm-tbl tbody tr:hover{background:var(--eq-bg,#f6f6fb)}
body .eqp-tbl tbody tr:last-child td,
body .adm-tbl tbody tr:last-child td{border-bottom:0}

/* Insignias unificadas */
body .eqp-badge,
body .adm-badge{
  display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.02em;line-height:1.35;
  padding:5px 12px;border-radius:999px;border:1px solid transparent;white-space:nowrap;
}
body .eqp-badge.b-ok,
body .adm-badge.a-ok{background:#e9f7ef;color:#1c7c43;border-color:#bfe6cf}
body .eqp-badge.b-bad,
body .adm-badge.a-bad{background:#fdeaea;color:#c0392b;border-color:#f3c2c2}
body .eqp-badge.b-none,
body .adm-badge.a-none{background:#eef0f2;color:#6a6b7a;border-color:#dbdfe4}
body .adm-badge.a-blk{background:#fff2d6;color:#9a6b00;border-color:#f0dca6}

/* Mensajes de resultado unificados */
body .eqp-msg,
body .adm-msg{
  padding:12px 16px;border-radius:11px;margin-bottom:16px;
  font-size:14px;font-weight:600;border:1px solid transparent;
}
body .eqp-msg.m-ok,
body .adm-msg.mm-ok{background:#e9f7ef;color:#1c7c43;border-color:#bfe6cf}
body .eqp-msg.m-err,
body .adm-msg.mm-err{background:#fdeaea;color:#c0392b;border-color:#f3c2c2}

/* Avatar del socio */
body .eqp-ava{
  width:64px;height:64px;flex:0 0 64px;border-radius:50%;object-fit:cover;
  background:var(--eq-navy2,#1A1A78);color:var(--eq-yellow,#F5D63D);
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:24px;letter-spacing:.02em;
}

/* Indicadores del panel admin */
body .adm-kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:16px;
}
body .adm-kpi{
  background:#fff;border:1px solid var(--eq-line,#ececf3);border-radius:14px;
  padding:20px 16px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.04);
}
body .adm-kpi .n{
  font-family:'Space Grotesk',sans-serif;font-size:38px;font-weight:700;
  color:var(--eq-navy2,#1A1A78);line-height:1.05;
}
body .adm-kpi .l{
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--eq-muted,#5a5f7a);margin-top:6px;
}

/* Fila de búsqueda del panel admin */
body .adm-search{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}

/* ============================================================
   4. RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .escenario{grid-template-columns:1fr;gap:24px}
  .escenario .lado h2{font-size:26px}
  body .adm-kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}

@media (max-width:768px){
  .cuenta-grid,
  body .eqp-grid,
  body .adm-grid{grid-template-columns:1fr}
  body .adm-kpis{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
  /* Tablas con scroll horizontal */
  body .eqp-tbl,
  body .adm-tbl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  body .eqp-tbl thead,
  body .adm-tbl thead{white-space:nowrap}
  /* Búsqueda apilada al 100% */
  body .adm-search{flex-direction:column;align-items:stretch}
  body .adm-search > *{width:100%;max-width:100%!important}
  /* Áreas táctiles >= 44px */
  body .eqp-btn,
  body .adm-btn,
  body .adm-btn.sm{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  }
  body .eqp-tabs a,
  body .adm-tabs a{min-height:44px;display:flex;align-items:center}
  .tabs-auth .tab{min-height:46px}
  .auth-pie a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .cuenta-card{padding:18px}
}

@media (max-width:640px){
  .auth-card,
  .auth-solo > .tarjeta{padding:20px;border-radius:13px}
  .auth-solo{margin-bottom:30px}
  .tabs-auth{flex-wrap:wrap}
  .tabs-auth .tab{flex:1 1 100%}
  .escenario .lado h2{font-size:23px}
  .campo-rut{flex-wrap:nowrap}
  .pill-user{display:block;margin:8px 0 0;width:max-content}
  body .adm-kpi{padding:16px 12px}
  body .adm-kpi .n{font-size:30px}
  body .adm-kpi .l{font-size:11px}
  body .eqp-ava{width:56px;height:56px;flex:0 0 56px;font-size:21px}
  body .eqp-card,
  body .adm-card{padding:16px}
  body .eqp-tbl th,
  body .adm-tbl th,
  body .eqp-tbl td,
  body .adm-tbl td{padding:10px 8px;font-size:13.5px}
}
/* === BLOQUE C: FORMULARIOS + TABLAS + CRUD === */
/* Unifica el mantenedor antiguo de Yii (reservas, socios, horarios, info,
   valores de cancha, tipos de cuota) con el tema claro del sitio.
   Casi todo va acotado a #content (layout column2) o prefijado con "body "
   para ganarle a los <style> incrustados en layouts/main.php. */

/* ---------- 0. Lienzo del CRUD antiguo (tema claro) ---------- */
#content{
  font-family:'Instrument Sans',sans-serif;
  color:var(--eq-ink,#2b2c3a);
}
#content .class-timetable-section,
#content .bmi-calculator-section{background:transparent}
#content .spad{padding-top:26px;padding-bottom:26px}
/* el .container de Bootstrap desborda dentro de la columna: se hace fluido */
#content > .container,
#content section:not(.breadcrumb-section) > .container{
  width:100%;max-width:100%;margin:0;padding:0 15px;
}
#content h1{
  font-family:'Space Grotesk',sans-serif;color:var(--eq-navy2,#1A1A78);
  font-size:26px;font-weight:700;margin:0 0 18px;
}

/* ---------- 1. Campos de formulario ---------- */
#content label{
  display:inline-block;font-family:'Instrument Sans',sans-serif;
  font-size:13px;font-weight:600;color:#5a5b6a;margin-bottom:6px;line-height:1.35;
}
#content .form-control,#content input[type=text],#content input[type=password],
#content input[type=email],#content input[type=number],#content input[type=date],
#content input[type=tel],#content select,#content textarea{
  display:block;width:100%;max-width:100%;height:auto;
  font-family:'Instrument Sans',sans-serif;font-size:14px;line-height:1.4;
  color:var(--eq-ink,#2b2c3a);background-color:#fff;
  border:1px solid #d8d8e0;border-radius:10px;padding:11px 13px;
  box-shadow:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
/* select: quita la flecha nativa y pone una propia */
#content select,
#content select.form-control{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:38px;background-repeat:no-repeat;
  background-position:right 13px center;background-size:11px 7px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238a8a99' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}
#content textarea,
#content textarea.form-control{min-height:112px;resize:vertical;line-height:1.5}
#content input[type=file].form-control{padding:9px 13px;font-size:13px}
#content .form-control:focus,#content input[type=text]:focus,#content select:focus,
#content input[type=password]:focus,#content input[type=email]:focus,
#content input[type=number]:focus,#content input[type=date]:focus,#content textarea:focus{
  outline:0;border-color:var(--eq-navy2,#1A1A78);
  box-shadow:0 0 0 3px rgba(26,26,120,.12);
}
#content .form-control::placeholder,#content input::placeholder,
#content textarea::placeholder{color:#a8a8b8;opacity:1}
#content .form-control:disabled,#content .form-control[disabled],
#content input[disabled],#content select[disabled],#content textarea[disabled]{
  background-color:#f2f2f7;color:#5a5f7a;cursor:not-allowed;border-color:#e4e4ee;
}
#content input[type=checkbox],
#content input[type=radio]{width:auto;display:inline-block;margin-right:6px;vertical-align:middle}

/* asterisco de obligatorio en naranjo (Yii inyecta <span class="required">*</span>) */
#content label.required,
#content label.obligatorio{color:#5a5b6a}
#content span.required,#content label.required > span,#content span.obligatorio{color:var(--eq-orange,#E8892B);font-weight:700;margin-left:3px}
#content label.obligatorio::after{
  content:'*';color:var(--eq-orange,#E8892B);font-weight:700;margin-left:4px;
}

/* errores */
#content .errorSummary{
  background:#fdf1ec;border:1px solid #f0c6b6;border-left:3px solid var(--eq-clay,#C25A38);
  border-radius:12px;padding:13px 16px;margin:0 0 16px;font-size:13px;color:#8f3a20;
}
#content .errorSummary p{margin:0 0 6px;font-weight:700;color:#8f3a20;font-size:13px}
#content .errorSummary ul{margin:0;padding-left:18px}
#content .errorSummary li{margin:3px 0;line-height:1.45}
#content .errorMessage,#content div.error,
#content span.error,#content p.error{
  display:block;font-size:13px;font-weight:600;line-height:1.4;
  color:var(--eq-clay-d,#B85216);margin-top:5px;
}
#content input.error,#content select.error,
#content textarea.error,#content .form-control.error{border-color:#e6a08a;background-color:#fffaf8}
#content .alert{border-radius:12px;font-size:14px;border-width:1px;padding:13px 16px}
#content .alert.col-md-12{max-width:100%;flex:0 0 100%;margin-bottom:18px}

/* ---------- 2. Chosen (se iguala al input estándar) ---------- */
#content .chosen-container{
  width:100%!important;max-width:100%;
  font-family:'Instrument Sans',sans-serif;font-size:14px;
}
#content .chosen-container-single .chosen-single{
  height:44px;line-height:42px;padding:0 40px 0 13px;
  border:1px solid #d8d8e0;border-radius:10px;
  background:#fff;background-image:none;background-clip:padding-box;
  box-shadow:none;color:var(--eq-ink,#2b2c3a);font-size:14px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
#content .chosen-container-single .chosen-default{color:#a8a8b8}
#content .chosen-container-single .chosen-single span{margin-right:30px}
#content .chosen-container-active .chosen-single,
#content .chosen-container-active.chosen-with-drop .chosen-single{
  border:1px solid var(--eq-navy2,#1A1A78);border-radius:10px;
  background:#fff;background-image:none;
  box-shadow:0 0 0 3px rgba(26,26,120,.12);
}
/* flecha propia en lugar del sprite gris */
#content .chosen-container-single .chosen-single div{width:36px;right:2px}
#content .chosen-container-single .chosen-single div b,
#content .chosen-container-active.chosen-with-drop .chosen-single div b{
  position:relative;background:none!important;
}
#content .chosen-container-single .chosen-single div b::after{
  content:'';position:absolute;top:50%;left:50%;width:8px;height:8px;
  margin:-6px 0 0 -4px;transform:rotate(45deg);
  border-right:2px solid #5a5f7a;border-bottom:2px solid #5a5f7a;
}
#content .chosen-container-active.chosen-with-drop .chosen-single div b::after{
  margin-top:-2px;transform:rotate(-135deg);
  border-right-color:var(--eq-navy2,#1A1A78);border-bottom-color:var(--eq-navy2,#1A1A78);
}
#content .chosen-container .chosen-drop,
#content .chosen-container-single .chosen-drop{
  margin-top:5px;border:1px solid #d8d8e0;border-radius:12px;
  background:#fff;overflow:hidden;
  box-shadow:0 10px 28px rgba(25,26,78,.14);
}
#content .chosen-container-single .chosen-search{padding:8px 8px 4px}
#content .chosen-container-single .chosen-search input[type="text"]{
  width:100%!important;height:38px;margin:0;padding:8px 12px;
  border:1px solid #d8d8e0;border-radius:9px;
  background:#fff none!important;
  font-family:'Instrument Sans',sans-serif;font-size:14px;color:var(--eq-ink,#2b2c3a);
}
#content .chosen-container-single .chosen-search input[type="text"]:focus{
  outline:0;border-color:var(--eq-navy2,#1A1A78);box-shadow:0 0 0 3px rgba(26,26,120,.12);
}
#content .chosen-container .chosen-results{
  margin:0;padding:6px;max-height:262px;color:var(--eq-ink,#2b2c3a);
}
#content .chosen-container .chosen-results li{
  padding:10px 12px;border-radius:8px;font-size:14px;line-height:1.35;
}
#content .chosen-container .chosen-results li.highlighted{
  background-color:var(--eq-navy2,#1A1A78);background-image:none;color:#fff;
}
#content .chosen-container .chosen-results li.result-selected{
  background:#f6f6fb;color:var(--eq-navy2,#1A1A78);font-weight:600;
}
#content .chosen-container .chosen-results li.no-results{
  background:#f6f6fb;border-radius:8px;color:var(--eq-muted,#5a5f7a);
}
#content .chosen-disabled .chosen-single{background:#f2f2f7;color:#5a5f7a}

/* ---------- 3. Tablas Bootstrap y DataTables ---------- */
/* "body " neutraliza el <style> incrustado del layout (.table{color:#949da6}) */
body .table,
body .table-sm,
body .table-striped,
body .table-bordered,
body .table-hover,
body .detail-view,
body .grid-view table.items{
  width:100%;margin-bottom:16px;background-color:#fff;
  border:0;border-collapse:collapse;
  font-family:'Instrument Sans',sans-serif;font-size:14px;
  color:var(--eq-ink,#2b2c3a);
}
body .table thead th,body .table thead td,
body .detail-view th,body .grid-view table.items thead th{
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--eq-muted,#5a5f7a);background-color:transparent;
  border:0;border-bottom:2px solid var(--eq-line,#ececf3);
  padding:11px 10px;vertical-align:bottom;text-align:left;
}
body .table tbody td,body .table tbody th,
body .detail-view td,body .grid-view table.items tbody td{
  padding:11px 10px;font-size:14px;color:var(--eq-ink,#2b2c3a);
  background-color:transparent;vertical-align:middle;
  border:0;border-bottom:1px solid var(--eq-line,#ececf3);
}
body .table-sm thead th,
body .table-sm tbody td{padding:7px 8px}
/* sin marco ni cebra: la fila se separa sólo con su borde inferior */
body .table-bordered,
body .table-bordered thead th,
body .table-bordered thead td,
body .table-bordered tbody td,
body .table-bordered tbody th{border-left:0;border-right:0;border-top:0}
body .table-striped tbody tr:nth-of-type(odd),
body .table-striped tbody tr:nth-of-type(even){background-color:transparent}
/* el layout fuerza hover naranjo con !important: hay que ganarle en peso */
body .table-hover tbody tr:hover,
body .table-hover tbody tr:hover > td,
body .table-hover tbody tr:hover > th{
  background-color:#f6f6fb!important;color:var(--eq-ink,#2b2c3a)!important;
}
body .table tbody tr:last-child td{border-bottom:0}
body .table-responsive{
  background:#fff;border:1px solid var(--eq-line,#ececf3);border-radius:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
body .table-responsive > .table{margin-bottom:0}
/* DataTables */
body .dataTables_wrapper{
  color:var(--eq-ink,#2b2c3a)!important;
  font-family:'Instrument Sans',sans-serif;font-size:14px;
}
body .dataTables_wrapper .dataTables_filter,
body .dataTables_wrapper .dataTables_length{margin-bottom:12px;font-size:13px;color:#5a5b6a}
body .dataTables_wrapper .dataTables_filter input,
body .dataTables_wrapper .dataTables_length select{
  height:auto;margin-left:8px;padding:9px 12px;
  border:1px solid #d8d8e0;border-radius:10px;background-color:#fff;
  font-family:'Instrument Sans',sans-serif;font-size:14px;color:var(--eq-ink,#2b2c3a);
}
body .dataTables_wrapper .dataTables_filter input:focus,
body .dataTables_wrapper .dataTables_length select:focus{
  outline:0;border-color:var(--eq-navy2,#1A1A78);box-shadow:0 0 0 3px rgba(26,26,120,.12);
}
body .dataTables_wrapper .dataTables_info{
  color:var(--eq-muted,#5a5f7a)!important;font-size:13px;padding-top:14px;
}
body .dt-buttons,
body .dataTables_wrapper .dt-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
body table.dataTable thead th{position:relative}
body table.dataTable thead .sorting::before,body table.dataTable thead .sorting::after,
body table.dataTable thead .sorting_asc::before,body table.dataTable thead .sorting_asc::after,
body table.dataTable thead .sorting_desc::before,body table.dataTable thead .sorting_desc::after{
  color:#c3c3d0;bottom:.55em;
}
/* paginación (variante clásica y variante bootstrap4) */
body .dataTables_wrapper .dataTables_paginate .paginate_button,
body .dataTables_wrapper .pagination .page-link{
  margin:0 3px!important;padding:7px 12px!important;
  border:1px solid var(--eq-line,#ececf3)!important;border-radius:8px!important;
  background:#fff!important;color:#4a4b5a!important;
  font-size:13px;font-weight:600;
}
body .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
body .dataTables_wrapper .pagination .page-link:hover{
  background:#f6f6fb!important;border-color:#d8d8e0!important;
  color:var(--eq-navy2,#1A1A78)!important;
}
body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body .dataTables_wrapper .pagination .page-item.active .page-link{
  background:var(--eq-navy2,#1A1A78)!important;
  border-color:var(--eq-navy2,#1A1A78)!important;color:#fff!important;
}
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body .dataTables_wrapper .pagination .page-item.disabled .page-link{
  opacity:.45;background:#fff!important;color:#9a9aa8!important;
}
body .dataTables_wrapper .pagination{gap:0;margin:0}
/* restos de CGridView / CListView */
#content .grid-view,
#content .list-view{background:transparent}
#content .summary{font-size:13px;color:var(--eq-muted,#5a5f7a);margin-bottom:10px}
#content .pager{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:14px 0 0}
#content .pager li a{
  display:block;padding:7px 12px;border:1px solid var(--eq-line,#ececf3);
  border-radius:8px;background:#fff;color:#4a4b5a;font-size:13px;
  font-weight:600;text-decoration:none;
}
#content .pager li a:hover{background:#f6f6fb;color:var(--eq-navy2,#1A1A78)}
#content .pager li.selected a{
  background:var(--eq-navy2,#1A1A78);border-color:var(--eq-navy2,#1A1A78);color:#fff;
}

/* ---------- 4. Scaffolding de layouts/column2.php ---------- */
.span-19,
.span-5{box-sizing:border-box;float:none;width:auto;padding:0 18px 40px}
/* las vistas sin breadcrumb quedan bajo el menú absoluto: se les da aire */
#content{max-width:100%}
@media (min-width:1025px){
  .span-19{float:left;width:calc(100% - 282px);padding-right:6px}
  .span-5.last{float:right;width:282px;padding-left:6px}
  /* el bloque siguiente limpia los flotantes y arrastra al resto del pie */
  .span-5.last + *{clear:both}
}
#sidebar{max-width:100%}
.portlet{
  background:#fff;border:1px solid var(--eq-line,#ececf3);border-radius:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);overflow:hidden;margin-bottom:18px;padding:0;
}
.portlet-decoration{
  background:var(--eq-navy,#191A4E);border:0;padding:12px 16px;margin:0;
}
.portlet-title{
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;margin:0;
}
.portlet-content{padding:12px;font-size:14px;color:var(--eq-ink,#2b2c3a)}
.portlet-content ul,
.operations{list-style:none;margin:0;padding:0}
.operations li{margin:0 0 6px;padding:0}
.operations li:last-child{margin-bottom:0}
.operations ul li a,
.operations li a{
  display:flex;align-items:center;min-height:40px;padding:9px 13px;
  background:#f6f6fb;border-radius:9px;text-decoration:none;
  font-family:'Instrument Sans',sans-serif;font-size:14px;font-weight:600;
  color:#3a3b4d;line-height:1.25;
  transition:background .15s ease,color .15s ease;
}
.operations ul li a:hover,
.operations li a:hover,
.operations li.active a{background:var(--eq-navy2,#1A1A78);color:#fff}
/* <=1024px: una sola columna y la barra de operaciones como tarjeta horizontal */
@media (max-width:1024px){
  .span-19,.span-5.last{float:none;width:100%;padding-left:15px;padding-right:15px}
  .span-5.last{padding-bottom:0}
  .portlet-content{overflow-x:auto}
  .operations{display:flex;flex-wrap:wrap;gap:8px}
  .operations li{margin:0}
}

/* ---------- 5. Restos de Bootstrap 3 (col-xs-*) ---------- */
/* caja de columna: Bootstrap 4 ya no reconoce col-xs-* */
#content [class*="col-xs-"]{
  position:relative;width:100%;min-height:1px;
  padding-right:15px;padding-left:15px;box-sizing:border-box;
}
@media (max-width:768px){
  #content .col-xs-1{flex:0 0 8.333333%;max-width:8.333333%}
  #content .col-xs-2{flex:0 0 16.666667%;max-width:16.666667%}
  #content .col-xs-3{flex:0 0 25%;max-width:25%}
  #content .col-xs-4{flex:0 0 33.333333%;max-width:33.333333%}
  #content .col-xs-6{flex:0 0 50%;max-width:50%}
  #content .col-xs-8{flex:0 0 66.666667%;max-width:66.666667%}
  #content .col-xs-11{flex:0 0 91.666667%;max-width:91.666667%}
  #content .col-xs-12{flex:0 0 100%;max-width:100%}
}
@media (max-width:640px){
  #content [class*="col-xs-"]{flex:0 0 100%;max-width:100%}
}
/* restos de otra plantilla: no deben descuadrar */
#content .panel_toolbox,
#content .navbar-right,
#content p.nav.panel_toolbox,
#content p.nav.navbar-right{
  display:block;float:none;margin:0;padding:0;list-style:none;
  text-align:right;font-size:13px;line-height:1.4;
}
#content .panel_toolbox.text-danger,
#content .navbar-right.text-danger{color:var(--eq-clay-d,#B85216)!important}
@media (max-width:640px){
  #content .panel_toolbox,
  #content .navbar-right{text-align:left}
}

/* ---------- 6. Filtros y barras de acción ---------- */
#content .table-controls,
#content .search-form,
#content .filtros,
#content .buttons,
#content .row.buttons{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:0 0 18px;padding:0;text-align:left;
}
#content .table-controls{justify-content:flex-end;margin-top:0;margin-bottom:20px}
#content .table-controls ul{
  display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:5px;
  background:#f6f6fb;border-radius:12px;
}
#content .table-controls ul li{
  display:block;margin:0;padding:8px 14px;border-radius:9px;
  font-size:13px;font-weight:600;color:#5a5b6a;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
#content .table-controls ul li::after{display:none;content:none}
#content .table-controls ul li:hover{background:#fff;color:var(--eq-navy2,#1A1A78)}
#content .table-controls ul li.active{
  background:var(--eq-navy2,#1A1A78);color:#fff;
}
#content .table-controls ul li:empty{display:none}
/* formularios crudos de gii: .form / .wide.form como tarjeta */
#content div.form{
  background:#fff;border:1px solid var(--eq-line,#ececf3);border-radius:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);padding:20px;margin-bottom:20px;
}
#content div.form > .row,
#content .search-form .row{
  display:block;margin:0 0 14px;padding:0;
}
#content div.form > .row.buttons,
#content .search-form .row.buttons{
  display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;
}
#content div.form .note{font-size:13px;color:var(--eq-muted,#5a5f7a);margin:0 0 16px}
#content div.form input[type=submit],
#content .search-form input[type=submit],
#content .buttons input[type=submit],
#content .buttons button[type=submit]{
  width:auto;display:inline-block;
  background:var(--eq-navy2,#1A1A78);color:#fff;border:0;border-radius:11px;
  padding:11px 22px;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;
  transition:background .15s ease;
}
#content div.form input[type=submit]:hover,
#content .search-form input[type=submit]:hover,
#content .buttons input[type=submit]:hover,
#content .buttons button[type=submit]:hover{background:#26268f}
@media (max-width:640px){
  #content .table-controls{justify-content:flex-start}
  #content .table-controls ul{width:100%}
}

/* === BLOQUE D: RECONCILIACION ENTRE BLOQUES === */
/* El CRUD antiguo (layouts/column2) cuelga de <body> como .span-19 + .span-5.
   Se fuerza una sola columna a ancho completo para que la banda navy de
   #content::before (bloque A) quede centrada respecto al viewport. */
body .span-19{position:relative;float:none;width:100%;clear:both;padding:0}
body .span-5,body .span-5.last{float:none;width:100%;max-width:1180px;margin:0 auto 40px;padding:0 18px}
body .span-19 > #content{max-width:100%;margin:0}
/* Contenido interior centrado a 1180px (el bloque C lo dejaba a ancho total) */
body #content > .container,
body #content > .container-fluid,
body #content section:not(.breadcrumb-section) > .container{
  width:100%;max-width:1180px;margin-left:auto;margin-right:auto;padding:0 18px;
}
body #content > h1,
body #content > h2{margin-left:auto;margin-right:auto}
/* La cabecera propia de la vista debe romper el centrado y sangrar a pantalla completa */
body #content > .breadcrumb-section{
  width:100vw;max-width:100vw;margin-left:50%;transform:translateX(-50%);
}

/* === BLOQUE E: base eqp/adm (antes en <style> inline de _nav/_anav) === */
body .eqp-wrap{max-width:1120px;margin:0 auto;padding:205px 16px 16px}
body .adm-wrap{max-width:1120px;margin:0 auto;padding:205px 16px 16px}
body .eqp-head{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
body .eqp-head h2{margin:0;font-family:'Space Grotesk',sans-serif;font-size:28px}
body .eqp-tabs,body .adm-tabs{display:flex;flex-wrap:wrap}
body .eqp-tabs a,body .adm-tabs a{display:inline-flex;align-items:center;padding:9px 14px;text-decoration:none;color:#444;font-weight:600;font-size:14px}
body .eqp-tabs a.on,body .adm-tabs a.on{background:var(--eq-navy2,#1A1A78);color:#fff}
body .eqp-tabs a:hover:not(.on),body .adm-tabs a:hover:not(.on){background:#f2f2f7;color:var(--eq-navy2,#1A1A78)}
@media (max-width:768px){
  body .eqp-wrap,body .adm-wrap{padding-top:150px}
}
/* ---------- Buscador de jugadores con autocompletado ---------- */
.ac-box{position:relative}
.ac-box [hidden],.ac-list[hidden],.ac-chip[hidden],.ac-input[hidden]{display:none !important}
.ac-input{width:100%;box-sizing:border-box;padding:11px 14px;border-radius:11px;background:#fff;border:1.5px solid var(--eq-line,#ececf3);font-family:'Instrument Sans',sans-serif;font-size:15px;color:var(--eq-ink,#2b2c3a);transition:border-color .15s,box-shadow .15s}
.ac-input::placeholder{color:#9a9bab}
.ac-input:focus{outline:none;border-color:var(--eq-navy2,#1A1A78);box-shadow:0 0 0 3px rgba(25,26,78,.12)}
.ac-list{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px;list-style:none;max-height:288px;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1.5px solid var(--eq-line,#ececf3);border-radius:11px;box-shadow:0 10px 28px rgba(25,26,78,.16)}
.ac-item{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:8px;cursor:pointer;font-size:14px;color:#4a4b5a;line-height:1.35}
.ac-item b{font-weight:700;color:var(--eq-navy2,#1A1A78)}
.ac-item:hover{background:#f4f4fa}
.ac-item.sel{background:var(--eq-navy2,#1A1A78);color:#fff}
.ac-item.sel b{color:#fff;text-decoration:underline}
.ac-item.sel .ac-run{color:rgba(255,255,255,.82)}
.ac-run{flex:0 0 auto;font-size:12px;color:#8a8b9a;font-variant-numeric:tabular-nums}
.ac-hint{margin:6px 2px 0;font-size:12px;color:#7a7b8a;min-height:15px}
.ac-hint:empty{margin:0;min-height:0}
.ac-chip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 11px 9px 14px;border-radius:11px;background:#f4f4fa;border:1.5px solid var(--eq-line,#ececf3)}
.ac-chip-nom{flex:1 1 auto;min-width:0;font-weight:600;font-size:15px;color:var(--eq-navy2,#1A1A78);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-chip .btn-mini{flex:0 0 auto}
.ac-chip.ac-fijo{background:#fff}
.ac-fallback{width:100%;box-sizing:border-box;padding:10px 12px;border:1.5px solid var(--eq-line,#ececf3);border-radius:11px;background:#fff;font-size:15px;color:var(--eq-ink,#2b2c3a)}
@media (max-width:640px){
  .ac-list{max-height:236px}
  .ac-chip-nom{white-space:normal}
}


/* CABECERA + PIE DEL HOME (v9) PARA TODA LA APLICACION */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
.home-v9{--fondo:#080B18;--panel:#0E1330;--panel2:#131A42;--azul:#1A1A78;--el:#3D4AE0;--marfil:#F4F4F0;--gris:#8B93B0;--texto-2:#A8B0CB;--am:#F5D63D;--rojo:#E32119;--tinta:#12142e;--linea:rgba(244,244,240,.09);background:var(--fondo);color:var(--marfil);font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased;position:relative;z-index:1}
.home-v9 *{box-sizing:border-box}
.home-v9 a{color:inherit;text-decoration:none;transition:color .18s}
.home-v9 a:hover{color:var(--am);text-decoration:none}
.home-v9 img{display:block;max-width:100%;height:auto}
.home-v9 ul{list-style:none;margin:0;padding:0}
.home-v9 p{margin:0 0 1em;color:var(--texto-2);line-height:1.65}
.home-v9 p:last-child{margin-bottom:0}
.home-v9 .w{max-width:1320px;margin:0 auto;padding:0 32px;width:100%}
.home-v9 .franjas{display:inline-flex;flex-direction:column;gap:3px;vertical-align:middle}
.home-v9 .franjas i{display:block;height:4px;width:44px;border-radius:2px}
.home-v9 .franjas i:nth-child(1){background:var(--am)}
.home-v9 .franjas i:nth-child(2){background:var(--rojo);width:32px}
.home-v9 .b{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:Inter,sans-serif;font-weight:700;font-size:14px;line-height:1.1;padding:13px 24px;min-height:44px;border-radius:12px;border:1px solid transparent;background:var(--panel2);color:var(--marfil);cursor:pointer;transition:.18s;white-space:nowrap}
.home-v9 .b:hover{background:#1a2358;color:var(--marfil)}
.home-v9 .b-am{background:var(--am);color:var(--tinta);border-color:var(--am)}
.home-v9 .b-am:hover{background:#FFE45C;color:var(--tinta)}
.home-v9 .b-gh{background:transparent;color:var(--marfil);border-color:rgba(244,244,240,.22)}
.home-v9 .b-gh:hover{background:rgba(244,244,240,.07);border-color:var(--marfil);color:var(--marfil)}
.home-v9 .b:focus-visible{outline:2px solid var(--am);outline-offset:3px}
.home-v9 .topbar{font-size:12px;color:var(--gris);border-bottom:1px solid var(--linea);padding:7px 0}
.home-v9 .topbar .w{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.home-v9 .topbar .avisos{display:flex;gap:22px;flex-wrap:wrap}
.home-v9 .topbar .avisos a{color:var(--gris);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.home-v9 .topbar .avisos a b{color:var(--marfil);font-weight:600}
.home-v9 .topbar .avisos a i{color:var(--am);font-size:11px}
.home-v9 .topbar .avisos a:hover,.home-v9 .topbar .avisos a:hover b{color:var(--am)}
.home-v9 .topbar .tsocial{display:flex;gap:14px}
.home-v9 .topbar .tsocial a{color:var(--gris)}
.home-v9 .topbar .tsocial a:hover{color:var(--am)}
.home-v9 .hd{border-bottom:1px solid var(--linea);background:var(--fondo)}
.home-v9 .hd-fila{display:flex;align-items:center;gap:22px;padding-top:13px;padding-bottom:13px;flex-wrap:wrap}
.home-v9 .marca{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.home-v9 .marca .insignia{width:46px;height:auto;flex:0 0 auto}
.home-v9 .marca .nom{display:flex;flex-direction:column;line-height:1.18}
.home-v9 .marca .nom b{font-family:'Space Grotesk',sans-serif;font-size:15.5px;font-weight:700;color:var(--marfil);white-space:nowrap}
.home-v9 .marca .nom span{font-size:10.5px;color:var(--gris);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.home-v9 a.marca:hover .nom b{color:var(--am)}
.home-v9 .navbox{display:flex;align-items:center;gap:20px;flex:1 1 auto;min-width:0}
.home-v9 .navbox nav{flex:1 1 auto;min-width:0}
.home-v9 .menu{display:flex;gap:18px;justify-content:center;font-size:13.5px;font-weight:600;flex-wrap:wrap}
.home-v9 .menu a{color:var(--gris);position:relative;padding:8px 0;white-space:nowrap;display:inline-block}
.home-v9 .menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--am);transition:.22s}
.home-v9 .menu a:hover{color:var(--marfil)}
.home-v9 .menu a:hover::after{width:100%}
.home-v9 .acciones{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.home-v9 .acciones .b{padding:10px 16px;font-size:13px;min-height:38px}
.home-v9 .burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:12px;border:1px solid rgba(244,244,240,.22);background:transparent;color:var(--marfil);font-size:17px;cursor:pointer;align-items:center;justify-content:center;transition:.18s}
.home-v9 .burger:hover{border-color:var(--am);color:var(--am)}
.home-v9 .burger:focus-visible{outline:2px solid var(--am);outline-offset:3px}
.home-v9 .pie{border-top:1px solid var(--linea);background:var(--panel);padding:58px 0 26px}
.home-v9 .pie-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:34px}
.home-v9 .pie h4{font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--marfil);margin:0 0 15px}
.home-v9 .pie-col ul{display:grid;gap:9px}
.home-v9 .pie-col li{font-size:14px;color:var(--texto-2);line-height:1.5}
.home-v9 .pie-col li i{color:var(--am);width:17px;text-align:center;margin-right:4px}
.home-v9 .pie-col a{color:var(--texto-2)}
.home-v9 .pie-col a:hover{color:var(--am)}
.home-v9 .pie-marca p{font-size:14px;margin:16px 0 14px;max-width:38ch}
.home-v9 .pie-social{display:flex;gap:10px;margin-top:18px}
.home-v9 .pie-social a{width:36px;height:36px;border-radius:10px;border:1px solid var(--linea);display:flex;align-items:center;justify-content:center;color:var(--marfil);font-size:14px;transition:.18s}
.home-v9 .pie-social a:hover{border-color:rgba(245,214,61,.5);color:var(--am)}
.home-v9 .pie-base{border-top:1px solid var(--linea);margin-top:42px;padding-top:20px;font-size:12.5px;color:var(--gris);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:1180px){.home-v9 .marca .nom span{display:none}}
@media (max-width:1024px){.home-v9 .pie-grid{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.home-v9 .burger{display:inline-flex}.home-v9 .navbox{display:none;flex-basis:100%;width:100%;flex-direction:column;align-items:stretch;gap:8px;padding:8px 0 16px}.home-v9 .navbox.abierto{display:flex}.home-v9 .menu{flex-direction:column;gap:0;justify-content:flex-start}.home-v9 .menu a{display:block;padding:11px 2px;font-size:15px}.home-v9 .menu a::after{display:none}.home-v9 .acciones{flex-direction:column;align-items:stretch;margin-top:6px}.home-v9 .acciones .b{width:100%;min-height:44px;font-size:14px}.home-v9 .marca .nom span{display:block}}
@media (max-width:768px){.home-v9 .w{padding:0 20px}.home-v9 .topbar .tsocial{display:none}.home-v9 .pie-grid{grid-template-columns:1fr}.home-v9 .pie{padding:44px 0 22px}}
/* Ajustes por cabecera ESTATICA (ya no hay menu superpuesto) */
body .eqp-wrap, body .adm-wrap{padding-top:36px}
body .eqp-wrap::before, body .adm-wrap::before{height:215px}
.eq-hero{min-height:300px;padding:64px 20px 52px}
.breadcrumb-section{height:auto;min-height:250px;padding:64px 0 52px}
.span-19{padding-top:0 !important}
body #content > .breadcrumb-section{margin-top:0}
@media (max-width:768px){.eq-hero{min-height:220px;padding:44px 16px 36px}body .eqp-wrap, body .adm-wrap{padding-top:22px}body .eqp-wrap::before, body .adm-wrap::before{height:185px}}

/* FIX autocompletado: el nombre resaltado fluye en linea; el RUN queda fijo a la derecha */
.ac-item{display:block;position:relative;padding-right:104px}
.ac-item .ac-run{position:absolute;right:11px;top:50%;transform:translateY(-50%)}
@media (max-width:640px){.ac-item{padding-right:11px}.ac-item .ac-run{position:static;transform:none;display:block;margin-top:2px}}

/* ============================================================
   PANEL ADMIN 22-08 (E.1/E.2/F.12): pestañas agrupadas por tema,
   bloque destacado (clave/link), notas y tablas del módulo Mensualidades.
   Solo variables --eq-* (sin hex nuevos).
   ============================================================ */
/* 22-08 (E.3): una fila por grupo, rotulo alineado a la izquierda.
   Antes los grupos flotaban en flex-wrap y los rotulos quedaban desalineados. */
body .adm-tabs.adm-tabs-grupos{display:block;gap:0;padding:4px 14px 10px}
body .adm-tabs .adm-grupo{
  display:grid;grid-template-columns:158px minmax(0,1fr);align-items:center;
  column-gap:14px;padding:9px 0;border-top:1px solid var(--eq-line,#ececf3);
}
body .adm-tabs .adm-grupo:first-child{border-top:0}
body .adm-tabs .adm-grupo-lbl{
  font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--eq-muted,#5a5f7a);padding:0;line-height:1.3;
}
body .adm-tabs .adm-grupo-tabs{display:flex;flex-wrap:wrap;gap:6px}
body .adm-tabs.adm-tabs-grupos a{
  padding:7px 13px;font-size:13.5px;background:#fff;color:var(--eq-navy2,#1A1A78);
  border:1px solid var(--eq-line,#ececf3);
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
body .adm-tabs.adm-tabs-grupos a:hover:not(.on){
  background:#f2f2f7;border-color:#d7d7e4;transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(25,26,78,.10);
}
body .adm-tabs.adm-tabs-grupos a.on{
  background:var(--eq-navy2,#1A1A78);border-color:var(--eq-navy2,#1A1A78);color:#fff;
  box-shadow:0 3px 10px rgba(26,26,120,.26);
}
@media (max-width:768px){
  body .adm-tabs.adm-tabs-grupos{padding:4px 10px 8px}
  body .adm-tabs .adm-grupo{grid-template-columns:minmax(0,1fr);row-gap:7px;padding:10px 0}
  body .adm-tabs .adm-grupo-tabs a{flex:1 1 auto;justify-content:center}
}
/* Tarjeta destacada: clave temporal / link de restablecimiento (Accesos) */
body .adm-card.adm-destacado{border:2px solid var(--eq-yellow,#F5D63D);background:var(--eq-bg,#f6f6fb);font-size:15px}
body .adm-destacado code{font-size:18px;font-weight:700;letter-spacing:1px;word-break:break-all;color:var(--eq-ink,#12142e)}
body .adm-nota{color:var(--eq-muted,#5a5f7a);font-size:13px;margin-top:6px}
/* Mensualidades: formularios compactos dentro de la tabla */
body .adm-tbl .adm-fila-form{display:flex;gap:5px;align-items:center;margin:0;flex-wrap:wrap}
body .adm-tbl .adm-fila-form select,body .adm-tbl .adm-fila-form input{min-height:34px;padding:5px 7px;border:1px solid var(--eq-line,#ececf3);border-radius:7px;font-size:13px}
body .adm-tbl .adm-fila-form input[type=number]{width:110px}
body .adm-tbl .adm-fila-form .adm-btn.sm{padding:6px 12px;font-size:13px}
body .adm-sub{font-size:12px;color:var(--eq-muted,#5a5f7a);display:block}
body .adm-num{font-variant-numeric:tabular-nums;white-space:nowrap}
body .adm-miembro{font-size:12px;color:var(--eq-muted,#5a5f7a);padding:2px 0 0 10px}
body .adm-hist div{font-size:13px;padding:3px 0;border-top:1px solid var(--eq-line,#ececf3)}
body .adm-hist div:first-of-type{border-top:0}
body .adm-sub-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
body .adm-sub-tabs a{padding:8px 14px;border-radius:9px;border:1px solid var(--eq-line,#ececf3);color:var(--eq-navy2,#1A1A78);text-decoration:none;font-weight:600;font-size:13px;background:#fff}
body .adm-sub-tabs a.on{background:var(--eq-navy2,#1A1A78);color:#fff;border-color:var(--eq-navy2,#1A1A78)}
body .adm-form-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
@media (max-width:768px){body .adm-form-grid{grid-template-columns:1fr}}