/* ===== Variables de diseño (colores corporativos: verde oliva, fondo blanco, bordes naranja) ===== */
:root {
  --primario: #556b2f;        /* verde oliva */
  --primario-oscuro: #3f5022;
  --primario-claro: #e3ead3;
  --tinte: #f6f8f0;           /* fondo suave verde oliva para encabezados y cajas */
  --naranja: #e87722;         /* líneas y bordes destacados */
  --fondo: #ffffff;
  --superficie: #ffffff;
  --texto: #1f2937;
  --texto-suave: #6b7280;
  --borde: #f2b482;           /* bordes naranja suave */
  --linea: #f8dcc4;           /* líneas internas de tablas y listas */
  --peligro: #b91c1c;
  --peligro-claro: #fee2e2;
  --exito: #15803d;
  --exito-claro: #dcfce7;
  --aviso-claro: #fef3c7;
  --radio: 10px;
  --sombra: 0 1px 3px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  background: var(--fondo);
  color: var(--texto);
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
hr { border: none; border-top: 1px solid var(--borde); margin: 1.2em 0; }
.oculto, [hidden] { display: none !important; }

/* ===== Botones ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: .55em 1em;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--tinte); }
.btn-primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.btn-primario:hover { background: var(--primario-oscuro); }
.btn-peligro { color: var(--peligro); border-color: #f1c7c7; }
.btn-peligro:hover { background: var(--peligro-claro); }
.btn-chico { padding: .3em .7em; font-size: .85em; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ===== Formularios ===== */
label { display: block; margin-bottom: .9em; font-size: .9em; font-weight: 600; }
input, select {
  display: block;
  width: 100%;
  margin-top: .3em;
  padding: .6em .75em;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: #fff;
  color: var(--texto);
  font: inherit;
  font-weight: 400;
}
input:focus, select:focus { outline: 3px solid var(--primario-claro); border-color: var(--primario); }

.ayuda { color: var(--texto-suave); font-size: .85em; }
.mensaje { min-height: 1.2em; margin: .75em 0 0; font-size: .9em; }
.mensaje.error { color: var(--peligro); }
.mensaje.exito { color: var(--exito); font-weight: 600; }
.enlace { display: inline; margin: 0; color: var(--primario); font-size: inherit; text-decoration: underline; cursor: pointer; }

/* ===== Login ===== */
.pagina-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--fondo);
}
.login-caja {
  width: 100%;
  max-width: 420px;
  padding: 32px;
  border: 1px solid var(--borde);
  border-top: 5px solid var(--naranja);
  border-radius: 16px;
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.login-caja h2 { font-size: 1.15rem; }
.login-caja .btn-primario { width: 100%; padding: .75em; margin-top: .4em; }
.pie-login { margin-top: 16px; color: var(--texto-suave); font-size: .8rem; text-align: center; }

.marca { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.marca h1 { margin: 0; font-size: 1.25rem; }
.marca p { margin: 0; color: var(--texto-suave); font-size: .8rem; }
.marca-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--primario);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
}

/* ===== Barra superior ===== */
.barra { position: sticky; top: 0; z-index: 10; background: var(--superficie); border-bottom: 3px solid var(--naranja); }
.barra-interna {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
}
.barra .marca { margin: 0; }
.barra .marca h1 { font-size: 1rem; }
.barra .marca-logo { width: 36px; height: 36px; font-size: 1.2rem; }

.usuario { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.usuario-info { font-size: .85rem; line-height: 1.3; text-align: right; }
.usuario-info span { font-weight: 600; }
.usuario-info small { display: block; color: var(--texto-suave); }

.pestanas { display: flex; gap: 4px; max-width: 1200px; margin: 0 auto; padding: 0 16px; overflow-x: auto; }
.pestana {
  padding: .75em 1em;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--texto-suave);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.pestana:hover { color: var(--texto); }
.pestana.activa { color: var(--primario); border-bottom-color: var(--naranja); }

/* ===== Contenido ===== */
.contenido { max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px; }
.contenido > h2 { font-size: 1.1rem; margin-top: 8px; }
.tarjeta {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}
.tarjeta h2 { font-size: 1.1rem; }
.encabezado-seccion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.encabezado-seccion h2 { margin: 0; }
.botonera { display: flex; flex-wrap: wrap; gap: 10px; }
.aviso { padding: 12px 14px; border-radius: 8px; background: var(--aviso-claro); color: #78350f; font-size: .9rem; }

/* Tarjetas de resumen */
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.dato {
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-left: 4px solid var(--color, var(--primario));
  border-radius: var(--radio);
  background: var(--superficie);
}
.dato strong { display: block; font-size: 1.6rem; line-height: 1.1; }
.dato span { color: var(--texto-suave); font-size: .8rem; }

/* Filtros y tablas */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.filtros input, .filtros select { flex: 1 1 200px; width: auto; margin: 0; }

.tabla-contenedor { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: 10px 8px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: middle; }
th { background: var(--tinte); color: var(--texto-suave); font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; }
td small { color: var(--texto-suave); }
td select { min-width: 190px; margin: 0; padding: .35em .5em; }
.acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.vacio { padding: 24px; color: var(--texto-suave); text-align: center; }

.etiqueta { display: inline-block; padding: .15em .6em; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.etiqueta.activo { background: var(--exito-claro); color: var(--exito); }
.etiqueta.inactivo { background: #e5e7eb; color: #4b5563; }

/* Formulario de registro */
.formulario-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; max-width: 780px; }
.campo-con-boton { display: flex; align-items: flex-end; gap: 8px; }
.campo-con-boton label { flex: 1; }
.campo-con-boton .btn { margin-bottom: .9em; padding: .6em 1em; }
.alinear-abajo { align-self: end; margin-bottom: .9em; }

/* Reportes */
.lista-reportes { display: grid; gap: 12px; }
.reporte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.reporte h3 { margin: 0 0 .2em; font-size: 1rem; }
.reporte p { margin: 0; color: var(--texto-suave); font-size: .88rem; }

/* Ventana modal */
dialog {
  width: calc(100% - 32px);
  max-width: 420px;
  padding: 24px;
  border: none;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
dialog::backdrop { background: rgba(15, 23, 42, .5); }

/* ===== Panel del estudiante ===== */
.bienvenida { border-left: 6px solid var(--color-rol, var(--primario)); }
.insignia-rol {
  display: inline-block;
  padding: .2em .7em;
  border-radius: 999px;
  background: var(--color-rol, var(--primario));
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
}
.modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.modulo { padding: 18px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.modulo-icono { font-size: 1.8rem; }
.modulo h3 { margin: .4em 0 .3em; font-size: 1rem; }
.modulo p { margin: 0 0 .8em; color: var(--texto-suave); font-size: .88rem; }
.modulo .etiqueta { background: var(--tinte); color: var(--texto-suave); }

a.modulo-activo { display: block; color: inherit; text-decoration: none; border-color: var(--color-rol, var(--primario)); transition: box-shadow .15s, transform .15s; }
a.modulo-activo:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.modulo .etiqueta-disponible { background: var(--color-rol, var(--primario)); color: #fff; }

/* ===== Recepción técnica ===== */
textarea {
  display: block;
  width: 100%;
  margin-top: .3em;
  padding: .6em .75em;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font: inherit;
  font-weight: 400;
  resize: vertical;
}
textarea:focus { outline: 3px solid var(--primario-claro); border-color: var(--primario); }
input:disabled, select:disabled, textarea:disabled { background: var(--tinte); color: var(--texto); opacity: 1; }

.formulario-ancho { max-width: none; }
.campo-completo { grid-column: 1 / -1; }
.margen-arriba { margin-top: 16px; }
.tarjeta h3 { font-size: 1rem; }
h4 { margin: 0 0 .5em; font-size: .95rem; }
h4 span { color: var(--texto-suave); font-weight: 400; }
h5 { margin: 0 0 .6em; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); }

.etiqueta.estado-pendiente { background: var(--aviso-claro); color: #92400e; }
.etiqueta.estado-en_proceso { background: #dbeafe; color: #1e40af; }
.etiqueta.estado-cerrado { background: var(--exito-claro); color: var(--exito); }
.etiqueta-frio { background: #e0f2fe; color: #0369a1; }
.etiqueta-control { background: #f3e8ff; color: #6b21a8; }

.datos-pedido { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.datos-pedido div { padding: 10px 12px; border-radius: 8px; background: var(--tinte); }
.datos-pedido span { display: block; color: var(--texto-suave); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
.datos-pedido small { display: block; color: var(--texto-suave); }

.entrega-grid { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 24px; }
.documento-guia {
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-top: 4px solid var(--primario);
  border-radius: 6px;
  background: #fbfbf9;
  font-family: Consolas, "Courier New", monospace;
  font-size: .85rem;
}
.guia-titulo { margin-bottom: 6px; font-family: "Segoe UI", system-ui, sans-serif; font-weight: 700; }
.documento-guia dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.documento-guia dt { font-weight: 600; }
.documento-guia dd { margin: 0; }

.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; }
.tabla-doc { font-size: .85rem; }
.tabla-doc td, .tabla-doc th { padding: 7px 6px; }
.tabla-doc tfoot td { font-weight: 700; border-bottom: none; }
.tabla-doc tfoot td:first-child { text-align: right; }

.consulta-invima .filtros { margin: 0; }
.resultado-consulta { margin: 12px 0 0; padding: 12px 14px; border-radius: 8px; font-size: .9rem; }
.resultado-consulta.vigente { background: var(--exito-claro); color: #14532d; }
.resultado-consulta.vencido { background: var(--peligro-claro); color: #7f1d1d; }
.resultado-consulta.no-encontrado { background: #f3f4f6; color: #374151; }
.resultado-consulta dl, .etiqueta-caja dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 8px 0 0; }
.resultado-consulta dt, .etiqueta-caja dt { font-weight: 600; }
.resultado-consulta dd, .etiqueta-caja dd { margin: 0; }

.item-encabezado { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.item-encabezado h4 { margin: 0; font-size: 1.05rem; }
.item-encabezado small { color: var(--texto-suave); }
.item-numero {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primario);
  color: #fff;
  font-weight: 700;
}
.item-cuerpo { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 24px; }

.etiqueta-caja {
  padding: 14px 16px;
  border: 2px dashed var(--naranja);
  border-radius: 6px;
  background: #fffdf7;
  font-family: Consolas, "Courier New", monospace;
  font-size: .85rem;
}
.etiqueta-marca { font-family: "Segoe UI", system-ui, sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--primario-oscuro); }
.etiqueta-generico { font-weight: 700; }
.etiqueta-lab { margin-top: 8px; color: var(--texto-suave); font-size: .78rem; }

.inspeccion { margin: 12px 0 0; padding: 0; list-style: none; font-size: .88rem; }
.inspeccion li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.inspeccion span { color: var(--texto-suave); }
.inspeccion strong { text-align: right; }

.campos-item { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.vida-util { display: block; margin-top: .3em; color: var(--texto-suave); font-weight: 400; }
.alerta-texto { color: var(--peligro); font-weight: 700; }

.motivos { margin: 0 0 .9em; padding: 10px 14px; border: 1px solid var(--borde); border-radius: 8px; }
.motivos legend { padding: 0 6px; font-size: .9em; font-weight: 600; }
.motivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 14px; }
label.check { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 4px 0; font-weight: 400; }
label.check input { width: auto; margin: 3px 0 0; flex: none; }

.barra-cierre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.barra-cierre .ayuda { margin: 0; }
.errores { flex-basis: 100%; padding: 12px 14px; border-radius: 8px; background: var(--peligro-claro); color: #7f1d1d; font-size: .9rem; }
.errores ul { margin: 6px 0 0; padding-left: 20px; }

.agregar-item { display: grid; grid-template-columns: 2fr 110px 2fr auto; gap: 0 12px; align-items: end; margin-top: 8px; }
.agregar-item .btn { margin-bottom: .9em; padding: .6em 1em; }

dialog.dialogo-ancho { max-width: 1100px; }

/* Documentos y etiquetas de la recepción: no se pueden seleccionar (práctica de digitación) */
.etiqueta-caja, .documento-guia, .tabla-doc, .inspeccion, .datos-pedido { user-select: none; -webkit-user-select: none; }

.aviso-flotante {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 100;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-left: 5px solid var(--naranja);
  border-radius: 8px;
  background: var(--primario-oscuro);
  color: #fff;
  font-size: .92rem;
  box-shadow: var(--sombra);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .2s, transform .2s;
}
.aviso-flotante.visible { opacity: 1; transform: translate(-50%, 0); }

/* ===== Clase en vivo ===== */
.sin-margen { margin: 0; }
.punto-conexion {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  background: #c4c9c2;
}
.punto-conexion.en-linea { background: var(--primario); box-shadow: 0 0 0 3px var(--primario-claro); }
.avance { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.avance .barra-progreso { flex: 1; --nivel: var(--naranja); }

.fallo-conexion { max-width: 640px; margin: 40px auto; border-top: 5px solid var(--naranja); }
.fallo-conexion ul { padding-left: 20px; }

/* ===== Calificación ===== */
.calificacion { border-width: 2px; }
.calificacion.nivel-alto { --nivel: var(--primario); --nivel-claro: var(--primario-claro); }
.calificacion.nivel-medio { --nivel: #c2610f; --nivel-claro: #fdebd8; }
.calificacion.nivel-bajo { --nivel: var(--peligro); --nivel-claro: var(--peligro-claro); }
.calificacion { border-color: var(--nivel); }
.calificacion-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 8px; }
.calificacion-resumen > div:last-child { flex: 1 1 220px; }
.calificacion-resumen h3 { margin: 0 0 .2em; }
.calificacion-resumen p { margin: 0 0 .6em; color: var(--texto-suave); font-size: .88rem; }
.porcentaje {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 110px;
  height: 110px;
  border: 6px solid var(--nivel);
  border-radius: 50%;
  background: var(--nivel-claro);
  color: var(--nivel);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}
.porcentaje span { font-size: 1rem; }
.barra-progreso { height: 10px; border-radius: 999px; background: var(--linea); overflow: hidden; }
.barra-progreso div { height: 100%; background: var(--nivel); }

.detalle-calificacion { border-top: 1px solid var(--linea); }
.detalle-calificacion summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; font-weight: 600; cursor: pointer; }
.detalle-calificacion summary small { color: var(--texto-suave); font-weight: 400; }
.detalle-calificacion summary span { margin-left: auto; font-size: .82rem; }
.detalle-calificacion .con-errores { color: var(--peligro); }
.detalle-calificacion .sin-errores { color: var(--primario); }
.detalle-calificacion table { margin-bottom: 12px; }

.etiqueta.porcentaje-chico.nivel-alto { background: var(--primario-claro); color: var(--primario-oscuro); }
.etiqueta.porcentaje-chico.nivel-medio { background: #fdebd8; color: #9a4a0b; }
.etiqueta.porcentaje-chico.nivel-bajo { background: var(--peligro-claro); color: var(--peligro); }

/* ===== Impresión del acta ===== */
@media print {
  .barra, .consulta-invima, .barra-cierre, .botonera, .pestanas { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .contenido { padding: 0; max-width: none; }
  .tarjeta { border: 1px solid #999; break-inside: avoid; padding: 12px; margin-bottom: 10px; }
  input, select, textarea { border: none; border-bottom: 1px solid #999; border-radius: 0; padding: 2px 0; appearance: none; }
}

/* ===== Pantallas pequeñas ===== */
@media (max-width: 640px) {
  .usuario { width: 100%; justify-content: space-between; margin-left: 0; }
  .usuario-info { text-align: left; }
  .login-caja { padding: 24px; }
}

@media (max-width: 860px) {
  .item-cuerpo { grid-template-columns: 1fr; }
  .entrega-grid { grid-template-columns: 1fr; }
  .doc-grid { grid-template-columns: 1fr; }
  .agregar-item { grid-template-columns: 1fr; }
}