body {

  font-family: Arial, sans-serif;

  margin: 0;

  height: 93vh;

  display: flex;

  flex-direction: column;

  background-color: #bd1627;

}



#results {

    border: 1px solid #ccc;

    background-color: #f9f0f0;

    max-height: 70%;

    overflow-y: auto;

}



.result-item {

    padding: 10px;

    cursor: pointer;

}



.result-item:hover {

    background-color: #dad5d5;

}

.input-container {

    position: relative;

    width: 100%;              /* Ocupa todo el ancho disponible */

  }

  

  /* Estilos del input */

  .input-container input {

    width: 100%;              /* Ocupa todo el ancho disponible */

    font-size: 2rem;         /* Tamaño grande para el texto */

    padding: 10px 10px 10px 10px; /* Espaciado interno con margen para la "X" */

    box-sizing: border-box;    /* Asegura que el padding no afecte el tamaño total */

    border: 1px solid #ccc;    /* Borde simple */

    border-radius: 5px;        /* Bordes redondeados */

    outline: none;             /* Elimina el borde al enfocarse */

  }

  

  /* Estilos para la "X" dentro del input */

  .input-container .clear {

    position: absolute;

    right: 10px;

    top: 50%;

    transform: translateY(-50%);

    cursor: pointer;

    font-size: 1.5rem;

    color: #aaa;              /* Color de la "X" */

    display: none;            /* Oculto por defecto */

  }

  

  /* Muestra la "X" cuando hay texto en el input */

  .input-container input:not(:placeholder-shown) + .clear {

    display: block;

  }

  

  .input-container input:focus + .clear {

    color: #4A90E2;           /* Cambia el color de la "X" al enfocar */

  }

  .content {

    flex: 1; /* Toma el espacio restante */

    padding: 5px;

}



.numero {

  background-color: #E5E5E7;

  color: #0b0b0b;

  text-align: center;

  padding: 2px;

  position: relative;

}

.container {

  text-align: center; /* Centra el contenido */

}