/* Plataforma de reportes - I.E. El Dorado */
:root {
  /* Colores tomados del escudo de la institucion */
  --tinta: #243c84;          /* azul del escudo */
  --tinta-2: #2f4ba3;
  --tinta-oscura: #172a66;
  --celeste: #6cc0f0;
  --laton: #f5d60a;          /* amarillo del escudo (acento) */
  --laton-claro: #fff7c2;
  --rojo: #d82418;
  --papel: #f3f6fb;
  --borde: #d5ddec;
  --pendiente: #d82418;
  --proceso: #1c7cc0;
  --solucionado: #1e8a4c;

  --bs-primary: #243c84;
  --bs-primary-rgb: 36, 60, 132;
  --bs-link-color: #243c84;
  --bs-link-hover-color: #172a66;
  --bs-body-font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-bg: var(--papel);
  --bs-body-color: #1d2635;
  --bs-border-radius: .5rem;
}

h1, h2, h3, h4, h5, .titulo {
  font-family: "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, sans-serif;
  letter-spacing: -.01em;
}

.btn-primary {
  --bs-btn-bg: var(--tinta);
  --bs-btn-border-color: var(--tinta);
  --bs-btn-hover-bg: var(--tinta-2);
  --bs-btn-hover-border-color: var(--tinta-2);
  --bs-btn-active-bg: #172a66;
  --bs-btn-active-border-color: #172a66;
  --bs-btn-disabled-bg: var(--tinta);
  --bs-btn-disabled-border-color: var(--tinta);
  --bs-btn-focus-shadow-rgb: 108, 192, 240;
}
.btn-outline-primary {
  --bs-btn-color: var(--tinta);
  --bs-btn-border-color: var(--tinta);
  --bs-btn-hover-bg: var(--tinta);
  --bs-btn-hover-border-color: var(--tinta);
  --bs-btn-active-bg: var(--tinta);
  --bs-btn-focus-shadow-rgb: 108, 192, 240;
}
.form-control:focus, .form-select:focus {
  border-color: var(--tinta-2);
  box-shadow: 0 0 0 .2rem rgba(108, 192, 240, .45);
}
a:focus-visible, button:focus-visible { outline: 3px solid var(--celeste); outline-offset: 2px; }

/* ---------- Pantalla de acceso ---------- */
.acceso {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem 1rem;
  /* Franjas diagonales que recuerdan la banda del escudo */
  background:
    linear-gradient(115deg, transparent 0 56%, rgba(108,192,240,.16) 56% 68%, transparent 68% 72%, rgba(245,214,10,.20) 72% 75%, transparent 75%),
    linear-gradient(165deg, var(--tinta) 0%, var(--tinta-oscura) 100%);
}
.acceso-cabecera { color: #fff; text-align: center; margin-bottom: 4.4rem; }
.acceso-cabecera .institucion { color: var(--celeste); font-weight: 700; margin: 0 0 .25rem; }
.acceso-cabecera h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0; font-weight: 700; }

.acceso-caja {
  position: relative; width: 100%; max-width: 430px;
  padding: 4.2rem 2rem 1.75rem;
  background: #fff; border-radius: .9rem; border-top: 5px solid var(--laton);
  box-shadow: 0 18px 44px rgba(8, 18, 54, .35);
}
.acceso-caja .escudo-insignia { position: absolute; top: -66px; left: 50%; transform: translateX(-50%); margin: 0; }
.acceso-caja h2 { font-size: 1.6rem; margin-bottom: .25rem; text-align: center; }
.acceso-caja .sub { color: #5b6678; margin-bottom: 1.5rem; text-align: center; }
.enlaces-acceso { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1.25rem; font-size: .95rem; }
.acceso-ayuda { max-width: 430px; text-align: center; color: #e6edfb; font-size: .95rem; margin-top: 1.5rem; }
.acceso-ayuda p { margin: 0 0 .25rem; }
.acceso-ayuda strong { color: #fff; }
.acceso-pie { text-align: center; color: #9fb3dd; font-size: .85rem; margin: 1rem 0 0; }
.nota-dev { background: var(--laton-claro); border-left: 4px solid var(--laton); color: #3d3500; padding: .6rem .8rem; border-radius: .35rem; font-size: .9rem; }

/* ---------- Estructura general de las pantallas internas ---------- */
.barra { background: var(--tinta); color: #fff; border-bottom: 4px solid var(--laton); }
.barra .navbar-brand { display: flex; align-items: center; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; color: #fff; }
.barra .navbar-brand small { display: block; font-family: "Atkinson Hyperlegible", sans-serif; font-weight: 400; font-size: .72rem; color: var(--celeste); line-height: 1; }
.barra .nav-link { color: #cfd6e4; }
.barra .nav-link:hover, .barra .nav-link.active { color: #fff; }
.barra .nav-link.active { box-shadow: inset 0 -3px 0 var(--laton); }
.chip-rol { background: rgba(255,255,255,.12); border-radius: 999px; padding: .15rem .65rem; font-size: .8rem; }

.contenido { max-width: 1120px; margin: 0 auto; padding: 1.75rem 1rem 3rem; }

/* Estados de reporte */
.estado-chip { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .85rem; padding: .15rem .65rem; border-radius: 999px; border: 1.5px solid currentColor; background: #fff; }
.estado-chip::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.estado-PENDIENTE { color: var(--pendiente); }
.estado-EN_PROCESO { color: var(--proceso); }
.estado-SOLUCIONADO { color: var(--solucionado); }

.vacio { text-align: center; color: #5b6678; padding: 2.5rem 1rem; }
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: .6rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Escudo ---------- */
.escudo-insignia {
  width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background: #fff; flex: none;
  box-shadow: 0 0 0 4px #fff, 0 6px 18px rgba(8, 18, 54, .3);
}
.escudo-insignia img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); display: block; }
.escudo-mini { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: #fff; display: inline-block; margin-right: .6rem; flex: none; }
.escudo-mini img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); display: block; }

/* ---------- Pantallas del docente ---------- */
.contenido-angosto { max-width: 640px; }
.chip-rol-claro { background: var(--laton-claro); border-radius: 999px; padding: .2rem .8rem; font-size: .9rem; font-weight: 700; color: #3d3500; }

.filtros { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtros button {
  border: 1.5px solid var(--borde); background: #fff; color: #33405a; border-radius: 999px;
  padding: .3rem .95rem; font-size: .95rem; cursor: pointer;
}
.filtros button:hover { border-color: var(--tinta); }
.filtros button.activo { background: var(--tinta); border-color: var(--tinta); color: #fff; font-weight: 700; }

.tarjeta-reporte { padding: 1rem 1.1rem; transition: box-shadow .15s; }
.tarjeta-reporte:hover { box-shadow: 0 4px 14px rgba(36, 60, 132, .12); }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Avance del reporte */
.pasos { display: flex; list-style: none; margin: .25rem 0 1.25rem; padding: 0; }
.paso { flex: 1; text-align: center; position: relative; font-size: .85rem; color: #6b768a; }
.paso::before { content: ""; position: absolute; top: 11px; left: -50%; right: 50%; height: 3px; background: var(--borde); }
.paso:first-child::before { display: none; }
.paso .nodo { display: block; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--borde); margin: 0 auto .35rem; position: relative; z-index: 1; }
.paso.hecho { color: #1d2635; }
.paso-PENDIENTE { --c: var(--pendiente); }
.paso-EN_PROCESO { --c: var(--proceso); }
.paso-SOLUCIONADO { --c: var(--solucionado); }
.paso.hecho .nodo { background: var(--c); border-color: var(--c); }
.paso.hecho::before { background: var(--c); }
.paso.actual { font-weight: 700; color: var(--c); }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem 1.5rem; margin: 0; }
.datos dt { font-size: .8rem; color: #6b768a; font-weight: 400; }
.datos dd { margin: 0; font-weight: 700; }
.descripcion-completa { white-space: pre-line; }
.foto-detalle { max-width: 100%; max-height: 340px; border-radius: .5rem; border: 1px solid var(--borde); }
.foto-previa { max-width: 100%; max-height: 180px; margin-top: .6rem; border-radius: .5rem; border: 1px solid var(--borde); }

.linea { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 3px solid var(--borde); }
.linea li { position: relative; padding: 0 0 1rem .9rem; }
.linea li::before { content: ""; position: absolute; left: -1.55rem; top: .3rem; width: 12px; height: 12px; border-radius: 50%; background: var(--tinta); }
.linea li:last-child { padding-bottom: 0; }

/* Campana de notificaciones */
.campana-numero { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--rojo); color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; }
.campana-menu { width: 330px; max-width: calc(100vw - 2rem); max-height: 420px; overflow-y: auto; }
.campana-titulo { padding: .6rem .9rem; font-weight: 700; border-bottom: 1px solid var(--borde); }
.campana-item { display: block; width: 100%; text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--borde); padding: .6rem .9rem; }
.campana-item:hover { background: var(--papel); }
.campana-item.sin-leer { background: #eef4ff; border-left: 4px solid var(--tinta); }
.campana-texto { display: block; font-size: .92rem; }
.campana-fecha { display: block; font-size: .78rem; color: #6b768a; margin-top: .15rem; }

/* ---------- Mantenimiento ---------- */
.filtros .cuenta { display: inline-block; min-width: 1.4rem; margin-left: .25rem; padding: 0 .35rem; border-radius: 999px; background: rgba(36, 60, 132, .12); font-size: .8rem; font-weight: 700; }
.filtros button.activo .cuenta { background: rgba(255, 255, 255, .25); }

/* ---------- Administrativo ---------- */
.kpi { background: #fff; border: 1px solid var(--borde); border-radius: .75rem; padding: 1rem 1.15rem; border-top: 4px solid var(--tinta); height: 100%; }
.kpi .valor { font-family: "Bricolage Grotesque", sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.1; }
.kpi .nombre { color: #5b6678; font-size: .9rem; }
.kpi.k-PENDIENTE { border-top-color: var(--pendiente); }
.kpi.k-EN_PROCESO { border-top-color: var(--proceso); }
.kpi.k-SOLUCIONADO { border-top-color: var(--solucionado); }
.fila-barra { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr 2.5rem; gap: .6rem; align-items: center; margin-bottom: .5rem; font-size: .9rem; }
.fila-barra .rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-barra .pista { background: #e8edf7; border-radius: 999px; height: .7rem; overflow: hidden; }
.fila-barra .relleno { background: var(--tinta); height: 100%; border-radius: 999px; }
.fila-barra .num { text-align: right; font-weight: 700; }
.tabla-reportes th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #5b6678; white-space: nowrap; }
.tabla-reportes tbody tr[data-id] { cursor: pointer; }
.tabla-reportes .desc { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-cuenta { font-size: .8rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; }
.chip-cuenta.on { background: #e1f3e8; color: var(--solucionado); }
.chip-cuenta.off { background: #f1f1f1; color: #666; }

/* Botón del menú en celular: rayas claras sobre el azul de la barra */
.barra .navbar-toggler { border: 1px solid rgba(255, 255, 255, .55) !important; padding: .3rem .55rem; }
.barra .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(245, 214, 10, .5); }
.barra .navbar-toggler-icon { filter: invert(1) brightness(2); }

/* Tablas del administrativo: en celular cada fila se vuelve una tarjeta apilada */
@media (max-width: 767.98px) {
  .tabla-reportes.apilar thead { display: none; }
  .tabla-reportes.apilar, .tabla-reportes.apilar tbody { display: block; }
  .tabla-reportes.apilar tr { display: block; padding: .8rem 1rem; border-bottom: 1px solid var(--borde); }
  .tabla-reportes.apilar tr:last-child { border-bottom: 0; }
  .tabla-reportes.apilar td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border: 0; padding: .2rem 0; text-align: right; }
  .tabla-reportes.apilar td::before { content: attr(data-label); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #5b6678; text-align: left; flex: none; }
  .tabla-reportes.apilar td.desc { max-width: none; white-space: normal; overflow: visible; }
  .tabla-reportes.apilar td.acciones { justify-content: flex-end; padding-top: .5rem; }
  .tabla-reportes.apilar td.acciones::before { content: none; }
}

/* Campo del código de 6 dígitos (verificación de correo y recuperación) */
.codigo-verificacion { letter-spacing: .5em; font-size: 1.4rem; font-weight: 700; text-align: center; }
.codigo-verificacion::placeholder { letter-spacing: .3em; font-weight: 400; }

/* Mensaje de mantenimiento en el historial del reporte */
.mensaje-historial { margin-top: .25rem; padding: .4rem .6rem; background: var(--papel); border-left: 3px solid var(--solucionado); border-radius: .25rem; font-size: .92rem; }