/* MEPControl — el portal del implementador vive DENTRO de MEPControl.
   La marca del cliente manda en el encabezado; los colores semanticos no se
   parametrizan nunca: el rojo de una alerta bloqueante significa lo mismo en
   todos los portales. */
:root {
  --marca: #4A4A4A; --sobre-marca: #FFFFFF; --fondo: #FAFAF7; --tinta: #1A1A1A;
  --alerta-bloqueante: #C0392B; --alerta-revision: #E67E22; --ok: #27AE60;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; min-height: 100vh;
}
.marca { background: var(--marca); color: var(--sobre-marca); }
.marca-interior {
  max-width: 62rem; margin: 0 auto; padding: 0.9rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.logo { max-height: 40px; max-width: 220px; }
.logo-texto { font-weight: 700; letter-spacing: 0.02em; }
.quien { font-size: 0.9rem; }
.quien a { color: inherit; }
main { flex: 1; max-width: 62rem; width: 100%; margin: 0 auto; padding: 1.75rem 1.25rem; }
.tarjeta { background: #fff; border: 1px solid #E5E3DC; border-radius: 10px; padding: 1.6rem; }
.centrada { margin: 2rem auto; }
.estrecha { max-width: 24rem; }
h1 { font-size: 1.35rem; margin: 0 0 0.75rem; }
.apagado { color: #6B6B66; }
.pequeno { font-size: 0.88rem; }
label { display: block; margin: 0.9rem 0 0.25rem; font-size: 0.9rem; }
input {
  width: 100%; padding: 0.6rem 0.7rem; border: 1px solid #CFCCC3;
  border-radius: 7px; font-size: 1rem; background: #fff; color: var(--tinta);
}
button {
  width: 100%; margin-top: 1.2rem; padding: 0.7rem; border: 0; border-radius: 7px;
  font-size: 1rem; font-weight: 600; cursor: pointer;
}
/* El boton primario toma la marca SOLO si no choca con los colores de alerta. */
.primario-marca { background: var(--marca); color: var(--sobre-marca); }
.primario { background: var(--tinta); color: #fff; }
.aviso { padding: 0.65rem 0.8rem; border-radius: 7px; font-size: 0.92rem; }
.aviso.bloqueante { background: #FDEDEC; color: var(--alerta-bloqueante); border: 1px solid var(--alerta-bloqueante); }
.aviso.revision { background: #FEF5E7; color: var(--alerta-revision); border: 1px solid var(--alerta-revision); }
.permisos { margin: 0.9rem 0 0; padding-left: 1.1rem; font-size: 0.92rem; }
footer { padding: 1.4rem 1.25rem; text-align: center; color: #86867F; font-size: 0.82rem; }
.sub { font-size: 1rem; margin: 1.4rem 0 0.5rem; }
.datos { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.92rem; }
.datos th, .datos td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid #EDEBE4; vertical-align: top; }
.datos th { color: #6B6B66; font-weight: 600; white-space: nowrap; }
.datos.lista th { background: #F6F5F0; }
/* El reloj del circuito: lo primero que se ve al crear una solicitud, porque es lo que
   evita la perdida mas cara — pedir despues del corte del martes. */
.reloj { border: 1px solid #D9E7EE; background: #F3F9FC; border-radius: 9px; padding: 0.9rem 1rem; margin: 1rem 0; }
.reloj.fuera { border-color: #F0D3A8; background: #FEF7EC; }
.reloj-titulo { margin: 0 0 0.2rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6B6B66; }
.reloj-fecha { margin: 0 0 0.35rem; font-size: 1.15rem; }
.aviso.ok { background: #EAF7EF; color: #1E7A46; border: 1px solid var(--ok); }
select { width: 100%; padding: 0.6rem 0.7rem; border: 1px solid #CFCCC3; border-radius: 7px; font-size: 1rem; background: #fff; }
.datos.lista input { padding: 0.4rem 0.5rem; font-size: 0.92rem; }
.botonera { display: flex; gap: 0.7rem; }
.botonera button { flex: 1; }
.secundario { background: #fff; color: var(--tinta); border: 1px solid #CFCCC3; }
tr.ganadora { background: #EAF7EF; }
td.tarde { color: var(--alerta-bloqueante); font-weight: 600; }
.chico { width: auto; margin-top: 0.3rem; padding: 0.35rem 0.7rem; font-size: 0.85rem; }
.datos.lista form { display: flex; gap: 0.4rem; align-items: center; }
.datos.lista form input[name="sustento"] { min-width: 14rem; }
.boton-enlace { display: inline-block; padding: 0.55rem 1rem; border-radius: 7px;
  background: var(--tinta); color: #fff; text-decoration: none; font-weight: 600; }
input.cantidad { width: 6.5rem; padding: 0.3rem 0.4rem; font-size: 0.9rem; text-align: right; }
tr.anulada { opacity: 0.55; text-decoration: line-through; }


/* ------------------------------------------------------------------ */
/* La caja de «esto esta mal pensado». Va en todas las pantallas, al   */
/* pie, plegada: presente sin estorbar. Escondida en un menu seria una  */
/* caja que nadie encuentra.                                           */
/* ------------------------------------------------------------------ */
.decir { max-width: 60rem; margin: 2.5rem auto 0; padding: 0 1rem; }
.decir summary {
  cursor: pointer; font-weight: 600; padding: .55rem .8rem;
  border: 1px dashed var(--borde, #c9ced6); border-radius: .5rem;
  color: var(--tinta-suave, #5a6472); background: transparent;
}
.decir summary:hover { border-style: solid; }
.decir details[open] summary { margin-bottom: .8rem; }
.decir form {
  border: 1px solid var(--borde, #c9ced6); border-radius: .5rem; padding: 1rem;
}
.decir textarea { width: 100%; box-sizing: border-box; font: inherit; padding: .6rem; }
.decir-visibilidad { border: 0; padding: .6rem 0 0; margin: 0; }
.decir-visibilidad legend { font-size: .85rem; color: var(--tinta-suave, #5a6472); }
.decir-visibilidad label { display: inline-block; margin-right: 1.2rem; font-size: .95rem; }
.decir .letra-chica { font-size: .8rem; color: var(--tinta-suave, #5a6472); line-height: 1.45; }
.decir-gracias {
  padding: .6rem .8rem; border-radius: .5rem; font-size: .95rem;
  background: #eaf6ec; border: 1px solid #bcdcc3;
}
.decir-vacio { background: #fdf1e3; border-color: #e8c9a0; }


/* Lo que la persona puede hacer, en castellano y con su enlace. Reemplaza a la lista
   cruda de permisos, que le hablaba al usuario en el codigo fuente del sistema. */
.que-puede-hacer { list-style: none; padding: 0; margin: 1rem 0 0; }
.que-puede-hacer li {
  padding: .55rem 0; border-top: 1px solid var(--borde, #e3e6ea);
}
.que-puede-hacer li:last-child { border-bottom: 1px solid var(--borde, #e3e6ea); }

/* Performance — el bosque, no el árbol.
   La fila del cuello de botella se marca, pero SIN rojo de alerta: no es una falta de
   nadie, es dónde ir a mirar. El rojo está reservado para lo que bloquea plata (R19). */
.filtro-fechas { display: flex; gap: 0.8rem; align-items: flex-end; margin: 0.9rem 0; flex-wrap: wrap; }
.filtro-fechas label { display: flex; flex-direction: column; font-size: 0.85rem; gap: 0.2rem; }
tr.cuello { background: #FEF5E7; }
tr.lectura td { font-size: 0.85rem; color: #5a6472; padding-top: 0; padding-bottom: 0.7rem; border-top: 0; }