/**
 * Material Design Transitions
 * 
 * Este archivo contiene estilos para mejorar las transiciones de los componentes
 * de Material Design y evitar el parpadeo durante la carga.
 */

/* Estilos base para componentes de Material Design */
:root {
  /* Variables de color para Material Design */
  --md-sys-color-primary: var(--mwm--accent-color, #DC1818);
  --md-sys-color-on-primary: #fff;
  --md-sys-color-primary-container: #ffdad9;
  --md-sys-color-on-primary-container: #410003;
  
  /* Variables de transición */
  --md-sys-motion-duration-short1: 100ms;
  --md-sys-motion-duration-short2: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 400ms;
  --md-sys-motion-duration-long1: 500ms;
  --md-sys-motion-duration-long2: 700ms;
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
}

/* Estilos para campos de texto */
md-outlined-text-field {
  width: 100%;
  transition: opacity var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
}

/* Estilos para botones de icono */
md-icon-button {
  --_icon-color: inherit;
  --_hover-icon-color: inherit;
  --_focus-icon-color: inherit;
  --_pressed-icon-color: inherit;
  transition: opacity var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
}

/* Estilos específicos para iconos */
md-icon {
  transition: opacity var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
  /* Asegurar que los iconos tengan un tamaño consistente */
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Estilos para otros componentes de Material Design */
md-button, md-checkbox, md-radio, md-switch, md-slider {
  transition: opacity var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
}

/* Clase para ocultar elementos hasta que Material Design esté cargado */
.material-loading md-icon-button, 
.material-loading md-outlined-text-field,
.material-loading md-button, 
.material-loading md-checkbox, 
.material-loading md-radio, 
.material-loading md-switch, 
.material-loading md-slider,
.material-loading md-icon {
  opacity: 0;
}

/* Clase para mostrar elementos cuando Material Design esté cargado */
.material-loaded md-icon-button, 
.material-loaded md-outlined-text-field,
.material-loaded md-button, 
.material-loaded md-checkbox, 
.material-loaded md-radio, 
.material-loaded md-switch, 
.material-loaded md-slider,
.material-loaded md-icon {
  opacity: 1;
}

/* Estilos para mejorar la apariencia de los componentes durante la carga */
.material-loading {
  /* Añadir un fondo sutil para evitar parpadeos */
  background-color: rgba(255, 255, 255, 0.01);
}

/* Estilos para mejorar la accesibilidad */
md-outlined-text-field:focus-within,
md-icon-button:focus-within,
md-button:focus-within {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

/* Estilos para asegurar que los iconos dentro de botones se muestren correctamente */
md-icon-button md-icon {
  width: 100%;
  height: 100%;
}

/* Estilos para mejorar la visibilidad de los iconos durante la carga */
.material-loading md-icon::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
}