/*
 * Tokens de marca de Andes Profundo (colores, tipografías, botones, tarjetas).
 * Extraído del <style> embebido en la portada (public_html/index.php) para
 * poder reusarlo en el resto del sitio (inscripcion.php, portal, etc.).
 * Requiere las fuentes de Google Fonts que carga index.php:
 * Barlow Condensed, Fraunces, Inter.
 */

  :root{
    --bg-deep: #0b141e;      /* noche andina - azul profundo casi negro */
    --bg-panel: #10202f;     /* panel un poco más claro */
    --stone: #3d4d5c;        /* piedra/roca fría */
    --lake: #2f8fd6;         /* azul del logo */
    --lake-soft: #6ec6e8;    /* celeste del logo */
    --ember: #1c7fe0;        /* mismo azul, usado como acento de acción */
    --ember-soft: #4fa8ec;
    --parchment: #edf1f4;    /* blanco frío */
    --parchment-dim: #a3b3c2;
    --line: rgba(237,241,244,0.14);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg-deep);
    color:var(--parchment);
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
    color-scheme:dark;
  }
  h1,h2,h3{
    font-family:'Barlow Condensed', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.02em;
    font-weight:700;
    line-height:0.95;
  }
  .accent-serif{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:400;
    text-transform:none;
    letter-spacing:0;
  }
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

  /* topo lines - motivo de identidad: curvas de nivel */
  .topo-bg{
    position:absolute; inset:0; pointer-events:none; opacity:0.25;
  }

  /* NAV */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 32px;
    background:linear-gradient(to bottom, rgba(16,32,31,0.85), transparent);
  }
  .logo{
    font-family:'Barlow Condensed', sans-serif;
    font-weight:700; font-size:1.3rem; letter-spacing:0.08em;
    text-transform:uppercase;
    display:flex; align-items:center; gap:8px;
  }
  .logo img{height:26px; display:block;}
  .nav-links{display:flex; gap:34px; font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase; font-weight:500;}
  .nav-links a{opacity:0.85; transition:opacity 0.2s;}
  .nav-links a:hover{opacity:1; color:var(--lake-soft);}
  .nav-cta{
    background:var(--ember); color:var(--bg-deep); font-weight:600;
    padding:10px 22px; border-radius:2px; font-size:0.82rem;
    letter-spacing:0.06em; text-transform:uppercase;
    transition:background 0.2s;
  }
  .nav-cta:hover{background:var(--ember-soft);}
  .nav-actions{display:flex; align-items:center; gap:12px;}
  .nav-cta-secondary{
    background:transparent; color:var(--parchment); font-weight:600;
    padding:9px 21px; border:1px solid var(--parchment-dim); border-radius:2px; font-size:0.82rem;
    letter-spacing:0.06em; text-transform:uppercase;
    transition:border-color 0.2s, color 0.2s;
  }
  .nav-cta-secondary:hover{border-color:var(--lake-soft); color:var(--lake-soft);}
  @media (max-width:860px){ .nav-links{display:none;} }
  @media (max-width:480px){
    .nav-actions{gap:8px;}
    .nav-cta-secondary, .nav-cta{padding:8px 14px; font-size:0.72rem;}
  }

  /* HERO */
  .hero{
    position:relative; min-height:100vh;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding-bottom:90px;
    background:
      radial-gradient(ellipse 90% 60% at 50% 0%, rgba(79,167,156,0.18), transparent 60%),
      linear-gradient(180deg, #0c1a19 0%, #10201f 55%, #16302d 100%);
    overflow:hidden;
  }
  /* fondo de hero: foto real (reemplazar el <img> por <video> cuando el archivo de video esté disponible) */
  .hero-media{
    position:absolute; inset:0; z-index:0;
  }
  .hero-media picture{display:block; width:100%; height:100%;}
  .hero-media img, .hero-media video{
    width:100%; height:100%; object-fit:cover; object-position:center 30%;
  }
  .hero-media::after{
    content:''; position:absolute; inset:0;
    background:
      linear-gradient(0deg, var(--bg-deep) 2%, rgba(16,32,31,0.55) 40%, rgba(16,32,31,0.25) 65%, rgba(12,26,25,0.55) 100%);
  }
  .hero-content{position:relative; z-index:2;}
  .eyebrow{
    font-size:0.8rem; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--lake-soft); font-weight:600; margin-bottom:18px;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:''; width:28px; height:1px; background:var(--lake-soft);}
  .hero h1{
    font-size:clamp(3.6rem, 11vw, 8.5rem);
    color:var(--parchment);
  }
  .hero h1 em{
    display:block; color:transparent; -webkit-text-stroke:1.5px var(--parchment-dim);
    font-style:normal;
  }
  .hero-sub{
    margin-top:22px; max-width:520px; font-size:1.05rem;
    color:var(--parchment-dim); line-height:1.6;
  }
  .hero-meta{
    margin-top:44px; display:flex; gap:48px; flex-wrap:wrap;
    padding-top:28px; border-top:1px solid var(--line);
  }
  .hero-meta div{display:flex; flex-direction:column; gap:4px;}
  .hero-meta .label{font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--parchment-dim);}
  .hero-meta .value{font-family:'Barlow Condensed', sans-serif; font-size:1.4rem; font-weight:600;}
  .hero-cta{
    margin-top:36px; display:inline-flex; align-items:center; gap:14px;
    background:var(--ember); color:var(--bg-deep); font-weight:600;
    padding:16px 32px; font-size:0.9rem; letter-spacing:0.06em; text-transform:uppercase;
    border-radius:2px; transition:transform 0.2s, background 0.2s;
  }
  .hero-cta:hover{background:var(--ember-soft); transform:translateX(4px);}
  /* MOBILE: reforzar contraste del texto del hero contra la foto de fondo */
  @media (max-width:760px){
    /* el nav fijo (logo + Ingresar + Inscribirme) necesita más aire arriba del
       contenido del hero, que está anclado abajo (justify-content:flex-end) —
       si no, en pantallas angostas el eyebrow queda tapado por el nav. */
    .hero{min-height:calc(100vh + 60px);}
    .hero-media img{object-position:center 18%;}
    .hero-media::after{
      background:
        linear-gradient(0deg, var(--bg-deep) 14%, rgba(11,20,30,0.88) 44%, rgba(11,20,30,0.6) 68%, rgba(11,20,30,0.8) 100%);
    }
    .hero h1 em{
      color:var(--parchment); -webkit-text-stroke:0;
    }
    .eyebrow, .hero h1, .hero-sub, .hero-meta .value, .hero-meta .label{
      text-shadow:0 2px 18px rgba(0,0,0,0.6);
    }
  }

  /* SECTION generic */
  section{padding:120px 0; position:relative;}

  /* divisor faceteado — motivo de picos fracturados tomado del logo */
  .facet-divider{
    position:relative; height:64px; margin-top:-1px;
    background:var(--bg-panel);
  }
  .facet-divider svg{position:absolute; inset:0; width:100%; height:100%;}
  .section-head{max-width:640px; margin-bottom:64px;}
  .section-eyebrow{
    font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--ember-soft); font-weight:600; margin-bottom:16px;
  }
  .section-head h2{font-size:clamp(2.2rem,5vw,3.4rem); color:var(--parchment);}

  /* SOBRE */
  .about{background:var(--bg-panel);}
  .about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:70px; align-items:start;}
  .about p{font-size:1.05rem; line-height:1.75; color:var(--parchment-dim); margin-bottom:18px;}
  .about .lede{font-size:1.3rem; color:var(--parchment); font-family:'Fraunces',serif; font-style:italic; line-height:1.5; margin-bottom:26px;}
  .stat-list{display:flex; flex-direction:column; gap:26px; border-left:1px solid var(--line); padding-left:32px;}
  .stat-list .num{font-family:'Barlow Condensed',sans-serif; font-size:2.6rem; font-weight:700; color:var(--lake-soft); line-height:1;}
  .stat-list .desc{font-size:0.85rem; color:var(--parchment-dim); margin-top:6px;}
  @media (max-width:860px){ .about-grid{grid-template-columns:1fr;} }

  /* REGLAMENTO */
  .rules-intro{font-size:1.05rem; line-height:1.75; color:var(--parchment-dim); max-width:720px; margin-bottom:48px;}
  .rules-downloads{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line);}
  /* Texto a la izquierda y botón a la derecha, sin wrap: con flex-wrap el texto largo
     de la ficha médica empujaba su botón a otra línea y las dos filas quedaban distintas. */
  .rules-download{
    display:flex; align-items:center; justify-content:space-between; gap:32px;
    background:var(--bg-deep); padding:32px 36px;
  }
  .rd-text{flex:1; min-width:0;}
  .rd-text h4{font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.03em; font-size:1.3rem; font-weight:600; color:var(--parchment); margin-bottom:6px;}
  .rd-text p{font-size:0.92rem; color:var(--parchment-dim); line-height:1.5;}
  .rd-btn{margin:0; flex:0 0 220px; justify-content:center; white-space:nowrap;}
  @media (max-width:640px){
    .rules-download{flex-direction:column; align-items:stretch; gap:20px; padding:28px 24px;}
    .rd-btn{flex-basis:auto; width:100%;}
  }

  /* QUÉ INCLUYE LA INSCRIPCIÓN — sin padding inferior porque la sigue #circuitos,
     con el mismo fondo, y su padding superior ya da la separación */
  .incluye-section{padding-bottom:0;}
  .incluye-grid{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:16px;
  }
  /* Tarjetas de igual altura: grid-auto-rows:1fr iguala todas las filas a la más alta */
  .incluye-item{
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:18px;
    background:var(--bg-deep); border:1px solid var(--line); border-radius:2px; padding:32px 24px;
    text-align:center;
    font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.03em;
    font-size:1.15rem; font-weight:600; line-height:1.3; color:var(--parchment);
    transition:border-color 0.25s;
  }
  .incluye-item:hover{border-color:rgba(110,198,232,0.45);}
  /* Tamaño, fill y stroke también van como atributos en cada <svg> (width/height 40,
     stroke="currentColor"): si este CSS no carga, los íconos no se ven gigantes ni negros. */
  .incluye-icon{width:40px; height:40px; flex-shrink:0; color:var(--lake-soft);}
  @media (max-width:860px){ .incluye-grid{grid-template-columns:repeat(2,1fr); gap:12px;} }
  @media (max-width:480px){
    .incluye-item{padding:24px 12px; gap:14px; font-size:1rem;}
    .incluye-icon{width:36px; height:36px;}
  }

  /* DISTANCIAS */
  .distances-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  .dist-card{
    background:var(--bg-deep); padding:44px 36px; position:relative;
    transition:background 0.25s;
  }
  .dist-card:hover{background:#122624;}
  .dist-card .dist-num{
    font-family:'Barlow Condensed',sans-serif; font-size:0.85rem;
    letter-spacing:0.14em; color:var(--parchment-dim); text-transform:uppercase;
  }
  .dist-card h3{font-size:3.6rem; color:var(--parchment); margin:14px 0 6px;}
  .dist-card h3 span{font-size:1.4rem; color:var(--lake-soft); font-family:'Barlow Condensed',sans-serif;}
  .dist-tagline{font-family:'Fraunces',serif; font-style:italic; font-size:1.1rem; color:var(--lake-soft); margin-bottom:12px;}
  .dist-desc{font-size:0.9rem; line-height:1.65; color:var(--parchment-dim); margin-bottom:24px;}
  /* mini perfil de elevación en SVG, distinto por distancia */
  .elev-profile{width:100%; height:52px; margin:18px 0 22px;}
  .elev-profile path{fill:none; stroke:var(--ember-soft); stroke-width:2;}
  .elev-profile .fill{fill:rgba(212,118,47,0.12); stroke:none;}
  .dist-meta{display:flex; flex-direction:column; gap:9px; font-size:0.88rem; color:var(--parchment-dim); margin-bottom:24px;}
  .dist-meta strong{color:var(--parchment); font-weight:500;}
  .dist-price{
    font-family:'Barlow Condensed',sans-serif; font-size:1.5rem; font-weight:600;
    color:var(--lake-soft); margin-bottom:20px;
  }
  .dist-price .until{display:block; font-family:'Inter',sans-serif; font-size:0.72rem; font-weight:400; color:var(--parchment-dim); text-transform:none; letter-spacing:0; margin-top:4px;}
  .dist-link{
    display:inline-flex; align-items:center; gap:8px;
    font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase; font-weight:600;
    color:var(--parchment); border-bottom:1px solid var(--ember-soft); padding-bottom:3px;
  }
  .dist-links{display:flex; flex-direction:column; align-items:flex-start; gap:14px;}
  .dist-link-cta{color:var(--lake-soft); border-bottom-color:var(--lake-soft);}
  @media (max-width:860px){ .distances-grid{grid-template-columns:1fr;} }
  .group-discount{
    margin-top:36px; padding:28px 36px; display:flex; align-items:center; justify-content:space-between;
    gap:24px; flex-wrap:wrap; background:var(--bg-panel); border:1px solid var(--line);
  }
  .group-discount p{font-size:0.95rem; color:var(--parchment-dim); margin:0;}
  @media (max-width:640px){ .group-discount{flex-direction:column; align-items:flex-start;} }

  /* RECORRIDO */
  .route-section{background:var(--bg-panel);}
  .route-tabs{display:flex; gap:10px; margin-bottom:44px;}
  .route-tab{
    padding:10px 22px; font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase;
    font-weight:600; border:1px solid var(--line); border-radius:2px; cursor:pointer;
    transition:background 0.2s, border-color 0.2s;
  }
  .route-tab:hover{border-color:var(--lake-soft);}
  .route-tab.active{background:var(--lake); border-color:var(--lake); color:var(--bg-deep);}
  .route-tab.soon{color:var(--parchment-dim); font-style:italic; text-transform:none; letter-spacing:0; font-weight:400;}
  .route-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
  .route-stats{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:36px;}
  .route-stats .stat{border-top:1px solid var(--line); padding-top:14px;}
  .route-stats .stat .v{font-family:'Barlow Condensed',sans-serif; font-size:2.1rem; font-weight:700; color:var(--parchment);}
  .route-stats .stat .l{font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--parchment-dim); margin-top:2px;}
  .route-shape-wrap{background:var(--bg-deep); border:1px solid var(--line); padding:24px;}
  .route-shape-wrap svg{width:100%; height:auto; display:block;}
  .elev-chart-wrap{margin-top:20px; background:var(--bg-deep); border:1px solid var(--line); padding:28px 24px 16px;}
  .elev-chart-wrap svg{width:100%; height:auto; display:block;}
  .elev-chart-wrap .axis-label{font-family:'Inter',sans-serif; font-size:11px; fill:var(--parchment-dim);}
  @media (max-width:860px){ .route-grid{grid-template-columns:1fr;} }

  .gallery{background:var(--bg-panel);}
  .gallery-grid{
    display:grid; grid-template-columns:1.4fr 1fr 1fr; grid-template-rows:220px 220px; gap:14px;
  }
  .gallery-grid .g1{grid-row:span 2;}
  .g-item{
    position:relative; border-radius:2px; overflow:hidden;
    background:#10201f;
  }
  .g-item img{
    width:100%; height:100%; object-fit:cover;
    transition:transform 0.5s ease;
  }
  .g-item:hover img{ transform:scale(1.05); }
  @media (max-width:860px){ .gallery-grid{grid-template-columns:1fr 1fr; grid-template-rows:160px 160px 160px;} .gallery-grid .g1{grid-row:span 1;} }

  /* FAQ */
  .faq-list{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); max-width:840px;}
  .faq-item{background:var(--bg-deep);}
  .faq-item summary{
    list-style:none; cursor:pointer; padding:28px 36px;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.02em;
    font-size:1.1rem; font-weight:600; color:var(--parchment);
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:'+'; font-size:1.7rem; line-height:1; font-weight:400; color:var(--lake-soft);
    flex-shrink:0; transition:transform 0.25s;
  }
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item summary:hover{color:var(--lake-soft);}
  .faq-answer{padding:0 36px 30px; max-width:680px;}
  .faq-answer p{font-size:0.95rem; line-height:1.75; color:var(--parchment-dim); margin-bottom:14px;}
  .faq-answer p:last-child{margin-bottom:0;}
  .faq-answer ul{padding-left:20px; margin-bottom:14px;}
  .faq-answer li{font-size:0.95rem; line-height:1.7; color:var(--parchment-dim); margin-bottom:8px;}
  @media (max-width:640px){ .faq-item summary{padding:22px 24px; font-size:1rem;} .faq-answer{padding:0 24px 26px;} }

  /* CIERRE / CTA */
  .closing{
    position:relative; text-align:center; padding:150px 0; overflow:hidden;
  }
  .closing-media{ position:absolute; inset:0; z-index:0; }
  .closing-media img{ width:100%; height:100%; object-fit:cover; object-position:center 25%; }
  .closing-media::after{
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(ellipse 70% 60% at 50% 100%, rgba(79,167,156,0.15), transparent 65%),
      linear-gradient(0deg, var(--bg-deep) 10%, rgba(16,32,31,0.75) 45%, rgba(16,32,31,0.75) 100%);
  }
  .closing .wrap{ position:relative; z-index:1; }
  .closing .eyebrow{justify-content:center;}
  .closing .eyebrow::before{display:none;}
  .closing h2{font-size:clamp(2.4rem,7vw,5rem); max-width:820px; margin:0 auto 36px;}

  /* FOOTER */
  footer{background:var(--bg-panel); padding:70px 0 34px; border-top:1px solid var(--line);}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:50px; margin-bottom:60px;}
  footer h4{font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--parchment-dim); margin-bottom:18px; font-family:'Inter',sans-serif; font-weight:600;}
  footer .foot-links{display:flex; flex-direction:column; gap:11px; font-size:0.92rem;}
  footer .foot-links a:hover{color:var(--lake-soft);}
  .foot-bottom{
    display:flex; justify-content:space-between; padding-top:26px; border-top:1px solid var(--line);
    font-size:0.78rem; color:var(--parchment-dim); flex-wrap:wrap; gap:12px;
  }
  @media (max-width:860px){ .footer-grid{grid-template-columns:1fr;} }

  /* ===================================================================
   * Formularios y portal del corredor
   * (inscripcion.php, gracias.php, acceso.php, mi-cuenta.php)
   * Mismos tokens/tipografías/botones que la portada, aplicados a
   * páginas de una sola columna en vez de secciones a pantalla completa.
   * =================================================================== */

  :root{
    --danger: #ff6b6b;
    --danger-bg: rgba(255,107,107,0.12);
  }

  /* header de marca minimalista (solo isologo, enlaza a la portada) */
  .app-nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center;
    padding:22px 32px;
    background:linear-gradient(to bottom, rgba(11,20,30,0.9), transparent);
  }

  .contenedor{
    max-width:640px; margin:0 auto;
    padding:150px 32px 100px;
  }
  .contenedor > h1{ margin-bottom:14px; }
  .contenedor > p{ color:var(--parchment-dim); line-height:1.6; font-size:1.02rem; }
  .contenedor > h2{ margin-top:36px; margin-bottom:10px; font-size:1.5rem; }
  .contenedor > p a{ color:var(--lake-soft); text-decoration:underline; text-underline-offset:2px; }
  .contenedor > p a:hover{ color:var(--ember-soft); }

  fieldset{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:2px;
    padding:32px 28px; margin-top:28px;
  }
  legend{
    font-family:'Barlow Condensed', sans-serif; text-transform:uppercase; letter-spacing:0.03em;
    font-size:1.2rem; font-weight:600; color:var(--parchment); padding:0 4px;
  }
  label{
    display:block; margin-top:20px;
    font-family:'Barlow Condensed', sans-serif; font-size:0.78rem; letter-spacing:0.08em;
    text-transform:uppercase; font-weight:600; color:var(--parchment-dim);
  }
  input[type="text"],
  input[type="email"],
  input[type="date"],
  input[type="password"],
  input[type="number"],
  select{
    display:block; width:100%; margin-top:8px;
    padding:12px 14px;
    background:rgba(237,241,244,0.04); border:1px solid var(--line); border-radius:2px;
    color:var(--parchment); font-family:'Inter', sans-serif; font-size:1rem;
    transition:border-color 0.2s, background 0.2s;
  }
  input[type="date"]{ color-scheme:dark; }
  select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    padding-right:40px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236ec6e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 7 10 13 15 7'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  }
  /* La lista desplegable de un <select> nativo la pinta el sistema operativo,
     no el CSS del <select> en sí — sin esto, las <option> se ven con fondo
     blanco del navegador al abrir el dropdown, aunque el select cerrado ya
     esté oscuro. `background-color` (sólido, no rgba) y `color` en <option>
     es lo único que la mayoría de los navegadores de escritorio respeta para
     esto (no es 100% consistente entre navegadores, pero cubre Chrome/Edge/
     Firefox, que es lo que usa el panel admin). */
  select option{
    background-color:var(--bg-panel); color:var(--parchment);
  }
  input:focus, select:focus{
    outline:none; border-color:var(--lake-soft); background-color:rgba(237,241,244,0.07);
  }
  input[type="radio"], input[type="checkbox"]{ width:19px; height:19px; accent-color:var(--ember); }

  .opcion-radio, .opcion-check{
    display:flex; align-items:center; gap:10px; margin-top:14px;
    font-family:'Inter', sans-serif; font-size:0.95rem; font-weight:400;
    text-transform:none; letter-spacing:0; color:var(--parchment);
  }
  .opcion-radio input, .opcion-check input{ margin-top:0; }

  /* Checkbox de consentimiento: texto largo (con links) que puede pasar a dos
     líneas, así que se alinea arriba en vez de centrado. */
  .opcion-check{ align-items:flex-start; }
  .opcion-check a{ color:var(--lake-soft); text-decoration:underline; text-underline-offset:2px; }
  .opcion-check a:hover{ color:var(--ember-soft); }

  .check-box{ position:relative; flex-shrink:0; width:22px; height:22px; margin-top:1px; }
  .check-box input[type="checkbox"]{
    position:absolute; inset:0; width:100%; height:100%; margin:0;
    opacity:0; cursor:pointer;
  }
  .check-custom{
    position:absolute; inset:0; pointer-events:none;
    border:2px solid var(--parchment-dim); border-radius:3px;
    background:rgba(237,241,244,0.04);
    transition:border-color 0.2s, background 0.2s;
  }
  .check-box input:checked + .check-custom{ background:var(--ember); border-color:var(--ember); }
  .check-box input:checked + .check-custom::after{
    content:''; position:absolute; left:6px; top:2px;
    width:6px; height:11px;
    border:solid var(--bg-deep); border-width:0 2px 2px 0;
    transform:rotate(45deg);
  }
  .check-box input:focus-visible + .check-custom{ outline:2px solid var(--lake-soft); outline-offset:2px; }

  /* Selector de distancia como mini-tarjetas, en línea con .dist-card de la portada
     en vez de un <select> genérico. */
  .distancia-opciones{ display:flex; gap:12px; margin-top:10px; }
  .distancia-opcion{
    position:relative; flex:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    padding:20px 8px; border:1px solid var(--line); border-radius:2px;
    background:rgba(237,241,244,0.02); cursor:pointer;
    transition:border-color 0.2s, background 0.2s;
  }
  .distancia-opcion:hover{ border-color:var(--lake-soft); }
  .distancia-opcion input{
    position:absolute; inset:0; margin:0; width:100%; height:100%;
    opacity:0; cursor:pointer;
  }
  .distancia-opcion:has(input:checked){
    border-color:var(--ember); background:rgba(28,127,224,0.14);
  }
  .distancia-opcion:has(input:focus-visible){ outline:2px solid var(--lake-soft); outline-offset:2px; }
  .distancia-opcion__numero{
    font-family:'Barlow Condensed', sans-serif; font-size:1.6rem; font-weight:700;
    color:var(--parchment); letter-spacing:0.02em; pointer-events:none;
  }
  .distancia-opcion__precio{
    font-family:'Inter', sans-serif; font-size:0.8rem; font-weight:500;
    color:var(--parchment-dim); pointer-events:none;
  }
  .distancia-opcion:has(input:checked) .distancia-opcion__precio{ color:var(--lake-soft); }
  @media (max-width:480px){
    .distancia-opciones{ gap:8px; }
    .distancia-opcion{ padding:16px 6px; }
    .distancia-opcion__numero{ font-size:1.3rem; }
    .distancia-opcion__precio{ font-size:0.72rem; }
  }

  /* Resumen dinámico de pago (JS, según distancia + forma de pago elegidas) */
  .resumen-pago{
    margin-top:20px; padding:18px 22px;
    background:rgba(28,127,224,0.08); border:1px solid var(--line); border-radius:2px;
  }
  .resumen-pago__monto{
    font-family:'Barlow Condensed', sans-serif; font-size:1.3rem; font-weight:600;
    color:var(--parchment); text-transform:none; letter-spacing:0;
  }
  .resumen-pago .nota-ayuda{ margin-top:8px; }

  /* Acordeón "¿Cómo funcionan las cuotas?" — mismo patrón visual que .faq-item de la portada */
  .acordeon-cuotas{ margin-top:14px; }
  .acordeon-cuotas summary{
    list-style:none; cursor:pointer;
    font-family:'Inter', sans-serif; font-size:0.88rem; font-weight:600;
    color:var(--lake-soft); display:flex; align-items:center; gap:8px;
  }
  .acordeon-cuotas summary::-webkit-details-marker{ display:none; }
  .acordeon-cuotas summary::after{
    content:'+'; font-size:1.2rem; line-height:1; font-weight:400; transition:transform 0.2s;
  }
  .acordeon-cuotas[open] summary::after{ transform:rotate(45deg); }
  .acordeon-cuotas summary:hover{ color:var(--ember-soft); }
  .acordeon-cuotas__contenido{ padding:12px 2px 0; }
  .acordeon-cuotas__contenido p{ font-size:0.85rem; line-height:1.6; color:var(--parchment-dim); margin-top:8px; }
  .acordeon-cuotas__contenido p:first-child{ margin-top:0; }

  button[type="submit"]{
    margin-top:32px; display:inline-flex; align-items:center; gap:10px;
    background:var(--ember); color:var(--bg-deep); font-weight:600;
    border:none; padding:16px 32px; font-size:0.9rem; font-family:'Inter', sans-serif;
    letter-spacing:0.06em; text-transform:uppercase; border-radius:2px; cursor:pointer;
    transition:background 0.2s;
  }
  button[type="submit"]:hover{ background:var(--ember-soft); }

  .error{
    color:var(--danger); font-size:0.82rem; margin-top:6px; font-family:'Inter', sans-serif;
  }

  .alerta{
    padding:18px 22px; border-radius:2px; margin-bottom:28px;
    background:var(--bg-panel); border:1px solid var(--line);
    color:var(--parchment-dim); font-size:0.95rem; line-height:1.6;
  }
  .alerta-error{
    background:var(--danger-bg); border-color:rgba(255,107,107,0.35); color:var(--danger);
  }

  .caja-pago{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:2px;
    padding:32px 28px; margin-top:28px;
  }
  .caja-pago h2{ margin-bottom:18px; font-size:1.6rem; }
  .caja-pago p{ color:var(--parchment-dim); line-height:1.6; margin-top:10px; }
  .caja-pago p strong{ color:var(--parchment); }
  .caja-pago a{ color:var(--lake-soft); text-decoration:underline; text-underline-offset:2px; }
  .caja-pago a:hover{ color:var(--ember-soft); }

  /* Categoría provisional del corredor (mi-cuenta.php) */
  .categoria-nombre{
    font-family:'Barlow Condensed', sans-serif; text-transform:uppercase; letter-spacing:0.02em;
    font-size:1.8rem; font-weight:700; color:var(--lake-soft); margin-top:0;
  }
  .categoria-provisional .nota-ayuda{ margin-top:12px; }

  .tabla-transferencia{ width:100%; border-collapse:collapse; margin-top:16px; }
  .tabla-transferencia td{
    padding:10px 0; border-bottom:1px solid var(--line);
    font-family:'Inter', sans-serif; color:var(--parchment); font-size:0.92rem;
  }
  .tabla-transferencia td:first-child{
    font-family:'Barlow Condensed', sans-serif; text-transform:uppercase; letter-spacing:0.06em;
    font-size:0.76rem; font-weight:600; color:var(--parchment-dim); width:38%;
  }

  /* Portal del corredor */

  .boton-enlace{ display:inline-block; color:var(--lake-soft); font-weight:600; }

  button[type="submit"].boton-secundario{
    background:transparent; color:var(--parchment); border:1px solid var(--line);
    padding:10px 20px; font-family:'Inter', sans-serif; font-size:0.85rem;
    text-transform:none; letter-spacing:normal; margin-top:0;
    border-radius:2px; cursor:pointer; white-space:nowrap;
    transition:border-color 0.2s, color 0.2s;
  }
  button[type="submit"].boton-secundario:hover{
    background:transparent; border-color:var(--lake-soft); color:var(--lake-soft);
  }

  .header-portal{
    display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
    gap:16px; margin-bottom:36px; padding-bottom:24px; border-bottom:1px solid var(--line);
  }
  .header-portal h1{ margin:0; font-size:1.7rem; }

  .tarjeta-cuota{
    border:1px solid var(--line); background:var(--bg-panel); border-radius:2px;
    padding:24px 28px; margin-top:20px;
  }
  .tarjeta-cuota--vencida{
    border-color:var(--danger); background:rgba(255,107,107,0.05);
  }
  .tarjeta-cuota__header{
    display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px;
  }
  .tarjeta-cuota__header strong{
    font-family:'Barlow Condensed', sans-serif; text-transform:uppercase; letter-spacing:0.04em;
    font-size:1.15rem; font-weight:600; color:var(--parchment);
  }

  .estado-cuota{
    display:inline-block; padding:5px 14px; border-radius:999px;
    font-family:'Inter', sans-serif; font-size:0.75rem; font-weight:600; letter-spacing:0.02em;
    background:rgba(237,241,244,0.08); color:var(--parchment-dim);
  }
  .estado-cuota--pagada{ background:rgba(110,198,232,0.14); color:var(--lake-soft); }
  .estado-cuota--vencida{ background:var(--danger-bg); color:var(--danger); }
  .estado-cuota--link_generado{ background:rgba(28,127,224,0.18); color:var(--ember-soft); }
  .estado-cuota--comprobante_subido{ background:rgba(110,198,232,0.1); color:var(--lake-soft); }

  .monto-cuota{
    font-family:'Barlow Condensed', sans-serif; font-size:2rem; font-weight:700;
    color:var(--parchment); margin-top:12px;
  }
  .recargo-aviso{ color:var(--danger); font-weight:600; margin-top:6px; font-size:0.9rem; }
  .vencimiento-cuota{ color:var(--parchment-dim); margin-top:6px; font-size:0.88rem; }

  .datos-pago-cuota{
    background:var(--bg-deep); border:1px solid var(--line); border-radius:2px;
    padding:20px; margin-top:20px;
  }
  .datos-pago-cuota > p:first-child{
    font-family:'Barlow Condensed', sans-serif; text-transform:uppercase; letter-spacing:0.04em;
    font-size:0.85rem; color:var(--parchment-dim); font-weight:600;
  }
  .nota-comprobante{ font-size:0.82rem; color:var(--parchment-dim); margin-top:12px; line-height:1.5; }

  .form-comprobante{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
  .form-comprobante label{ margin-top:0; }
  input[type="file"]{
    display:block; width:100%; margin-top:8px;
    padding:10px 12px;
    background:rgba(237,241,244,0.04); border:1px solid var(--line); border-radius:2px;
    color:var(--parchment-dim); font-family:'Inter', sans-serif; font-size:0.85rem;
  }
  .form-comprobante button[type="submit"]{ margin-top:14px; padding:10px 22px; font-size:0.85rem; }

  /* Foto de perfil (opcional, mi-cuenta.php y admin/inscripcion.php) */
  .foto-perfil{
    display:block; width:140px; height:140px; object-fit:cover;
    border-radius:4px; border:1px solid var(--line); margin-top:12px;
  }
  .foto-perfil-admin{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
  .foto-perfil-admin .foto-perfil{ margin-top:0; width:84px; height:84px; }

  /* Texto secundario liviano para aclaraciones cortas junto a un campo (p.ej. cómo
     funciona el acceso sin contraseña) — mismo tratamiento que .nota-comprobante. */
  .nota-ayuda{ font-size:0.82rem; color:var(--parchment-dim); line-height:1.5; margin-top:6px; }
  .nota-ayuda a{ color:var(--lake-soft); text-decoration:underline; text-underline-offset:2px; }
  .nota-ayuda a:hover{ color:var(--ember-soft); }

  /* Código de descuento (grupos de entrenamiento) */
  .descuento-aplicado{ color:var(--lake-soft); font-weight:600; }
  p.descuento-aplicado{ margin-top:8px; }

  @media (max-width:480px){
    .contenedor{ padding:130px 20px 70px; }
    fieldset{ padding:24px 20px; }
    .monto-cuota{ font-size:1.6rem; }
  }

  /* ===================================================================
   * Panel admin (public_html/admin/*)
   * Mismos tokens/tipografías/componentes que el resto del sitio, pero en
   * un layout más ancho (tablas de datos) en vez de una sola columna
   * centrada. Pensado primero para desktop (lo usan admin/organizador),
   * sin romperse en mobile.
   * =================================================================== */

  .admin-nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex:1; }
  .admin-nav-links{
    display:flex; align-items:center; gap:28px;
    font-family:'Barlow Condensed', sans-serif; font-size:0.85rem; letter-spacing:0.06em;
    text-transform:uppercase; font-weight:600;
  }
  .admin-nav-links a{ color:var(--parchment-dim); transition:color 0.2s; }
  .admin-nav-links a:hover{ color:var(--lake-soft); }
  .admin-nav-links a.activo{ color:var(--lake-soft); }
  @media (max-width:640px){ .admin-nav-links{ gap:14px; font-size:0.72rem; } }

  .panel-admin{ max-width:1200px; margin:0 auto; padding:150px 32px 100px; }
  .panel-admin-header{
    display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
    gap:16px; margin-bottom:8px;
  }
  .panel-admin-header h1{ font-size:2rem; }

  .boton-volver{
    display:inline-flex; align-items:center; gap:8px; color:var(--lake-soft);
    font-family:'Barlow Condensed', sans-serif; text-transform:uppercase; letter-spacing:0.04em;
    font-size:0.85rem; font-weight:600; margin-bottom:24px;
  }
  .boton-volver:hover{ color:var(--ember-soft); }

  /* Tarjetas resumen (contadores) */
  .admin-stats{ display:flex; gap:20px; flex-wrap:wrap; margin:28px 0 8px; }
  .admin-stat-card{
    flex:1; min-width:240px; background:var(--bg-panel); border:1px solid var(--line);
    border-radius:2px; padding:24px 28px;
  }
  .admin-stat-card .num{
    font-family:'Barlow Condensed', sans-serif; font-size:2.6rem; font-weight:700;
    color:var(--lake-soft); line-height:1;
  }
  .admin-stat-card .label{
    font-size:0.8rem; color:var(--parchment-dim); margin-top:8px;
    text-transform:uppercase; letter-spacing:0.05em;
  }
  .admin-stat-card--alerta{ border-color:var(--danger); }
  .admin-stat-card--alerta .num{ color:var(--danger); }

  /* Filtros */
  .filtros-admin{
    display:flex; gap:20px; flex-wrap:wrap; align-items:end;
    background:var(--bg-panel); border:1px solid var(--line); border-radius:2px;
    padding:24px 28px; margin-top:28px;
  }
  .filtros-admin > div{ flex:1; min-width:170px; }
  .filtros-admin label{ margin-top:0; }
  .filtros-admin button[type="submit"]{ margin-top:8px; }

  /* Tabla de datos */
  .tabla-admin-wrap{ overflow-x:auto; margin-top:28px; }
  .tabla-admin{ width:100%; border-collapse:collapse; font-size:0.86rem; min-width:760px; }
  .tabla-admin th{
    text-align:left; padding:12px 16px; white-space:nowrap;
    font-family:'Barlow Condensed', sans-serif; text-transform:uppercase; letter-spacing:0.04em;
    font-size:0.74rem; font-weight:600; color:var(--parchment-dim);
    background:var(--bg-panel); border-bottom:1px solid var(--line);
  }
  .tabla-admin td{
    padding:12px 16px; border-bottom:1px solid var(--line); color:var(--parchment);
    vertical-align:middle;
  }
  .tabla-admin tbody tr:hover{ background:rgba(237,241,244,0.03); }
  .tabla-admin a{ color:var(--lake-soft); font-weight:600; }
  .tabla-admin a:hover{ color:var(--ember-soft); }
  .link-comprobante-listado{ display:block; white-space:nowrap; font-size:0.82rem; }
  .link-comprobante-listado + .link-comprobante-listado{ margin-top:4px; }

  /* Estadísticas (admin/estadisticas.php) */
  .stats-header{
    display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;
    gap:16px; margin-top:8px;
  }
  .stats-generado{ color:var(--parchment-dim); font-size:0.82rem; margin-top:6px; }
  .stats-acciones{ display:flex; gap:12px; flex-wrap:wrap; }
  .stats-acciones button.nav-cta-secondary{
    font-family:'Barlow Condensed', sans-serif; cursor:pointer;
  }

  .stats-destacadas{ display:flex; gap:20px; flex-wrap:wrap; margin:28px 0; }
  .stat-card-grande{
    flex:1; min-width:260px; background:var(--bg-panel); border:1px solid var(--line);
    border-radius:2px; padding:28px 32px;
  }
  .stat-card-grande__label{
    font-family:'Barlow Condensed', sans-serif; text-transform:uppercase; letter-spacing:0.06em;
    font-size:0.85rem; color:var(--parchment-dim); font-weight:600;
  }
  .stat-card-grande__valor{
    font-family:'Barlow Condensed', sans-serif; font-size:2.6rem; font-weight:700;
    color:var(--lake-soft); line-height:1.1; margin-top:8px;
  }
  .stat-card-grande__nota{ font-size:0.8rem; color:var(--parchment-dim); margin-top:8px; }

  .stats-graficos{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:24px;
    margin-top:8px;
  }
  .stats-grafico{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:2px;
    padding:24px 28px;
  }
  .stats-grafico h2{ font-size:1.05rem; margin-bottom:16px; }

  .barra-fila{ display:flex; align-items:center; gap:12px; margin-top:12px; }
  .barra-fila:first-child{ margin-top:0; }
  .barra-label{
    width:130px; flex-shrink:0; font-size:0.85rem; color:var(--parchment);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .barra-track{
    flex:1; height:14px; background:rgba(237,241,244,0.08); border-radius:2px; overflow:hidden;
  }
  .barra-fill{
    height:100%; background:linear-gradient(90deg, var(--lake), var(--lake-soft)); border-radius:2px;
  }
  .barra-valor{
    width:34px; flex-shrink:0; text-align:right; font-size:0.85rem; font-weight:600;
    color:var(--parchment);
  }

  .stats-descuentos{ margin-top:28px; font-size:0.9rem; color:var(--parchment); }

  @media (max-width:640px){
    .barra-label{ width:88px; font-size:0.78rem; }
  }

  /* Vista de impresión de Estadísticas: fondo blanco, texto negro, sin nav ni botones,
     todo compacto para entrar en la menor cantidad de páginas posible. */
  @media print{
    .app-nav, .no-imprimir{ display:none !important; }
    body{ background:#fff !important; }
    .panel-admin{
      max-width:100% !important; margin:0 !important; padding:10px 16px !important;
    }
    h1, h2{ color:#000 !important; }
    .stats-generado, .stats-descuentos, .nota-ayuda,
    .stat-card-grande__label, .stat-card-grande__nota, .barra-label, .barra-valor{
      color:#000 !important;
    }
    .stat-card-grande__valor{ color:#000 !important; }
    .stat-card-grande, .stats-grafico{
      background:#fff !important; border:1px solid #999 !important; box-shadow:none !important;
      break-inside:avoid; page-break-inside:avoid;
    }
    .stats-destacadas{ gap:10px !important; margin:14px 0 !important; }
    .stats-graficos{ grid-template-columns:1fr 1fr !important; gap:10px !important; }
    .barra-track{ background:#e6e6e6 !important; }
    .barra-fill{ background:#333 !important; }
  }

  /* Badges de estado — mismo lenguaje visual que .estado-cuota del portal
     del corredor, pero para estados de inscripción/código. */
  .badge{
    display:inline-block; padding:5px 14px; border-radius:999px; white-space:nowrap;
    font-family:'Inter', sans-serif; font-size:0.75rem; font-weight:600; letter-spacing:0.02em;
    background:rgba(237,241,244,0.08); color:var(--parchment-dim);
  }
  .badge--confirmada, .badge--activo{ background:rgba(110,198,232,0.14); color:var(--lake-soft); }
  .badge--cancelada, .badge--no_confirmada, .badge--riesgo, .badge--inactivo{
    background:var(--danger-bg); color:var(--danger);
  }
  .badge--pendiente_pago{ background:rgba(237,241,244,0.08); color:var(--parchment-dim); }

  /* Secciones de la vista de detalle de una inscripción */
  .admin-secciones{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:28px; }
  .admin-seccion{ background:var(--bg-panel); border:1px solid var(--line); border-radius:2px; padding:28px; }
  .admin-seccion h2{ font-size:1.3rem; margin-bottom:16px; }
  @media (max-width:860px){ .admin-secciones{ grid-template-columns:1fr; } }

  .acciones-cuota{
    display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:18px;
    padding-top:18px; border-top:1px solid var(--line);
  }
  .acciones-cuota form{ display:flex; gap:8px; align-items:center; }
  .acciones-cuota input[type="text"]{ margin-top:0; width:220px; padding:9px 12px; font-size:0.85rem; }
  .acciones-cuota button[type="submit"]{ margin-top:0; padding:10px 20px; font-size:0.8rem; }
  .cuota-nota{ color:var(--parchment-dim); font-size:0.85rem; margin-top:10px; }
  .cuota-nota a{ color:var(--lake-soft); font-weight:600; }
  .cuota-nota strong{ color:var(--parchment); }

  /* Botones secundarios / de peligro dentro del admin */
  button[type="submit"].boton-chico{ margin-top:0; padding:8px 18px; font-size:0.78rem; }
  button[type="submit"].boton-peligro{
    background:transparent; color:var(--danger); border:1px solid var(--danger);
  }
  button[type="submit"].boton-peligro:hover{ background:var(--danger-bg); color:var(--danger); }

  /* "Zona de peligro": eliminar un corredor completo (irreversible, distinto de
     cancelar_inscripcion que preserva el historial). Separada del resto de las
     acciones con su propio borde/fondo para que no se confunda con ellas. */
  .zona-peligro{
    margin-top:32px; padding:24px 28px; border:1px solid rgba(255,107,107,0.4);
    border-radius:2px; background:var(--danger-bg);
  }
  .zona-peligro h2{ color:var(--danger); font-size:1.1rem; margin-bottom:10px; }
  .zona-peligro p{ color:var(--parchment-dim); font-size:0.88rem; line-height:1.6; margin-bottom:16px; }
  a.boton-peligro-solido, button[type="submit"].boton-peligro-solido{
    display:inline-flex; align-items:center; gap:10px; margin-top:0;
    background:var(--danger); color:#1a0a0a; font-weight:700;
    border:none; padding:14px 26px; font-size:0.85rem; font-family:'Inter', sans-serif;
    letter-spacing:0.04em; text-transform:uppercase; border-radius:2px; cursor:pointer;
    text-decoration:none; transition:background 0.2s;
  }
  a.boton-peligro-solido:hover, button[type="submit"].boton-peligro-solido:hover{ background:#e04b4b; }
  button[type="submit"].boton-peligro-solido[disabled]{ opacity:0.35; cursor:not-allowed; }
  button[type="submit"].boton-peligro-solido[disabled]:hover{ background:var(--danger); }

  .alerta-exito{
    background:rgba(110,198,232,0.12); border-color:rgba(110,198,232,0.35); color:var(--lake-soft);
  }

  .form-codigo-admin{ display:flex; gap:20px; flex-wrap:wrap; align-items:end; margin-top:20px; }
  .form-codigo-admin > div{ flex:1; min-width:160px; }
  .form-codigo-admin label{ margin-top:0; }

  /* Dropdown custom (reemplaza al <select> nativo en los filtros del admin):
     la lista abierta de un <select> nativo la pinta el sistema operativo, no
     se puede estilizar de forma confiable entre navegadores. Acá la lista
     desplegable es un <ul> normal dentro de la página, así que hereda los
     mismos colores que el resto del panel. Un <input type="hidden"> manda el
     mismo name/value que mandaría el <select> real, así el formulario y el
     PHP que lo procesa no cambian. */
  .select-custom{ position:relative; margin-top:8px; }
  .select-custom__toggle{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    padding:12px 14px; background:rgba(237,241,244,0.04); border:1px solid var(--line); border-radius:2px;
    color:var(--parchment); font-family:'Inter', sans-serif; font-size:1rem; text-align:left;
    cursor:pointer; transition:border-color 0.2s, background 0.2s;
  }
  .select-custom__toggle::after{
    content:''; width:16px; height:16px; flex-shrink:0; margin-left:10px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236ec6e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 7 10 13 15 7'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:center; background-size:16px;
    transition:transform 0.2s;
  }
  .select-custom.abierto .select-custom__toggle::after{ transform:rotate(180deg); }
  .select-custom__toggle:hover, .select-custom__toggle:focus-visible{ border-color:var(--lake-soft); outline:none; }
  .select-custom.abierto .select-custom__toggle{ border-color:var(--lake-soft); }
  .select-custom__lista{
    position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30;
    list-style:none; background:var(--bg-panel); border:1px solid var(--line); border-radius:2px;
    overflow:hidden; max-height:260px; overflow-y:auto;
    box-shadow:0 16px 32px rgba(0,0,0,0.45);
  }
  .select-custom__lista li{
    padding:11px 14px; font-family:'Inter', sans-serif; font-size:0.92rem; color:var(--parchment);
    cursor:pointer; transition:background 0.15s, color 0.15s;
  }
  .select-custom__lista li:hover{ background:rgba(28,127,224,0.14); color:var(--lake-soft); }
  .select-custom__lista li.activa{ background:rgba(28,127,224,0.2); color:var(--lake-soft); font-weight:600; }

  @media (max-width:640px){
    .panel-admin{ padding:170px 20px 70px; }
    .filtros-admin, .form-codigo-admin{ padding:20px; }
  }