:root{
  --azul:#045796;
  --verde:#8DC63F;
  --celeste:#00B6DE;
  --gris-claro:#BCBEC0;
  --gris-oscuro:#808285;
  --fondo:#EAF6FF;
  --fondo2:#C1E5FF;
  --blanco:#FFFFFF;
  --texto:#1f2933;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:linear-gradient(180deg, var(--fondo), var(--fondo2));
  color:var(--texto);
}

.hero{
  background:linear-gradient(135deg, #045796 0%, #00B6DE 100%);
  color:white;
  padding:55px 8%;
  min-height:210px;
  display:flex;
  align-items:center;
  border-bottom:8px solid var(--verde);
}

.hero h1{
  margin:0;
  font-size:44px;
  color:#FFFFFF;
  font-weight:800;
  text-shadow:0 3px 8px rgba(0,0,0,.25);
}

.hero p{
  margin:12px 0 0;
  font-size:22px;
  color:#FFFFFF;
  font-weight:500;
}

.contenedor{
  max-width:850px;
  margin:35px auto;
  padding:0 18px;
}

.contenedor.ancho{
  max-width:1200px;
}

.card{
  background:var(--blanco);
  border-radius:18px;
  padding:26px;
  margin-bottom:22px;
  box-shadow:0 8px 26px rgba(4,87,150,.12);
  border:1px solid rgba(4,87,150,.08);
}

h1,h2,h3{
  color:var(--azul);
}

.muted{
  color:var(--gris-oscuro);
}

label{
  display:block;
  margin-bottom:8px;
  font-weight:bold;
}

select,
textarea{
  width:100%;
  padding:14px;
  border:1px solid var(--gris-claro);
  border-radius:12px;
  margin-bottom:20px;
  font-size:16px;
}

select:focus,
textarea:focus{
  outline:none;
  border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(0,182,222,.18);
}

button,
.btn-principal,
.btn-secundario{
  display:inline-block;
  border:none;
  background:var(--azul);
  color:white;
  padding:14px 22px;
  border-radius:12px;
  font-size:16px;
  font-weight:bold;
  cursor:pointer;
  text-decoration:none;
}

button:hover,
.btn-principal:hover{
  background:#034574;
}

.btn-secundario{
  background:var(--gris-oscuro);
}

.btn-enviar{
  width:100%;
  margin-bottom:40px;
  background:var(--verde);
  color:#123;
  font-size:18px;
}

.btn-enviar:hover{
  background:#7ab22f;
}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--azul);
  color:white;
  padding:16px 6%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 4px 15px rgba(0,0,0,.16);
}

.topbar span{
  display:block;
  font-size:13px;
  opacity:.9;
  margin-top:4px;
}

.topbar a{
  color:white;
  font-weight:bold;
}

.encabezado-eval{
  border-left:8px solid var(--verde);
}

.total-fijo{
  background:var(--fondo);
  border:1px solid var(--fondo2);
  padding:14px;
  border-radius:12px;
  margin-top:16px;
}

.categoria{
  background:rgba(0,182,222,.13);
  padding:14px 18px;
  border-left:6px solid var(--celeste);
  border-radius:12px;
  color:var(--azul);
}

.pregunta h3{
  margin-top:0;
}

.pregunta p{
  line-height:1.5;
}

.escala{
  display:grid;
  grid-template-columns:repeat(11, 1fr);
  gap:8px;
  margin-top:18px;
}

.escala label{
  margin:0;
  cursor:pointer;
}

.escala input{
  display:none;
}

.escala span{
  display:block;
  text-align:center;
  padding:12px 0;
  border:1px solid var(--gris-claro);
  border-radius:10px;
  background:#fff;
  transition:.15s;
  font-weight:bold;
}

.escala input:checked + span{
  background:var(--azul);
  color:white;
  border-color:var(--azul);
  transform:scale(1.04);
}

.gracias{
  text-align:center;
  padding:60px 30px;
}

.alerta{
  border-left:8px solid var(--celeste);
}

.mensaje-final{
  background:#EAF6FF;
  padding:18px;
  border-radius:14px;
  border-left:6px solid var(--verde);
}

table{
  width:100%;
  border-collapse:collapse;
  background:white;
}

th{
  background:var(--azul);
  color:white;
  padding:12px;
  text-align:left;
}

td{
  border-bottom:1px solid #e5e7eb;
  padding:11px;
}

tr:nth-child(even){
  background:#f8fbff;
}

.tabla-scroll{
  overflow-x:auto;
}

@media(max-width:700px){
  .escala{
    grid-template-columns:repeat(4, 1fr);
  }

  .hero h1{
    font-size:32px;
  }

  .hero p{
    font-size:18px;
  }

  .topbar{
    display:block;
  }
}
.descripcion-criterio{
  background:#F8FBFF;
  border-left:5px solid var(--celeste);
  padding:14px 16px;
  border-radius:12px;
  margin:15px 0;
}

.descripcion-criterio p{
  margin:6px 0 0;
}

.tabla-rubrica{
  width:100%;
  overflow-x:auto;
  margin-top:15px;
  margin-bottom:20px;
}

.tabla-rubrica table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:14px;
}

.tabla-rubrica th{
  background:#E6E6E6;
  color:#000;
  border:1px solid #333;
  text-align:center;
  padding:10px;
  font-weight:bold;
}

.tabla-rubrica td{
  border:1px solid #333;
  vertical-align:top;
  padding:12px;
  line-height:1.45;
  background:#FFFFFF;
}

.titulo-puntaje{
  color:var(--azul);
  margin-top:18px;
  margin-bottom:10px;
}
.btn-peligro{
  background:#b91c1c;
  color:white;
  margin-left:8px;
}

.btn-peligro:hover{
  background:#7f1d1d;
}

.card .btn-principal{
  margin-right:8px;
  margin-bottom:8px;
}
.pregunta-pendiente{
  border:3px solid #b91c1c !important;
  box-shadow:0 0 0 5px rgba(185,28,28,.15);
}
.fila-total{
  background:#EAF6FF !important;
  font-weight:bold;
}

.fila-total td{
  border-top:3px solid var(--azul);
}
.pregunta-pendiente{
  border:3px solid #b91c1c !important;
  box-shadow:0 0 0 5px rgba(185,28,28,.15);
}