/* ============================================================
   TEST DE ENEAGRAMA - GRUPO ENLASA
   Hoja de estilos corporativa
   Paleta tomada del logotipo institucional
   ============================================================ */

:root{
  /* Marca Enlasa */
  --verde-900:#00300B;
  --verde-800:#00420F;
  --verde-700:#005418;
  --verde-600:#006B28;
  --verde-500:#008038;
  --verde-400:#12A04E;
  --verde-100:#E4F2E8;
  --verde-050:#F2F8F4;

  --amarillo-500:#F6E245;
  --amarillo-600:#E2CB1F;
  --amarillo-100:#FDF8D5;

  --negro:#1C1C1C;
  --gris-900:#2B2F2C;
  --gris-700:#555C57;
  --gris-500:#8A918C;
  --gris-300:#D6DBD7;
  --gris-200:#E7EBE8;
  --gris-100:#F4F6F4;
  --blanco:#FFFFFF;

  --rojo:#B3261E;
  --rojo-claro:#FCECEA;
  --ambar:#9A6700;
  --ambar-claro:#FFF6E0;

  --radio:14px;
  --radio-sm:9px;
  --sombra:0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,66,15,.07);
  --sombra-fuerte:0 10px 32px rgba(0,66,15,.16);

  --fuente-titulo:'Montserrat','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --fuente-texto:'Open Sans','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  --alto-barra:64px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--fuente-texto);
  font-size:15.5px;
  line-height:1.6;
  color:var(--gris-900);
  background:var(--gris-100);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

body.body--publico{
  background:
    radial-gradient(1100px 460px at 50% -180px, rgba(0,128,56,.16), transparent 70%),
    var(--gris-100);
}

h1,h2,h3,h4{font-family:var(--fuente-titulo);color:var(--verde-800);margin:0 0 .5em;line-height:1.25}
h1{font-size:1.9rem;font-weight:800;letter-spacing:-.01em}
h2{font-size:1.3rem;font-weight:700}
h3{font-size:1.05rem;font-weight:700}
p{margin:0 0 1em}
a{color:var(--verde-600);text-decoration:none}
a:hover{text-decoration:underline}

/* ------------------------------------------------------------
   Barra superior
   ---------------------------------------------------------- */
.barra{
  background:linear-gradient(120deg,var(--verde-900) 0%,var(--verde-700) 55%,var(--verde-500) 100%);
  color:var(--blanco);
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  position:sticky;top:0;z-index:40;
}
.barra__contenido{
  max-width:1180px;margin:0 auto;padding:.7rem 1.25rem;
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
}
.marca{display:flex;align-items:center;gap:.7rem;color:inherit;text-decoration:none}
.marca:hover{text-decoration:none}
.marca__logo{width:42px;height:42px;border-radius:50%;background:var(--blanco);object-fit:cover;flex:none;
  box-shadow:0 0 0 2px rgba(246,226,69,.5)}
.marca__texto{display:flex;flex-direction:column;line-height:1.15}
.marca__texto strong{font-family:var(--fuente-titulo);font-size:1.02rem;font-weight:700;letter-spacing:.2px}
.marca__texto small{font-size:.74rem;opacity:.85;letter-spacing:.6px;text-transform:uppercase}

.nav{display:flex;gap:.25rem;margin-left:auto;flex-wrap:wrap}
.nav__link{
  color:rgba(255,255,255,.88);padding:.45rem .85rem;border-radius:999px;
  font-size:.9rem;font-weight:600;transition:background .15s,color .15s;
}
.nav__link:hover{background:rgba(255,255,255,.13);color:#fff;text-decoration:none}
.nav__link.is-activo{background:var(--amarillo-500);color:var(--verde-900)}

.barra__usuario{display:flex;align-items:center;gap:.7rem}
.usuario__nombre{font-size:.85rem;opacity:.9;font-weight:600}

/* ------------------------------------------------------------
   Estructura
   ---------------------------------------------------------- */
.contenedor{
  width:100%;max-width:1180px;margin:0 auto;padding:1.75rem 1.25rem 3rem;flex:1 0 auto;
}
.contenedor--angosto{max-width:780px}
.contenedor--login{max-width:430px;display:flex;flex-direction:column;justify-content:center;padding-top:3.5rem}

.pie{
  background:var(--verde-900);color:rgba(255,255,255,.72);
  font-size:.8rem;margin-top:auto;
}
.pie__contenido{
  max-width:1180px;margin:0 auto;padding:1rem 1.25rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.pie__nota{opacity:.7}

/* ------------------------------------------------------------
   Tarjetas
   ---------------------------------------------------------- */
.tarjeta{
  background:var(--blanco);border:1px solid var(--gris-200);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:1.5rem;margin-bottom:1.1rem;
}
.tarjeta--cabecera{
  position:relative;overflow:hidden;padding-top:calc(1.5rem + 8px);
}
.tarjeta--cabecera::before{
  content:'';position:absolute;top:0;left:0;right:0;height:8px;
  background:linear-gradient(90deg,var(--verde-500) 0 66%,var(--amarillo-500) 66% 100%);
}
.tarjeta__titulo{margin-bottom:.35rem}
.tarjeta__subtitulo{color:var(--gris-700);margin:0}
.tarjeta__pie{border-top:1px solid var(--gris-200);margin-top:1.1rem;padding-top:1rem}

.encabezado-seccion{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.2rem;
}
.encabezado-seccion p{margin:0;color:var(--gris-700)}

/* ------------------------------------------------------------
   Botones
   ---------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--fuente-titulo);font-size:.92rem;font-weight:700;letter-spacing:.2px;
  padding:.72rem 1.4rem;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:transform .12s,box-shadow .15s,background .15s,color .15s;
  text-decoration:none;line-height:1.2;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}

.btn--principal{background:var(--verde-500);color:#fff;box-shadow:0 4px 14px rgba(0,128,56,.28)}
.btn--principal:hover{background:var(--verde-600);color:#fff}
.btn--acento{background:var(--amarillo-500);color:var(--verde-900);box-shadow:0 4px 14px rgba(226,203,31,.35)}
.btn--acento:hover{background:var(--amarillo-600)}
.btn--contorno{background:transparent;color:var(--verde-700);border-color:var(--gris-300)}
.btn--contorno:hover{border-color:var(--verde-500);background:var(--verde-050)}
.btn--contorno-claro{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.45)}
.btn--contorno-claro:hover{background:rgba(255,255,255,.2);color:#fff}
.btn--peligro{background:transparent;color:var(--rojo);border-color:#E7C4C1}
.btn--peligro:hover{background:var(--rojo-claro)}
.btn--pequeno{padding:.4rem .9rem;font-size:.8rem}
.btn--bloque{width:100%}

/* ------------------------------------------------------------
   Formularios
   ---------------------------------------------------------- */
.campo{margin-bottom:1.1rem}
.campo__etiqueta{
  display:block;font-weight:700;font-size:.85rem;color:var(--verde-800);
  margin-bottom:.35rem;letter-spacing:.2px;
}
.campo__ayuda{display:block;font-size:.8rem;color:var(--gris-500);margin-top:.3rem}

.entrada,select.entrada,textarea.entrada{
  width:100%;padding:.7rem .9rem;font-family:inherit;font-size:.95rem;color:var(--gris-900);
  background:var(--blanco);border:1.5px solid var(--gris-300);border-radius:var(--radio-sm);
  transition:border-color .15s,box-shadow .15s;
}
.entrada:focus{outline:none;border-color:var(--verde-500);box-shadow:0 0 0 3px rgba(0,128,56,.15)}
.entrada::placeholder{color:var(--gris-500)}

.rejilla{display:grid;gap:1rem}
.rejilla--2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.rejilla--3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.rejilla--4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* ------------------------------------------------------------
   Alertas
   ---------------------------------------------------------- */
.alerta{
  padding:.85rem 1.1rem;border-radius:var(--radio-sm);margin-bottom:1rem;
  font-size:.92rem;border-left:5px solid;
}
.alerta--ok{background:var(--verde-100);border-color:var(--verde-500);color:var(--verde-800)}
.alerta--error{background:var(--rojo-claro);border-color:var(--rojo);color:#7F1D19}
.alerta--aviso{background:var(--ambar-claro);border-color:var(--amarillo-600);color:var(--ambar)}
.alerta--info{background:#EAF1F7;border-color:#3E6E9E;color:#2A4E70}

/* ------------------------------------------------------------
   Test - estilo formulario
   ---------------------------------------------------------- */
.portada{
  background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra-fuerte);
  overflow:hidden;position:relative;
}
.portada::before{
  content:'';position:absolute;top:0;left:0;right:0;height:10px;
  background:linear-gradient(90deg,var(--verde-500) 0 66%,var(--amarillo-500) 66% 100%);
}
.portada__cuerpo{padding:2.4rem 2rem 2rem}
.portada__logo{width:78px;height:78px;border-radius:50%;object-fit:cover;box-shadow:0 3px 12px rgba(0,0,0,.14);margin-bottom:1rem}

.lista-instrucciones{margin:0;padding-left:1.15rem;color:var(--gris-700)}
.lista-instrucciones li{margin-bottom:.35rem}

.escala-leyenda{
  display:grid;gap:.4rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  background:var(--verde-050);border:1px solid var(--verde-100);border-radius:var(--radio-sm);
  padding:1rem;margin:1rem 0;
}
.escala-leyenda__item{display:flex;align-items:center;gap:.55rem;font-size:.88rem;color:var(--gris-700)}
.escala-leyenda__num{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--verde-500);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.8rem;font-family:var(--fuente-titulo);
}

/* Barra de progreso */
.progreso{
  position:sticky;top:var(--alto-barra,64px);z-index:30;background:var(--blanco);
  border:1px solid var(--gris-200);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:.85rem 1.1rem;margin-bottom:1.1rem;
}
.progreso__fila{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.5rem}
.progreso__texto{font-size:.85rem;font-weight:700;color:var(--verde-800);font-family:var(--fuente-titulo)}
.progreso__contador{font-size:.85rem;color:var(--gris-700)}
.progreso__pista{height:9px;background:var(--gris-200);border-radius:999px;overflow:hidden}
.progreso__barra{
  height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--verde-600),var(--verde-400),var(--amarillo-500));
  transition:width .3s ease;
}

/* Tarjeta de pregunta */
.pregunta{
  background:var(--blanco);border:1px solid var(--gris-200);border-left:6px solid var(--gris-300);
  border-radius:var(--radio);box-shadow:var(--sombra);padding:1.25rem 1.4rem;margin-bottom:.9rem;
  transition:border-color .2s,box-shadow .2s;scroll-margin-top:180px;
}
.pregunta.is-respondida{border-left-color:var(--verde-500)}
.pregunta.is-faltante{border-left-color:var(--rojo);background:#FFFCFC}
.pregunta__numero{
  display:inline-block;font-family:var(--fuente-titulo);font-size:.72rem;font-weight:800;
  letter-spacing:.8px;text-transform:uppercase;color:var(--verde-600);margin-bottom:.3rem;
}
.pregunta__texto{font-size:1rem;font-weight:600;color:var(--gris-900);margin:0 0 1rem}

.opciones{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem}
.opcion{min-width:0}
.opcion input{position:absolute;opacity:0;width:0;height:0}
.opcion__cara{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  height:100%;min-height:74px;padding:.55rem .4rem;text-align:center;cursor:pointer;
  border:1.5px solid var(--gris-300);border-radius:var(--radio-sm);background:var(--blanco);
  transition:all .15s;
}
.opcion__cara:hover{border-color:var(--verde-400);background:var(--verde-050)}
.opcion__valor{
  font-family:var(--fuente-titulo);font-size:1.15rem;font-weight:800;color:var(--verde-700);line-height:1;
}
.opcion__texto{font-size:.7rem;line-height:1.25;color:var(--gris-700)}
.opcion input:focus-visible + .opcion__cara{box-shadow:0 0 0 3px rgba(0,128,56,.25)}
.opcion input:checked + .opcion__cara{
  background:var(--verde-500);border-color:var(--verde-600);
  box-shadow:0 3px 10px rgba(0,128,56,.3);
}
.opcion input:checked + .opcion__cara .opcion__valor{color:#fff}
.opcion input:checked + .opcion__cara .opcion__texto{color:rgba(255,255,255,.92)}

.barra-envio{
  position:sticky;bottom:0;background:var(--blanco);border:1px solid var(--gris-200);
  border-radius:var(--radio);box-shadow:0 -4px 18px rgba(0,0,0,.07);padding:1rem 1.25rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.2rem;
}
.barra-envio__aviso{font-size:.85rem;color:var(--gris-700);margin:0}

/* ------------------------------------------------------------
   Resultados
   ---------------------------------------------------------- */
.resultado-destacado{
  background:linear-gradient(120deg,var(--verde-800),var(--verde-600) 65%,var(--verde-500));
  color:#fff;border-radius:var(--radio);padding:1.8rem;box-shadow:var(--sombra-fuerte);
  margin-bottom:1.2rem;position:relative;overflow:hidden;
}
.resultado-destacado::before{
  content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:rgba(246,226,69,.13);
}
.resultado-destacado h2,.resultado-destacado h1{color:#fff;position:relative}
.resultado-destacado__etiqueta{
  font-size:.72rem;text-transform:uppercase;letter-spacing:1.4px;font-weight:700;
  color:var(--amarillo-500);margin:0 0 .3rem;position:relative;
}
.resultado-destacado__meta{
  display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1rem;position:relative;
}
.resultado-destacado__dato small{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:1px;opacity:.75}
.resultado-destacado__dato strong{font-family:var(--fuente-titulo);font-size:1.15rem}

.grafica{display:flex;flex-direction:column;gap:.65rem}
.grafica__fila{display:grid;grid-template-columns:180px 1fr 62px;align-items:center;gap:.75rem}
.grafica__etiqueta{font-size:.85rem;font-weight:600;color:var(--gris-900)}
.grafica__etiqueta small{display:block;font-weight:400;font-size:.74rem;color:var(--gris-500)}
.grafica__pista{background:var(--gris-200);border-radius:999px;height:22px;overflow:hidden}
.grafica__barra{
  height:100%;border-radius:999px;background:linear-gradient(90deg,var(--verde-600),var(--verde-400));
  min-width:2px;transition:width .5s ease;
}
.grafica__fila.is-top .grafica__barra{background:linear-gradient(90deg,var(--verde-700),var(--amarillo-500))}
.grafica__valor{font-family:var(--fuente-titulo);font-weight:700;font-size:.88rem;color:var(--verde-800);text-align:right}

.perfil-bloque{margin-bottom:1.2rem}
.perfil-bloque h3{
  font-size:.78rem;text-transform:uppercase;letter-spacing:1.1px;color:var(--verde-600);
  border-bottom:2px solid var(--verde-100);padding-bottom:.3rem;margin-bottom:.5rem;
}
.perfil-bloque p{margin:0;color:var(--gris-700)}

/* ------------------------------------------------------------
   Tablas
   ---------------------------------------------------------- */
.tabla-envoltura{overflow-x:auto;border:1px solid var(--gris-200);border-radius:var(--radio);background:var(--blanco)}
.tabla{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
.tabla thead th{
  background:var(--verde-800);color:#fff;text-align:left;padding:.75rem .9rem;
  font-family:var(--fuente-titulo);font-size:.76rem;text-transform:uppercase;letter-spacing:.8px;
  white-space:nowrap;
}
.tabla tbody td{padding:.7rem .9rem;border-top:1px solid var(--gris-200);vertical-align:middle}
.tabla tbody tr:hover{background:var(--verde-050)}
.tabla__vacio{text-align:center;color:var(--gris-500);padding:2.5rem 1rem}

.etiqueta{
  display:inline-block;padding:.22rem .65rem;border-radius:999px;font-size:.72rem;
  font-weight:700;font-family:var(--fuente-titulo);letter-spacing:.4px;white-space:nowrap;
}
.etiqueta--pendiente{background:var(--ambar-claro);color:var(--ambar)}
.etiqueta--completado{background:var(--verde-100);color:var(--verde-700)}
.etiqueta--anulado{background:var(--gris-200);color:var(--gris-700)}
.etiqueta--tipo{background:var(--verde-800);color:#fff}

/* Indicadores */
.indicadores{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:1.4rem}
.indicador{
  background:var(--blanco);border:1px solid var(--gris-200);border-radius:var(--radio);
  padding:1.1rem 1.25rem;box-shadow:var(--sombra);border-top:5px solid var(--verde-500);
}
.indicador:nth-child(2){border-top-color:var(--amarillo-500)}
.indicador:nth-child(3){border-top-color:var(--verde-700)}
.indicador:nth-child(4){border-top-color:var(--gris-500)}
.indicador__valor{font-family:var(--fuente-titulo);font-size:2.1rem;font-weight:800;color:var(--verde-800);line-height:1}
.indicador__etiqueta{font-size:.78rem;text-transform:uppercase;letter-spacing:.9px;color:var(--gris-500);font-weight:700;margin-top:.3rem}

/* Caja de enlace generado */
.caja-enlace{
  background:var(--verde-050);border:1.5px dashed var(--verde-400);border-radius:var(--radio-sm);
  padding:1rem;margin-top:.5rem;
}
.caja-enlace__url{
  display:block;width:100%;font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:.84rem;
  background:var(--blanco);border:1px solid var(--gris-300);border-radius:6px;padding:.6rem .7rem;
  color:var(--verde-800);word-break:break-all;margin-bottom:.7rem;
}
.caja-enlace__acciones{display:flex;gap:.5rem;flex-wrap:wrap}

.acciones-fila{display:flex;gap:.35rem;flex-wrap:wrap}

.texto-tenue{color:var(--gris-500)}
.texto-centrado{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-2{margin-top:1rem}.mb-2{margin-bottom:1rem}

/* ------------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width:820px){
  .barra__contenido{padding:.6rem 1rem}
  .nav{width:100%;order:3;margin-left:0;overflow-x:auto}
  .barra__usuario{margin-left:auto}
  .grafica__fila{grid-template-columns:1fr;gap:.25rem}
  .grafica__valor{text-align:left}
  h1{font-size:1.55rem}
}

@media (max-width:560px){
  body{font-size:15px}
  .contenedor{padding:1.1rem .9rem 2.4rem}
  .tarjeta,.portada__cuerpo{padding:1.15rem}
  .opciones{grid-template-columns:repeat(3,1fr)}
  .opcion__texto{font-size:.64rem}
  .opcion__cara{min-height:60px}
  .usuario__nombre{display:none}
}

/* ------------------------------------------------------------
   Impresion
   ---------------------------------------------------------- */

/* ------------------------------------------------------------
   Fichas de los 9 eneatipos (imagen + PDF)
   ------------------------------------------------------------ */
.fichas__tabs{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}
.fichas__tab{
  display:flex;flex-direction:column;align-items:center;gap:.1rem;min-width:86px;flex:1 1 86px;
  padding:.55rem .5rem;border:1px solid var(--gris-300);border-radius:var(--radio-sm);
  background:var(--blanco);color:var(--gris-700);cursor:pointer;font-family:var(--fuente-texto);
  transition:border-color .15s,background .15s,transform .15s;
}
.fichas__tab:hover{border-color:var(--verde-500);background:var(--verde-050);transform:translateY(-1px)}
.fichas__tab.is-activa{border-color:var(--verde-700);background:var(--verde-800);color:#fff}
.fichas__num{font-family:var(--fuente-titulo);font-weight:800;font-size:1.15rem;line-height:1}
.fichas__nombre{font-size:.72rem;font-weight:600;text-align:center;line-height:1.15}
.fichas__rol{
  font-size:.62rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:.1rem .45rem;
  border-radius:999px;background:var(--amarillo-500);color:var(--verde-900);
}
.fichas__tab small{font-size:.7rem;opacity:.75}
.fichas__panel[hidden]{display:none}
.fichas__encabezado{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;
  padding:.6rem .9rem;background:var(--verde-050);border:1px solid var(--verde-100);
  border-radius:var(--radio-sm) var(--radio-sm) 0 0;font-size:.9rem;
}
.fichas__img{
  display:block;width:100%;height:auto;border:1px solid var(--gris-200);border-top:0;
  border-radius:0 0 var(--radio-sm) var(--radio-sm);background:#fff;
}

@media print{
  .barra,.pie,.btn,.acciones-fila,.barra-envio{display:none !important}
  body{background:#fff}
  .tarjeta,.resultado-destacado{box-shadow:none;border:1px solid #ccc}
  .resultado-destacado{background:var(--verde-800) !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .grafica__barra{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .fichas__tabs{display:none}
  .fichas__img{border:0;page-break-inside:avoid}
}