/* ============================================================
   SiTi · Pantallas pequeñas y vista previa
   Se carga al final. En computadora solo aporta la ventana de
   vista previa; por debajo de 760 px reacomoda las pantallas de
   anteproyecto, estudiantes, tutores, documentos y cronograma
   para que se lean y se toquen con comodidad en un teléfono.
   ============================================================ */

/* --- Vista previa del anteproyecto -------------------------- */
.ap-vista{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column;
  background:rgba(15,23,42,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.ap-vista-barra{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:10px 16px; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.18);
  padding-top:calc(10px + env(safe-area-inset-top, 0px));
}
.ap-vista-barra b{font-size:14px}
.ap-vista-barra > div{display:flex; gap:8px}
.ap-vista-cuerpo{flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch}
.ap-vista-cuerpo iframe{width:100%; height:100%; border:0; background:#525659; display:block}
.ap-vista-hoja{
  background:#fff; max-width:800px; margin:18px auto; border-radius:6px;
  padding:32px 38px 40px 46px; box-shadow:0 6px 30px rgba(0,0,0,.35);
}

/* --- Teléfonos ---------------------------------------------- */
@media (max-width:760px){

  /* Cabeceras: título arriba, acciones debajo y a lo ancho */
  .head{flex-direction:column; align-items:stretch; gap:12px}
  .head > div:last-child{display:flex; flex-wrap:wrap; gap:8px}
  .head > div:last-child > .btn,
  .head > div:last-child > label.btn{flex:1 1 calc(50% - 8px); text-align:center; justify-content:center}

  /* Tarjetas y fichas */
  .card, .glass.card{padding:14px}
  .ficha{grid-template-columns:1fr 1fr !important; gap:8px}
  .cols2, .masivo .cols2, .archivo-filtros-campos{grid-template-columns:1fr !important}

  /* Tablas: se desplazan de lado, sin romper la página */
  .ios-table-shell{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .ios-table-shell > .tabla{min-width:620px}
  .tabla td.acc{white-space:nowrap}
  .barra{display:flex; overflow-x:auto; flex-wrap:nowrap; gap:6px; padding-bottom:4px}
  .barra .subtab{flex:none}

  /* Anteproyecto */
  .ap-sec{padding:14px}
  .ap-sec-head h3{font-size:15px}
  .ap-num{display:block; min-width:0; margin:0 0 2px}
  .ap-datos{grid-template-columns:1fr !important}
  .ap-persona{padding:10px}
  .ap-campo textarea{font-size:15px}
  .ap-crono input{min-width:120px}
  .ap-hilo{padding:9px 10px}
  .ap-respuesta{margin-left:6px}
  .ap-barra{
    position:static; display:grid; grid-template-columns:1fr 1fr; gap:8px;
    padding:10px; margin-top:12px;
  }
  .ap-barra > .btn, .ap-barra > label.btn{
    width:100%; justify-content:center; text-align:center; font-size:13px; padding:11px 8px;
  }
  .ap-firmas{grid-template-columns:1fr}

  /* Requisitos y formas de titulación */
  .requisito{flex-direction:column; align-items:stretch}
  .requisito-acc{justify-content:flex-start}
  .modalidades{grid-template-columns:1fr}
  .masivo-resumen .btn.mini{margin-left:0}

  /* Hojas emergentes a lo ancho del teléfono */
  #veil .sheet{width:calc(100vw - 16px); max-width:none; max-height:calc(100vh - 24px); overflow:auto}
  #veil .sheet .act{flex-wrap:wrap}
  #veil .sheet .act .btn{flex:1 1 auto}

  /* Cronograma */
  .crono td{font-size:12.5px}

  /* Vista previa en teléfono */
  .ap-vista-hoja{margin:0; border-radius:0; padding:20px 16px 30px; box-shadow:none}
  .ap-vista-barra b{font-size:13px; width:100%}
  .ap-vista-barra > div{width:100%}
  .ap-vista-barra > div .btn{flex:1}
}

/* --- Lo que falta para remitir ------------------------------ */
.ap-faltas{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:8px;
  max-height:55vh; overflow:auto}
.ap-falta{display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid rgba(179,48,73,.25); border-left:4px solid #B33049; border-radius:12px;
  padding:9px 12px; background:rgba(179,48,73,.05)}
.ap-falta b{display:block; font-size:13.5px}
.ap-falta span{display:block; font-size:13px; color:#5b6573; margin-top:2px}
.ap-falta .btn{flex:none}
.ap-vacio, input.ap-vacio, select.ap-vacio, textarea.ap-vacio{
  border-color:#B33049 !important; box-shadow:0 0 0 3px rgba(179,48,73,.15) !important;
  background:rgba(179,48,73,.04) !important;
}

/* --- Plazos y calificación del anteproyecto ---------------- */
.ap-plazo{
  display:flex; flex-direction:column; gap:3px;
  border-radius:14px; padding:11px 16px; margin:14px 0;
  background:rgba(30,143,198,.10); border-left:4px solid #1E8FC6; color:#16324f;
}
.ap-plazo b{font-size:14px}
.ap-plazo span{font-size:13px; color:#3b4a5c}
.ap-plazo.cerca{background:rgba(217,119,6,.10); border-left-color:#D97706}
.ap-plazo.vencido{background:rgba(179,48,73,.10); border-left-color:#B33049}
.ap-plazo.vencido b{color:#B33049}

.ap-rubrica .c{text-align:center; white-space:nowrap}
.ap-rubrica td small{line-height:1.45}
.rb-punto{width:78px; text-align:center; font-weight:600}
#rbNota{font-size:16px}
#rbNota.rb-ok{color:#157F6B}
#rbNota.rb-bajo{color:#B33049}

.ap-promedio{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:10px 0 14px}
.ap-promedio > div{border-radius:14px; padding:10px 14px; background:rgba(30,58,98,.06)}
.ap-promedio span{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#5b6573}
.ap-promedio b{font-size:20px}
.ap-promedio.aprueba > div:first-child{background:rgba(21,127,107,.12)}
.ap-promedio.aprueba > div:first-child b{color:#157F6B}
.ap-promedio.no-aprueba > div:first-child{background:rgba(179,48,73,.10)}
.ap-promedio.no-aprueba > div:first-child b{color:#B33049}

@media (max-width:760px){
  .ap-promedio{grid-template-columns:1fr 1fr 1fr; gap:6px}
  .ap-promedio b{font-size:16px}
  .rb-punto{width:64px}
}

.ap-lista td{vertical-align:top}
.ap-lista .nowrap{white-space:nowrap}
.plazo-cerca{color:#D97706; font-weight:600}
small.rb-bajo{color:#B33049; font-weight:600}
small.rb-ok{color:#157F6B; font-weight:600}

/* --- Carga de tutoría (reglamento, arts. 4 y 22) ----------- */
.chip.carga.warn{background:rgba(217,119,6,.14); color:#B45309}
.chip.carga.stop{background:rgba(179,48,73,.14); color:#B33049}
.carga-nota{font-weight:600}
.carga-nota.warn{color:#B45309}
.carga-nota.stop{color:#B33049}
.carga-resumen{border-radius:12px; padding:9px 13px; margin:0 0 10px; background:rgba(30,58,98,.06); font-size:13.5px}
.carga-resumen span{color:#5b6573; margin-right:4px}

/* --- Designación del tutor ---------------------------------- */
.ap-designacion{border-left:4px solid #157F6B}
.ap-designacion h3{color:#157F6B}
.ap-designacion ul{margin:8px 0 12px; padding-left:20px}
.ap-designacion li{margin-bottom:6px; line-height:1.5; font-size:14px}


/* --- Correo del estudiante en la inscripción --------------- */
.ins-correo-fila{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.ins-correo-fila input{flex:1 1 260px}
.ins-correo.falta{border-left:4px solid #B33049}
.ins-correo.falta input{border-color:#B33049; box-shadow:0 0 0 3px rgba(179,48,73,.15)}

/* --- Tutorías ----------------------------------------------- */
.tut-resumen{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0 10px}
.tut-resumen > div{border-radius:14px; padding:10px 14px; background:rgba(30,58,98,.06)}
.tut-resumen span{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#5b6573}
.tut-resumen b{font-size:20px}
.barra-prog{height:8px; border-radius:99px; background:rgba(30,58,98,.10); overflow:hidden; margin:4px 0}
.barra-prog > span{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#3FB6E8,#157F6B)}
.barra-prog.grande{height:12px}
.tut-prog{min-width:190px}
.tut-form{display:grid; grid-template-columns:repeat(4,1fr); gap:10px 14px}
.tut-form .f.ancho{grid-column:1/-1}
.tut-tabla td{vertical-align:top}
.tut-tabla .nowrap{white-space:nowrap}
@media (max-width:760px){
  .tut-form{grid-template-columns:1fr 1fr}
  .tut-resumen{grid-template-columns:1fr 1fr 1fr; gap:6px}
  .tut-resumen b{font-size:16px}
}

/* --- Fotografías de evidencia de tutoría -------------------- */
.tut-fotos{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; align-items:center}
.tut-foto{position:relative; display:inline-block}
.tut-foto img{width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid rgba(30,58,98,.15); display:block}
.tut-foto button{position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%;
  border:0; background:#B33049; color:#fff; font-size:13px; line-height:20px; padding:0; cursor:pointer}
.tut-subir{cursor:pointer}