:root{
  --azul-up: #0b3d78;
  --azul-up-claro: #1e5aa8;
  --dorado-up: #c9a227;
  --gris-texto: #222;
  --gris-borde: #d7dce3;
  --gris-fondo: #f4f6f9;
  --rojo: #b3261e;
  --verde: #1e7e34;
  --radio: 8px;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--gris-texto);
  background: linear-gradient(160deg, #0b2e5c 0%, var(--azul-up) 55%, var(--azul-up-claro) 130%);
  background-attachment: fixed;
  min-height: 100vh;
}

a{ color: var(--azul-up-claro); }

.encabezado{
  background: var(--azul-up);
  color: #fff;
  padding: 18px 24px;
  border-bottom: 4px solid var(--dorado-up);
}
.encabezado h1{ margin: 0; font-size: 1.3rem; }
.encabezado p{ margin: 4px 0 0; opacity: .9; font-size: .92rem; }

.contenedor{
  width: 100%;
  max-width: 700px;
  margin: 28px auto;
  padding: 0 16px;
  background: #fff;
  border-radius: var(--radio);
  box-shadow: 0 15px 40px rgba(0,0,0,.25);
  padding: 24px;
}

fieldset{
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 16px;
  margin: 0 0 18px;
}
legend{ font-weight: 700; color: var(--azul-up); padding: 0 6px; }

.fila{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 10px;
}
.campo{ flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; }
.campo.full{ flex: 1 1 100%; }
.campo label{ font-size: .85rem; font-weight: 600; }
.req{ color: var(--rojo); }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=tel], input[type=number], input[type=file], select, textarea{
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gris-borde);
  border-radius: 6px;
  font-size: .95rem;
  font-family: inherit;
}
textarea{ resize: vertical; }

.btn{
  display: inline-block;
  background: var(--azul-up);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover{ background: var(--azul-up-claro); }
.btn.secundario{ background: #fff; color: var(--azul-up); border: 1px solid var(--azul-up); }
.btn.exito{ background: var(--verde); }
.btn.exito:hover{ background: #24943d; }

.mensaje-error{
  background: #fdecea; color: var(--rojo); border: 1px solid #f3c2be;
  padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: .9rem;
}
.mensaje-exito{
  background: #e9f7ec; color: var(--verde); border: 1px solid #b9e3c2;
  padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: .9rem;
}
.ayuda{ display: block; font-size: .8rem; color: #777; margin-top: 2px; }

/* ---------- Panel admin ---------- */
.tarjetas-resumen{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.tarjetas-resumen .tarjeta{
  background: #fff; border: 1px solid var(--gris-borde); border-radius: var(--radio);
  padding: 14px; text-align: center;
}
.tarjetas-resumen .num{ font-size: 1.6rem; font-weight: 700; color: var(--azul-up); }
.tarjetas-resumen .label{ font-size: .8rem; color: #666; }

.barra-filtros{
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; align-items: center;
}
.barra-filtros input, .barra-filtros select{
  padding: 8px 10px; border: 1px solid var(--gris-borde); border-radius: 6px; font-size: .9rem;
}
.barra-acciones{ margin-bottom: 18px; display: flex; gap: 10px; flex-wrap: wrap; }

.tabla-admin{
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: .88rem;
}
.tabla-admin th, .tabla-admin td{
  border: 1px solid var(--gris-borde);
  padding: 8px 10px;
  text-align: left;
}
.tabla-admin th{ background: var(--gris-fondo); font-weight: 700; color: var(--azul-up); }

.badge{
  display: inline-block; font-size: .75rem; font-weight: 700; padding: 3px 10px;
  border-radius: 99px;
}
.badge-pendiente{ background: #fff3cd; color: #8a6d00; }
.badge-revision{ background: #dbe9ff; color: var(--azul-up); }
.badge-correccion{ background: #ffe4cc; color: #a35300; }
.badge-aprobado{ background: #e9f7ec; color: var(--verde); }
.badge-rechazado{ background: #fdecea; color: var(--rojo); }

.archivo-caja{
  border: 1px dashed var(--gris-borde); border-radius: 6px; padding: 10px;
}

.valor-vacio{ color: #999; font-style: italic; }

/* ---------- Interfaz con menú lateral (portal del estudiante) ---------- */
.app-shell{ display: flex; min-height: 100vh; }

.app-sidebar{
  flex: 0 0 240px;
  background: var(--azul-up);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 0 0 20px;
}
.app-sidebar .marca{
  padding: 22px 20px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.app-sidebar .marca strong{ display:block; font-size: 1.05rem; }
.app-sidebar .marca span{ display:block; font-size: .78rem; opacity: .8; margin-top: 2px; }
.app-sidebar .usuario{
  padding: 14px 20px;
  font-size: .85rem;
  border-bottom: 1px solid rgba(255,255,255,.15);
  opacity: .9;
}
.app-sidebar nav{ flex: 1; padding: 10px 0; }
.app-sidebar nav a, .app-sidebar nav .item-proximamente{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  color: #dce6f5;
  text-decoration: none;
  font-size: .92rem;
  border-left: 3px solid transparent;
}
.app-sidebar nav a:hover{ background: rgba(255,255,255,.08); color: #fff; }
.app-sidebar nav a.activo{
  background: rgba(255,255,255,.12);
  border-left-color: var(--dorado-up);
  color: #fff;
  font-weight: 600;
}
.app-sidebar nav .item-proximamente{ opacity: .45; cursor: not-allowed; }
.app-sidebar .icono{ width: 18px; text-align: center; }
.app-sidebar .salir{ padding: 12px 20px; border-top: 1px solid rgba(255,255,255,.15); }
.app-sidebar .salir a{ color: #ffd9d9; text-decoration: none; font-size: .9rem; }

.app-main{ flex: 1; padding: 28px; background: var(--gris-fondo); min-width: 0; }
.app-main .contenedor{ margin: 0 auto; }

@media (max-width: 780px){
  .app-shell{ flex-direction: column; }
  .app-sidebar{ flex: 0 0 auto; }
  .app-sidebar nav{ display: flex; flex-wrap: wrap; padding: 6px 10px; }
  .app-sidebar nav a, .app-sidebar nav .item-proximamente{ border-left: none; border-radius: 6px; padding: 8px 12px; }
  .app-sidebar nav a.activo{ border-left: none; background: var(--dorado-up); color: var(--azul-up); }
  .app-sidebar .usuario, .app-sidebar .salir{ display: none; }
  .app-main{ padding: 16px; }
}

/* Contenedor ancho para pantallas del panel admin/docentes (se sobrescribe inline con max-width) */
.contenedor[style*="1200px"], .contenedor[style*="900px"], .contenedor[style*="800px"]{
  background: #fff;
}