/* VENTANAS MODALES */

/* Fondo semitransparente del overlay */
.modal-backdrop.show {
  background-color: rgba(0, 0, 0, 0.6);
}

/* Centrado vertical/horizontal del modal */
.modal-dialog {
  margin: auto;
}

/* Caja del modal */
.modal-content {
  background-color: black;      /* o #F9F5E3 si querés beige */
  color: white;                 /* o #725224 si usás beige */
  border-radius: 12px;
  border: 0.1rem solid white;/*rgba(0,0,0,0.15);*/
  box-shadow: 0 5px 20px rgba(0,0,0,0.5);
  padding: 8px;                 /* pequeño respiro */
}

.modal-header {
  border-bottom: none;
  padding-bottom: 0;
}

/* BOTÓN DE CIERRE HÍBRIDO */
.modal-content .btn-close {
  /* --- Opción 1: usar variables de Bootstrap --- */
  --bs-btn-close-color: #fff !important;
  --bs-btn-close-opacity: 1 !important;
  --bs-btn-close-hover-opacity: 0.75 !important;
  background: transparent; /* evita rectángulo */
  margin-left: auto;

  /* --- Opción 2 (fallback): SVG blanco inline --- */
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'><path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1em auto;

  opacity: 1;
}
/* FIN VENTANAS MODALES */
/*
Changes Explained

    Z-index: I've changed the z-index from 2 to 999. While 2 might work, a higher value like 999 or 1000 is a common practice to guarantee the modal appears above all other page elements.

    Dimensions: I've uncommented the width and height properties for both .modal and .modal-content. For .modal, setting width: 100%; and height: 100%; is essential to create the full-screen overlay effect. For .modal-content, I replaced width: 80%; with max-width: 600px; and width: 90%;. This makes the modal content more responsive; it won't get too wide on a large screen and will adjust to 90% of the viewport width on smaller devices.

    Background Color: I've slightly increased the opacity of the background from 0.4 to 0.6 to make the modal's background overlay more pronounced. This helps to better focus the user's attention on the modal content.

    Aesthetics: I've included a few extra lines of CSS to enhance the user experience:

        transition: Creates a smoother opening animation.

        box-shadow: Adds visual depth, making the modal stand out.

        border-radius: Gives the modal a more modern, rounded look.

        background-color and border: I've adjusted the colors to a slightly softer dark gray to reduce the harshness of pure black.

These corrections ensure the modal occupies the entire screen as an overlay while the modal content itself is properly sized and centered, providing a much better user experience.
*/