/* ============================================================================
   RED SIN LIMITES - TEMA DE LA OFICINA  (flat vector)
   ============================================================================
   ESTE ARCHIVO LO COMPARTEN TODAS LAS PANTALLAS DEL SOCIO.
   Se cambia una vez aqui y se actualiza en todas.

   QUE HACE
   ---------------------------------------------------------------------------
   El sitio viejo usaba `stylevo.css` + `bootstrap.css` (de la version 2, del
   2012). Las pantallas se veian anticuadas: letras pequenas, cuadros grises,
   botones planos y los montos como una lista larga de radios.

   Esto pone encima un diseño moderno de trazo (flat), el mismo de
   `voffice.php`:
     · Fondo oscuro con luces
     · Tarjetas con relieve y esquinas redondeadas
     · Los montos como BOTONES grandes que se seleccionan
     · Campos de texto claros y legibles

   OJO CON LOS `!important`
   ---------------------------------------------------------------------------
   `stylevo.css` trae reglas viejas para `.service`, `.centered`, `h1`, `span`...
   y gana por orden. Por eso casi todo va con `!important`: es feo, pero es la
   unica forma de que el tema viejo no se imponga.

   LAS CLASES VAN CON PREFIJO `rsl-` A PROPOSITO: asi no chocan con nada.
   ============================================================================ */

/* ==========================================================================
   LA PALETA  ·  AQUI VIVE TODO EL COLOR DEL SITIO
   ==========================================================================
   Este es el UNICO lugar donde se define el color del sitio del socio.

   COMO FUNCIONA
   ---------------------------------------------------------------------------
   Hay dos juegos de valores:

     :root                        -> MODO OBSCURO  (el de siempre)
     :root[data-tema="claro"]     -> MODO CLARO

   Y todo lo demas (tarjetas, botones, textos, bordes) usa las variables. O sea
   que cambiando el `data-tema` del `<html>` cambia el sitio ENTERO, sin tocar
   nada mas.

   Quien pone ese atributo es `js/rsl-tema.js`, que ademas dibuja el boton de
   sol/luna, recuerda lo que eligio la persona y, si nunca eligio nada, respeta
   lo que tenga puesto su sistema operativo.

   PARA AGREGAR UN COLOR NUEVO
   ---------------------------------------------------------------------------
   Se define en los DOS bloques de abajo: una vez para obscuro y otra para
   claro. Y ya: aparece en todas las pantallas.
   ========================================================================== */

/* ------------------------------------------------------------ MODO OBSCURO
   OJO: va con `:root[data-tema="oscuro"]` y NO con `:root` a secas.

   Si se dejara en `:root`, el bloque del modo claro (que viene despues) tendria
   la misma especificidad y ganaria siempre: el modo obscuro no se podria
   aplicar nunca. Y `rsl-tema.js` pone SIEMPRE el atributo (`claro` u `oscuro`),
   nunca lo deja vacio, asi que este selector siempre coincide cuando toca. */
:root[data-tema="oscuro"]{
  /* --- Acentos: son iguales en los dos modos --- */
  --rsl-azul:#3C82F5;
  --rsl-azul-hondo:#0F4C81;
  --rsl-azul-claro:#7BB0FF;
  --rsl-oro:#D4AF37;
  --rsl-verde:#4ADE80;
  --rsl-rojo:#F87171;
  --rsl-ambar:#FBBF24;

  /* --- Textos --- */
  --rsl-tinta:#F1F5F9;        /* titulos */
  --rsl-menu:#E8EDF5;         /* texto normal */
  --rsl-gris:#8B98AC;         /* texto secundario */

  /* --- Fondos --- */
  --rsl-fondo:#131A2A;
  --rsl-fondo-2:#0F172B;
  --rsl-tarjeta:#1E293C;
  --rsl-tarjeta-2:#243349;
  --rsl-borde:#2A3A52;

  /* --- El fondo de la pagina, con sus manchas de luz --- */
  --rsl-fondo-web:
    radial-gradient(900px 420px at 12% -5%, #1d4ed81f, transparent 70%),
    radial-gradient(700px 380px at 92% 8%, #3c82f51a, transparent 70%),
    linear-gradient(180deg,#0d1524 0%,#101a2c 45%,#0b1220 100%);

  /* --- Sombra de las tarjetas --- */
  --rsl-sombra:0 2px 10px rgba(0,0,0,.35);
  --rsl-alza:0 20px 44px -14px rgba(0,0,0,.62);

  /* --- El recuadro blanco del logo (en los dos modos es blanco) --- */
  --rsl-logo-fondo:#fff;

  /* --- Piezas que necesitan su propio tono en cada modo --- */
  --rsl-barra-fondo:rgba(30,41,60,.94);   /* la barra de arriba */
  --rsl-tenue:#5C6B80;                    /* el texto de los campos vacios */
  --rsl-fila-hover:#243349;               /* la fila de tabla al pasar el mouse */
  --rsl-enlace-hover:#A8C8FF;

  /* --- Avisos --- */
  --rsl-aviso-fondo:#F59E0B1A;
  --rsl-aviso-tinta:#FCD34D;
  --rsl-bien-fondo:#4ADE801A;
  --rsl-bien-tinta:#86EFAC;
  --rsl-mal-fondo:#F871711A;
  --rsl-mal-tinta:#FCA5A5;

  /* --- Medidas y tiempos (iguales en los dos modos) --- */
  --rsl-radio:16px;
  --rsl-paso:.24s;
}

/* -------------------------------------------------------------- MODO CLARO
   OJO: se aplica sobre `:root`, o sea sobre el <html>. El `data-tema` lo pone
   `rsl-tema.js`. Se probaron estos valores para que el contraste del texto
   sobre su fondo pase las recomendaciones de accesibilidad (WCAG AA). */
:root[data-tema="claro"]{
  /* Acentos: el azul y el verde se oscurecen un poco para que se lean sobre
     blanco (el `#4ADE80` claro sobre blanco casi no se ve). */
  --rsl-azul:#2563EB;
  --rsl-azul-hondo:#1E40AF;
  --rsl-azul-claro:#1D4ED8;
  --rsl-oro:#A16207;
  --rsl-verde:#15803D;
  --rsl-rojo:#DC2626;
  --rsl-ambar:#B45309;

  /* Textos: tinta oscura sobre fondo claro */
  --rsl-tinta:#0F172A;
  --rsl-menu:#1E293B;
  --rsl-gris:#64748B;

  /* Fondos */
  --rsl-fondo:#F1F5F9;
  --rsl-fondo-2:#FFFFFF;
  --rsl-tarjeta:#FFFFFF;
  --rsl-tarjeta-2:#F8FAFC;
  --rsl-borde:#D8E0EC;

  /* Fondo de la pagina: gris muy suave con las mismas manchas de luz, pero
     tenues (en claro una mancha fuerte se ve como una mancha de tinta). */
  --rsl-fondo-web:
    radial-gradient(900px 420px at 12% -5%, #2563eb14, transparent 70%),
    radial-gradient(700px 380px at 92% 8%, #3b82f610, transparent 70%),
    linear-gradient(180deg,#F8FAFC 0%,#EEF3F9 50%,#E8EEF6 100%);

  /* Sombra: en claro tiene que ser suave, si no parece suciedad */
  --rsl-sombra:0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.06);
  --rsl-alza:0 18px 40px -18px rgba(15,23,42,.28);

  --rsl-logo-fondo:#fff;

  /* Piezas que necesitan su propio tono en cada modo */
  --rsl-barra-fondo:rgba(255,255,255,.95);
  --rsl-tenue:#94A3B8;
  --rsl-fila-hover:#F1F5F9;
  --rsl-enlace-hover:#1D4ED8;

  /* Avisos: fondo claro y texto oscuro del mismo tono */
  --rsl-aviso-fondo:#FEF3C7;
  --rsl-aviso-tinta:#92400E;
  --rsl-bien-fondo:#DCFCE7;
  --rsl-bien-tinta:#166534;
  --rsl-mal-fondo:#FEE2E2;
  --rsl-mal-tinta:#991B1B;
}

/* Para que el navegador dibuje los controles nativos (barras de
   desplazamiento, casillas, campos de fecha) del color que toca.

   OJO: va en el <body> del tema y NO en `:root`. Si se pusiera en `:root`
   afectaria tambien a las pantallas que NO usan este tema (la portada, por
   ejemplo, que es de diseño claro) y se les oscurecerian los controles. */
body.rsl-tema{ color-scheme:dark }
:root[data-tema="claro"] body.rsl-tema{ color-scheme:light }

/* ==========================================================================
   LA PAGINA
   ========================================================================== */
body.rsl-tema{
  /* El fondo sale de la variable: cambia solo al cambiar de modo. */
  background:var(--rsl-fondo-web) !important;
  background-attachment:fixed !important;
  color:var(--rsl-menu) !important;
  font-family:'Open Sans',-apple-system,'Segoe UI',Roboto,sans-serif !important;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  /* Al cambiar de modo, que el cambio se vea suave y no de golpe. */
  transition:background-color var(--rsl-paso) ease, color var(--rsl-paso) ease;
}

/* ==========================================================================
   LA BARRA DE ARRIBA
   ========================================================================== */
body.rsl-tema .navbar,
body.rsl-tema .navbar-inner{
  background:var(--rsl-barra-fondo) !important;
  border:none !important;
  box-shadow:0 1px 0 var(--rsl-borde), 0 10px 30px -22px rgba(0,0,0,.7) !important;
  filter:none !important;
  padding:10px 0 !important;
  min-height:0 !important;
}
body.rsl-tema .navbar .container{
  display:flex !important;align-items:center !important;gap:14px !important;
  max-width:1180px;margin:0 auto;padding:0 18px;
}
body.rsl-tema .navbar .brand{padding:0 !important;margin:0 !important;float:none !important}
body.rsl-tema .navbar .brand img{
  width:74px !important;height:auto !important;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.5));
}
body.rsl-tema .remplmenu{
  display:flex !important;align-items:center !important;gap:9px !important;
  margin-left:auto !important;
}
body.rsl-tema .remplmenu a,
body.rsl-tema .navbar .nav > li > a{
  display:inline-flex !important;align-items:center !important;gap:8px !important;
  padding:10px 18px !important;
  border-radius:11px !important;
  background:var(--rsl-tarjeta-2) !important;
  border:1px solid var(--rsl-borde) !important;
  color:var(--rsl-menu) !important;
  font-family:'Montserrat','Open Sans',sans-serif !important;
  font-size:13px !important;font-weight:700 !important;
  text-decoration:none !important;text-shadow:none !important;
  margin:0 !important;line-height:1.2 !important;
  transition:all var(--rsl-paso) ease !important;
}
body.rsl-tema .remplmenu a:hover,
body.rsl-tema .navbar .nav > li > a:hover{
  background:var(--rsl-azul) !important;
  border-color:var(--rsl-azul) !important;
  color:#fff !important;
  transform:translateY(-2px);
}
body.rsl-tema .btn-navbar{display:none !important}
body.rsl-tema .nav-collapse{
  display:flex !important;align-items:center !important;
  float:none !important;height:auto !important;overflow:visible !important;
}
body.rsl-tema .nav-collapse .nav{display:flex !important;gap:9px !important;margin:0 !important}
body.rsl-tema .nav-collapse .nav > li{float:none !important;list-style:none !important}

/* ==========================================================================
   LAS SECCIONES Y EL TITULO
   ========================================================================== */
body.rsl-tema .primary-section{
  background:transparent !important;
  border:none !important;
  padding:52px 0 70px !important;
}
body.rsl-tema .container{max-width:1180px !important}
body.rsl-tema .section .title{text-align:center;margin-bottom:34px}
body.rsl-tema h1{
  font-family:'Montserrat',sans-serif !important;
  font-size:clamp(24px,3.6vw,38px) !important;
  font-weight:800 !important;
  color:var(--rsl-tinta) !important;
  letter-spacing:-.6px !important;
  text-shadow:none !important;
  margin:0 0 6px !important;
  line-height:1.2 !important;
}
body.rsl-tema h2{
  color:var(--rsl-tinta) !important;
  font-family:'Montserrat',sans-serif !important;
  font-weight:800 !important;
  text-shadow:none !important;
}
body.rsl-tema .title:after{
  content:'';display:block;width:74px;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--rsl-azul),var(--rsl-oro));
  margin:14px auto 0;
}

/* ==========================================================================
   LA TARJETA DEL FORMULARIO
   ========================================================================== */
/* El bloque de arriba: el fondo oscuro se funde con la pagina, sin cortes. */
body.rsl-tema #service,
body.rsl-tema .primary-section,
body.rsl-tema .section.primary-section{
  background:transparent !important;
  border:none !important;
}

body.rsl-tema .cuadcont{
  display:block !important;
  margin:0 auto !important;
  max-width:780px;
}
body.rsl-tema .cuadcont > div,
body.rsl-tema .cuadcont > .span4{
  float:none !important;
  display:block !important;
  width:100% !important;
  max-width:780px !important;
  margin:0 auto !important;
  padding:0 !important;
  /* Los `.span4` de bootstrap traen margenes raros: se limpian. */
  margin-left:auto !important;
  margin-right:auto !important;
}
body.rsl-tema .cuadcont form,
body.rsl-tema form#login-form1,
/* ==========================================================================
   EL FORMULARIO DE REGISTRO
   ==========================================================================
   QUE PASABA
   --------------------------------------------------------------------------
   En `index.php`, el formulario de registro tenia esto:

       id="login-form reg"

   CON UN ESPACIO adentro. Un id no puede llevar espacios: es HTML invalido. El
   navegador se lo aguanta, pero para las hojas de estilo ese id NO existe, asi
   que esta regla (que le pone la tarjeta, el borde y la sombra) NUNCA le
   llegaba.

   El resultado: el formulario de ENTRAR salia como una tarjeta, y el de
   REGISTRARSE salia pelado y descuadrado, aunque son de la misma pantalla y
   estan uno junto al otro.

   ARREGLO
   --------------------------------------------------------------------------
   En `index.php` el id quedo como `login-form-reg` (sin espacio, valido), y
   aqui se le agrega a la lista. Asi los dos salen iguales.
   ========================================================================== */
body.rsl-tema form#login-form-reg,
body.rsl-tema form.rsl-form{
  display:block !important;
  width:100% !important;
  max-width:780px !important;
  background:var(--rsl-tarjeta) !important;
  border:1px solid var(--rsl-borde) !important;
  border-radius:var(--rsl-radio) !important;
  box-shadow:var(--rsl-alza) !important;
  padding:30px 32px 28px !important;
  margin:0 auto 24px !important;
  text-align:left !important;
  color:var(--rsl-menu) !important;
}
body.rsl-tema .centered{text-align:center !important}
body.rsl-tema .centered.service{background:none !important;border:none !important;padding:0 !important}

/* El nombre de la compania */
body.rsl-tema form span[style*="font-size:30px"],
body.rsl-tema form span[style*="font-size: 30px"]{
  display:block !important;
  font-family:'Montserrat',sans-serif !important;
  font-size:25px !important;font-weight:800 !important;
  color:var(--rsl-tinta) !important;
  margin:2px 0 4px !important;
  letter-spacing:-.3px;
}

/* ==========================================================================
   LOS MONTOS: de lista de radios a BOTONES
   ==========================================================================
   El HTML viejo traia:
       <input type=radio ...> <span style="font-size:32px">30</span>
       <br><span>1 GB libres. 100 MIN...</span>
   o sea: un radio chiquito, el monto y una descripcion larga, todo seguido.

   Aqui se convierte en una REJILLA DE BOTONES. El empujon de JavaScript
   (`rsl_montos.js`) rearma el HTML en tarjetas; este CSS las dibuja.
   ========================================================================== */
body.rsl-tema .rsl-montos{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr)) !important;
  gap:12px !important;
  margin:6px 0 26px !important;
}

body.rsl-tema .rsl-monto{
  position:relative;
  display:flex !important;flex-direction:column !important;align-items:center;
  justify-content:flex-start;text-align:center;
  background:var(--rsl-tarjeta-2) !important;
  border:1.5px solid var(--rsl-borde) !important;
  border-radius:14px !important;
  padding:16px 12px 14px !important;
  cursor:pointer;
  transition:all var(--rsl-paso) ease !important;
  margin:0 !important;
  line-height:1.35 !important;
}
body.rsl-tema .rsl-monto:hover{
  border-color:var(--rsl-azul) !important;
  transform:translateY(-3px);
  box-shadow:0 14px 28px -16px rgba(60,130,245,.7);
}
/* Cuando el radio de dentro esta elegido */
body.rsl-tema .rsl-monto:has(input:checked),
body.rsl-tema .rsl-monto.rsl-sel{
  background:linear-gradient(160deg,#2f6fd8,#3C82F5) !important;
  border-color:#3C82F5 !important;
  box-shadow:0 16px 34px -14px rgba(60,130,245,.85);
}
/* El radio se esconde: el boton entero es el que se presiona */
body.rsl-tema .rsl-monto input[type=radio]{
  position:absolute !important;opacity:0 !important;
  width:1px !important;height:1px !important;
  margin:0 !important;padding:0 !important;pointer-events:none;
}
body.rsl-tema .rsl-monto .rsl-monto-num{
  display:block !important;
  font-family:'Montserrat',sans-serif !important;
  font-size:26px !important;font-weight:800 !important;
  color:var(--rsl-tinta) !important;
  line-height:1.1 !important;
}
body.rsl-tema .rsl-monto .rsl-monto-num:before{
  content:'$';font-size:17px;opacity:.7;margin-right:1px;
}
body.rsl-tema .rsl-monto .rsl-monto-desc{
  display:block !important;
  font-size:11.5px !important;
  color:var(--rsl-gris) !important;
  margin-top:7px !important;
  line-height:1.45 !important;
}
body.rsl-tema .rsl-monto:has(input:checked) .rsl-monto-num,
body.rsl-tema .rsl-monto:has(input:checked) .rsl-monto-desc,
body.rsl-tema .rsl-monto.rsl-sel .rsl-monto-num,
body.rsl-tema .rsl-monto.rsl-sel .rsl-monto-desc{color:#fff !important}

/* Respaldo para navegadores sin `:has()`: `rsl_montos.js` pone la clase */
body.rsl-tema .rsl-monto.rsl-sel .rsl-monto-desc{color:#e8f1ff !important;opacity:.92}

/* ==========================================================================
   LOS CAMPOS DE TEXTO
   ========================================================================== */
body.rsl-tema form .fot,
body.rsl-tema form > span:not([style*="font-size"]){
  display:block !important;
  color:var(--rsl-menu) !important;
  font-size:13.5px !important;font-weight:700 !important;
  margin:0 0 8px !important;
  text-align:left;
  letter-spacing:.2px;
}
body.rsl-tema .signinput,
body.rsl-tema input[type=text].signinput,
body.rsl-tema input[type=number].signinput,
body.rsl-tema form input[type=text],
body.rsl-tema form input[type=number],
body.rsl-tema form input[type=email],
body.rsl-tema form input[type=password],
body.rsl-tema form select{
  display:block !important;
  width:100% !important;max-width:100% !important;
  background:var(--rsl-fondo-2) !important;
  color:var(--rsl-tinta) !important;
  border:1.5px solid var(--rsl-borde) !important;
  border-radius:12px !important;
  padding:14px 17px !important;
  font-size:16px !important;
  font-family:'Open Sans',sans-serif !important;
  margin:0 0 20px !important;
  box-shadow:none !important;
  outline:none;
  transition:all var(--rsl-paso) ease;
  height:auto !important;
  line-height:1.3 !important;
  float:none !important;
}
body.rsl-tema .signinput:focus,
body.rsl-tema form input:focus,
body.rsl-tema form select:focus{
  border-color:var(--rsl-azul) !important;
  box-shadow:0 0 0 4px rgba(60,130,245,.22) !important;
}
body.rsl-tema form input::placeholder{color:var(--rsl-tenue) !important}

/* ==========================================================================
   EL BOTON DE ENVIAR
   ========================================================================== */
body.rsl-tema .message-btn,
body.rsl-tema input[type=submit],
body.rsl-tema button[type=submit]{
  display:flex !important;align-items:center !important;justify-content:center !important;
  gap:10px;
  width:100% !important;
  background:linear-gradient(160deg,#2f6fd8,#3C82F5) !important;
  color:#fff !important;border:none !important;
  border-radius:13px !important;
  padding:17px 26px !important;
  font-family:'Montserrat',sans-serif !important;
  font-size:16px !important;font-weight:800 !important;
  letter-spacing:.4px;
  cursor:pointer;
  margin:4px 0 0 !important;
  text-shadow:none !important;
  box-shadow:0 14px 30px -14px rgba(60,130,245,.85) !important;
  transition:all var(--rsl-paso) ease !important;
  float:none !important;
}
body.rsl-tema .message-btn:hover,
body.rsl-tema input[type=submit]:hover,
body.rsl-tema button[type=submit]:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 40px -14px rgba(60,130,245,1) !important;
  filter:brightness(1.06);
}

/* ==========================================================================
   AVISOS, MENSAJES Y TABLAS
   ========================================================================== */
body.rsl-tema .aviso,
body.rsl-tema .alert,
body.rsl-tema .error{
  border-radius:12px !important;
  padding:14px 18px !important;
  font-size:14px !important;
  border:none !important;
  border-left:4px solid var(--rsl-ambar) !important;
  background:var(--rsl-aviso-fondo) !important;color:var(--rsl-aviso-tinta) !important;
}
body.rsl-tema .alert-success,
body.rsl-tema .success{
  border-left-color:var(--rsl-verde) !important;
  background:var(--rsl-bien-fondo) !important;color:var(--rsl-bien-tinta) !important;
}
body.rsl-tema .alert-error,
body.rsl-tema .alert-danger{
  border-left-color:var(--rsl-rojo) !important;
  background:var(--rsl-mal-fondo) !important;color:var(--rsl-mal-tinta) !important;
}

body.rsl-tema table{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  background:var(--rsl-tarjeta) !important;
  border:1px solid var(--rsl-borde) !important;
  border-radius:14px !important;
  overflow:hidden;
  font-size:14px !important;
  color:var(--rsl-menu) !important;
}
body.rsl-tema table th{
  background:var(--rsl-tarjeta-2) !important;
  color:var(--rsl-gris) !important;
  font-size:11.5px !important;font-weight:800 !important;
  text-transform:uppercase;letter-spacing:.7px;
  padding:13px 15px !important;
  border:none !important;
  text-align:left;
}
body.rsl-tema table td{
  padding:13px 15px !important;
  border:none !important;
  border-top:1px solid var(--rsl-borde) !important;
  color:var(--rsl-menu) !important;
}
body.rsl-tema table tr:hover td{background:var(--rsl-fila-hover) !important}

/* ==========================================================================
   DETALLES SUELTOS
   ========================================================================== */
body.rsl-tema a{color:var(--rsl-azul-claro)}
body.rsl-tema a:hover{color:var(--rsl-enlace-hover)}
body.rsl-tema hr{border:none;border-top:1px solid var(--rsl-borde);margin:24px 0}
body.rsl-tema .footer,
body.rsl-tema footer{
  background:transparent !important;
  border:none !important;
  color:var(--rsl-gris) !important;
  text-align:center;
  padding:34px 18px 40px !important;
  font-size:13px !important;
}
body.rsl-tema .footer a,
body.rsl-tema footer a{color:var(--rsl-azul-claro) !important}

/* Las pastillas de estado */
body.rsl-tema .rsl-pastilla{
  display:inline-block;padding:4px 13px;border-radius:999px;
  font-size:11.5px;font-weight:800;
}
body.rsl-tema .rsl-pastilla.ok{background:#4ADE8022;color:var(--rsl-verde);border:1px solid #4ADE8044}
body.rsl-tema .rsl-pastilla.mal{background:#F8717122;color:var(--rsl-rojo);border:1px solid #F8717144}
body.rsl-tema .rsl-pastilla.espera{background:#F59E0B22;color:var(--rsl-ambar);border:1px solid #F59E0B44}

/* ==========================================================================
   QUE NADA SE SALGA DE LA PANTALLA
   ==========================================================================
   Lo primero y mas importante en celular: nada debe provocar que la pagina se
   deslice de lado. Con `overflow-x:hidden` en el body se corta de raiz.

   OJO: NO se pone en `html` porque eso rompe el desplazamiento suave de los
   enlaces internos (`#login`, `#signup`...) que usa la portada.
   ========================================================================== */
html{ -webkit-text-size-adjust:100%; }   /* el iPhone no agranda el texto solo */
body.rsl-tema{
  overflow-x:hidden;
  max-width:100%;
}
body.rsl-tema img,
body.rsl-tema table,
body.rsl-tema pre,
body.rsl-tema iframe{ max-width:100%; }
body.rsl-tema img{ height:auto; }
/* Las palabras larguisimas (correos, claves) no deben estirar la pantalla. */
body.rsl-tema p,
body.rsl-tema td,
body.rsl-tema th,
body.rsl-tema li,
body.rsl-tema span,
body.rsl-tema h1,
body.rsl-tema h2,
body.rsl-tema h3,
body.rsl-tema a,
body.rsl-tema code{ overflow-wrap:break-word; word-wrap:break-word; }

/* En escritorio la tabla va normal. El deslizamiento de lado se activa solo
   en celular y tablet (ver los `@media` de abajo): en computadora cambiarla a
   `display:block` altera el calculo de anchos de las columnas. */
body.rsl-tema table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
body.rsl-tema .message-btn,
body.rsl-tema input[type=submit],
body.rsl-tema button[type=submit],
body.rsl-tema .remplmenu a{ min-height:44px; }

/* ==========================================================================
   CELULAR CHICO  (320 a 400 px)
   ==========================================================================
   OJO CON EL ORDEN DE LOS BLOQUES (aqui me equivoque una vez)
   ---------------------------------------------------------------------------
   Todos los `@media` de abajo llevan `!important`. Cuando dos reglas empatan
   en `!important` y en especificidad, **gana la que va DESPUES**. Si el bloque
   de 400 px va antes del de 640 px, el de 640 le pisa casi todo y el ajuste
   fino de celular chico queda muerto sin que se note.

   Por eso el orden tiene que ser: PRIMERO los anchos grandes, AL FINAL los
   chicos. Asi el mas especifico (el celular chico) es el que manda.
   ========================================================================== */

/* ==========================================================================
   COMPUTADORA GRANDE  (1400 px o mas)
   ==========================================================================
   En pantallas muy anchas, el texto de parrafo se hace incomodo de leer si
   cruza toda la pantalla. Se limita el ancho y se centra.
   ========================================================================== */
@media (min-width:1400px){
  body.rsl-tema .container{max-width:1240px !important}
  body.rsl-tema .rsl-montos{grid-template-columns:repeat(5,minmax(0,1fr)) !important}
}

/* ==========================================================================
   TABLET HORIZONTAL Y LAPTOP CHICA  (901 a 1200 px)
   ========================================================================== */
@media (min-width:901px) and (max-width:1200px){
  body.rsl-tema .container{max-width:100% !important;padding-left:26px !important;padding-right:26px !important}
  body.rsl-tema .cuadcont,
  body.rsl-tema .cuadcont > div,
  body.rsl-tema .cuadcont form{max-width:720px !important}
  body.rsl-tema .rsl-montos{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
}

/* ==========================================================================
   TABLET VERTICAL  (641 a 900 px)
   ==========================================================================
   El iPad en vertical y las tablets Android. Aqui sobra espacio: se pueden
   poner 3 columnas de montos.
   ========================================================================== */
@media (min-width:641px) and (max-width:900px){
  body.rsl-tema .container{max-width:100% !important;padding-left:24px !important;padding-right:24px !important}
  body.rsl-tema .primary-section{padding:44px 0 60px !important}
  body.rsl-tema h1{font-size:30px !important}
  body.rsl-tema .cuadcont{max-width:640px}
  body.rsl-tema .cuadcont > div,
  body.rsl-tema .cuadcont form{max-width:640px !important}
  body.rsl-tema .rsl-montos{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:11px !important}
  body.rsl-tema .rsl-monto .rsl-monto-num{font-size:23px !important}
  body.rsl-tema .rsl-monto .rsl-monto-desc{font-size:11px !important}
  /* En tablet los botones de la barra se reparten, no se aprietan. */
  body.rsl-tema .remplmenu a{padding:11px 16px !important;font-size:12.5px !important}
}

/* ==========================================================================
   CELULAR  (401 a 640 px)
   ==========================================================================
   Se ponen dos columnas de montos: con una sola, la lista se hace larguisima.
   ========================================================================== */
@media (max-width:640px){
  /* ========================================================================
     LA BARRA DE ARRIBA, FIJA -> NORMAL
     ========================================================================
     `stylevo.css` trae `.navbar{position:fixed!important;min-height:70px}`.
     En celular la barra se parte en dos renglones (el logo y los botones), o
     sea que crece a unos 105-115 px. Y el contenido empieza a 80 px
     (30 del `.primary-section` + 50 del `.container` de stylevo), asi que el
     TITULO QUEDABA DEBAJO DE LA BARRA.

     En vez de calcular el alto exacto (que cambia con el logo y con los
     botones), se quita el `fixed` en pantallas chicas: la barra vuelve al
     flujo normal y empuja el contenido hacia abajo. Nunca tapa nada.
     ======================================================================== */
  body.rsl-tema .navbar{
    position:static !important;
    width:auto !important;
    left:auto !important;right:auto !important;top:auto !important;
  }
  body.rsl-tema .primary-section{padding-top:24px !important}

  body.rsl-tema .container{padding-left:16px !important;padding-right:16px !important}
  body.rsl-tema .primary-section{padding-bottom:46px !important}
  body.rsl-tema h1{font-size:25px !important}
  body.rsl-tema .section .title{margin-bottom:26px}

  body.rsl-tema .navbar{padding:8px 0 !important}
  body.rsl-tema .navbar .container{flex-wrap:wrap;gap:8px}
  body.rsl-tema .remplmenu{margin-left:0 !important;width:100%;gap:8px !important}
  body.rsl-tema .remplmenu a{flex:1;justify-content:center;padding:10px 10px !important;font-size:11.5px !important}

  body.rsl-tema .cuadcont form{padding:22px 18px 20px !important}
  body.rsl-tema .rsl-montos{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important}
  body.rsl-tema .rsl-monto{padding:14px 10px 12px !important}
  body.rsl-tema .rsl-monto .rsl-monto-num{font-size:23px !important}
  body.rsl-tema .rsl-monto .rsl-monto-desc{font-size:10.5px !important;margin-top:6px !important}

  body.rsl-tema form .fot,
  body.rsl-tema form > span:not([style*="font-size"]){font-size:12.5px !important}
  body.rsl-tema form input[type=text],
  body.rsl-tema form input[type=number],
  body.rsl-tema form select{padding:13px 15px !important;margin-bottom:17px !important}
  body.rsl-tema .footer{padding:26px 16px 32px !important}

  /* Los margenes negativos de `stylevo.css` sacan de la pantalla los
     circulos de Masculino/Femenino (`profile.php`, `customizerinfo.php`). */
  body.rsl-tema .chp,
  body.rsl-tema .chph,
  body.rsl-tema .chp1,
  body.rsl-tema .chp2{margin-left:0 !important}

  /* La tabla en celular: se desliza de lado en vez de romper el diseño. */
  body.rsl-tema table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ==========================================================================
   CELULAR CHICO  (320 a 400 px)   <- VA AL FINAL A PROPOSITO
   ==========================================================================
   El iPhone SE y los Android chicos. Aqui es donde todo se aprieta.
   Al ir despues de los otros, estas reglas son las que mandan.
   ========================================================================== */
@media (max-width:400px){
  body.rsl-tema .container{padding-left:12px !important;padding-right:12px !important}
  body.rsl-tema .primary-section{padding:22px 0 38px !important}
  body.rsl-tema .section .title{margin-bottom:22px}
  body.rsl-tema h1{font-size:21px !important;letter-spacing:-.2px !important}
  body.rsl-tema .title:after{width:56px;height:3px;margin-top:11px}

  /* La barra: el logo arriba y los botones repartidos */
  body.rsl-tema .navbar .container{padding:0 10px;gap:7px}
  body.rsl-tema .navbar .brand img{width:56px !important}
  body.rsl-tema .remplmenu{gap:6px !important}
  body.rsl-tema .remplmenu a{
    padding:9px 8px !important;font-size:10.5px !important;
    letter-spacing:0 !important;flex:1;justify-content:center;
  }

  body.rsl-tema .cuadcont form{padding:18px 14px 16px !important;border-radius:14px !important}

  /* LOS MONTOS EN UNA SOLA COLUMNA.
     A 320 px, dos columnas dejan unos 121 px por boton; con el numero a la
     izquierda y la descripcion al lado, la descripcion se recorta. En una
     columna, el monto y el texto van uno al lado del otro y se lee completo. */
  body.rsl-tema .rsl-montos{grid-template-columns:1fr !important;gap:9px !important}
  body.rsl-tema .rsl-monto{
    padding:12px 13px !important;
    flex-direction:row !important;align-items:center !important;
    gap:13px;text-align:left !important;
  }
  body.rsl-tema .rsl-monto .rsl-monto-num{font-size:21px !important;flex:0 0 auto;min-width:58px}
  body.rsl-tema .rsl-monto .rsl-monto-desc{margin-top:0 !important;font-size:10.5px !important;text-align:left !important}

  body.rsl-tema form input[type=text],
  body.rsl-tema form input[type=number],
  body.rsl-tema form select{padding:12px 13px !important;font-size:16px !important;
                            margin-bottom:15px !important}
  body.rsl-tema .message-btn,
  body.rsl-tema input[type=submit]{padding:15px 18px !important;font-size:15px !important}
}

/* ==========================================================================
   DOS ARREGLOS PARA PANTALLAS GRANDES CON MEDIDAS FIJAS
   ==========================================================================
   Estas dos pantallas traen anchos escritos a mano que no se adaptan. En vez
   de reescribirlas enteras, se acotan aqui.
   ========================================================================== */

/* ------------------------------------------------------ MI EQUIPO
   `myteam.php` dibuja una tira de tarjetas que se desliza de lado:
   `.fondc` (el marco) y `.frame ul li{width:227px}`. Con las tarjetas fijas y
   el marco sin limite, la tira pedia 597 px de mas en celular.
   Se acota el marco y se achican las tarjetas en pantallas chicas. */
body.rsl-tema .fondc{
  max-width:100% !important;
  box-sizing:border-box;
  overflow:hidden;
}
body.rsl-tema .fondc .wrap,
body.rsl-tema .fondc .frame{
  max-width:100% !important;
  box-sizing:border-box;
}

/* --------------------------------------------------------------------------
   LA TIRA MIDE LO MISMO QUE SU VENTANA
   --------------------------------------------------------------------------
   La tira (el `<ul>`) NO traia ancho, asi que se estiraba sola a TODO su
   contenido. Medido con 154 socios: 36,498 px de tira dentro de una ventana de
   925. Como las tarjetas piden su ancho en PORCENTAJE, el navegador lo
   calculaba contra esos 36,498: cada tarjeta salia de 18,241 px, o sea que UNA
   sola llenaba toda la tira.

   Y ademas el carrusel saca las PAGINAS de esa cuenta: creia que habia 160
   paginas en vez de 4 (esa cuenta es la que decide si los puntitos se
   esconden).

   Con `width:100%` la tira mide lo que su ventana. En escritorio las tarjetas
   conservan sus 227 px de siempre; en pantallas chicas se achican solas.
   -------------------------------------------------------------------------- */
body.rsl-tema .fondc .frame ul{
  width:100% !important;
  box-sizing:border-box;
}
body.rsl-tema .scrollbar{max-width:100% !important;box-sizing:border-box}

/* --------------------------------------------------------------------------
   LA BARRITA GRIS DE LOS NIVELES CON POCA GENTE
   --------------------------------------------------------------------------
   Cada nivel trae una barrita gris para arrastrar la tira de lado. Pero la
   pantalla dibuja el armazon de los 10 niveles SIEMPRE, aunque el nivel no tenga
   a nadie.

   Y ahi la barrita es lo peor que puede quedar: una caja vacia CON barrita se ve
   COMO SI ESTUVIERA CARGANDO para alguien que nunca va a llegar. Medido con
   FUTUREISHERE (17 socios): los niveles 4 al 10 salian asi, siete cajas.

   Con 2 socios o menos NO hay nada que arrastrar (no se alcanza a llenar ni una
   vuelta de la tira), asi que la barrita no sirve para nada y solo confunde.

   Con 3 o mas SI se deja: ahi ya hay contenido de sobra y la barrita ayuda.

   El carrusel marca cada tira con la clase `rsl-poca-gente` (ver
   `js/rsl-equipo.js`).
   -------------------------------------------------------------------------- */
body.rsl-tema .rsl-poca-gente .scrollbar{display:none !important}

/* ------------------------------------------------------ MI PERFIL
   `profile.php` mete los campos dentro de los elementos de una lista de
   navegacion (`ul.nav li a`), que traen relleno y ancho propios. Se acotan.

   Y trae un `<input type="file">` de 408 px escritos a mano, que en celular se
   sale 110 px de la pantalla. Un `input[type=file]` no se achica solo: su
   ancho lo pone el navegador segun el texto del boton, asi que hay que
   limitarlo con `width:100%`. */
body.rsl-tema input[type=file]{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box;
}
body.rsl-tema ul.nav li a > input,
body.rsl-tema ul.nav li a > select,
body.rsl-tema .tabbable input,
body.rsl-tema .tabbable select{
  max-width:100% !important;
  box-sizing:border-box;
}
body.rsl-tema ul.nav li a{max-width:100% !important;box-sizing:border-box}

/* La barra de navegacion de estas pantallas: en celular los elementos se
   apilan en vez de salirse de lado. */
body.rsl-tema #top-navigation{
  display:flex !important;
  flex-wrap:wrap !important;
  max-width:100% !important;
  box-sizing:border-box;
  gap:4px 6px;
  justify-content:center;
}
body.rsl-tema #top-navigation > li{min-width:0;max-width:100%;float:none !important}
body.rsl-tema #top-navigation > li > a{
  white-space:normal !important;
  max-width:100%;
  box-sizing:border-box;
}

/* ---------------------------------------------------------------------------
   LOS BOTONES DE ARRIBA, SIN REPETIR
   ---------------------------------------------------------------------------
   Estas pantallas traen los mismos enlaces DOS veces en el HTML:
       <span class="remplmenu"><a>REGRESO</a> <a>CERRAR SESION</a></span>
       <ul id="top-navigation"><li><a>REGRESO</a></li><li><a>CERRAR SESION</a></li></ul>
   El segundo vive dentro del menu que se despliega con el boton de rayitas,
   asi que antes solo se veia en celular. Como aqui el menu ya no se despliega
   (se ve siempre), salian los dos juegos de botones.

   Se esconde el segundo: los de `.remplmenu` son los que quedan a la vista.
   --------------------------------------------------------------------------- */
body.rsl-tema #top-navigation{display:none !important}
body.rsl-tema .nav-collapse{display:block !important;height:auto !important;overflow:visible !important}
body.rsl-tema .btn-navbar{display:none !important}

/* --------------------------------------------------------------------------
   LAS TARJETAS DE LA TIRA  ·  CUANTAS CABEN SEGUN LA PANTALLA
   --------------------------------------------------------------------------
   Las tarjetas van FLOTANDO dentro de una tira que se desliza de lado.

   OJO CON EL `width:auto`
   --------------------------------------------------------------------------
   Aqui estaba escrito `width:auto`, pensando que la tarjeta se ajustaria a la
   pantalla. NO ES ASI: en un elemento que va flotando, `width:auto` significa
   "el ancho de mi contenido", y el contenido es LA TIRA COMPLETA. Con 154
   socios (el caso de ADMINISTRADOR), cada tarjeta se estiraba a los 36,492 px
   de la tira: se veia UNA tarjeta y las otras 153 quedaban 36,000 px mas alla.

   Ahora el ancho se pide EN PARTES DE LA PANTALLA (`%`), que es lo que de
   verdad se achica sola. El `calc(... - 8px)` es para el aire entre tarjetas.

   En escritorio NO se toca nada: se quedan en los 227 px de siempre, que es
   como el dueño las tiene vistas desde años.
   -------------------------------------------------------------------------- */
@media (max-width:991px){
  body.rsl-tema .frame ul,
  body.rsl-tema .frame ul li{min-width:0 !important}
  body.rsl-tema .frame ul{width:100% !important}
  body.rsl-tema .frame ul li{width:calc(25% - 8px) !important}
}
@media (max-width:767px){
  /* Los circulos de Masculino/Femenino que `stylevo.css` saca con
     `margin-left:-100px`. */
  body.rsl-tema .chp,
  body.rsl-tema .chph,
  body.rsl-tema .chp1,
  body.rsl-tema .chp2{margin-left:0 !important}
  body.rsl-tema .fondc{margin-left:0 !important;margin-right:0 !important}
  body.rsl-tema .frame ul{width:100% !important}
  body.rsl-tema .frame ul li{width:calc(33.333% - 8px) !important;min-width:0 !important}
  /* Las tarjetas son mas angostas, asi que la tira tambien. */
  body.rsl-tema .fondc .frame{height:210px}
}
@media (max-width:480px){
  body.rsl-tema .frame ul{width:100% !important}
  body.rsl-tema .frame ul li{width:calc(50% - 8px) !important;min-width:0 !important}
  body.rsl-tema .fondc .frame{height:190px}
}

/* --------------------------------------------------------------------------
   LOS PUNTITOS DE PAGINA  ·  SE ESCONDEN CUANDO SON UN MONTON
   --------------------------------------------------------------------------
   El carrusel pone UN PUNTITO POR PAGINA. Con 154 socios salian 154 puntitos:
   una pared de bolitas que no sirve para nada (nadie le atina al puntito 87) y
   que ademas empuja la pantalla hacia abajo.

   Arriba de 12 se esconden. En su lugar quedan las FLECHAS de anterior y
   siguiente, que el mismo carrusel ya sabe manejar (ver `js2/horizontal.js`).

   El 12 se eligio para que quepan en un renglon en celular sin dar vueltas.
   -------------------------------------------------------------------------- */
body.rsl-tema .pages.rsl-paginas-muchas{display:none !important}

/* --------------------------------------------------------------------------
   EL FONDO DE LAS FLECHAS  ·  PARA QUE SE VEAN
   -------------------------------------------------------------------------- */
body.rsl-tema .rsl-flecha-tira{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:2px 0 6px;
}
body.rsl-tema .rsl-flecha-tira button{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.45);
  color:#fff;
  border-radius:8px;
  padding:7px 18px;
  font-size:15px;
  line-height:1;
  cursor:pointer;
}
body.rsl-tema .rsl-flecha-tira button:hover{background:rgba(255,255,255,.3)}
body.rsl-tema .rsl-flecha-tira .rsl-cuantos{
  color:#9cabe1;
  font-size:12px;
  letter-spacing:1px;
  font-weight:bold;
}

/* ==========================================================================
   EL BOTON DE MODO OBSCURO / CLARO
   ==========================================================================
   No se pone a mano en ninguna pantalla: lo mete `js/rsl-tema.js`.

   Va en dos formas:
     .rsl-btn-tema-barra   cuando encuentra la barra de arriba (queda como un
                           boton mas, al final)
     .rsl-btn-tema-flota   cuando la pantalla no tiene barra: queda fijo en la
                           esquina de abajo a la derecha
   ========================================================================== */
.rsl-btn-tema{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 15px;
  border-radius:11px;
  border:1px solid var(--rsl-borde);
  background:var(--rsl-tarjeta-2);
  color:var(--rsl-menu);
  font-family:'Montserrat','Open Sans',sans-serif;
  font-size:12.5px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  transition:all var(--rsl-paso) ease;
  -webkit-tap-highlight-color:transparent;
}
.rsl-btn-tema:hover{
  border-color:var(--rsl-azul);
  color:var(--rsl-azul-claro);
  transform:translateY(-2px);
}
.rsl-btn-tema:active{transform:translateY(0)}
.rsl-btn-tema:focus-visible{
  outline:3px solid var(--rsl-azul);
  outline-offset:2px;
}
.rsl-btn-tema svg{flex:0 0 auto;display:block}

/* --- Cuando va dentro de la barra: al final, sin estorbar --- */
.rsl-btn-tema-barra{
  margin-left:auto;
  align-self:center;
  flex:0 0 auto;
}
/* Si la barra se parte en renglones, el boton no se estira. */
body.rsl-tema .remplmenu .rsl-btn-tema{margin-left:8px}

/* --- Cuando va flotando --- */
.rsl-btn-tema-flota{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  background:var(--rsl-tarjeta);
  box-shadow:var(--rsl-alza);
  padding:12px 16px;
  border-radius:999px;
}

/* --- En el panel de sistemas la barra es mas apretada --- */
body.rsl-tema .barra-sup .rsl-btn-tema{margin-left:auto;flex:0 0 auto}

/* --- En celular solo el dibujo, para no gastar ancho --- */
@media (max-width:767px){
  .rsl-btn-tema-txt{display:none}
  .rsl-btn-tema{padding:11px 12px;gap:0}
  .rsl-btn-tema svg{width:19px;height:19px}
  .rsl-btn-tema-flota{right:13px;bottom:13px;padding:13px 14px}
}

/* --- Al imprimir no sirve de nada --- */
@media print{
  .rsl-btn-tema{display:none !important}
}

/* ==========================================================================
   LA BARRA DE ARRIBA  ·  LOS BOTONES
   ==========================================================================
   QUE ESTABA MAL
   ---------------------------------------------------------------------------
   Cada boton de la barra tenia su propio tamaño, porque cada pantalla los
   escribio a mano. Medido en el navegador, en una misma barra:

       CERRAR SESION   44 px de alto
       OFICINA         38 px de alto
       Modo obscuro    37 px de alto

   Y el "CERRAR SESION" traia `style="margin-left:50px"` escrito EN EL HTML de
   cada pantalla, o sea un hueco fijo de 50 px que no se adaptaba a nada.

   En celular quedaba peor: el boton de modo se ENCIMABA con "CERRAR SESION"
   y terminaba casi pegado al borde de la pantalla.

   COMO QUEDA
   ---------------------------------------------------------------------------
   Todos los botones de la barra miden lo mismo y se separan con el mismo
   hueco. El `margin-left:50px` se anula aqui, asi que no hay que tocar las
   194 pantallas una por una: esta regla las arregla todas de golpe.
   ========================================================================== */

/* --- Los enlaces de la barra (REGRESO, CERRAR SESION, MI EQUIPO...) --- */
body.rsl-tema .remplmenu{
  display:flex !important;
  align-items:center;
  gap:10px;
  /* Se anula el `margin-left:50px` que trae el HTML de cada pantalla. */
  margin-left:0 !important;
}
body.rsl-tema .remplmenu a{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  /* La MISMA altura que el boton de modo: 40 px. */
  min-height:40px;
  padding:0 18px !important;
  margin-left:0 !important;
  border-radius:10px !important;
  border:1px solid var(--rsl-borde);
  background:var(--rsl-tarjeta-2);
  color:var(--rsl-menu) !important;
  font-family:'Montserrat','Open Sans',sans-serif !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  letter-spacing:.3px;
  line-height:1 !important;
  text-decoration:none !important;
  white-space:nowrap;
  transition:all var(--rsl-paso) ease;
}
body.rsl-tema .remplmenu a:hover{
  border-color:var(--rsl-azul);
  color:var(--rsl-azul) !important;
  transform:translateY(-2px);
}
body.rsl-tema .remplmenu a:active{transform:translateY(0)}

/* --- El boton 📱 OFICINA (tiene su propia clase en las pantallas) --- */
body.rsl-tema .remplmenu a[class*="oficina"],
body.rsl-tema .remplmenu a[href*="sistemas"]{
  background:var(--rsl-azul) !important;
  border-color:var(--rsl-azul) !important;
  color:#fff !important;
}
body.rsl-tema .remplmenu a[class*="oficina"]:hover,
body.rsl-tema .remplmenu a[href*="sistemas"]:hover{
  background:var(--rsl-azul-hondo) !important;
  border-color:var(--rsl-azul-hondo) !important;
  color:#fff !important;
}

/* --- El boton de modo, con la MISMA medida que los demas --- */
body.rsl-tema .rsl-btn-tema{
  min-height:40px;
  padding:0 16px;
  border-radius:10px;
  font-size:12.5px;
}

/* --- El logo: que no se encoja ni se estire --- */
body.rsl-tema .navbar .brand{margin:0 !important;padding:0 !important}

/* ==========================================================================
   LA BARRA EN CELULAR
   ==========================================================================
   Los botones BAJAN a su propio renglon y se reparten todo el ancho. Antes se
   apretaban en la misma linea que el logo y el boton de modo se encimaba con
   "CERRAR SESION".
   ========================================================================== */
@media (max-width:767px){
  body.rsl-tema .navbar .container{
    flex-wrap:wrap !important;
    gap:9px;
  }
  /* El logo crece y EMPUJA el boton de modo hasta la derecha del primer
     renglon. Se hace con `flex-grow` y no con `margin-left:auto`, porque con
     `order` el margen automatico no repartia bien el espacio: el boton se
     salia de la pantalla.
     `align-self:center` en los dos: asi el logo y el boton quedan centrados
     uno con el otro, y no pegados al borde de arriba. */
  body.rsl-tema .navbar .brand{order:1;flex:1 1 auto;align-self:center}
  body.rsl-tema .rsl-btn-tema{order:2;margin-left:0 !important;flex:0 0 auto;align-self:center}
  /* Los enlaces bajan al segundo renglon y se reparten todo el ancho.
     `flex-basis:100%` es lo que los obliga a empezar en un renglon nuevo. */
  body.rsl-tema .navbar .remplmenu{
    order:3;
    flex:1 1 100%;
    width:100%;
    min-width:100%;
    gap:8px;
    margin-left:0 !important;
  }
  body.rsl-tema .navbar .remplmenu a{
    flex:1 1 auto;
    min-height:42px;      /* un poco mas alto: se toca con el dedo */
    padding:0 12px !important;
    font-size:12px !important;
  }
}

/* En celular chico, el texto de los botones se achica para que quepan. */
@media (max-width:400px){
  body.rsl-tema .remplmenu a{
    padding:0 9px !important;
    font-size:10.5px !important;
    letter-spacing:0 !important;
  }
  body.rsl-tema .remplmenu{gap:6px}
}

/* ==========================================================================
   PANTALLAS BAJAS  (celular acostado)
   ==========================================================================
   Un celular de lado tiene muy poca altura. Se recorta el aire de arriba para
   que se vea el formulario sin tener que desplazarse.
   ========================================================================== */
@media (max-height:560px) and (orientation:landscape){
  body.rsl-tema .primary-section{padding:16px 0 26px !important}
  body.rsl-tema .section .title{margin-bottom:16px}
  body.rsl-tema h1{font-size:20px !important}
  body.rsl-tema .title:after{display:none}
  body.rsl-tema .navbar{padding:5px 0 !important}
  body.rsl-tema .navbar .brand img{width:50px !important}
}

/* ==========================================================================
   AL IMPRIMIR
   ==========================================================================
   Un comprobante de pago en papel blanco con letra blanca no se lee. Aqui se
   pasa todo a tinta oscura sobre blanco.
   ========================================================================== */
@media print{
  body.rsl-tema{
    background:#fff !important;color:#111 !important;
  }
  body.rsl-tema .navbar,
  body.rsl-tema .footer,
  body.rsl-tema .message-btn,
  body.rsl-tema input[type=submit]{display:none !important}
  body.rsl-tema h1,
  body.rsl-tema h2,
  body.rsl-tema span,
  body.rsl-tema td,
  body.rsl-tema th,
  body.rsl-tema p{color:#111 !important}
  body.rsl-tema .cuadcont form,
  body.rsl-tema table{
    background:#fff !important;border:1px solid #999 !important;box-shadow:none !important;
  }
  body.rsl-tema .rsl-monto{border:1px solid #999 !important;background:#fff !important}
  body.rsl-tema .rsl-monto .rsl-monto-num,
  body.rsl-tema .rsl-monto .rsl-monto-desc{color:#111 !important}
}


/* --------------------------------------------------------------------------
   LAS TARJETAS DEL EQUIPO  ·  QUE NO SE VAYAN HACIA ABAJO
   --------------------------------------------------------------------------
   QUE PASABA
   La tira del carrusel lleva las tarjetas FLOTANDO a la izquierda. Cuando una
   tarjeta no cabe a lo ancho de la tira, la flotacion la manda AL RENGLON DE
   ABAJO en vez de seguir de lado.

   Y el marco del carrusel solo tiene 250 px de alto, con lo de abajo escondido
   (`overflow:hidden`). Asi que de todas esas filas NADA MAS SE VEIA LA PRIMERA.

   Medido con ADMINISTRADOR (154 socios en el nivel 1):
       la tarjeta mide 227 px y la tira 925 -> entran 3 por renglon
       las otras 151 se caian hacia abajo  -> 52 renglones
       y se veian 3 socios de 154

   En celular era peor: la tira mide 355 px, y la tarjeta 170 + 10 de aire = 180.
   Dos tarjetas piden 360, o sea que por 4 px no caben las dos y CADA UNA se iba a
   su propio renglon: 154 renglones, y se veia UN socio por nivel.

   EL ARREGLO
   Se le dice a la tira que NO parta los renglones (`white-space:nowrap`) y las
   tarjetas dejan de flotar (`display:inline-block` + `float:none`). Asi quedan
   todas EN UN SOLO RENGLON y el carrusel las mueve de lado como debe.

   MEDIDO DESPUES: 1 renglon en todas las pantallas, y se ven 4 por vuelta en
   escritorio y tableta, 3 a 600 px, y 2 en celular.

   `vertical-align:top` es para que las tarjetas queden alineadas de arriba y no
   bailando segun su contenido.
   -------------------------------------------------------------------------- */
body.rsl-tema .fondc .frame ul{
  white-space:nowrap !important;
}
body.rsl-tema .fondc .frame ul > li{
  display:inline-block !important;
  float:none !important;
  vertical-align:top !important;
  white-space:normal !important;
}