/* edusac-docentes.css
   Estilos corporativos y responsive para docentes (extraído del PHP inline).
   Incluye regla que convierte filas de tabla en tarjetas en pantallas pequeñas. */
:root{
  --primary: #0a58ca;
  --accent:  #00a99d;
  --bg:      #f6f8fb;
  --card:    #ffffff;
  --muted:   #6b7280;
}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  font-family: Inter, "DejaVu Sans", Arial, sans-serif;
  color:#102a43;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container-doc{
  max-width:1200px;
  margin:20px auto;
  padding:18px;
}
.panel{
  background:var(--card);
  border-radius:12px;
  padding:16px;
  margin-bottom:18px;
  box-shadow:0 8px 26px rgba(16,40,60,.06);
  border:1px solid rgba(12,34,56,0.04);
}
.panel h1, .panel h2{ margin:0 0 8px 0; color:var(--primary); }
.tabla-opciones{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  background:transparent;
}
.tabla-opciones thead th{
  text-align:left;
  font-weight:700;
  font-size:14px;
  color:var(--primary);
  padding:12px 10px;
  background:linear-gradient(90deg, rgba(10,88,202,0.04), rgba(0,169,157,0.02));
  border-bottom:1px solid rgba(12,34,56,0.06);
}
.tabla-opciones td{
  padding:12px 10px;
  border-bottom:1px solid #edf4f8;
  vertical-align:middle;
}
.area-ico{
  width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;margin-right:8px;background:linear-gradient(135deg,var(--primary),var(--accent));
}
.badge-sede{
  display:inline-block;padding:4px 8px;border-radius:999px;background:#eef9f7;color:var(--accent);font-weight:600;font-size:12px;
}
.muted{ color:var(--muted); }
.info-small{ font-size:13px; color:#5a6b75; }
.btn-edusac-submit{
  background:var(--primary);
  color:#fff;
  border:0;
  padding:9px 12px;
  border-radius:8px;
  cursor:pointer;
  font-weight:800;
  letter-spacing:0.2px;
  box-shadow:0 10px 26px rgba(10,88,202,0.12);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s;
}
.btn-edusac-submit[disabled]{ opacity:.55; cursor:not-allowed; box-shadow:none; }
.progress{height:14px;background:#e9f5ef;border-radius:999px;overflow:hidden;width:160px;display:inline-block;vertical-align:middle}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,#00c853,#0a58ca);width:0%}
.note{font-size:13px;color:#525f65}
.div-destacado{background:linear-gradient(90deg, rgba(10,88,202,.06), rgba(0,169,157,.02)); padding:12px;border-radius:8px;margin-bottom:12px;border:1px solid rgba(12,34,56,.04)}

/* ================== Responsive: transformar tabla en tarjetas ================== */
@media (max-width:920px){
  .container-doc{padding:12px}
  .tabla-opciones thead{ display:none; }
  .tabla-opciones, .tabla-opciones tbody, .tabla-opciones tr, .tabla-opciones td{ display:block; width:100%; }
  .tabla-opciones tr{ margin:10px 0; background:var(--card); border-radius:10px; padding:12px; box-shadow:0 6px 18px rgba(16,40,60,.04); border:1px solid rgba(12,34,56,0.04); }
  .tabla-opciones td{ border:none; padding:8px 6px; }
  .tabla-opciones td::before{ /* label from header: optional, improved clarity */
    content: attr(data-label);
    display:block;
    font-weight:700;
    color:var(--primary);
    margin-bottom:6px;
    font-size:13px;
  }
  .btn-edusac-submit{ width:100%; box-sizing:border-box; }
}

@media (max-width:560px){
  .area-ico{ width:44px;height:44px;font-size:13px; }
  .tabla-opciones td{ font-size:13px; }
}

/* Ajustes para la columna OPCIONES */
.tabla-opciones td:last-child{
  width:340px;
  min-width:260px;
  vertical-align:top;
}
.tabla-opciones td:last-child .link-form,
.tabla-opciones td:last-child form{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}
.select-period{
  width:100%;
  max-width:260px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid #d7e2ef;
  background:#fff;
}
.btn-edusac-submit[disabled]{
  background:#b7c9e8 !important;
  color:#ffffff !important;
  box-shadow:none !important;
}
.icon-x{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;border-radius:999px;
  background:#ffecec;color:#d32f2f;font-weight:700;margin-bottom:6px;font-size:18px;
}