/* Historias del LVI Congreso (06/10/2026) */
.hist-caja { margin: 8px 0 24px; }
.hist-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hist-sub { font-size: 12px; color: #777; white-space: nowrap; }
.hist-fila { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hist-fila::-webkit-scrollbar { display: none; }
.hist-burbuja { flex: 0 0 auto; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; padding: 0; }
.hist-aro { width: 68px; height: 68px; border-radius: 50%; padding: 3px; background: conic-gradient(#D11039, #F2C46D, #B3153B, #D11039); display: flex; }
.hist-aro img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #fff; background: #eee; }
.hist-nueva .hist-aro { background: #F2F4FB; border: 2px dashed #B3153B; padding: 0; align-items: center; justify-content: center; }
.hist-mas { font-size: 32px; line-height: 1; color: #B3153B; font-weight: 300; }
.hist-nombre { font-size: 12px; color: #333; max-width: 74px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-vacio { align-self: center; font-size: 13px; color: #666; margin: 0; max-width: 260px; line-height: 1.4; }

.hist-visor { position: fixed; inset: 0; z-index: 10060; background: #000; display: flex; align-items: center; justify-content: center; }
.hist-foto { max-width: 100%; max-height: 100%; object-fit: contain; }
.hist-barras { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; gap: 4px; z-index: 2; }
.hist-barra { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; position: relative; }
.hist-barra.llena { background: #fff; }
.hist-barra.activa::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: hist-avance 7s linear forwards; }
@keyframes hist-avance { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hist-autor { position: absolute; top: calc(22px + env(safe-area-inset-top)); left: 12px; right: 60px; display: flex; align-items: center; gap: 10px; color: #fff; z-index: 2; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.hist-ini { width: 36px; height: 36px; border-radius: 50%; background: #B3153B; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.hist-quien { display: flex; flex-direction: column; line-height: 1.2; }
.hist-quien small { opacity: .8; }
.hist-cerrar { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; font-size: 30px; z-index: 3; cursor: pointer; }
.hist-borrar { position: absolute; top: calc(70px + env(safe-area-inset-top)); right: 12px; z-index: 3; background: rgba(0,0,0,.45); color: #fff; border: 1px solid rgba(255,255,255,.4); font: 600 12px var(--font-body); padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.hist-zona { position: absolute; top: 0; bottom: 0; width: 35%; background: none; border: 0; z-index: 1; cursor: pointer; }
.hist-zona.izq { left: 0; } .hist-zona.der { right: 0; width: 65%; }
.hist-datos { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 40px 16px calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0,0,0,.8) 40%); color: #fff; pointer-events: none; }
.hist-linea { margin: 0 0 6px; font-size: 14px; line-height: 1.35; }
.hist-rot { display: inline-block; min-width: 118px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #F2C46D; }
.hist-texto { margin: 8px 0 0; font-size: 15px; line-height: 1.45; white-space: pre-line; }

.hist-form { max-width: 520px; margin: 0 auto; }
.hist-vista { aspect-ratio: 3 / 4; max-height: 46vh; margin: 0 auto 10px; border-radius: 14px; background: #F2F4FB; border: 2px dashed #CBD3E6; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #8a93a8; font-size: 14px; }
.hist-vista img { width: 100%; height: 100%; object-fit: cover; }
.hist-botones-foto { display: flex; gap: 8px; }
.hist-botones-foto .btn { flex: 1; min-height: 46px; }
.hist-info { font-size: 13px; color: #1F7A3A; margin: 8px 0 12px; min-height: 18px; }
.hist-nota { font-size: 12px; color: #777; text-align: center; margin-top: 10px; }

/* Estados al estilo de WhatsApp (06/10/2026): arriba en el Inicio, aro por segmentos, «Visto por», menciones */
#home-historias .hist-caja { margin: 4px 0 18px; }
.hist-pildora { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #fff; background: var(--red-accent, #D11039); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.hist-mencion-aviso { display: block; width: 100%; text-align: left; margin: 0 0 10px; padding: 9px 12px; border: 1px solid #F2C46D; background: #FFF8E8; color: #5E3B00; font: 600 13px var(--font-body); border-radius: 10px; cursor: pointer; }
.hist-burbuja { position: relative; }
.hist-aro { padding: 3px; }
.hist-con-nuevos .hist-nombre { font-weight: 700; color: #111; }
.hist-mia { position: relative; }
.hist-aro-btn { background: none; border: 0; padding: 0; cursor: pointer; }
.hist-mas-mini { position: absolute; top: 46px; left: 48px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: var(--red-accent, #D11039); color: #fff; font: 700 17px/1 var(--font-body); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.hist-arroba { position: absolute; top: 46px; left: 48px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: #F2C46D; color: #3B2A00; font: 800 12px/18px var(--font-body); text-align: center; }
.hist-con { margin: 8px 0 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hist-con .hist-rot { min-width: 0; margin-right: 4px; }
.hist-chip { background: rgba(255,255,255,.18); border-radius: 999px; padding: 3px 9px; }
.hist-chip.yo { background: #F2C46D; color: #3B2A00; font-weight: 700; }
.hist-vistos { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(6px + env(safe-area-inset-bottom)); z-index: 3; background: rgba(0,0,0,.5); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; font: 600 12px var(--font-body); padding: 5px 12px; cursor: pointer; }
.hist-visor .hist-datos { padding-bottom: calc(46px + env(safe-area-inset-bottom)); }
.hist-panel-vistos { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; background: #fff; color: #222; border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 60%; overflow: auto; }
.hist-panel-vistos ul { list-style: none; margin: 10px 0 12px; padding: 0; }
.hist-panel-vistos li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #eee; font-size: 14px; }
.hist-panel-vistos small { color: #888; white-space: nowrap; }
.hist-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.hist-chip-sel { background: #FBE7EC; color: #8A0E2B; border: 0; border-radius: 999px; padding: 6px 10px; font: 600 13px var(--font-body); cursor: pointer; }
.hist-sugerencias { display: flex; flex-direction: column; margin-top: 4px; }
.hist-sug { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; padding: 10px 12px; background: #F7F8FC; border: 0; border-bottom: 1px solid #E6E9F2; cursor: pointer; font: 14px var(--font-body); color: #222; }
.hist-sug small { color: #777; font-size: 12px; }
.hist-sin { font-size: 13px; color: #777; margin: 6px 0 0; }
/* Legibilidad de los datos sobre la foto y alineación con la foto en pantallas anchas */
.hist-visor .hist-datos { background: linear-gradient(transparent, rgba(0,0,0,.6) 18%, rgba(0,0,0,.88) 45%); text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.hist-barras.pausa .hist-barra.activa::after { animation-play-state: paused; }
@media (min-width: 700px) {
  .hist-visor .hist-datos, .hist-visor .hist-barras, .hist-visor .hist-autor { left: 50%; right: auto; width: min(100%, 560px); transform: translateX(-50%); box-sizing: border-box; }
  .hist-visor .hist-autor { padding-right: 60px; }
}
.hist-visor::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: calc(110px + env(safe-area-inset-top)); background: linear-gradient(rgba(0,0,0,.65), transparent); z-index: 1; pointer-events: none; }
/* Tres botones de foto (Selfie, Cámara, Galería) y pausa con el dedo en el visor (07/10/2026) */
.hist-botones-foto .btn { padding-left: 6px; padding-right: 6px; letter-spacing: 1px; font-size: 13px; min-width: 0; }
.hist-visor, .hist-visor .hist-zona { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.hist-visor.en-pausa .hist-datos, .hist-visor.en-pausa .hist-autor { opacity: 1; }
/* «Cámara» y «Galería» con aspecto de botón (borde y fondo), igual de altos que «Selfie» */
.hist-botones-foto .btn:not(.btn-primary) { border: 1.5px solid #B3153B; color: #B3153B; background: #fff; }
.hist-vista { padding: 12px; text-align: center; box-sizing: border-box; aspect-ratio: 3 / 4; width: min(100%, 240px); }
.hist-vista img { margin: -12px; width: calc(100% + 24px); height: calc(100% + 24px); }
.hist-vista { max-height: none; }
.hist-vista img { flex-shrink: 0; }
.hist-vista img { max-width: none; }

/* Iniciales cuando la miniatura no carga (10/10/2026) */
.hist-aro .hist-ini{border:3px solid #fff;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:#F3E3E7;color:#A3122F;font-weight:700;font-size:1.3rem;letter-spacing:.02em}