/* Botón Relleno (Fill) */
.btn-fill {
  padding: 8px 16px;
  border-radius: 6px;
}
.btn-fill.rounded { border-radius: 12px; }
.btn-fill.full-rounded { border-radius: 9999px; }

/* Botón Contorno (Outline) */
.btn-outline {
  border: 2px solid black;
  padding: 8px 16px;
  background: transparent !important;
  border-radius: 6px;
}
.btn-outline.rounded { border-radius: 12px; }
.btn-outline.full-rounded { border-radius: 9999px; }

/* Botón Sombra Suave (Soft Shadow) */
.btn-soft-shadow {
  padding: 8px 16px;
  border-radius: 6px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}
.btn-soft-shadow.rounded { border-radius: 12px; }
.btn-soft-shadow.full-rounded { border-radius: 9999px; }

.btn-hard-shadow {
  padding: 12px 24px;
  border-radius: 6px;
  border: 2px solid black;
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  box-shadow: 6px 6px 0px black, 6px 6px 0px black;
  transition: all 0.2s ease-in-out;
}

/* Variantes de borde */
.btn-hard-shadow.rounded { border-radius: 12px; }
.btn-hard-shadow.full-rounded { border-radius: 9999px; }

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Prevent scrolling while dialog is open */
body:has(dialog[data-dialog-target="dialog"][open]) {
      overflow: hidden;
}

/* Customize the dialog backdrop */
dialog {
      box-shadow: 0 0 0 100vw rgb(0 0 0 / 0.5);
}

@keyframes fade-in {
  0% {
    opacity: 0;
      }
  100% {
    opacity: 1;
      }
}

@keyframes fade-out {
  0% {
    opacity: 1;
      }
  100% {
    opacity: 0;
      }
}

/* Add animations */
dialog[data-dialog-target="dialog"][open] {
      animation: fade-in 200ms forwards;
}

dialog[data-dialog-target="dialog"][closing] {
      animation: fade-out 200ms forwards;
}