/**{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}*/

:root{
    --pink: #f7b7c5;
    --lightPink: #ffb6c1;
}

body{
    min-height: 100dvh;
    background: var(--pink);
    color:white;
    font-family: Georgia, 'Times New Roman', Times, serif;
    overflow-x: hidden;
}

#app{
    transform: scale(0.67);
    transform-origin: top left;
    width: 149.25%;
}

#logo{
    margin-top: 10px;
    margin-left: 35px;
    border-radius: 40px;
}

#ruleta{
    padding: 12px;
}

.pointer{
    width:0;
    height:0;
    border-left:20px solid transparent;
    border-right:20px solid transparent;
    border-top:40px solid red;
    margin-bottom: 4px;
    margin-left: 170px;
}

/*@keyframes ledFlash {
    0% { box-shadow: 0 0 5px red; }
    25% { box-shadow: 0 0 20px yellow; }
    50% { box-shadow: 0 0 20px lime; }
    75% { box-shadow: 0 0 20px cyan; }
    100% { box-shadow: 0 0 5px magenta; }
}

.led {
    animation: ledFlash 0.2s infinite;
}*/

#familiares{
    position: fixed !important;
    margin-top: -95px !important;
    margin-left: 449px !important;
}
#wheelCanvas {
    background: white;
    border-radius: 50%;
    transition: filter 0.2s;
    z-index: 1;
}

/*button{
    margin-top:20px;
    padding:10px 20px;
    font-size:18px;
    cursor:pointer;
}*/

button {
    font-family: 'Segoe UI', sans-serif;
    font-size: 20px;
    padding: 10px 18px;
    margin: 5px;
    border: none;
    border-radius: 12px;
  
    background: linear-gradient(135deg, #ff6b81, #ff9ff3);
    color: white;
  
    cursor: pointer;
  
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
    transition: all 0.25s ease;
  }
  
  /* hover */
  button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    filter: brightness(1.05);
  }
  
  /* click effect */
  button:active {
    transform: translateY(0px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }
  
  /* botón secundario (si quieres usarlo) */
  button.secondary {
    background: linear-gradient(135deg, #74b9ff, #81ecec);
    color: #fff;
  }

  #mostrarUltimoBtn{
    background: linear-gradient(135deg, #f7971e, #ffd200);
    color: #fff;
   }

   .hidden{
    display: none;
   }
  
  /* deshabilitado */
  button:disabled {
    background: #dcdde1;
    color: #7f8c8d;
    cursor: not-allowed;
    box-shadow: none;
  }

#botones{
    padding-left: 102px;
}

.confetti-canvas {
    background: transparent !important;
    border-radius: 0 !important;
}

.swal-wide {
    border-radius: 20px !important;
    padding: 20px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
  }

.cursiva{
    font-style: italic;
}

.hide-cursor{
    display: none !important;
}