:root{
  --papel:        #f6f3ec;
  --papel-osc:    #ece6d8;
  --tinta:        #2b2620;
  --tinta-suave:  #5c554a;
  --terracota:    #b3552e;
  --terracota-os: #8f4322;
  --verde-legajo: #5c7257;
  --verde-claro:  #e3ecdf;
  --rojo-suave:   #c0533a;
  --rojo-claro:   #f3ded9;
  --linea:        #d8d0bd;
  --codigo-fondo: #211e1a;
  --codigo-texto: #e9e4d8;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Iowan Old Style','Palatino Linotype', Georgia, 'Times New Roman', serif;
  line-height: 1.6;
}

code, pre, .caja-sql, .tabla-resultado, table.tabla-docente, .celda-consulta code{
  font-family: 'JetBrains Mono','Fira Code', Menlo, Consolas, monospace;
}

pre{
  background: var(--codigo-fondo);
  color: var(--codigo-texto);
  padding: .8rem 1rem;
  border-radius: 4px;
  overflow-x: auto;
  font-size: .85rem;
  line-height: 1.5;
}
pre code{ background:none; padding:0; }

a{ color: var(--terracota-os); }

/* ============ Sello / tipografía compartida ============ */
.sello{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terracota-os);
  border: 1px solid var(--terracota-os);
  padding: .3rem .7rem;
  border-radius: 2px;
  background: rgba(179,85,46,0.06);
}

/* ============ Login ============ */
.pagina-login{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 100vh;
  padding: 2rem;
}
.tarjeta-login{
  max-width: 460px;
  width:100%;
  background:#fff;
  border:1px solid var(--linea);
  border-radius: 6px;
  padding: 2.4rem 2.2rem;
}
.tarjeta-login h1{
  font-size: 2rem;
  line-height:1.1;
  margin: 1rem 0 .5rem;
}
.tarjeta-login h1 em{ color: var(--terracota-os); font-style: italic; }
.tarjeta-login .bajada{
  color: var(--tinta-suave);
  margin-bottom: 1.8rem;
}
.form-login label{
  display:block;
  margin-bottom: 1rem;
}
.form-login label span{
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-size: .72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: var(--tinta-suave);
  margin-bottom: .35rem;
}
.form-login input{
  width:100%;
  padding: .6rem .7rem;
  border:1px solid var(--linea);
  border-radius: 3px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--papel);
}
.form-login input:focus{
  outline: 2px solid var(--terracota);
  outline-offset: 1px;
}
.form-login button{
  width:100%;
  margin-top: .8rem;
  padding: .75rem 1rem;
  background: var(--terracota);
  color:#fff;
  border:none;
  border-radius: 3px;
  font-size: 1rem;
  font-weight:600;
  cursor:pointer;
  font-family: inherit;
}
.form-login button:hover{ background: var(--terracota-os); }
.aviso-error{
  background: var(--rojo-claro);
  color: var(--rojo-suave);
  padding: .6rem .8rem;
  border-radius: 3px;
  margin-bottom: 1rem;
  font-size: .9rem;
}

/* ============ Encabezado (guía + docente) ============ */
.encabezado{
  background:#fff;
  border-bottom: 2px solid var(--tinta);
  padding: 1.2rem 2rem;
}
.encabezado-contenido{
  max-width: 900px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap: 1rem;
}
.pagina-docente .encabezado-contenido{ max-width: 1100px; }
.encabezado h1{
  font-size: 1.5rem;
  margin: .4rem 0 0;
}
.encabezado-usuario{
  display:flex;
  align-items:center;
  gap: .8rem;
  font-size: .9rem;
  color: var(--tinta-suave);
  flex-wrap:wrap;
}
.boton-secundario{
  font-family:'JetBrains Mono', monospace;
  font-size: .75rem;
  text-decoration:none;
  border: 1px solid var(--linea);
  padding: .4rem .8rem;
  border-radius: 3px;
  color: var(--tinta);
  background: var(--papel-osc);
  cursor:pointer;
}
.boton-secundario:hover{ border-color: var(--terracota-os); color: var(--terracota-os); }

main{
  max-width: 800px;
  margin:0 auto;
  padding: 2.5rem 2rem 5rem;
}
main.ancho-completo{ max-width: 1100px; }

/* ============ Bloque intro ============ */
.bloque-intro{
  background: var(--papel-osc);
  border-left: 4px solid var(--verde-legajo);
  padding: 1.3rem 1.5rem;
  border-radius: 2px;
  margin-bottom: 2.5rem;
}
.bloque-intro h2{
  margin-top:0;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--verde-legajo);
}
.bloque-intro ul{ margin: .5rem 0 0; padding-left: 1.2rem; }
.bloque-intro li{ margin-bottom: .3rem; }

/* ============ Secciones ============ */
.seccion{ margin: 3.5rem 0 2rem; }
.seccion-header{
  display:flex;
  align-items:baseline;
  gap: 1rem;
  border-bottom: 2px solid var(--tinta);
  padding-bottom: .5rem;
  margin-bottom: .6rem;
}
.seccion-header .num{
  font-family:'JetBrains Mono', monospace;
  font-size: 2rem;
  font-weight:700;
  color: var(--terracota);
  line-height:1;
}
.seccion-header h2{ margin:0; font-size: 1.4rem; }
.seccion-desc{ color: var(--tinta-suave); font-size: .95rem; margin: .3rem 0 0; }
.nuevo-tag{
  display:inline-block;
  margin-top: .6rem;
  font-family:'JetBrains Mono', monospace;
  font-size: .7rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--verde-legajo);
  color: #fff;
  padding: .25rem .6rem;
  border-radius: 2px;
}

/* ============ Teoría ============ */
.teoria{
  background:#fff;
  border: 1px solid var(--linea);
  border-left: 4px solid var(--terracota);
  border-radius: 3px;
  padding: 1.2rem 1.5rem;
  margin: 1rem 0 1.5rem;
  font-size: .96rem;
}
.teoria ul{ padding-left: 1.2rem; }
.teoria li{ margin-bottom: .4rem; }

/* ============ Ejercicio ============ */
.ejercicio{
  background:#fff;
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 1.3rem 1.5rem 1.4rem;
  margin: 1.2rem 0;
}
.ejercicio-head{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 1rem;
  margin-bottom: .5rem;
}
.ejercicio-num{
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  color: var(--terracota-os);
  font-size: .9rem;
}
.dificultad{
  font-family:'JetBrains Mono', monospace;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .18rem .5rem;
  border-radius: 2px;
  white-space:nowrap;
}
.dif-facil{ background: var(--verde-claro); color: var(--verde-legajo); }
.dif-medio{ background:#f7e6cf; color:#8a5a16; }

.ejercicio h3{ margin:.2rem 0 .5rem; font-size: 1.05rem; }
.ejercicio p{ margin: .35rem 0; }
.pista{
  font-size: .87rem;
  color: var(--tinta-suave);
  background: var(--papel-osc);
  border-radius: 3px;
  padding: .5rem .75rem;
  margin-top: .6rem;
}
.pista b{ color: var(--terracota-os); }

.caja-sql{
  width:100%;
  min-height: 4.2rem;
  margin-top: 1rem;
  padding: .7rem .8rem;
  border: 1px solid var(--linea);
  border-radius: 3px;
  background: var(--codigo-fondo);
  color: var(--codigo-texto);
  font-size: .87rem;
  resize: vertical;
  line-height: 1.5;
}
.caja-sql:focus{
  outline: 2px solid var(--terracota);
  outline-offset: 1px;
}

.acciones-ejercicio{
  display:flex;
  align-items:center;
  gap: 1rem;
  margin-top: .7rem;
}
.boton-ejecutar{
  background: var(--terracota);
  color:#fff;
  border:none;
  padding: .55rem 1.1rem;
  border-radius: 3px;
  font-weight:600;
  cursor:pointer;
  font-family: inherit;
  font-size: .9rem;
}
.boton-ejecutar:hover{ background: var(--terracota-os); }
.boton-ejecutar:disabled{ opacity: .6; cursor: default; }

.estado-ejercicio{
  font-family:'JetBrains Mono', monospace;
  font-size: .85rem;
  font-weight:600;
}
.estado-correcto{ color: var(--verde-legajo); }
.estado-incorrecto{ color: var(--rojo-suave); }

.resultado-consulta{ margin-top: 1rem; }
.resultado-error{
  background: var(--rojo-claro);
  color: var(--rojo-suave);
  padding: .6rem .8rem;
  border-radius: 3px;
  font-size: .88rem;
  font-family:'JetBrains Mono', monospace;
}
.resultado-vacio{
  background: var(--papel-osc);
  color: var(--tinta-suave);
  padding: .6rem .8rem;
  border-radius: 3px;
  font-size: .88rem;
}
.resultado-meta{
  font-family:'JetBrains Mono', monospace;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-suave);
  margin-bottom: .4rem;
}
.tabla-resultado{
  width:100%;
  border-collapse: collapse;
  font-size: .8rem;
}
.tabla-resultado th, .tabla-resultado td{
  border: 1px solid var(--linea);
  padding: .4rem .6rem;
  text-align:left;
}
.tabla-resultado th{
  background: var(--papel-osc);
  font-weight:600;
}
.tabla-resultado tbody tr:nth-child(even){ background: #fafafa; }

/* ============ Panel docente ============ */
.tarjeta-alumno{
  background:#fff;
  border: 1px solid var(--linea);
  border-radius: 5px;
  margin-bottom: 2rem;
  overflow:hidden;
}
.tarjeta-alumno-header{
  display:flex;
  justify-content: space-between;
  align-items:center;
  flex-wrap:wrap;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: var(--papel-osc);
  border-bottom: 1px solid var(--linea);
}
.tarjeta-alumno-header h2{ margin:0; font-size: 1.15rem; }
.meta-alumno{
  font-family:'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--tinta-suave);
}
.progreso-alumno{
  display:flex;
  align-items:center;
  gap: .8rem;
}
.progreso-numero{
  font-family:'JetBrains Mono', monospace;
  font-size: 1.3rem;
  font-weight:700;
  color: var(--terracota-os);
}
.progreso-label{
  font-size: .75rem;
  color: var(--tinta-suave);
  max-width: 90px;
}

table.tabla-docente{
  width:100%;
  border-collapse: collapse;
  font-size: .82rem;
}
table.tabla-docente th{
  text-align:left;
  padding: .5rem 1rem;
  border-bottom: 2px solid var(--linea);
  font-family:'JetBrains Mono', monospace;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-suave);
}
table.tabla-docente td{
  padding: .5rem 1rem;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}
.fila-sin-intentar{ opacity: .55; }
.celda-num{ font-family:'JetBrains Mono', monospace; white-space:nowrap; }
.celda-consulta code{
  font-size: .78rem;
  word-break: break-word;
  white-space: pre-wrap;
}
.sin-intentar{ color: var(--tinta-suave); font-style: italic; }
.celda-estado{ text-align:center; font-size: 1rem; white-space:nowrap; }

.selector-manual{ display:flex; gap: .3rem; }
.opcion-manual{
  font-family:'JetBrains Mono', monospace;
  font-size: .7rem;
  border: 1px solid var(--linea);
  background: var(--papel);
  padding: .25rem .5rem;
  border-radius: 3px;
  cursor:pointer;
}
.opcion-manual.activa{ background: var(--terracota); color:#fff; border-color: var(--terracota); }
.opcion-manual:hover{ border-color: var(--terracota-os); }

/* ============ Portal: grilla de guías ============ */
.grilla-guias{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}
.tarjeta-guia{
  display:block;
  background:#fff;
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 1.4rem 1.5rem;
  text-decoration:none;
  color: var(--tinta);
  transition: border-color .15s, transform .15s;
}
.tarjeta-guia:hover{
  border-color: var(--terracota);
  transform: translateY(-2px);
}
.tarjeta-guia-header h2{
  margin: 0 0 .2rem;
  font-size: 1.2rem;
}
.subtitulo-guia{
  font-family:'JetBrains Mono', monospace;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--terracota-os);
}
.descripcion-guia{
  color: var(--tinta-suave);
  font-size: .9rem;
  margin: .7rem 0 1rem;
}
.progreso-guia-barra{
  height: 8px;
  background: var(--papel-osc);
  border-radius: 4px;
  overflow:hidden;
}
.progreso-guia-relleno{
  height:100%;
  background: var(--verde-legajo);
  border-radius: 4px;
  transition: width .3s;
}
.progreso-guia-texto{
  font-family:'JetBrains Mono', monospace;
  font-size: .75rem;
  color: var(--tinta-suave);
  margin-top: .5rem;
}
.entrar-guia{
  display:inline-block;
  margin-top: 1rem;
  font-weight:600;
  color: var(--terracota);
  font-size: .9rem;
}

/* ============ Panel docente unificado ============ */
.resumen-guias-alumno{
  display:flex;
  gap: .6rem;
  flex-wrap: wrap;
}
.chip-progreso-guia{
  display:flex;
  flex-direction:column;
  align-items:center;
  background:#fff;
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: .4rem .7rem;
  min-width: 90px;
}
.chip-titulo{
  font-size: .68rem;
  color: var(--tinta-suave);
  text-align:center;
}
.chip-numero{
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  color: var(--terracota-os);
  font-size: .95rem;
}
.detalle-guia-alumno{
  border-top: 1px solid var(--linea);
}
.detalle-guia-alumno summary{
  cursor:pointer;
  padding: .8rem 1.4rem;
  font-size: .9rem;
  font-weight:600;
  display:flex;
  align-items:center;
  gap: 1rem;
  list-style: none;
}
.detalle-guia-alumno summary::-webkit-details-marker{ display:none; }
.detalle-guia-alumno summary::before{
  content: "▸";
  color: var(--terracota-os);
  transition: transform .15s;
}
.detalle-guia-alumno[open] summary::before{ transform: rotate(90deg); }
.detalle-guia-alumno .boton-resetear{ margin-left: auto; }
.detalle-guia-alumno .tabla-docente{ padding: 0 1.4rem 1rem; }

footer{
  text-align:center;
  font-family:'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding: 2rem 1rem 2.5rem;
  border-top: 1px solid var(--linea);
}

@media (max-width: 640px){
  .encabezado{ padding: 1rem 1.2rem; }
  main{ padding: 1.8rem 1.2rem 3.5rem; }
  .tarjeta-alumno-header{ flex-direction:column; align-items:flex-start; }
}