/* =============================================================
   ESTILOS PARA VISTAS DINÁMICAS
   Mejoras visuales para las vistas cargadas según permisos de usuario
   ============================================================= */

/* Variables de colores y estilos */
:root {
  --primary-gradient: linear-gradient(135deg, #0d6efd, #0056b3);
  --success-gradient: linear-gradient(135deg, #198754, #155e3e);
  --info-gradient: linear-gradient(135deg, #0dcaf0, #0ba6c5);
  --warning-gradient: linear-gradient(135deg, #ffc107, #e0a800);
  --danger-gradient: linear-gradient(135deg, #dc3545, #b02a37);
  --secondary-gradient: linear-gradient(135deg, #6c757d, #565e64);
  
  --card-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --card-shadow-hover: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2);
  --transition-speed: 0.3s;
  --border-radius: 0.5rem;
}

/* ==============================
   CORRECCIÓN GLOBAL DE VISIBILIDAD
   ============================== */

/* Asegurar que todos los elementos sean visibles */
body * {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Excepción para el fondo modal */
.modal-backdrop, 
.modal-backdrop.show {
  opacity: 0.5 !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Animación de fade para modales sin afectar opacidad del backdrop */
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
}

.modal.show .modal-dialog {
  transform: none;
}

/* Reglas específicas para garantizar visibilidad */
.content-wrapper,
.card,
.btn,
.form-control,
.modal,
.table,
.dataTable {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ==============================
   REGLAS ESPECÍFICAS PARA TURNERO.PHP
   ============================== */

body.turnero-page .content-wrapper,
body.turnero-page .card,
body.turnero-page .btn,
body.turnero-page .form-control,
body.turnero-page .modal,
body.turnero-page .table,
body.turnero-page * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.turnero-page .card {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
  border-radius: 0.25rem !important;
}

body.turnero-page .btn:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ==============================
   MEJORAS GENERALES DE VISTAS
   ============================== */

/* Contenedor principal */
.content-wrapper {
  transition: background-color var(--transition-speed);
  padding: 20px;
}

/* Encabezados de sección */
.content-header {
  padding: 15px 0 5px 0;
  margin-bottom: 20px;
}

.content-header h1,
.content-header h2 {
  font-weight: 600;
  color: #343a40;
}

.content-header .breadcrumb {
  padding: 0.5rem 1rem;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: var(--border-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.content-header .breadcrumb-item.active {
  font-weight: 600;
  color: #495057;
}

/* ==============================
   TARJETAS MEJORADAS
   ============================== */

/* Mejoras generales para cards */
.card {
  border-radius: var(--border-radius) !important;
  box-shadow: var(--card-shadow) !important;
  transition: box-shadow var(--transition-speed) !important;
  overflow: hidden;
  margin-bottom: 1.5rem;
  border: none !important;
  /* Eliminar animaciones que causan problemas */
  animation: none !important;
}

.card:hover {
  box-shadow: var(--card-shadow-hover) !important;
  /* Eliminar transformaciones que causan problemas */
  transform: translateY(0) !important;
}

/* Encabezados de tarjeta */
.card-header {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.card-info .card-header {
  background: var(--primary-gradient) !important;
  color: white;
}

.card-success .card-header {
  background: var(--success-gradient) !important;
  color: white;
}

.card-warning .card-header {
  background: var(--warning-gradient) !important;
  color: white;
}

.card-danger .card-header {
  background: var(--danger-gradient) !important;
  color: white;
}

.card-gray .card-header,
.card-secondary .card-header {
  background: var(--secondary-gradient) !important;
  color: white;
}

/* Cuerpo de tarjeta */
.card-body {
  padding: 1.25rem;
  background-color: #fff;
}

/* Botones en tarjetas */
.card-tools .btn-tool {
  color: rgba(255, 255, 255, 0.8);
  margin-left: 0.25rem;
  padding: 0.25rem;
}

.card-tools .btn-tool:hover {
  color: white;
}

/* ==============================
   TABLAS MEJORADAS
   ============================== */

/* Estilos para tablas DataTables */
.dataTable {
  border-collapse: separate;
  border-spacing: 0;
  width: 100% !important;
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.dataTable thead th {
  background-color: #f8f9fa !important;
  color: #495057 !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  padding: 12px 10px !important;
  border-bottom: 2px solid #dee2e6 !important;
  white-space: nowrap;
}

.dataTable tbody td {
  padding: 10px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #dee2e6 !important;
}

.dataTable tbody tr:hover {
  background-color: rgba(0, 123, 255, 0.05) !important;
}

/* Estilo tabla con fondo alternado */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

/* Botones de acción en tablas */
.btn-action {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  transition: all 0.2s;
}

.btn-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

/* Controles DataTables */
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #ced4da;
  border-radius: var(--border-radius);
  padding: 0.375rem 0.75rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.dataTables_wrapper .dataTables_length select {
  border: 1px solid #ced4da;
  border-radius: var(--border-radius);
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
}

.dataTables_wrapper .dataTables_info {
  font-size: 0.9rem;
  color: #6c757d;
  padding-top: 0.5rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 0.375rem 0.75rem;
  border-radius: var(--border-radius);
  margin: 0 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--primary-gradient) !important;
  border-color: #0056b3 !important;
  color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #e9ecef !important;
  border-color: #dee2e6 !important;
  color: #212529 !important;
}

/* Botones de exportación */
.dt-buttons .dt-button {
  border-radius: var(--border-radius);
  padding: 0.375rem 0.75rem;
  border: none;
  font-weight: 500;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dt-buttons .dt-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

/* Clases para botones específicos */
.addNewRecord,
.addNewInventario,
.addNewHistoria {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 1rem;
  border-radius: var(--border-radius);
  transition: all 0.2s;
  border: none;
  color: white !important;
  margin-right: 0.5rem;
}

.addNewRecord:hover,
.addNewInventario:hover,
.addNewHistoria:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

.addNewRecord i,
.addNewInventario i,
.addNewHistoria i,
.printHistoria i {
  margin-right: 0.5rem;
}

/* ==============================
   MEJORAS PARA FORMULARIOS
   ============================== */

/* Agrupación de campos */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  font-weight: 500;
  color: #495057;
  margin-bottom: 0.5rem;
}

/* Inputs con form-floating */
.form-floating {
  position: relative;
  margin-bottom: 1rem;
}

.form-floating > .form-control {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
  height: 58px;
}

/* Selects y MultiSelect */
.form-select,
.multi-select {
  border-radius: var(--border-radius);
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-select:focus,
.multi-select:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Select2 mejorado */
.select2-container--default .select2-selection--single {
  height: 38px;
  border: 1px solid #ced4da;
  border-radius: var(--border-radius);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px;
  padding-left: 12px;
  color: #495057;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #0d6efd;
}

/* ==============================
   ESTILOS PARA MODALES
   ============================== */

.modal-content {
  border-radius: var(--border-radius);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  border: none;
  overflow: hidden;
}

.modal-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.modal-header.bg-primary {
  background: var(--primary-gradient) !important;
}

.modal-header.bg-success {
  background: var(--success-gradient) !important;
}

.modal-header.bg-info {
  background: var(--info-gradient) !important;
}

.modal-header.bg-warning {
  background: var(--warning-gradient) !important;
}

.modal-header.bg-danger {
  background: var(--danger-gradient) !important;
}

.modal-title {
  font-weight: 600;
  display: flex;
  align-items: center;
}

.modal-title i {
  margin-right: 0.5rem;
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* ==============================
   ADAPTACIONES ESPECÍFICAS
   ============================== */

/* Vista administrar_stock.php */
#tblStock, 
#tblStockDisponible {
  width: 100% !important;
}

#tblStock_wrapper .dt-buttons {
  margin-bottom: 1rem;
}

/* Vista alta_administrativa.php */
#iptFecha {
  height: 58px;
  padding-top: 1.625rem;
}

/* Vista gestion_medico.php */
.fc-daygrid-day-frame {
  min-height: 100px;
}

.fc-event {
  border-radius: 3px;
  padding: 3px;
  margin-bottom: 2px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.fc-event:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

/* ==============================
   RESPONSIVIDAD PARA VISTAS
   ============================== */

@media (max-width: 768px) {
  /* Ajustes para móviles */
  .content-header {
    padding: 10px 0;
    margin-bottom: 15px;
  }
  
  .card {
    margin-bottom: 1rem;
  }
  
  .card-header {
    padding: 0.75rem 1rem;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  .dataTable thead th {
    padding: 8px !important;
    font-size: 0.8rem;
  }
  
  .dataTable tbody td {
    padding: 8px !important;
  }
  
  .modal-header, 
  .modal-body, 
  .modal-footer {
    padding: 1rem;
  }
  
  /* Botones más grandes para touch */
  .btn {
    padding: 0.5rem 0.75rem;
  }
  
  .btn-action {
    width: 40px;
    height: 40px;
  }
}

/* Adaptaciones para pantallas grandes */
@media (min-width: 1200px) {
  .content-wrapper {
    padding: 30px;
  }
  
  .card {
    margin-bottom: 2rem;
  }
  
  .card-body {
    padding: 1.5rem;
  }
  
  .dataTable thead th {
    padding: 15px 12px !important;
  }
  
  .dataTable tbody td {
    padding: 12px !important;
  }
}

/* Optimizaciones para impresión */
@media print {
  .content-wrapper {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .card {
    box-shadow: none !important;
    border: 1px solid #dee2e6 !important;
    margin-bottom: 1rem !important;
  }
  
  .card-header {
    background: #f8f9fa !important;
    color: #000 !important;
  }
  
  .dataTable thead th {
    background-color: #f8f9fa !important;
    color: #000 !important;
  }
}

/* Modo oscuro compatible */
body.dark-mode .content-wrapper {
  background-color: #1a1a1a;
}

body.dark-mode .card {
  background-color: #2d2d2d;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .card-body {
  background-color: #2d2d2d;
  color: #e0e0e0;
}

body.dark-mode .dataTable thead th {
  background-color: #343a40 !important;
  color: #e0e0e0 !important;
  border-bottom: 2px solid #495057 !important;
}

body.dark-mode .dataTable tbody td {
  border-color: #495057 !important;
  color: #e0e0e0;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .dataTable tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ==============================
   ANIMACIONES Y TRANSICIONES (CORREGIDAS)
   ============================== */

/* Animación para el contenedor principal - DESACTIVADA */
.animated-content {
  /* Eliminar animaciones problemáticas */
  animation: none;
  overflow-x: hidden;
}

/* Efecto fade-in escalonado para elementos - CORREGIDO */
.fade-in-section {
  /* Garantizar visibilidad */
  opacity: 1;
  transform: none;
  animation: none;
}

/* Animación para tarjetas - DESACTIVADA */
.card {
  animation: none;
}

/* Animación para tarjetas en secuencia - DESACTIVADA */
.card:nth-child(1),
.card:nth-child(2),
.card:nth-child(3),
.card:nth-child(4),
.card:nth-child(5) {
  animation-delay: 0s;
}

/* Animación para botones - SIMPLIFICADA */
.btn:not(.btn-tool) {
  transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.btn:not(.btn-tool):hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* Reducir transformación que causa problemas */
  transform: translateY(-1px);
}

.btn:not(.btn-tool):active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Animación para el contenido del sidebar cuando cambia */
.nav-sidebar .nav-link {
  transition: all 0.3s ease;
}

.nav-sidebar .nav-link:hover {
  transform: translateX(5px);
}

/* ==============================
   MEJORAS PARA EL SIDEBAR
   ============================== */

/* Estilos avanzados para el sidebar */
.main-sidebar {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

/* Mejoras para el usuario en el sidebar */
.user-panel {
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 0.5rem;
}

.user-panel:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.user-panel .image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-panel .image img {
  transition: all 0.3s ease;
}

.user-panel:hover .image img {
  transform: scale(1.1);
}

/* Mejoras para los elementos de navegación */
.nav-sidebar .nav-item {
  margin-bottom: 2px;
}

.nav-sidebar .nav-link {
  border-radius: 5px;
  margin: 0 0.5rem;
  transition: all 0.3s ease;
}

.nav-sidebar .nav-link.active {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.nav-sidebar .nav-link:not(.active):hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.nav-sidebar .nav-treeview {
  padding-left: 0.5rem;
}

.nav-sidebar .menu-open > .nav-link i.right {
  transform: rotate(90deg);
}

/* Iconos del sidebar */
.nav-sidebar .nav-link i:not(.right) {
  width: 1.5rem;
  text-align: center;
  margin-right: 0.5rem;
  transition: all 0.3s ease;
}

.nav-sidebar .nav-link:hover i:not(.right) {
  transform: scale(1.2);
}

/* Para pantallas más pequeñas */
@media (max-width: 768px) {
  .animated-content {
    animation-duration: 0.3s;
  }
  
  .card {
    animation-duration: 0.4s;
  }
  
  /* Desactivar algunas animaciones en móvil para mejor rendimiento */
  .card:nth-child(n+4) {
    animation-delay: 0.3s;
  }
}

/* ==============================
   BOTONES Y CONTROLES MEJORADOS
   ============================== */

/* Estilos para botones de acción en tablas */
.btn-xs {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.btn-circle {
  width: 35px;
  height: 35px;
  padding: 6px 0;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  line-height: 1.428571429;
}

.btn-circle.btn-xs {
  width: 26px;
  height: 26px;
  padding: 4px 0;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1.8;
}

.btn-circle.btn-sm {
  width: 30px;
  height: 30px;
  padding: 6px 0;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1.6;
}

.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1.33;
}

/* Botones de estado con colores mejorados */
.btn-outline-primary {
  color: #0d6efd;
  border-color: #0d6efd;
}

.btn-outline-primary:hover {
  color: white;
  background: var(--primary-gradient);
}

.btn-outline-success {
  color: #198754;
  border-color: #198754;
}

.btn-outline-success:hover {
  color: white;
  background: var(--success-gradient);
}

.btn-outline-info {
  color: #0dcaf0;
  border-color: #0dcaf0;
}

.btn-outline-info:hover {
  color: white;
  background: var(--info-gradient);
}

.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:hover {
  color: white;
  background: var(--warning-gradient);
}

.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:hover {
  color: white;
  background: var(--danger-gradient);
}

/* Estilo para grupos de botones */
.btn-group {
  border-radius: var(--border-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
}

.btn-group .btn {
  border-radius: 0;
}

.btn-group .btn:first-child {
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}

.btn-group .btn:last-child {
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

/* Estilo para botones con iconos */
.btn-icon-text i {
  margin-right: 0.5rem;
}

.btn-icon-only {
  width: 36px;
  padding-left: 0;
  padding-right: 0;
}

/* ==============================
   MEJORAS PARA TABLAS Y DATATABLES
   ============================== */

/* Mejoras visuales para DataTables */
.dataTables_wrapper {
  margin-bottom: 1.5rem;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.dataTables_wrapper .dt-buttons {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_paginate {
  margin-top: 1rem;
}

/* Mejoras para celdas de tabla */
table.dataTable tbody td {
  vertical-align: middle;
}

/* Estilo para celdas con acciones */
.table td.actions {
  text-align: center;
  white-space: nowrap;
}

/* Estilos para estado de filas */
.table .status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

.table .status-dot.active { background-color: #28a745; }
.table .status-dot.inactive { background-color: #dc3545; }
.table .status-dot.pending { background-color: #ffc107; }
.table .status-dot.canceled { background-color: #6c757d; }

/* Estilos para columnas de fecha y hora */
.table .date-column {
  white-space: nowrap;
  font-size: 0.9rem;
}

/* Resaltar filas importantes */
.table .row-highlight {
  background-color: rgba(0, 123, 255, 0.08) !important;
}

/* Estilo para estado con etiquetas */
.status-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-block;
  text-align: center;
  min-width: 80px;
}

.status-badge.active {
  background-color: rgba(40, 167, 69, 0.1);
  color: #28a745;
  border: 1px solid rgba(40, 167, 69, 0.2);
}

.status-badge.inactive {
  background-color: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border: 1px solid rgba(220, 53, 69, 0.2);
}

.status-badge.pending {
  background-color: rgba(255, 193, 7, 0.1);
  color: #ffc107;
  border: 1px solid rgba(255, 193, 7, 0.2);
}

.status-badge.canceled {
  background-color: rgba(108, 117, 125, 0.1);
  color: #6c757d;
  border: 1px solid rgba(108, 117, 125, 0.2);
}

/* ==============================
   UTILIDADES ADICIONALES
   ============================== */

/* Sombras y efectos */
.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

/* Bordes redondeados */
.rounded {
  border-radius: var(--border-radius) !important;
}

.rounded-sm {
  border-radius: calc(var(--border-radius) * 0.5) !important;
}

.rounded-lg {
  border-radius: calc(var(--border-radius) * 1.5) !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

/* Separadores */
.divider {
  height: 1px;
  margin: 1rem 0;
  background-color: rgba(0, 0, 0, 0.1);
}

.divider-vertical {
  width: 1px;
  height: 100%;
  margin: 0 1rem;
  background-color: rgba(0, 0, 0, 0.1);
}

/* Indicadores de carga */
.loader {
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}