/* ═══════════════════════════════════════════════════════════
   Mesa de Servicios Virtual — Institución Universitaria de Envigado
   Tema sobre Bootstrap 5. Solo redefine variables y agrega lo propio.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Marca IUE */
  --iue-naranja: #EC6608;
  --iue-naranja-osc: #C4540A;
  --iue-azul: #154361;
  --iue-azul-cl: #1B5675;
  --iue-ambar: #F3932B;

  /* Bootstrap */
  --bs-primary: var(--iue-azul);
  --bs-primary-rgb: 21, 67, 97;
  --bs-link-color: var(--iue-azul);
  --bs-link-color-rgb: 21, 67, 97;
  --bs-link-hover-color: var(--iue-naranja-osc);
  --bs-body-bg: #F1F5F8;
  --bs-body-color: #12242F;
  --bs-border-color: #DCE5EC;
  --bs-border-radius: .5rem;
  --bs-font-sans-serif: "Poppins", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Neutros propios, con sesgo azul */
  --superficie: #FFFFFF;
  --superficie-2: #F7FAFC;
  --tinta-2: #51677A;
  --tinta-3: #7C91A0;
}

body { background: var(--bs-body-bg); }

.btn-primary {
  --bs-btn-bg: var(--iue-azul);
  --bs-btn-border-color: var(--iue-azul);
  --bs-btn-hover-bg: var(--iue-azul-cl);
  --bs-btn-hover-border-color: var(--iue-azul-cl);
  --bs-btn-active-bg: var(--iue-azul-cl);
  --bs-btn-active-border-color: var(--iue-azul-cl);
  --bs-btn-disabled-bg: var(--iue-azul);
  --bs-btn-disabled-border-color: var(--iue-azul);
  font-weight: 500;
}
.btn-outline-primary {
  --bs-btn-color: var(--iue-azul);
  --bs-btn-border-color: var(--iue-azul);
  --bs-btn-hover-bg: var(--iue-azul);
  --bs-btn-hover-border-color: var(--iue-azul);
}
.form-control:focus, .form-select:focus {
  border-color: var(--iue-azul);
  box-shadow: 0 0 0 .25rem rgba(21, 67, 97, .18);
}
.form-check-input:checked {
  background-color: var(--iue-naranja);
  border-color: var(--iue-naranja);
}
:focus-visible { outline: 3px solid var(--iue-ambar); outline-offset: 2px; }

/* ── Barra superior ───────────────────────────────────── */
.mesa-nav {
  background: var(--iue-naranja);
  border-bottom: 3px solid var(--iue-azul);
}
.mesa-nav .navbar-brand img { height: 34px; width: auto; }
.mesa-nav .nav-link { color: rgba(255,255,255,.88); font-weight: 500; }
.mesa-nav .nav-link:hover,
.mesa-nav .nav-link:focus { color: #fff; }
.mesa-nav .nav-link.activo {
  color: #fff;
  box-shadow: inset 0 -3px 0 #fff;
}
.mesa-nav .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.45);
  display: grid; place-content: center;
  font-size: .8125rem; font-weight: 600; color: #fff;
}

/* ── Estados (semánticos, fuera de la paleta de marca) ── */
.estado {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .25rem .625rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.estado::before {
  content: ""; width: .4375rem; height: .4375rem;
  border-radius: 50%; background: currentColor;
}
.estado-nuevo    { background: #E7EEF5; color: #1B4E70; }
.estado-revision { background: #EDE9F7; color: #4B3A87; }
.estado-estudio  { background: #FDECD9; color: #8A4708; }
.estado-proceso  { background: #E2F0F7; color: #16657F; }
.estado-espera   { background: #FBF0DF; color: #9A5B00; }
.estado-ok       { background: #E6F4EE; color: #12795A; }
.estado-cerrado  { background: #ECEFF2; color: #5A6B78; }
.estado-rechazo  { background: #FBEBE9; color: #B3352B; }
.estado-vencido  { background: #FBEBE9; color: #B3352B; }

/* ── Fichas de servicio ───────────────────────────────── */
.ficha {
  display: flex; flex-direction: column; gap: .625rem;
  height: 100%; padding: 1.125rem;
  background: var(--superficie);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ficha:hover {
  border-color: var(--iue-azul);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -18px rgba(18,36,47,.45);
  color: inherit;
}
.ficha .ic {
  width: 2.5rem; height: 2.5rem; border-radius: .375rem;
  display: grid; place-content: center;
  background: var(--superficie-2); color: var(--iue-azul);
  border: 1px solid var(--bs-border-color);
}
.ficha .ic svg { width: 1.25rem; height: 1.25rem; }
.ficha .nombre { font-weight: 600; font-size: .9375rem; }
.ficha .detalle { font-size: .8125rem; color: var(--tinta-2); line-height: 1.4; }
.ficha.destacada { border-color: var(--iue-naranja); }
.ficha.destacada .ic {
  background: rgba(236,102,8,.12);
  color: var(--iue-naranja-osc);
  border-color: rgba(236,102,8,.3);
}

/* ── Historial ────────────────────────────────────────── */
.linea { list-style: none; margin: 0; padding: 0 0 0 1.5rem; position: relative; }
.linea::before {
  content: ""; position: absolute; left: .3125rem; top: .5rem; bottom: .5rem;
  width: 2px; background: var(--bs-border-color);
}
.linea li { position: relative; padding-bottom: 1.125rem; }
.linea li::before {
  content: ""; position: absolute; left: -1.5rem; top: .4375rem;
  width: .75rem; height: .75rem; border-radius: 50%;
  background: var(--superficie); border: 2px solid var(--iue-azul);
}
.linea .cuando { font-size: .75rem; color: var(--tinta-3); }
.linea .que { font-size: .875rem; font-weight: 500; }
.linea .quien { font-size: .8125rem; color: var(--tinta-2); }

/* ── Varios ───────────────────────────────────────────── */
.dato-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.etiqueta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tinta-3); font-weight: 500;
}
.barra { height: .5rem; border-radius: 999px; background: #E4EBF1; overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--iue-azul); }
.estrellas input { display: none; }
.estrellas label {
  font-size: 2rem; color: #D6DEE5; cursor: pointer; line-height: 1;
  transition: color .12s ease;
}
.estrellas label:hover, .estrellas label:hover ~ label,
.estrellas input:checked ~ label { color: var(--iue-ambar); }
.estrellas { display: inline-flex; flex-direction: row-reverse; gap: .25rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .ficha:hover { transform: none; }
}

/* ── Rejilla de disponibilidad ─────────────────────────── */
.franja {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8125rem; font-variant-numeric: tabular-nums;
  padding: .375rem .625rem; border-radius: .375rem;
  border: 1px solid var(--bs-border-color);
  background: var(--superficie); color: var(--bs-body-color);
  cursor: pointer;
}
.franja:hover:not(.ocupada) { border-color: var(--iue-azul); }
.franja.ocupada {
  background: #ECEFF2; color: #8B9AA6; cursor: not-allowed;
  text-decoration: line-through;
}
.franja.elegida {
  background: var(--iue-azul); border-color: var(--iue-azul); color: #fff;
}

/* ── Portada del formulario ────────────────────────────── */
.volver {
  display: inline-block; margin-bottom: .875rem;
  font-size: .8125rem; color: var(--tinta-2); text-decoration: none;
}
.volver:hover { color: var(--iue-naranja-osc); }

.portada {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
  align-items: flex-end; justify-content: space-between;
  padding: 1.75rem 1.875rem; margin-bottom: 1.5rem;
  border-radius: .875rem; color: #fff;
  background: linear-gradient(115deg, var(--iue-azul) 0%, #1B5675 55%, #276E86 100%);
  box-shadow: 0 14px 32px -22px rgba(10, 40, 60, .8);
}
.portada-texto { min-width: 16rem; flex: 1 1 22rem; }
.portada .etiqueta { color: rgba(255, 255, 255, .72); }
.portada h1 { color: #fff; letter-spacing: -.015em; }
.portada-bajada {
  font-size: .9375rem; line-height: 1.5; max-width: 46ch;
  color: rgba(255, 255, 255, .86);
}
.portada-datos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1.75rem;
}
.portada-datos .dato-clave {
  display: block; font-size: .6875rem; letter-spacing: .11em;
  text-transform: uppercase; color: rgba(255, 255, 255, .68);
  margin-bottom: .1875rem;
}
.portada-datos .dato-valor {
  display: block; font-size: .9375rem; font-weight: 500; color: #fff;
}

/* ── Barra de pasos ────────────────────────────────────── */
.pasos { margin-bottom: 1.25rem; }

.pasos-lista {
  display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem;
  margin-bottom: .75rem; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.pasos-lista::-webkit-scrollbar { height: 4px; }
.pasos-lista::-webkit-scrollbar-thumb { background: #C9D6E0; border-radius: 999px; }

.paso-chip {
  display: inline-flex; align-items: center; gap: .5rem; flex: none;
  padding: .4375rem .875rem .4375rem .4375rem;
  border-radius: 999px; border: 1px solid var(--bs-border-color);
  background: var(--superficie); color: var(--tinta-3);
  font-size: .8125rem; line-height: 1.2; white-space: nowrap;
  font-family: inherit; cursor: default;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.paso-chip.alcanzable { cursor: pointer; }
.paso-chip.alcanzable:hover { border-color: var(--iue-azul); color: var(--iue-azul); }
.paso-chip:focus-visible { outline: 2px solid var(--iue-naranja); outline-offset: 2px; }

.paso-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; flex: none;
  border-radius: 50%; background: #E6EDF3; color: var(--tinta-2);
  font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* Un paso ya recorrido muestra un visto en vez del número. El número es un
   nodo de texto, así que se oculta con font-size: 0 y el ::after lo repone. */
.paso-chip.hecho { color: var(--iue-azul); border-color: #BBD0DE; background: #F4F8FB; }
.paso-chip.hecho .paso-num { background: var(--iue-azul); color: #fff; font-size: 0; }
.paso-chip.hecho .paso-num::after { content: "✓"; font-size: .8125rem; }

.paso-chip.activo {
  background: var(--iue-azul); border-color: var(--iue-azul); color: #fff;
  font-weight: 500;
}
.paso-chip.activo .paso-num { background: rgba(255, 255, 255, .24); color: #fff; }

.pasos-barra {
  height: .3125rem; border-radius: 999px; background: #DFE8EF; overflow: hidden;
}
.pasos-barra > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--iue-azul), var(--iue-naranja));
  transition: width .28s ease;
}

/* ── El paso ───────────────────────────────────────────── */
.tarjeta-formulario { border-radius: .875rem; }
.paso[hidden] { display: none !important; }

.paso-cabecera {
  display: flex; align-items: flex-start; gap: 1rem;
  margin: 0 0 1.625rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.paso-medalla {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex: none; border-radius: .75rem;
  background: linear-gradient(140deg, var(--iue-naranja), var(--iue-ambar));
  color: #fff; font-size: 1.0625rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 14px -8px rgba(196, 84, 10, .9);
}

.obligatorio { color: var(--iue-naranja); font-weight: 700; }

.form-label { font-weight: 500; margin-bottom: .375rem; }
.paso .form-control, .paso .form-select { padding: .5625rem .75rem; }
.paso .form-control:focus, .paso .form-select:focus {
  border-color: var(--iue-azul);
  box-shadow: 0 0 0 .2rem rgba(21, 67, 97, .14);
}
.paso .is-invalid { border-color: #B3352B; }

/* ── Grupos de casillas y bloques ──────────────────────── */
.campo-grupo, .bloque {
  border: 1px solid var(--bs-border-color); border-radius: .625rem;
  padding: 1rem 1.125rem; background: var(--superficie-2);
}
.campo-grupo legend, .bloque-titulo {
  float: none; width: auto; padding: 0;
  font-size: .9375rem; font-weight: 600; margin-bottom: .25rem;
}
.campo-grupo .opciones {
  display: grid; gap: .25rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.campo-grupo .form-check { margin-bottom: 0; padding-left: 1.75rem; }
.campo-grupo .form-check-input { margin-left: -1.75rem; }
.form-check-input:checked {
  background-color: var(--iue-azul); border-color: var(--iue-azul);
}

/* ── Resumen antes de enviar ───────────────────────────── */
.resumen {
  background: var(--superficie-2); border: 1px solid var(--bs-border-color);
  border-radius: .625rem; padding: 1.125rem 1.25rem;
}
.resumen-bloque + .resumen-bloque {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--bs-border-color);
}
.resumen-titulo {
  display: flex; align-items: baseline; gap: .625rem;
  font-size: .875rem; font-weight: 600; margin: 0 0 .5rem;
}
.resumen-editar {
  border: 0; background: none; padding: 0; font-size: .75rem;
  color: var(--iue-azul); text-decoration: underline; cursor: pointer;
}
.resumen-lista dt {
  font-size: .75rem; font-weight: 500; color: var(--tinta-3); margin-top: .5rem;
}
.resumen-lista dd { font-size: .875rem; margin: 0; overflow-wrap: anywhere; }

/* ── Botonera ──────────────────────────────────────────── */
.acciones {
  display: flex; flex-wrap: wrap; gap: .625rem; align-items: center;
  margin-top: 1.75rem; padding-top: 1.25rem;
  border-top: 1px solid var(--bs-border-color);
}
.acciones-contador {
  margin-left: auto; font-size: .8125rem; color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
  .portada { padding: 1.25rem; }
  .paso-texto { display: none; }
  .paso-chip.activo .paso-texto { display: inline; }
  .acciones .btn { flex: 1 1 auto; }
  .acciones-contador { width: 100%; margin-left: 0; text-align: center; }
}

/* ── Estudio del comité ────────────────────────────────── */
.bloque-formato + .bloque-formato {
  margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid var(--bs-border-color);
}
.respuestas dt {
  font-size: .75rem; font-weight: 500; color: var(--tinta-3);
  margin-top: .625rem;
}
.respuestas dt:first-child { margin-top: 0; }
.respuestas dd { font-size: .875rem; margin: .125rem 0 0; overflow-wrap: anywhere; }

.concepto { padding: .625rem 0; border-top: 1px solid var(--bs-border-color); }
.concepto:first-child { border-top: 0; padding-top: 0; }

/* ── Estados vacíos ────────────────────────────────────── */
.vacio {
  padding: 3rem 1.5rem; text-align: center;
  max-width: 34rem; margin: 0 auto;
}
.vacio-titulo {
  font-size: 1rem; font-weight: 600; margin-bottom: .5rem;
  color: var(--bs-body-color);
}
.vacio-texto {
  font-size: .875rem; color: var(--tinta-2); line-height: 1.55;
  margin-bottom: 1.125rem;
}

/* Aviso de validación escrito por nosotros: los del navegador salen en su
   propio idioma y en un formulario en español eso desentona. */
.error-vivo {
  margin-top: .3125rem; font-size: .8125rem; font-weight: 500;
  color: #B3352B;
}
.error-vivo::before { content: "⚠ "; }
.campo-grupo.grupo-invalido {
  border-color: #B3352B; background: #FDF6F5;
}