/* LA COLA 295 · 2026-09-27 · agente Claude · los cuatro estados de un bloque (assets/js/pe-estado.js y core/views/estado.php).
   Poco y en el aire de cada panel: nada que desborde a 375 px (iOS/Safari primero); los botones, de 44 px. */
.pe-estado { padding: 20px 14px; text-align: center; border-radius: 12px; min-width: 0; grid-column: 1 / -1; }   /* grid-column: dentro de una rejilla (los resultados del buscador), todo el ancho */
.pe-estado__texto { margin: 0 0 10px; font-size: 15px; opacity: .85; overflow-wrap: anywhere; }
.pe-estado__texto:last-child { margin-bottom: 0; }
.pe-estado--vacio { border: 1px dashed rgba(127,127,127,.35); }
.pe-estado--error { border: 1px solid rgba(252,165,165,.6); background: rgba(252,165,165,.06); }
.pe-estado--cargando .pe-estado__texto::before { content: ""; display: inline-block; width: .9em; height: .9em; margin-right: 8px; vertical-align: -.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pe-estado-gira .8s linear infinite; }
.pe-estado__reintentar, .pe-estado__accion { min-height: 44px; margin-top: 4px; }
@keyframes pe-estado-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pe-estado--cargando .pe-estado__texto::before { animation: none; } }
/* El aviso pasajero de una acción que falló (PeEstado.aviso): abajo y centrado, dentro de la pantalla a 375 px y encima de la
   barra de iOS (safe-area). */
.pe-estado-aviso { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 10000; display: flex; align-items: center; gap: 10px; max-width: min(92vw, 520px); padding: 10px 10px 10px 16px;
  border-radius: 12px; background: #2a1215; color: #fecaca; border: 1px solid rgba(252,165,165,.6); box-shadow: 0 8px 24px rgba(0,0,0,.35);
  font-size: 15px; overflow-wrap: anywhere; }
.pe-estado-aviso__cerrar { flex: none; min-width: 44px; min-height: 44px; border: 0; border-radius: 10px; background: transparent;
  color: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
/* Un estado oculto se queda oculto aunque el CSS de su pantalla le ponga display (p. ej. el vacío que se enseña al quitar la última). */
[data-pe-estado][hidden] { display: none !important; }
/* El aviso INFORMATIVO (PeEstado.aviso(texto, 'info')): neutro. */
.pe-estado-aviso--info { background: #151a24; color: #e5e7eb; border-color: rgba(212,175,55,.45); }
/* H41 (LA COLA 600, 2026-10-23): el aviso que flota bajo la barra fija: el que el pie del admin pinta con lo que la pantalla no pintó y el
   que assets/js/pe-aviso-ancla.js saca al volver a un ancla. Antes con estilos en la etiqueta, que la CSP (style-src sin 'unsafe-inline')
   bloquea: quedaba al final de la página. Fondo sólido: los avisos de los paneles son translúcidos y flotan sobre el contenido; a 375 px
   cabe con su margen de 16 px (iOS/Safari primero) y por encima de la barra de iOS. pe-aviso-ancla.js pone su «top» con la barra medida. */
.pe-flash-flotante { position: fixed; top: calc(76px + env(safe-area-inset-top, 0px)); right: 16px; left: 16px; margin-left: auto; max-width: 480px;
  z-index: 2147482000; background: #0f0d09; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.55); }
.pe-flash-flotante > * { margin: 0 !important; }
.pe-flash-flotante > * + * { margin-top: 8px !important; }
.pe-flash-cerrar { float: right; min-width: 44px; min-height: 44px; margin: -12px -10px -12px 8px; background: none; border: 0; color: inherit;
  font-size: 1.4rem; line-height: 1; cursor: pointer; }