:root{
  --poa-azul:#173b57;
  --poa-azul2:#245a82;
  --poa-borde:#d9e2ea;
  --poa-texto:#1f2933;
  --poa-muted:#66788a;
  --poa-ok:#d9f2d0;
  --poa-warn:#fff3bf;
  --poa-bad:#ffd6d6;
  --poa-sombra:0 10px 30px rgba(15,23,42,.08);
}

.poa-app *{box-sizing:border-box}

.poa-app{
  max-width:1200px;
  margin:20px auto;
  color:var(--poa-texto);
  font-family:Arial, Helvetica, sans-serif;
}

.poa-header{
  background:linear-gradient(135deg,var(--poa-azul),var(--poa-azul2));
  color:white;
  padding:22px 18px;
  text-align:center;
  border-radius:18px;
  box-shadow:var(--poa-sombra);
  margin-bottom:18px;
}

.poa-header h2{
  margin:0;
  font-size:22px;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:white;
}

.poa-tabs{
  display:flex;
  gap:10px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.poa-tab-btn{
  border:0;
  padding:13px 18px;
  border-radius:14px;
  background:white;
  color:var(--poa-azul);
  font-weight:700;
  cursor:pointer;
  box-shadow:var(--poa-sombra);
}

.poa-tab-btn.activa{
  background:var(--poa-azul);
  color:white;
}

.poa-panel{display:none}
.poa-panel.activo{display:block}

.poa-card{
  background:white;
  border-radius:18px;
  padding:18px;
  box-shadow:var(--poa-sombra);
  margin-bottom:18px;
  border:1px solid #edf1f5;
}

.poa-grid-filtros{
  display:grid;
  grid-template-columns:2fr 1fr 1fr auto;
  gap:12px;
  align-items:end;
}

.poa-grid-resultados{
  grid-template-columns:1fr 1fr auto auto auto;
}

.poa-grid-editar{
  grid-template-columns:1fr 1fr auto auto;
}

.poa-grid-docentes{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:12px;
  align-items:end;
}

.poa-app label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:#34495e;
  margin-bottom:6px;
}

.poa-app select,
.poa-app input,
.poa-app textarea{
  width:100%;
  max-width:100%;
  border:1px solid var(--poa-borde);
  border-radius:12px;
  padding:11px 12px;
  font-size:14px;
  background:white;
  outline:none;
}

.poa-app textarea{
  min-height:72px;
  resize:vertical;
  line-height:1.35;
}

.poa-app select:focus,
.poa-app input:focus,
.poa-app textarea:focus{
  border-color:var(--poa-azul2);
  box-shadow:0 0 0 3px rgba(36,90,130,.12);
}

.poa-btn{
  border:0;
  border-radius:12px;
  padding:12px 16px;
  cursor:pointer;
  font-weight:700;
  line-height:1.2;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}

.poa-btn:active{
  transform:scale(.96);
}

.poa-btn-principal{
  background:var(--poa-azul);
  color:white;
}

.poa-btn-secundario{
  background:#eef5fa;
  color:var(--poa-azul);
}

.poa-btn-rojo{
  background:#ffe5e5;
  color:#8a1f1f;
}

.poa-btn-guardando{
  opacity:.85;
  cursor:wait !important;
  transform:scale(.97);
}

.poa-btn-guardado{
  background:#1f8f3a !important;
  color:white !important;
  animation:poaPulsoGuardado .65s ease;
}

@keyframes poaPulsoGuardado{
  0%{transform:scale(1);}
  40%{transform:scale(1.06);}
  100%{transform:scale(1);}
}

.poa-acciones{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.poa-pauta{
  border:2px solid #111;
  border-radius:4px;
  overflow:hidden;
  background:white;
}

.poa-titulo-pauta{
  background:#f8dcc1;
  text-align:center;
  padding:11px;
  font-weight:800;
  text-transform:uppercase;
  border-bottom:2px solid #111;
}

.poa-fila-pauta{
  display:grid;
  grid-template-columns:180px 1fr;
  border-bottom:2px solid #111;
}

.poa-etiqueta{
  font-weight:800;
  text-align:center;
  border-right:2px solid #111;
  padding:12px 8px;
  background:#f8fbfd;
  display:flex;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  font-size:13px;
}

.poa-contenido{
  padding:10px;
  background:#fff6d8;
}

.poa-docente-evaluado{
  display:grid;
  grid-template-columns:180px 1fr;
  border-bottom:2px solid #111;
  background:#f8fbfd;
}

.poa-docente-evaluado strong{
  border-right:2px solid #111;
  padding:10px;
  text-align:center;
}

.poa-docente-evaluado span{
  padding:10px;
  font-weight:700;
}

.poa-indicadores-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border-top:2px solid #111;
}

.poa-indicador-card{
  border-right:2px solid #111;
  background:white;
}

.poa-indicador-card:last-child{border-right:0}

.poa-indicador-head{
  text-align:center;
  font-weight:800;
  padding:10px;
  border-bottom:2px solid #111;
  background:#fff6d8;
}

.poa-indicador-body{
  padding:10px;
}

.poa-respuesta-box{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed #b9c3cc;
}

.poa-resumen-docente{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-top:16px;
}

.poa-mini-card{
  background:#f8fbfd;
  border:1px solid var(--poa-borde);
  border-radius:14px;
  padding:14px;
}

.poa-mini-card span{
  display:block;
  font-size:12px;
  color:var(--poa-muted);
  margin-bottom:4px;
}

.poa-mini-card strong{
  font-size:20px;
}

.poa-tabla-wrap{
  overflow:auto;
  border-radius:16px;
  border:1px solid var(--poa-borde);
  background:white;
}

.poa-app table{
  width:100%;
  border-collapse:collapse;
  min-width:950px;
  margin:0;
}

.poa-app th,
.poa-app td{
  border-bottom:1px solid var(--poa-borde);
  border-right:1px solid var(--poa-borde);
  padding:10px;
  text-align:center;
  font-size:13px;
  vertical-align:middle;
}

.poa-app th:last-child,
.poa-app td:last-child{border-right:0}

.poa-app th{
  background:var(--poa-azul);
  color:white;
}

.poa-app td:first-child,
.poa-app th:first-child{
  text-align:left;
  font-weight:700;
}

.poa-app tfoot td{
  background:#eef5fa;
  font-weight:800;
}

.poa-pill{
  display:inline-block;
  border-radius:999px;
  padding:6px 10px;
  font-weight:800;
  font-size:12px;
  white-space:nowrap;
}

.poa-logrado{background:var(--poa-ok); color:#245b16}
.poa-monitoreo{background:var(--poa-warn); color:#7a5a00}
.poa-apoyo{background:var(--poa-bad); color:#7f1d1d}
.poa-na{background:#eef1f4; color:#536271}

.poa-leyenda{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
  align-items:center;
}

.poa-mensaje{
  padding:12px 14px;
  border-radius:12px;
  background:#eef5fa;
  color:#173b57;
  font-weight:700;
  margin-top:12px;
  display:none;
}

.poa-mensaje.error{
  background:#ffe5e5;
  color:#8a1f1f;
}

.poa-alerta{
  padding:14px;
  border-radius:12px;
  background:#fff3bf;
  color:#7a5a00;
  font-weight:700;
}

.poa-ayuda{
  margin-top:0;
  color:var(--poa-muted);
}

.poa-docente-acciones{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}

@media(max-width:800px){
  .poa-header h2{font-size:17px}
  .poa-grid-filtros,
  .poa-grid-resultados,
  .poa-grid-editar,
  .poa-grid-docentes{grid-template-columns:1fr}
  .poa-fila-pauta,
  .poa-docente-evaluado{grid-template-columns:1fr}
  .poa-etiqueta,
  .poa-docente-evaluado strong{border-right:0;border-bottom:2px solid #111}
  .poa-indicadores-grid{grid-template-columns:1fr}
  .poa-indicador-card{border-right:0;border-bottom:2px solid #111}
  .poa-indicador-card:last-child{border-bottom:0}
  .poa-resumen-docente{grid-template-columns:1fr}
}

@media print{
  @page{size:A4 portrait;margin:10mm}

  body *{visibility:hidden}
  .poa-app,
  .poa-app *{visibility:visible}

  .poa-header,
  .poa-tabs,
  .poa-filtros,
  .poa-acciones,
  #poa-panel-resultados,
  #poa-panel-docentes,
  #poa-panel-eliminar{display:none !important}

  .poa-app{
    position:absolute;
    left:0;
    top:0;
    max-width:none;
    width:100%;
    margin:0;
    font-size:10px !important;
  }

  .poa-card{
    box-shadow:none;
    border:0;
    padding:0 !important;
    margin:0 !important;
  }

  .poa-pauta{
    border:1px solid #111 !important;
    transform:scale(.92);
    transform-origin:top left;
    width:108%;
  }

  .poa-titulo-pauta{
    padding:6px !important;
    font-size:12px !important;
  }

  .poa-fila-pauta,
  .poa-docente-evaluado{
    grid-template-columns:120px 1fr !important;
    border-bottom:1px solid #111 !important;
  }

  .poa-etiqueta,
  .poa-docente-evaluado strong{
    padding:5px !important;
    font-size:9px !important;
    border-right:1px solid #111 !important;
  }

  .poa-docente-evaluado span{
    padding:5px !important;
    font-size:10px !important;
  }

  .poa-contenido,
  .poa-indicador-body{
    padding:5px !important;
  }

  .poa-app textarea,
  .poa-app input,
  .poa-app select{
    border:0 !important;
    padding:2px !important;
    font-size:9px !important;
    min-height:32px !important;
    box-shadow:none !important;
  }

  .poa-indicadores-grid{
    border-top:1px solid #111 !important;
  }

  .poa-indicador-card{
    border-right:1px solid #111 !important;
  }

  .poa-indicador-head{
    padding:5px !important;
    border-bottom:1px solid #111 !important;
    font-size:10px !important;
  }

  .poa-respuesta-box{
    margin-top:4px !important;
    padding-top:4px !important;
  }

  .poa-resumen-docente{
    grid-template-columns:1fr 1fr 1fr !important;
    gap:6px !important;
    margin-top:8px !important;
    transform:scale(.92);
    transform-origin:top left;
    width:108%;
  }

  .poa-mini-card{
    padding:6px !important;
    border-radius:6px !important;
  }

  .poa-mini-card span{
    font-size:9px !important;
  }

  .poa-mini-card strong{
    font-size:11px !important;
  }
}