/* ============================================================================
   panel/assets/modulos/ofertas.css — lo que solo usa el módulo Ofertas
   ============================================================================
   Tokens de marca.css y panel.css y los componentes comunes (.caja, .btn,
   .pill, .sello, .publica, .ayuda-*, .metrica, .campo, .pestanas). La vista
   previa de los bloques usa comunicado.css (copia de assets/). Sin caja
   dentro de caja: dentro de una sección, el espacio y una línea fina
   separan. Lo único biselado son las .caja y los chips comunes.
   ========================================================================== */
.of-ico{display:inline-flex;flex:none;color:var(--texto-3)}
.of-ico svg{width:1.1rem;height:1.1rem}
.of-ico.es-destacada,.of-ico.es-confianza{color:var(--yellow)}
.btn .of-ico{color:inherit;margin-right:var(--esp-2)}

/* ── La lista ────────────────────────────────────────────────────────────── */
.of-metricas{margin-bottom:var(--esp-rejilla)}
.of-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-3);margin-bottom:var(--esp-3)}
.of-buscar{flex:1 1 var(--campo-s);max-inline-size:var(--campo-m);min-height:var(--alto-control);padding:0 var(--esp-3);
  font:inherit;font-size:var(--tipo-descripcion);color:var(--texto-1);background:var(--sup-0, var(--ink));
  border:1px solid var(--linea-suave);border-radius:0}
.of-buscar:hover{border-color:var(--texto-3)}
.of-buscar:focus{outline:none;border-color:var(--yellow)}
.of-filtros{display:flex;gap:var(--esp-1);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--linea-suave);margin-bottom:var(--esp-rejilla)}
.of-filtros::-webkit-scrollbar{display:none}
/* En estrecho el carril se desliza: un degradado en el borde derecho avisa de que
   sigue, y el relleno final deja la última pestaña limpia al llegar al tope. */
@media (max-width:56rem){
  .of-filtros{padding-inline-end:var(--esp-bloque);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--esp-bloque)),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - var(--esp-bloque)),transparent)}
}
.of-filtros .pestana{letter-spacing:.06em}
.of-grupo{margin-bottom:var(--esp-bloque)}
.of-grupo-titulo{display:flex;align-items:center;gap:var(--esp-2);margin:0 0 var(--esp-3);
  font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);font-family:inherit}
.of-grupo.es-cola .of-grupo-titulo{color:var(--yellow)}
.of-grupo.es-cola .of-lista{--filo-color:var(--borde-vivo, var(--yellow))}
.of-grupo-n{color:var(--texto-2);font-weight:600}
.of-lista{display:flex;flex-direction:column;padding:var(--esp-1) 0;min-width:0}
.of-fila{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:var(--esp-3);
  width:100%;padding:var(--esp-3) var(--esp-4);background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit;
  transition:background var(--t-rapido) var(--curva)}
.of-fila + .of-fila{box-shadow:inset 0 1px 0 var(--linea-suave)}
.of-fila:hover{background:var(--velo-1)}
.of-fila:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.of-fila-textos{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.of-fila-titulo{color:var(--texto-1);font-weight:500;font-size:var(--tipo-cuerpo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-fila-meta{display:flex;flex-wrap:wrap;gap:0 var(--esp-3);font-size:var(--tipo-leyenda);color:var(--texto-3)}
.of-fila-de{display:inline-flex;align-items:center;gap:.3rem;color:var(--texto-2)}
.of-fila-de svg{height:1em;width:auto}
.of-fila-cifras{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;font-size:var(--tipo-leyenda);color:var(--texto-3);text-align:right;white-space:nowrap}
.of-cifra-aviso{color:var(--yellow)}

/* ── La ficha ────────────────────────────────────────────────────────────── */
.of-volver{margin:var(--esp-2) 0 var(--esp-3)}
.of-estado{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2) var(--esp-3);margin:calc(-1 * var(--esp-3)) 0 var(--esp-rejilla);
  font-size:var(--tipo-descripcion);color:var(--texto-2)}
.of-estado .sello svg{height:1.3em;width:auto}
.of-estado-dato{color:var(--texto-3)}
.of-estado-dato.es-destacada{color:var(--yellow)}
.of-enlace{color:var(--texto-2);text-decoration:underline;text-underline-offset:3px}
.of-enlace:hover,.of-enlace:focus-visible{color:var(--yellow)}
.of-enlace:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

.of-ficha{display:grid;gap:var(--esp-rejilla);align-items:start;grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){ .of-ficha{grid-template-columns:minmax(0,1fr) minmax(18rem,24rem)} }
.of-izq,.of-der{display:flex;flex-direction:column;gap:var(--esp-rejilla);min-width:0}
.of-seccion{display:flex;flex-direction:column;gap:var(--esp-3);padding:var(--esp-tarjeta, 1.5rem);margin:0;min-width:0}
.of-seccion.of-cola{--filo-color:var(--borde-vivo, var(--yellow))}
.of-seccion-titulo{display:flex;align-items:center;gap:var(--esp-2);margin:0;
  font-family:var(--fuente-dato);font-weight:700;font-size:var(--tipo-dato);letter-spacing:calc(.01em + var(--tracking-dato));
  text-transform:uppercase;color:var(--texto-1);line-height:1.1}
.of-cola .of-seccion-titulo{color:var(--yellow)}
.of-sola{max-inline-size:var(--campo-xl)}
.of-sub{margin:var(--esp-2) 0 0;font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3);font-family:inherit}
.of-nota{margin:0;font-size:var(--tipo-descripcion);color:var(--texto-2);line-height:1.5;max-width:62ch}
.of-acciones{display:flex;flex-wrap:wrap;gap:var(--esp-3);align-items:center}
.of-acciones .btn.confirmar,.of-seccion .btn.confirmar,.of-gente .btn.confirmar,.of-resultado .btn.confirmar,.of-postulante .btn.confirmar{
  background:var(--yellow);color:var(--sobre-amarillo);--filo-color:transparent}
.of-peligro{--filo-color:var(--borde-vivo, var(--yellow));color:var(--yellow)}
.of-motivo{display:flex;flex-direction:column;gap:var(--esp-3);min-width:0}
.of-motivo > .btn{align-self:flex-start}
.of-motivo-zona{display:flex;flex-direction:column;gap:var(--esp-3);padding:var(--esp-4);background:var(--velo-1);max-width:62ch}
.of-motivo-zona[hidden]{display:none}
.of-motivo-zona textarea{max-inline-size:var(--campo-xl)}

/* La tarjeta del tablón, tal como se lee en la web. */
.of-tarjeta{display:flex;flex-direction:column;gap:var(--esp-2);padding-bottom:var(--esp-3);border-bottom:1px solid var(--linea-suave)}
.of-tarjeta-arriba{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2) var(--esp-3)}
.of-tarjeta-arriba .sello svg{height:1.3em;width:auto}
.of-tarjeta-tipo{font-size:var(--tipo-leyenda);color:var(--texto-3);letter-spacing:.08em;text-transform:uppercase}
.of-tarjeta-titulo{margin:0;font-family:var(--fuente-titular);font-weight:var(--peso-titular);font-size:var(--tipo-entradilla);
  line-height:var(--interlinea-titular);color:var(--texto-1);overflow-wrap:anywhere}
.of-tarjeta-titulo-en{margin:0;font-weight:600;color:var(--texto-1);font-size:var(--tipo-cuerpo)}
.of-tarjeta-resumen{margin:0;font-size:var(--tipo-descripcion);color:var(--texto-2);line-height:1.5;overflow-wrap:anywhere}
.of-tarjeta .publica{margin-top:var(--esp-1)}
.of-ingles{display:flex;flex-direction:column;gap:var(--esp-1)}
.of-ingles .eyebrow{margin:0}
.of-contenido{min-width:0;overflow-wrap:anywhere}

/* Los cambios de una publicada: antes tachado, después en amarillo. */
.of-cambios{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--esp-2) var(--esp-4);margin:0;font-size:var(--tipo-descripcion)}
.of-cambios dt{color:var(--texto-3);font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding-top:.15rem}
.of-cambios dd{margin:0;display:flex;flex-direction:column;gap:.2rem;min-width:0;overflow-wrap:anywhere}
.of-cambios del{color:var(--texto-3)}
.of-cambios ins{color:var(--yellow);text-decoration:none}
.of-edicion-previa{border-top:1px solid var(--linea-suave);padding-top:var(--esp-3)}
.of-edicion-previa .of-seccion{padding:0}

/* Personas: avatar, @ y marca. */
.of-persona{display:inline-flex;align-items:center;gap:var(--esp-2);min-width:0;font-size:var(--tipo-descripcion);color:var(--texto-2)}
.of-persona b{font-weight:500;color:var(--texto-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-persona .marca-trufas svg{height:1.3em;width:auto}
.of-persona .marca-confianza svg{height:1.05em;width:auto}
.of-avatar{width:1.75rem;height:1.75rem;border-radius:50%;object-fit:cover;flex:none;background:var(--sup-2, var(--surface))}
.of-avatar-sm{width:1.3rem;height:1.3rem}
.of-sin-avatar{display:inline-flex;align-items:center;justify-content:center;font-size:var(--tipo-leyenda);font-weight:600;color:var(--texto-2)}
.of-apodo{font-size:var(--tipo-leyenda);color:var(--texto-3)}

.of-reportes,.of-postulantes,.of-resultados,.of-destacados{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.of-reporte,.of-postulante{display:flex;flex-direction:column;gap:var(--esp-1);padding:var(--esp-3) 0;min-width:0}
.of-reporte + .of-reporte,.of-postulante + .of-postulante{border-top:1px solid var(--linea-suave)}
.of-reporte.es-resuelto{opacity:.7}
.of-reporte-cab,.of-postulante-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-2)}
.of-reporte-texto,.of-postulante-msg{margin:0;font-size:var(--tipo-descripcion);color:var(--texto-1);line-height:1.5;overflow-wrap:anywhere;white-space:pre-line}
.of-reporte-meta{margin:0;font-size:var(--tipo-leyenda);color:var(--texto-3)}
.of-postulante > .btn{align-self:flex-start;margin-top:var(--esp-1)}
.of-asignada{display:flex;flex-direction:column;gap:var(--esp-2);padding-bottom:var(--esp-3);border-bottom:1px solid var(--linea-suave)}
.of-asignada .eyebrow{margin:0;color:var(--yellow)}
.of-campo-fecha{max-inline-size:var(--campo-m)}
.of-destacados li{font-size:var(--tipo-descripcion);color:var(--texto-2);padding:var(--esp-1) 0}

.of-otra{border-top:1px solid var(--linea-suave);padding-top:var(--esp-3)}
.of-otra > summary{cursor:pointer;color:var(--texto-2);font-size:var(--tipo-descripcion);min-height:var(--btn-sm-alto);display:flex;align-items:center}
.of-otra > summary:hover{color:var(--texto-1)}
.of-otra > summary:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.of-otra[open] > summary{margin-bottom:var(--esp-3)}
.of-buscar-persona{max-inline-size:var(--campo-m)}
.of-resultado{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-2);padding:var(--esp-2) 0;border-bottom:1px solid var(--linea-suave)}
.of-resultados > .of-nota,.of-resultados > .cargando-fila{padding:var(--esp-2) 0}

.of-datos{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--esp-2) var(--esp-4);margin:0;font-size:var(--tipo-descripcion)}
.of-datos dt{color:var(--texto-3)}
.of-datos dd{margin:0;color:var(--texto-1);overflow-wrap:anywhere}
.of-zona-peligro .of-seccion-titulo{color:var(--texto-2)}

/* Interruptores y ayuda: el globo cuelga del contenedor con position. */
.of-ayuda{display:inline-flex}
.of-rotulo{position:relative;display:flex;align-items:center;gap:var(--esp-2)}
.of-campo{gap:var(--esp-2)}
.of-campo-l{max-inline-size:var(--campo-l)}
.of-fila-interruptor{position:relative;display:flex;align-items:center;gap:var(--esp-2)}
.of-interruptor{display:inline-flex;align-items:center;gap:var(--esp-3);cursor:pointer;font-size:var(--tipo-descripcion);color:var(--texto-2);min-height:var(--btn-sm-alto)}
.of-interruptor:has(input:checked){color:var(--texto-1)}
.of-interruptor:has(input:disabled){opacity:.6;cursor:default}

/* El formulario de una oficial. */
.of-form{display:flex;flex-direction:column;gap:var(--esp-4);min-width:0}
.of-form .ficha-fila{margin-bottom:0}
.of-form textarea{max-inline-size:var(--campo-xl)}
.of-ingles-campos{border-top:1px solid var(--linea-suave);padding-top:var(--esp-3);display:flex;flex-direction:column}
.of-ingles-campos > summary{cursor:pointer;color:var(--texto-2);font-size:var(--tipo-descripcion);min-height:var(--btn-sm-alto);display:flex;align-items:center}
.of-ingles-campos > summary:hover{color:var(--texto-1)}
.of-ingles-campos > summary:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.of-ingles-campos[open] > summary{margin-bottom:var(--esp-3)}
.of-ingles-campos > .campo + .campo{margin-top:var(--esp-4)}

/* ── Confianza ───────────────────────────────────────────────────────────── */
.of-criterio{display:flex;align-items:flex-start;gap:var(--esp-3);padding:var(--esp-4);margin-bottom:var(--esp-rejilla);--filo-color:var(--borde-vivo, var(--yellow))}
.of-criterio > .of-ico{margin-top:.15rem}
.of-criterio-titulo{margin:0 0 var(--esp-1);font-weight:600;color:var(--texto-1);font-size:var(--tipo-cuerpo)}
.of-gente{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--esp-3) var(--esp-4);padding:var(--esp-3) var(--esp-4)}
.of-gente + .of-gente{box-shadow:inset 0 1px 0 var(--linea-suave)}
.of-gente-quien{display:flex;flex-direction:column;gap:var(--esp-1);min-width:0}
.of-gente-cifras{display:flex;gap:var(--esp-4);margin:0}
.of-gente-cifras > div{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.of-gente-cifras dt{font-size:var(--tipo-rotulo);letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3)}
.of-gente-cifras dd{margin:0;font-family:var(--fuente-titular);font-weight:var(--peso-titular);font-size:var(--tipo-cuerpo);color:var(--texto-1);font-variant-numeric:tabular-nums}
.of-gente-cifras .es-queja dd{color:var(--yellow)}
.of-gente-accion{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--esp-2)}
.of-gente-accion .of-motivo{align-items:flex-end}
.of-gente-accion .of-motivo-zona{max-width:min(100%,22rem)}

/* ── Tipos y ajustes ─────────────────────────────────────────────────────── */
.of-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:var(--esp-rejilla)}
.of-tipo-en{margin:0;font-size:var(--tipo-descripcion);color:var(--texto-2)}
.of-tipo.es-inactiva{opacity:.75}
.of-ajustes{max-inline-size:62rem}
.of-ajustes-fila{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--esp-4)}
.of-numero{display:flex;align-items:center;gap:var(--esp-2)}
.of-numero input{max-inline-size:var(--campo-s)}
.of-unidad{font-size:var(--tipo-leyenda);color:var(--texto-3)}

@media (max-width:640px){
  .of-fila{grid-template-columns:auto minmax(0,1fr) auto;padding:var(--esp-3)}
  .of-fila-cifras{display:none}
  .of-seccion{padding:var(--esp-4)}
  .of-gente{grid-template-columns:minmax(0,1fr);padding:var(--esp-3)}
  .of-gente-cifras > div{align-items:flex-start}
  .of-gente-accion{justify-content:flex-start}
  .of-gente-accion .of-motivo{align-items:flex-start}
  .of-cambios,.of-datos{grid-template-columns:minmax(0,1fr)}
  .of-cambios dd,.of-datos dd{margin-bottom:var(--esp-2)}
  .of-barra .btn{flex:1 1 auto}
  .of-buscar{max-inline-size:none;flex-basis:100%}
}

/* Aprobar y rechazar en la misma fila; el motivo se abre debajo, a lo ancho. */
.of-decidir .of-motivo{display:contents}
.of-decidir .of-motivo-zona{flex:1 1 100%}
.of-decidir .of-motivo > .btn{white-space:nowrap;flex:0 0 auto}
.of-seccion-titulo .of-grupo-n{font-family:var(--fuente-titular);font-weight:600;font-size:var(--tipo-descripcion);letter-spacing:0;color:var(--texto-3)}
.of-datos code{font-size:var(--tipo-leyenda)}
@media (max-width:520px){ .of-decidir .of-motivo > .btn{width:100%} }
.of-seccion > .btn{align-self:flex-start}
@media (max-width:640px){
  .of-fila-titulo{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .of-fila{align-items:start}
  .of-fila > .pill{margin-top:.15rem}
}