/* efectos.css — Efectos visuales de la marca SSC.
   Línea roja superior (bajo la cabecera) con pulso de brillo + destello que la recorre.
   Todo se desactiva con prefers-reduced-motion. Solo usa tokens.css. */

#cabecera { position: relative; z-index: 5; }

/* Pulso: la línea roja "respira" con un resplandor suave hacia abajo */
#cabecera::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none;
  background: var(--ssc-rojo);
  box-shadow: 0 0 6px 1px rgba(255, 7, 7, .55), 0 3px 14px 2px rgba(255, 7, 7, .35);
  animation: ssc-pulso 2.8s ease-in-out infinite;
}
/* Destello: una franja de luz blanca-rojiza que viaja de izquierda a derecha */
#cabecera::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,214,214,.95) 50%, rgba(255,255,255,0) 100%) no-repeat;
  background-size: 22% 100%;
  background-position: -30% 0;
  filter: drop-shadow(0 0 6px rgba(255, 90, 90, .95));
  animation: ssc-destello 3.6s cubic-bezier(.45, .05, .35, 1) infinite;
}
@keyframes ssc-pulso {
  0%, 100% { box-shadow: 0 0 4px 0 rgba(255, 7, 7, .45), 0 2px 8px 0 rgba(255, 7, 7, .22); }
  50%      { box-shadow: 0 0 10px 2px rgba(255, 7, 7, .85), 0 4px 20px 4px rgba(255, 7, 7, .5); }
}
@keyframes ssc-destello {
  0%   { background-position: -30% 0; }
  70%, 100% { background-position: 130% 0; }
}

/* Menú: la marca roja del módulo activo brilla y las opciones se desplazan al pasar el cursor */
#menu a { transition: background var(--anim), transform var(--anim), padding var(--anim); }
#menu a:hover { transform: translateX(3px); }
#menu a[aria-current="page"] { box-shadow: inset 0 0 18px rgba(255, 7, 7, .18); }
#menu a[aria-current="page"] .ico { box-shadow: 0 0 8px 2px rgba(255, 7, 7, .85); animation: ssc-latido 1.8s ease-in-out infinite; }
@keyframes ssc-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }

/* Entrada suave al cambiar de pantalla (la clase .entra la pone shell.js una sola vez por cambio) */
#contenido.entra { animation: ssc-entra .32s ease-out both; }
@keyframes ssc-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Botones: leve elevación y brillo rojo */
.btn { transition: background var(--anim), transform var(--anim), box-shadow var(--anim); }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255, 7, 7, .35); }
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.btn.secundario:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* Tarjetas de resumen: la franja roja crece al pasar el cursor */
.item-resumen { transition: border-left-width var(--anim), transform var(--anim), box-shadow var(--anim); }
.item-resumen:hover { border-left-width: 9px; transform: translateX(2px); }

/* Indicador de guardado: al confirmar "Guardado ✓" destella en verde; "Guardando…" late */
.estado-guardado { transition: color var(--anim), background var(--anim); }
.estado-guardado[data-estado="guardando"] { animation: ssc-guardando 1s ease-in-out infinite; }
.estado-guardado[data-estado="guardado"] { animation: ssc-ok .9s ease-out 1; }
@keyframes ssc-guardando { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes ssc-ok { 0% { box-shadow: 0 0 0 0 rgba(124, 226, 163, .75); } 100% { box-shadow: 0 0 0 12px rgba(124, 226, 163, 0); } }

/* Aviso de quema pendiente por guardar */
.quema-pendiente { border-left: 4px solid #F5A524; background: #FFF3D6; color: #8A5A00; padding: 10px 14px; border-radius: var(--radio-sm); margin: 10px 0; font-weight: 600; }
.quema-ok { border-left: 4px solid var(--ok); background: #E3F6EA; color: var(--ok); padding: 10px 14px; border-radius: var(--radio-sm); margin: 10px 0; font-weight: 600; }

/* Botón de WhatsApp */
.btn.whatsapp { background: #128C4A; }
.btn.whatsapp:hover:not(:disabled) { background: #0B6B38; box-shadow: 0 4px 14px rgba(18, 140, 74, .4); }

@media (prefers-reduced-motion: reduce) {
  #cabecera::after { display: none; }
  #cabecera::before, #menu a[aria-current="page"] .ico, #contenido.entra,
  .estado-guardado[data-estado="guardando"], .estado-guardado[data-estado="guardado"] { animation: none !important; }
  .btn:hover:not(:disabled), #menu a:hover, .item-resumen:hover { transform: none; }
}
@media print { #cabecera::before, #cabecera::after { display: none; } }