/* ══════════════════════════════════════════════════════════════════════════
   estilo-vimedia.css — correcciones del estándar para los portales
   07/08/26
   ──────────────────────────────────────────────────────────────────────────
   Hoja aparte, enlazada DESPUÉS de los estilos de cada página, para corregir
   por cascada sin tocar una sola línea de su CSS original. Si algo hay que
   revertir, se quita el enlace y todo vuelve como estaba.

   Auditoría medida sobre los 6 portales. Se corrige SOLO lo que incumple:

   ✔ SE RESPETA, no se toca:
     · el semáforo de ocupación (verde/amarillo/rojo) — es DATO, no adorno, y
       el estándar permite estados funcionales
     · los badges de estado de la guía (recibido/diseño/revisión/aprobado)
     · el fondo oscuro del login — excepción aprobada por el usuario

   ✘ SE CORRIGE:
     · botones verdes sueltos → el acento del tema (un solo sólido)
     · íconos encerrados en cuadros de color pálido
     · fondo con degradado en pantalla de trabajo → blanco
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. UN SOLO SÓLIDO ────────────────────────────────────────────────────
   En los 3 portales de centro había botones en verde #10b981 mientras el
   acento del tema es otro. Dos sólidos distintos en la misma pantalla es
   justo lo que el estándar llama "look IA". */
.btn.btn-primary[style*="10b981"],
#pub-galeria-next[style*="10b981"],
button[style*="background:#10b981"],
button[style*="background: #10b981"] {
  background: var(--accent, #4052d6) !important;
}

/* ── 2. ÍCONOS SIN CAJA ───────────────────────────────────────────────────
   Cuadros de color pálido detrás de íconos (32×32 con #e0e7ff y similares).
   El ícono se sostiene solo: se le deja el color y se le quita la caja. */
.fi1, .fi2, .fi3, .fi4 {
  background: transparent !important;
}
.ac-ico, [class*="-ico"][style*="e0e7ff"] {
  background: transparent !important;
}

/* ── 3. PANTALLA DE TRABAJO = FONDO BLANCO ────────────────────────────────
   Mercadeo es una pantalla donde se trabaja, no una portada: el degradado
   de color se cambia por el blanco de la casa. El sello del sistema, que se
   agregó aparte, sigue pintándose por encima. */
body.vm-mercadeo,
body[data-portal="mercadeo"] {
  background: #ffffff !important;
}

/* ── 4. Foco visible en todos los portales ────────────────────────────────
   No existía en ninguno: con el teclado no se veía dónde estabas. */
:is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent, #4052d6);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── 5. Quien pidió menos movimiento, no ve movimiento ────────────────────*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}