/* =========================
   1) VARIABLES GLOBALES
   ========================= */
:root{
  /* Paleta / acentos */
  --main-bg-color: linear-gradient(120deg, #2f004d 25%, #00224b 50%, #003657 75%);
  --main-bg-color2: #fffb00;        /* Amarillo */
  --main-bg-color3: #00fefb;        /* Cian */
  --main-bg-color4: #cb00fef9;      /* Violeta */
  --hover2: #fe8700;                /* Naranja hover */

  /* Textos */
  --main-text-color: #ffffff;
  --main-text-color2: #2f004d;

  /* Bordes / utilidades */
  --border-bottom: 3px solid #fffb00; /* OJO: el nombre dice bottom pero lo usás como left en listas */
  --border-left: 5px solid #fffb00;
  --border-top: 3px solid #fffb00;

  /* Variables “nv” (tabla/cards) */
  --nv-card-bg: rgba(0,0,0,.45);
  --nv-border: rgba(255,255,255,.12);
  --nv-field-bg: rgba(255,255,255,.95);
  --nv-field-text: #0c0c0c;
  --nv-text: #ffffff;
  --nv-muted: rgba(255,255,255,.78);
  --nv-accent: #fffb00;
  --nv-radius: 18px;
  --nv-gap: 16px;
}

/* =========================
   2) ESTILOS BASE (BODY + FONDO)
   ========================= */
body{
  margin: 0;
  padding: 0;
  font-family: 'Courier New', Courier, monospace;
  color: var(--main-text-color);

  background: linear-gradient(120deg, #281b47 25%, #5c0071 50%, #009dff 75%);
  background-size: 400% 400%;
  animation: backgroundMove 20s linear infinite;

  overflow-x: hidden;
}

@keyframes backgroundMove{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =========================
   3) CANVAS DE FONDO + CAPA DE CONTENIDO
   ========================= */
canvas{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.content{
  position: relative;
  z-index: 1;
}

/* =========================
   4) HEADER
   ========================= */
header{
  position: relative;
  background-color: rgba(10, 10, 10, 0.7);
  text-align: center;
  padding: 50px 0;
  overflow: hidden;
}

/* Línea inferior animada del header */
header::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--main-bg-color2),
    var(--hover2),
    var(--main-bg-color4),
    var(--main-bg-color3),
    var(--main-bg-color2)
  );
  background-size: 300% 100%;
  animation: gradienteHeader 120s linear infinite;
}

@keyframes gradienteHeader{
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

header .logo-encabezado{
  min-width: 150px;
  max-width: 300px;
}

header h1{
  font-size: clamp(1.5rem, 5vw, 3rem);
  margin: 0;
}

header p{
  font-size: 1.5em;
  margin: 0;
  color: #ff00ff;
}

/* Titulares generales */
h2{
  color: var(--main-bg-color2);
  padding-bottom: 10px;
  /* Antes tenías: border-bottom: var(--main-bg-color2); (eso no dibuja borde)
     Si querés borde real: border-bottom: 2px solid var(--main-bg-color2); */
}

/* =========================
   5) MENÚ / NAV
   ========================= */
nav{
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: rgba(26, 26, 26, 0.7);
}

nav ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 800px;
  padding: 0;
  margin: 0;
}

nav ul li{
  flex: 0 1 auto;
  text-align: center;
  border-radius: 5px;
  list-style: none;
}

nav ul li a{
  display: block;
  text-decoration: none;
  color: #ffffff;
  font-size: 1.2em;
  padding: 10px;
  border-radius: 5px;
  transition: color 0.3s ease;
}

nav ul li a:hover{
  color: var(--hover2);
}

/* Botón hamburguesa */
.menu-toggle{
  display: none;
  cursor: pointer;
}

.menu-toggle span{
  display: block;
  width: 30px;
  height: 3px;
  margin: 5px;
  background-color: var(--main-bg-color3);
  transition: transform 0.4s ease;
}

/* Responsive NAV */
@media screen and (max-width: 768px){
  .menu-toggle{
    display: block;
    margin-right: 20px;
  }

  nav ul{
    display: none;
  }

  nav.active ul{
    display: block;
    text-align: center;
  }

  nav.active ul li{
    display: block;
  }
}

.texto-resaltado{
  color: var(--main-bg-color2);
}

/* =========================
   6) CONTENEDOR GENERAL
   ========================= */
.container{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-size: 1.2em;
}

.container p{
  background-color: rgba(10, 10, 10, 0.7);
  text-align: center;
  padding: 20px;
  border-left: 3px solid #fffb00;
  border-radius: 10px;
  margin: 10px;

  word-break: break-word;
  white-space: normal;
}

.container ul li{
  background-color: rgba(10, 10, 10, 0.7);
  text-align: center;
  padding: 20px;
  border-left: 3px solid #fffb00;
  border-radius: 10px;
}

/* =========================
   7) LISTAS GENERALES
   ========================= */
ul{
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul li{
  background-color: rgba(26, 26, 26, 0.7);
  margin: 10px 0;
  padding: 10px;
  border-left: var(--border-bottom);
}

/* =========================
   8) LABORATORIOS (ÍCONOS)
   ========================= */
.laboratorios{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
}

.container .laboratorios img{
  width: 80px;
  height: 80px;
  opacity: 0.9;
  transition: transform 0.3s, opacity 0.3s;
}

.container .laboratorios img:hover{
  transform: scale(1.2);
  opacity: 1;
}

/* =========================
   9) PROYECTOS / CONTENIDOS
   ========================= */
.proyecto{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.contenido{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

.contenido-card,
.contenido-card-clases{
  display: flex;
  flex: 1 1 calc(50% - 5px);
  max-width: 500px;
  min-width: 300px;
  margin: 10px;
  position: relative;
}

.descripcion-proyecto,
.descripcion-contenido{
  flex: 1;
}

.proyecto-card{
  flex: 1;
  perspective: 1000px;
  max-width: 100%;
  margin-right: 20px;
}

.proyecto-imagen,
.proyecto-video{
  transform: rotateY(-15deg) rotateX(5deg);
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  overflow: hidden;
  background-color: rgba(10, 10, 10, 0.7);
  border-left: var(--border-left);
}

.contenido-imagen,
.contenido-imagen-proyecto,
.explorar-laboratorios{
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  overflow: hidden;
  background-color: rgba(10, 10, 10, 0.7);
  text-align: center;
  padding: 10px;
  border-left: var(--border-left);
  margin-bottom: 20px;
}

/* En explorar-laboratorios estabas usando border completo con var(--border-left),
   lo dejo igual pero más coherente: */
.explorar-laboratorios{
  border: var(--border-left);
  border-left: var(--border-left);
}

.contenido-imagen p{
  word-break: break-word;
  white-space: normal;
}

/* Medios */
.proyecto-imagen img{
  width: 100%;
  height: auto;
  object-fit: cover;
}

.proyecto-video iframe{
  width: 560px;
  height: 315px;
  object-fit: cover;
}

.contenido-imagen img{
  width: 150px;
  height: 150px;
  max-height: 300px;
  object-fit: cover;
  border-radius: 10px;
  padding: 10px;
}

.contenido-imagen-proyecto img,
.explorar-laboratorios img{
  height: 100%;
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 10px;
}

/* Hovers */
.proyecto-card:hover .proyecto-imagen,
.proyecto-card:hover .proyecto-video{
  transform: rotateY(0deg);
}

.contenido-card-clases:hover .contenido-imagen,
.contenido-card:hover .contenido-imagen-proyecto,
.contenido-card:hover .explorar-laboratorios{
  transform: scale(1.1);
}

/* Responsive contenidos */
@media (max-width: 768px){
  .proyecto{
    flex-direction: column;
  }

  .contenido{
    flex-direction: column;
    align-items: center;
  }

  .descripcion-proyecto{
    flex: none;
    width: 100%;
  }

  .proyecto-card,
  .contenido-card{
    width: 90%;
    margin-right: 0;
  }

  .contenido-card{
    flex: 1 1 100%;
    min-width: auto;
    max-width: 100vw;
  }
}

/* =========================
   10) BLOQUES EXTRA
   ========================= */
.experiencia{
  background-color: rgba(26, 26, 26, 0.7);
  margin: 20px 0;
  padding: 20px;
  border-left: var(--border-left);
}

/* =========================
   11) FOOTER
   ========================= */
footer{
  position: relative;
  background-color: rgba(10, 10, 10, 0.7);
  text-align: center;
  padding: 20px 0;
  overflow: hidden;
}

footer::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--main-bg-color2),
    var(--hover2),
    var(--main-bg-color4),
    var(--main-bg-color3),
    var(--main-bg-color2)
  );
  background-size: 300% 100%;
  animation: gradienteFooter 120s linear infinite;
}

@keyframes gradienteFooter{
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

footer p{
  margin: 0;
}

/* =========================
   12) LINKS Y UTILIDADES
   ========================= */
a{
  color: inherit;
  text-decoration: none;
}

#contact p a{
  color: var(--main-text-color);
}

.capacitaciones{
  font-size: 1rem;
  color: var(--main-text-color);
  transition: all 0.3s ease;
}

.capacitaciones:hover{
  font-size: 1.2rem;
  color: #ff00ff;
  text-decoration: underline;
}

/* =========================
   13) REDES SOCIALES
   ========================= */
.social-container,
.social-container-contactame,
.social-container-footer{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 10px 0 15px;
  padding-bottom: 20px;
  border-radius: 10px;
}

.social-container a,
.social-container-footer a{
  margin: 0 10px;
  display: inline-block;
}

.social-container img,
.social-container-contactame img,
.social-container-footer img{
  width: 35px;
  height: 35px;
  transition: transform 0.3s ease;
}

.social-container img:hover,
.social-container-contactame img:hover,
.social-container-footer img:hover{
  transform: scale(1.1);
}

/* =========================
   14) FORMULARIOS (BASE)
   ========================= */
.formulario{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;

  font-size: 1.2em;
}

/* Form: se mantiene tu estética, pero se corrige alineación */
form{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  width: 80%;
  max-width: 500px;

  background-color: rgba(10, 10, 10, 0.7);
  border-left: var(--border-left);
  border-radius: 10px;
  padding: 20px;

  box-shadow: 0 0 15px rgba(255, 217, 0, 0.5);
  margin: 20px;

  /* FIX: espaciado consistente (evita depender de <br><br>) */
  gap: 12px;
}

/* Encabezados dentro del form */
form h2{
  color: white;
  margin-bottom: 8px;
}

/* Labels */
form label{
  display: block;
  color: #fff;
  margin: 5px 0;
  padding: 10px;
  font-weight: bold;
}

/* CONTROLES: mismos anchos y box-sizing */
form input,
form select,
form button{
  width: 100%;
  box-sizing: border-box;
}

/* Inputs */
form input{
  padding: 10px;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}

/* Select: mismo estilo que input (antes estaba al 90% y con borde distinto) */
form select{
  padding: 10px;
  font-size: 1em;
  border: 1px solid #ccc;     /* lo igualo al input */
  border-radius: 5px;
  background-color: #fff;
  color: #000;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  cursor: pointer;
}

form input:focus,
form select:focus{
  border-color: #00ff99;
  outline: none;
}

/* Botones */
form button{
  padding: 12px;
  font-size: 1.2em;
  background-color: rgba(10, 10, 10, 0.7);
  color: var(--main-bg-color2);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 0 0 15px rgba(255, 213, 0, 0.5);

  /* FIX: antes tenías margin:10px (desalineaba respecto al input) */
  margin: 0;
}

/* separación entre botones consecutivos */
form button + button{
  margin-top: 10px;
}

form button:hover{
  color: #000;
  background-color: var(--main-bg-color2);
}

form img{
  width: 150px;
  margin-top: 20px;
}

form .error-message{
  display: flex;
  margin-top: 10px;
  color: #ffc400;
}

/* Responsive formularios */
@media screen and (max-width: 768px){
  .formulario{ padding: 10px; }
  form{ padding: 15px; }
  form h2{ font-size: 1.5em; }
  form input{ font-size: 1em; padding: 8px; }
  form button{ font-size: 1em; padding: 10px; }
}

@media screen and (max-width: 480px){
  .formulario{ padding: 5px; }
  form{ padding: 10px; }
  form h2{ font-size: 1.2em; }
  form input{ font-size: 0.9em; }
  form button{ font-size: 1em; padding: 8px; }
}

/* =========================
   15) DOS FORMULARIOS EN FILA (PANEL)
   ========================= */
.formularios-panel{
  background-color: rgba(10,10,10,0.25);
  border-radius: 18px;
  padding: 24px;
  margin: 30px auto;
  max-width: 1200px;

  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: flex-start;
  
}

/* ambos paneles con mismo comportamiento */
.formularios-panel .formulario{
  flex: 1;
  min-width: 320px;
  max-width: 600px;
}

/* En mobile: uno debajo del otro, mismo ancho */
@media (max-width: 900px){
  .formularios-panel{
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
  }

  .formularios-panel .formulario{
    width: 100%;
    max-width: 600px;
    padding: 0;
    box-sizing: border-box;
  }

  /* El form pasa a ocupar el 100% del bloque (no 80%) */
  .formularios-panel .formulario > form{
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    box-sizing: border-box;
  }
}

/* =========================
   16) PANEL DE GESTIÓN
   ========================= */
.panel{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.contenido-panel{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.contenido-card-panel{
  flex: 0 0 calc(33.333% - 14px);
  box-sizing: border-box;
  padding: 10px;
  min-width: 260px;
  min-height: 220px;
  transition: transform 0.3s ease;
}

.contenido-card-panel:hover{
  transform: scale(1.03);
  z-index: 2;
}

.contenido-imagen-panel{
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  border-radius: 10px;
  overflow: hidden;
  background-color: rgba(10,10,10,0.7);
  text-align: center;
  padding: 10px;
  border-left: var(--border-left);
  margin-bottom: 20px;
}

.contenido-imagen-panel p{
  background-color: transparent !important;
  border-left: none !important;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.icon-sgi{
  width: 70px;
  height: 70px;
  margin: 15px;
}

@media (max-width: 1024px){
  .contenido-card-panel{
    flex: 0 0 calc(50% - 10px);
  }
}

@media (max-width: 768px){
  .panel{
    flex-direction: column;
    align-items: center;
  }

  .contenido-panel{
    justify-content: center;
  }

  .contenido-card-panel{
    flex: 0 0 94%;
    max-width: 94%;
    min-width: 90%;
    margin: 0 auto;
  }

  .contenido-card-panel:hover{
    transform: none;
  }
}

/* =========================
   17) TABLA NOVA VINCI
   ========================= */
.tabla-nv-wrap{
  width: 100%;
  max-width: 100%;
  margin: 20px auto;

  /* aire lateral */
  padding: 0 clamp(16px, 3vw, 32px);


  overflow-x: auto;
  box-sizing: border-box;
}

.tabla-nv{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background-color: rgba(10,10,10,0.7);
  border-left: var(--border-left);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(255, 213, 0, 0.35);
  box-sizing: border-box;
  table-layout: auto;     /* en vez de fixed */
}

.tabla-nv thead{
  background: rgba(0,0,0,0.35);
}

.tabla-nv caption{
  padding: 12px 10px;
  text-align: center;
  font-weight: bold;
  color: var(--main-bg-color2);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  white-space: nowrap;
}

.tabla-nv th{
  padding: 12px 10px;
  text-align: center;
  font-weight: bold;
  color: var(--main-bg-color2);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  white-space: nowrap; /* en vez de normal */
  word-break: normal;     /* evita cortes raros */
  overflow-wrap: normal;  /* evita forzar wraps */
}

.tabla-nv td{
  padding: 12px 10px;
  text-align: center;
  color: var(--main-text-color);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap; /* en vez de normal */
  word-break: normal;     /* evita cortes raros */
  overflow-wrap: normal;  /* evita forzar wraps */
}

.tabla-nv tbody tr:nth-child(even){
  background-color: rgba(255,255,255,0.03);
}

.tabla-nv tbody tr:hover{
  background-color: rgba(255, 251, 0, 0.10);
}

.tabla-nv tbody tr:last-child td{
  border-bottom: none;
}

.tabla-nv a{
  color: var(--main-bg-color3);
  text-decoration: none;
}

.tabla-nv a:hover{
  color: var(--hover2);
  text-decoration: underline;
}

@media (max-width: 768px){
  .tabla-nv th,
  .tabla-nv td{
    padding: 10px 8px;
    font-size: 0.95em;
  }
}

/* Botón editar (tabla) */
.btn-editar{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.35);
  color: var(--main-bg-color3);
  text-decoration: none;
  transition: 0.25s ease;
}

.btn-editar:hover{
  background: rgba(255,255,255,0.08);
  color: var(--hover2);
}

/* =========================
   18) CERRAR SESIÓN (UTIL)
   ========================= */
.cerrar-sesion{
  display: flex;
}

#boton-cerrar-sesion{
  color: var(--hover2);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* =========================
   19) VIDEO / IFRAME (JUEGO / AVATAR)
   ========================= */
#game-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  height: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}

#video-container{
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16/9;
  margin: 15px auto 20px;
}

#avatar-video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: var(--border-bottom);
  border-radius: 10px;
}

/* =========================
   20) FIX: CENTRADO EXPLORAR LABORATORIOS
   ========================= */
#experiencia-educativa .contenido-card{
  flex: 0 1 auto;
  min-width: auto;
  max-width: 500px;
  margin: 10px auto;
}

#experiencia-educativa .explorar-laboratorios{
  display: flex;
  justify-content: center;
  align-items: center;
}

#experiencia-educativa .explorar-laboratorios a{
  display: inline-block;
}

#experiencia-educativa .explorar-laboratorios img{
  display: block;
}

/* =========================
   KPI PANELS (GLOBAL)
   ========================= */

.panel-kpi{
  width: 100%;
  max-width: 600px;            /* alineado al 2do form */
  margin: 10px auto 20px auto; /* aire arriba */
  padding: 16px;
  border-radius: 12px;
  background-color: rgba(10,10,10,0.7);
  border-left: var(--border-left);
  box-shadow: 0 0 15px rgba(255, 217, 0, 0.35);
  box-sizing: border-box;
  text-align: center;
}

.panel-kpi h2{
  margin: 0 0 12px 0;
  color: #fff;
}

.kpi-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.kpi-card{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  border-radius: 12px;
  padding: 12px;
}

.kpi-label{
  display: block;
  opacity: .85;
  font-size: 13px;
  margin-bottom: 6px;
}

.kpi-value{
  display: block;
  font-size: 22px;
  font-weight: 900;
}

.kpi-value.small{
  font-size: 14px;
  font-weight: 700;
  opacity: .9;
  word-break: break-word;
}

@media (max-width: 520px){
  .kpi-grid{ grid-template-columns: 1fr; }
}



/* Módulo extra debajo de KPIs (misma estética, menos alto) */
.formularios-panel .formulario > form + form{
  margin-top: 10px;   /* separa buscar/kpi del módulo */
}

.panel-kpi.panel-kpi-full{
  max-width: 1200px;
  margin: 20px auto;
}





/*::::::::::::::::::::::::::::::::::::::::::::::::::::*/
.panel-titulo{
  display: inline-block;
  margin: 20px auto 25px;
  padding: 12px 22px;
  background: rgba(10,10,10,0.7);
  border-left: var(--border-left);
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(255, 213, 0, 0.20);
}



/* =========================
   TABLAS RESPONSIVE (MOBILE)
   ========================= */

.tabla-nv-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* scroll suave en mobile */
}

@media (max-width: 1024px) {

  .tabla-nv {
    min-width: 900px; /* fuerza scroll si la pantalla es chica */
  }

  .tabla-nv th,
  .tabla-nv td {
    font-size: 0.85rem;
    padding: 6px;
  }

}

@media (max-width: 1024px) {
  .tabla-nv-wrap::after {
    content: "⇠ Deslizá para ver más ⇢";
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: #aaa;
    padding: 6px 0;
  }
}

.tabla-nv th:first-child,
.tabla-nv td:first-child {
  position: sticky;
  left: 0;
  background: rgba(20,20,20,0.95);
  z-index: 2;
}


/* =========================
   TEXTAREA (Observaciones)
   ========================= */
.formulario textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;

  padding: 12px;
  margin-bottom: 12px;

  font-family: inherit;
  font-size: 1rem;
  color: var(--main-text-color);

  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--main-bg-color2);
  border-radius: 6px;

  outline: none;
  box-sizing: border-box;
}

/* Focus */
.formulario textarea:focus {
  border-color: var(--main-bg-color3);
  background-color: rgba(0, 0, 0, 0.45);
}

/* Placeholder */
.formulario textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* Disabled (por coherencia) */
.formulario textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================
   KPI RESULTADO ANCHO COMPLETO
   ========================= */
.kpi-grid.kpi-grid-full {
  grid-template-columns: 1fr;
}

.kpi-card.kpi-card-wide {
  padding: 22px;
  font-size: 1.1em;
}

/* =========================
   TABLAS GRANDES CON SCROLL
   ========================= */

.tabla-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 420px; /* ajustable */
  border-radius: 12px;
}

/* Evita que las columnas se aplasten */
.tabla-scroll table {
  min-width: 1200px;
}

/* Scroll suave */
.tabla-scroll::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.tabla-scroll::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
}

.tabla-scroll::-webkit-scrollbar-thumb {
  background: var(--main-bg-color2);
  border-radius: 10px;
}

/* =========================
   RESULTADOS (no al borde)
   ========================= */
.resultados-wrap{
  max-width: 1500px;
  margin: 0 auto 30px;
  padding: 0 clamp(16px, 3vw, 32px);
  box-sizing: border-box;
}

/* Evita “doble padding” si ya lo tenías en .tabla-nv-wrap */
.resultados-wrap .tabla-nv-wrap{
  padding: 0;
}



/* =========================
   CALENDARIO - NOVA VINCI (FullCalendar)
   - Vista Trimestre única
   - Meses como "cards"
   - Responsive 3/2/1 columnas
   ========================= */

/* Apunta al H2 del panel (título general del calendario) */
.nv-cal-panel h2{
  text-align:center;        /* centra el texto del título */
  margin-bottom: 16px;      /* separa el título del bloque de abajo */
}

/* Contenedor “marco” del calendario (card grande) */
.nv-cal-wrap{
  background: rgba(10,10,10,0.55);              /* fondo oscuro translúcido */
  border: 1px solid rgba(255,255,255,0.10);     /* borde fino claro */
  border-radius: 16px;                          /* esquinas redondeadas */
  padding: 14px;                                /* padding interno del marco */
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);      /* sombra */
}

/* Cabecera superior: chips a la izq + nota a la der */
.nv-cal-head{
  display:flex;                                  /* coloca hijos en fila */
  gap: 14px;                                     /* espacio entre columnas */
  justify-content: space-between;                /* separa extremos */
  align-items: flex-start;                       /* alinea arriba */
  padding: 10px 10px 14px 10px;                  /* padding interno */
  border-bottom: 1px solid rgba(255,255,255,0.08); /* línea separadora */
  margin-bottom: 10px;                           /* separa del calendario */
}

/* =========================
   CHIPS DE AULAS ASIGNADAS (ARRIBA)
   ========================= */

/* Columna izquierda: “Mis aulas asignadas” + chips */
.nv-cal-aulas{
  display:flex;             /* contenedor flex */
  flex-direction: column;   /* apila título + fila chips */
  gap: 8px;                 /* separa el título de chips */
  min-width: 320px;         /* asegura ancho mínimo */
}

/* Título “Mis aulas asignadas” */
.nv-cal-aulas-title{
  font-size: 12px;          /* tamaño pequeño */
  opacity: .75;             /* un poco más tenue */
  letter-spacing: .4px;     /* espaciado de letras */
}

/* Fila donde se “envuelven” los chips */
.nv-aulas-chips{
  display:flex;             /* chips en línea */
  flex-wrap: wrap;          /* si no entran bajan a otra línea */
  gap: 8px;                 /* separación entre chips */
  align-items: center;      /* centra verticalmente */
}

/* Chip individual */
.nv-chip{
  display:inline-flex;                          /* chip como inline-flex */
  align-items: center;                          /* centra contenido vertical */
  gap: 6px;                                     /* espacio entre # y nombre */
  padding: 6px 10px;                            /* padding del chip */
  border-radius: 999px;                         /* “píldora” */
  background: rgba(203, 0, 254, 0.18);           /* violeta translúcido */
  border: 1px solid rgba(203, 0, 254, 0.30);     /* borde violeta */
  color: rgba(255,255,255,0.92);                /* texto claro */
  font-size: 12px;                              /* tamaño */
  white-space: nowrap;                          /* no cortar en 2 líneas */
  cursor: default;                              /* cursor normal */
}

/* Texto del nombre dentro del chip */
.nv-chip-name{
  opacity: .85;               /* ligeramente tenue */
  max-width: 180px;           /* ancho máximo */
  overflow: hidden;           /* oculta lo que sobra */
  text-overflow: ellipsis;    /* … al final */
}

/* Estado “off” (si lo usás) */
.nv-chip-off{
  background: rgba(203, 0, 254, 0.10);     /* más tenue */
  border-color: rgba(203, 0, 254, 0.18);   /* borde más tenue */
  opacity: .9;                             /* baja intensidad */
}

/* Estado “muted” (si lo usás) */
.nv-chip-muted{
  background: rgba(255,255,255,0.06);     /* grisáceo */
  border-color: rgba(255,255,255,0.10);   /* borde gris */
  color: rgba(255,255,255,0.75);          /* texto más apagado */
}

/* Nota a la derecha */
.nv-cal-note{
  font-size: 13px;        /* tamaño */
  opacity: .75;           /* tenue */
  text-align: right;      /* alineado a la derecha */
  max-width: 420px;       /* límite de ancho */
}

/* Contenedor del calendario (un padding extra) */
.nv-calendar{
  padding: 8px 2px;       /* padding vertical/horizontal */
}

/* =========================
   TIPOGRAFÍA FULLCALENDAR
   ========================= */

/* Base de fuente dentro de FullCalendar */
.nv-calendar .fc{
  font-size: 12px;        /* tamaño general */
}

/* Barra superior del calendario (prev/next/today/título) */
.nv-calendar .fc-toolbar{
  margin-bottom: 10px;    /* separa toolbar de la grilla */
}

/* Título central: “enero - marzo de 2026” */
.nv-calendar .fc-toolbar-title{
  font-size: 16px;        /* tamaño */
  letter-spacing: .5px;   /* tracking */
  text-transform: lowercase; /* fuerza minúsculas */
}

/* Botones prev/next/today */
.nv-calendar .fc-button{
  background: rgba(255,255,255,0.08);      /* fondo tenue */
  border: 1px solid rgba(255,255,255,0.14);/* borde */
  color: #fff;                              /* texto blanco */
  border-radius: 10px;                      /* redondeo */
  padding: 6px 10px;                        /* padding */
}

/* Hover de botón */
.nv-calendar .fc-button:hover{
  background: rgba(255,255,255,0.12);       /* un poco más claro */
}

/* Botón disabled */
.nv-calendar .fc-button:disabled{
  opacity: .55;                             /* más apagado */
}

/* Colores de textos clave del grid */
.nv-calendar .fc-multimonth-title,
.nv-calendar .fc-col-header-cell-cushion,
.nv-calendar .fc-daygrid-day-number{
  color: rgba(255,255,255,0.9); /* texto claro */
  text-decoration: none;         /* sin subrayado */
}

/* =========================
   ✅ TRIMESTRE COMO GRID RESPONSIVE
   ========================= */

/* Contenedor de los 3 meses (multiMonth) */
.nv-calendar .fc-multimonth{
  display: grid;                                    /* usa CSS Grid */
  grid-template-columns: repeat(3, minmax(0, 1fr));  /* 3 columnas iguales */
  gap: 14px;                                        /* separación entre meses */
}

/* Cada “mes” como card */
.nv-calendar .fc-multimonth-month{
  background: rgba(0,0,0,0.22);                  /* fondo */
  border: 1px solid rgba(255,255,255,0.10);      /* borde */
  border-radius: 16px;                           /* redondeo */
  overflow: hidden;                              /* recorta contenido */
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);        /* sombra */
}

/* Header del mes (título “enero”) */
.nv-calendar .fc-multimonth-month .fc-multimonth-header{
  background: rgba(0,0,0,0.28);                 /* fondo */
  border-bottom: 1px solid rgba(255,255,255,0.08); /* línea */
  padding: 10px 10px 8px;                      /* padding */
}

/* Fondo base de cada celda día */
.nv-calendar .fc-daygrid-day{
  background: rgba(255,255,255,0.02);          /* fondo muy leve */
}

/* Marco interno de cada día (donde están número + eventos/chips) */
.nv-calendar .fc-daygrid-day-frame{
  height: 86px;        /* <- probá 78/86/92 según te guste */
  min-height: 86px;    /* asegura igualdad */
  overflow: hidden;    /* evita que el contenido rompa la celda */
}

/* =========================
   RESPONSIVE: 2 columnas
   ========================= */
@media (max-width: 980px){
  .nv-calendar .fc-multimonth{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* pasa a 2 columnas */
  }
}

/* =========================
   RESPONSIVE: 1 columna (mobile)
   ========================= */
@media (max-width: 640px){
  .nv-calendar .fc-multimonth{
    grid-template-columns: 1fr; /* una columna */
  }

  .nv-calendar .fc-toolbar{
    flex-wrap: wrap; /* toolbar se parte en líneas */
    gap: 8px;        /* separaciones */
  }
}

/* =========================
   ✅ HOY (TODAY) EN NARANJA
   ========================= */

/* Fondo de hoy */
.nv-calendar .fc .fc-day-today{
  background: rgba(255, 140, 0, 0.18) !important; /* overlay naranja */
  box-shadow: inset 0 0 0 2px rgba(255, 140, 0, 0.55); /* borde interno */
}

/* Número del día hoy */
.nv-calendar .fc .fc-day-today .fc-daygrid-day-number{
  color: #ffb347 !important; /* naranja claro */
  font-weight: 800;          /* negrita */
}

/* Borde de la celda hoy */
.nv-calendar .fc .fc-daygrid-day.fc-day-today{
  border-color: rgb(255, 140, 0) !important; /* refuerza borde */
}

/* =========================
   ✅ RANGO VIOLETA (BACKGROUND EVENTS)
   ========================= */

/* eventos “de fondo” (bg events) */
.nv-calendar .fc-bg-event{
  opacity: 1 !important; /* que no se vea apagado */
}

/* clases común para activa/inactiva */
.nv-calendar .nv-evt-activa.fc-bg-event,
.nv-calendar .nv-evt-inactiva.fc-bg-event{
  background: rgba(203, 0, 254, 0.18) !important;  /* violeta claro */
  border: 1px solid rgba(203, 0, 254, 0.30) !important; /* borde */
}

/* activa (más fuerte) */
.nv-calendar .nv-evt-activa.fc-bg-event{
  background: rgba(203, 0, 254, 0.24) !important; /* más intenso */
  border-color: rgba(203, 0, 254, 0.45) !important; /* borde más fuerte */
  box-shadow: 0 0 0 2px rgba(203, 0, 254, 0.08); /* “halo” */
}

/* inactiva (más tenue) */
.nv-calendar .nv-evt-inactiva.fc-bg-event{
  background: rgba(203, 0, 254, 0.10) !important; /* tenue */
  border-color: rgba(203, 0, 254, 0.22) !important; /* tenue */
  filter: saturate(0.7); /* baja saturación */
}

/* =========================
   ✅ CHIPS CON IDs (ESTILO CHIP)
   ========================= */

/* estilo base del chip */
.nv-idchip{
  display:inline-flex;                  /* inline-flex */
  align-items:center;                   /* centra vertical */
  justify-content:center;               /* centra horizontal */
  padding: 1px;                         /* padding mínimo */
  border-radius: 999px;                 /* píldora */
  background: rgba(0, 0, 0, 0.801);     /* negro translúcido */
  border: 1px solid rgba(255,255,255,0.16); /* borde */
  font-size: 11px;                      /* tamaño */
  line-height: 1.2;                     /* alto de línea */
  color: rgba(255,255,255,0.92);        /* color texto */
}

/* chip “+N” (si lo usás) */
.nv-idchip-more{
  background: rgba(255, 3, 3, 0.06);   /* leve rojizo */
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.80);
}

/* Separa el número del día del contenido (chips/eventos) */
.nv-calendar .fc-daygrid-day-top{
  margin-bottom: 5px; /* 👈 esto “baja” lo de abajo */
}

/* =========================
   OCULTAR TEXTO DE EVENTO
   ========================= */

/* Oculta títulos/hora/contenedores de eventos (para que quede limpio) */
.nv-calendar .fc-event-title,
.nv-calendar .fc-event-title-container,
.nv-calendar .fc-event-main,
.nv-calendar .fc-event-main-frame,
.nv-calendar .fc-event-time{
  display: none !important;
}

/* redundante: asegura que bg events no muestren texto */
.nv-calendar .fc-bg-event .fc-event-title,
.nv-calendar .fc-bg-event .fc-event-main{
  display: none !important;
}

/* =========================
   FOOTER
   ========================= */
.nv-cal-foot{
  text-align:center; /* centra texto */
  margin-top: 12px;  /* separa del calendario */
  opacity: .75;      /* tenue */
  font-size: 13px;   /* tamaño */
}

/* =========================
   HEAD RESPONSIVE (arriba)
   ========================= */
@media (max-width: 860px){
  .nv-cal-head{
    flex-direction: column; /* apila columnas */
    align-items: stretch;   /* ocupa ancho */
  }
  .nv-cal-note{
    text-align: left;       /* nota a la izq en móvil */
    max-width: none;        /* sin límite de ancho */
  }
  .nv-cal-aulas{
    min-width: 0;           /* quita mínimo */
  }
  .nv-chip-name{
    max-width: 120px;       /* achica truncado */
  }
}

/* =========================
   ⚠️ CHIPS DENTRO DEL DÍA (TU PROBLEMA ROJO ESTÁ ACÁ)
   ========================= */

/* Contenedor donde insertás los IDs (nv-day-ids) */
.nv-calendar .nv-day-ids{
  display: flex;               /* usa flex */
  flex-direction: row;
  flex-wrap:wrap;
  position: relative;          /* permite mover con bottom */
  bottom: 6px;                 /* 👈 ESTO “SUBE” el bloque y puede crear “franjas” raras */
  gap: 5px;                    /* separación entre chips */
  overflow: hidden;            /* recorta contenido */
  bottom: auto;                /* elimina desplazamiento */
  margin-top: 4px;          /* aire mínimo debajo del número */
  align-items: flex-start;  /* alinea arriba */
  margin-left: 5px;
}





/* Ajustes del chip dentro del día (redefine nv-idchip) */
.nv-calendar .nv-idchip{
  flex: 0 0 auto;              /* no crece */
  white-space: nowrap;         /* no salta línea */
  max-width: 42%;              /* limita ancho */
  text-overflow: ellipsis;     /* … si no entra */
  overflow: hidden;            /* recorta */
}

/* El +N no se achica */
.nv-calendar .nv-idchip-more{
  flex-shrink: 0;              /* evita que se aplaste */
}

/* 👇 RESERVA ESPACIO ABAJO DE LA CELDA
   Esto es el principal causante de la “franja” roja si el bloque de IDs
   NO está realmente ocupando esa zona.
*/
.nv-calendar .fc-daygrid-day-frame {
  padding-bottom: 28px;        /* 👈 crea “aire” abajo SIEMPRE */
}

/* Mobile: chips más chicos */
@media (max-width: 520px){
  .nv-calendar .nv-idchip{
    font-size: 10px;           /* baja tamaño */
    padding: 2px 4px;          /* ajusta padding */
  }
}


/* =========================
   BOTONES (Nova Vinci)
   - btn-primario: CTA (amarillo)
   - btn-secundario: alternativo (oscuro/cian)
   ========================= */

/* Base común (por si usás <a> o <button>) */
.btn-primario,
.btn-secundario{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 100%;
  box-sizing: border-box;

  padding: 12px 14px;
  border-radius: 8px;

  font-family: inherit;
  font-size: 1.05em;
  font-weight: 800;
  letter-spacing: .2px;

  cursor: pointer;
  user-select: none;

  transition: transform .12s ease, background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  text-decoration: none; /* por si es <a> */
}

/* PRIMARIO: amarillo con glow */
.btn-primario{
  background: rgba(255, 251, 0, 0.92); /* amarillo */
  color: #111;
  border: 1px solid rgba(255, 251, 0, 0.55);
  box-shadow:
    0 0 15px rgba(255, 213, 0, 0.35),
    0 6px 18px rgba(0,0,0,0.35);
}

.btn-primario:hover{
  background: var(--hover2); /* naranja hover */
  border-color: rgba(254, 135, 0, 0.65);
  color: #111;
  transform: translateY(-1px);
  box-shadow:
    0 0 16px rgba(254, 135, 0, 0.35),
    0 10px 20px rgba(0,0,0,0.35);
}

.btn-primario:active{
  transform: translateY(0);
  box-shadow:
    0 0 10px rgba(255, 213, 0, 0.25),
    0 4px 10px rgba(0,0,0,0.30);
}

/* SECUNDARIO: oscuro con borde cian/violeta */
.btn-secundario{
  background: rgba(10, 10, 10, 0.70);
  color: var(--main-bg-color3); /* cian */
  border: 1px solid rgba(0, 254, 251, 0.35);
  box-shadow:
    0 0 14px rgba(0, 254, 251, 0.18),
    0 6px 18px rgba(0,0,0,0.35);
}

.btn-secundario:hover{
  background: rgba(0, 0, 0, 0.80);
  color: var(--main-bg-color2); /* amarillo */
  border-color: rgba(203, 0, 254, 0.45); /* violeta */
  transform: translateY(-1px);
  box-shadow:
    0 0 16px rgba(203, 0, 254, 0.22),
    0 10px 20px rgba(0,0,0,0.35);
}

.btn-secundario:active{
  transform: translateY(0);
}

/* Focus accesible */
.btn-primario:focus,
.btn-secundario:focus{
  outline: none;
}

.btn-primario:focus-visible{
  box-shadow:
    0 0 0 3px rgba(255, 251, 0, 0.35),
    0 0 15px rgba(255, 213, 0, 0.35);
}

.btn-secundario:focus-visible{
  box-shadow:
    0 0 0 3px rgba(0, 254, 251, 0.25),
    0 0 14px rgba(0, 254, 251, 0.18);
}

/* Disabled */
.btn-primario:disabled,
.btn-secundario:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Si los botones están dentro de form, no rompas el layout */
form .btn-primario,
form .btn-secundario{
  margin: 0;
}

/* Separación entre botones consecutivos en formularios */
form .btn-primario + .btn-secundario,
form .btn-secundario + .btn-primario,
form .btn-primario + .btn-primario,
form .btn-secundario + .btn-secundario{
  margin-top: 10px;
}


/* =========================
   FIX UI: Servicios 1:1 (alineación + botón)
   Pegá esto AL FINAL del style.css
   ========================= */

/* 1) En tarjetas tipo "proyecto" alineamos arriba (evita sensación de corrido) */
.proyecto{
  align-items: flex-start;
}

/* 2) Listas dentro de descripcion-proyecto: no barra gigante centrada */
.descripcion-proyecto ul{
  width: 100%;
  max-width: 980px;      /* ajustable */
  margin: 0 auto;
  padding: 0;
}

.descripcion-proyecto ul li{
  text-align: left;      /* ✅ en vez de centrado */
  padding: 14px 16px;
  border-left: var(--border-left);
  border-radius: 10px;
  background-color: rgba(10, 10, 10, 0.7);
}

/* 3) Botones NV: por defecto NO ocupan 100% (así no quedan gigantes) */
.btn-primario,
.btn-secundario{
  width: auto;           /* ✅ clave */
  min-width: 240px;      /* ajustable */
  max-width: 420px;      /* ajustable */
}

/* 4) Utilidad: centrar CTA */
.btn-center{
  margin: 14px auto 0;
}

/* 5) Utilidad: botón full width SOLO cuando lo pidas */
.btn-block{
  width: 100%;
  max-width: 500px;
}

/* 6) En mobile sí conviene que el CTA sea más ancho */
@media (max-width: 520px){
  .btn-primario,
  .btn-secundario{
    width: 100%;
    max-width: 520px;
  }
}

/* =========================
   FIX HOME - Servicios (index.php)
   Pegá esto AL FINAL del style.css
   ========================= */

/* Contenedor "card" para cada servicio */
.nv-servicio{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 24px;
  padding: 18px 18px 20px;
  box-sizing: border-box;

  background-color: rgba(10, 10, 10, 0.55);
  border-left: var(--border-left);
  border-radius: 14px;
  box-shadow: 0 0 15px rgba(0,0,0,0.25);
}

/* Título dentro del servicio */
.nv-servicio h3{
  margin: 0 0 12px 0;
}

/* Normalizamos ancho de texto dentro del servicio */
.nv-servicio p,
.nv-servicio ul{
  width: 100%;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* Tus .container p ya tiene estilo "card". Aquí evitamos que se vea gigante */
.nv-servicio p{
  margin-top: 10px;
  margin-bottom: 14px;
}

/* Listas del servicio: que no queden como barras inmensas centradas */
.nv-servicio ul{
  padding: 0;
  margin: 0 auto 14px;
}

.nv-servicio ul li{
  text-align: left;
  padding: 14px 16px;
  margin: 10px 0;

  background-color: rgba(10, 10, 10, 0.70);
  border-left: var(--border-left);
  border-radius: 10px;
}

/* ✅ CENTRADO REAL del botón:
   display:flex lo vuelve "block-level", entonces margin auto centra.
*/
.btn-center{
  display: flex;            /* clave */
  width: fit-content;       /* evita botón gigante */
  max-width: 100%;
  margin: 14px auto 0;      /* centrado */
}

/* En pantallas chicas conviene que el CTA sea ancho */
@media (max-width: 520px){
  .btn-center{
    width: 100%;
    max-width: 520px;
    justify-content: center;
  }
}

/* =========================
   FIX FORM - Radios "Servicio"
   Pegá esto AL FINAL del style.css
   ========================= */

/* Caja del bloque Servicio dentro del formulario */
.nv-radio-box{
  width: 100%;
  box-sizing: border-box;

  background-color: rgba(0,0,0,0.35);
  border-left: var(--border-left);
  border-radius: 10px;

  padding: 14px 16px;
  margin: 6px 0 2px;

  text-align: left; /* ✅ que no quede todo centrado */
}

/* Título "Servicio:" */
.nv-radio-title{
  margin: 0 0 10px 0;
  padding: 0;                 /* anula padding heredado */
  background: transparent;    /* evita efecto “card” */
  border-left: none;          /* evita doble borde */
  color: var(--main-text-color);
  font-weight: 800;
}

/* Grilla de opciones (2 filas prolijas) */
.nv-radio-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Cada opción: alinea radio + texto */
.nv-radio-option{
  display: flex !important;          /* ✅ gana a form label{display:block} */
  align-items: center;
  justify-content: flex-start;
  gap: 10px;

  padding: 0 !important;             /* ✅ mata padding global del label */
  margin: 0 !important;              /* ✅ mata margin global del label */
  background: transparent !important;/* ✅ sin “card” */
  border-left: none !important;      /* ✅ sin borde */
  border-radius: 0 !important;

  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* Radio: tamaño y alineación */
.nv-radio-option input[type="radio"]{
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--main-bg-color3); /* cian */
}

/* En mobile, más compacto */
@media (max-width: 520px){
  .nv-radio-box{ padding: 12px 12px; }
  .nv-radio-option{ font-size: 1em; }
}

/* =========================
   FIX OVERFLOW MOBILE - Servicios (index.php)
   Pegá esto AL FINAL del style.css
   ========================= */

/* Regla general anti-overflow */
*, *::before, *::after{
  box-sizing: border-box;
}

html, body{
  max-width: 100%;
  overflow-x: hidden;
}

/* Ajustes puntuales para el módulo "servicios" */
@media (max-width: 520px){

  /* 1) El contenedor no debe empujar el ancho */
  #servicios.container{
    padding-left: 12px;
    padding-right: 12px;
  }

  /* 2) La card del servicio nunca excede el ancho */
  #servicios .nv-servicio{
    width: 100%;
    max-width: 100%;
    padding: 14px 12px;
    margin: 0 0 18px 0; /* sin auto laterales */
  }

  /* 3) Tus .container p meten margin:10px (eso suma a los costados).
        En mobile lo neutralizamos SOLO dentro de servicios */
  #servicios .nv-servicio p{
    margin-left: 0;
    margin-right: 0;
    padding: 14px 12px;  /* más compacto */
  }

  /* 4) UL y LI: compactos y al 100% */
  #servicios .nv-servicio ul{
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  #servicios .nv-servicio ul li{
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 12px 12px;
  }

  /* 5) Botón: 100% del card, centrado */
  #servicios .nv-servicio .btn-center{
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
}

/* Red de seguridad para cualquier media */
img, iframe, video{
  max-width: 100%;
}