@import url("https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css");
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@200..700&display=swap');
@import "select2.tailwind.css";
@import "scroll.tailwind.css";
@import "pagy.tailwind.css";
@import "poppers.tailwind.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@layer components {
    .jv-error-label   { @apply absolute top-0 right-0 translate-x-full -translate-y-1/2 bg-red-100 border border-red-400 text-red-600 text-xs rounded px-2 py-1 z-10 shadow-md whitespace-nowrap; }

    .title {
        @apply text-center font-bold text-4xl md:text-5xl text-gray-800 hover:scale-105 transition-transform duration-200 ease-in-out my-2;
    }
    .title-small {
        @apply text-center text-2xl md:text-3xl text-gray-800 mb-2;
    }
    .text-title {
        @apply text-center text-2xl font-bold m-6 text-gray-800;
    }
    .modal-title {
        @apply text-center text-3xl lg:text-4xl font-bold mt-2 mb-4 text-gray-800 text-gray-800;
    }
    .label {
        @apply relative inline-flex items-center gap-2 mb-3 text-sm font-medium text-gray-800 tracking-wide;
    }
    .input {
        @apply bg-gray-100 border border-green-500 text-gray-700 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5 placeholder-gray-500 transition-all duration-200 ease-in-out;
    }
    .button {
        @apply cursor-pointer text-white bg-green-600 hover:bg-green-500 focus:ring-2 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center transition duration-100 ease-in-out shadow-md hover:shadow-lg hover:scale-105;
    }
    .button-secondary {
        @apply cursor-pointer text-gray-800 bg-gray-100 hover:bg-gray-800 hover:text-gray-50 border border-gray-500 focus:ring-2 focus:outline-none focus:ring-gray-500 font-medium rounded-lg text-sm w-full sm:w-auto px-3 py-1 text-center transition duration-150 ease-in-out hover:scale-105;
    }
    .button-red {
        @apply cursor-pointer text-red-200 bg-red-600 hover:bg-red-700 focus:ring-2 focus:outline-none focus:ring-red-400 font-medium rounded-lg text-sm w-full sm:w-auto px-3 py-1 text-center transition duration-100 ease-in-out shadow-md hover:shadow-lg hover:scale-105;
    }
    .button-link {
        @apply flex items-center p-2 text-gray-50 rounded-lg hover:bg-green-700 group;
    }
    .button-menu {
        @apply flex-1 ms-3 text-sm whitespace-nowrap group-hover:text-gray-50;
    }
    .button-blue {
        @apply font-bold text-xs py-1 px-2 text-blue-800 border border-blue-700 rounded-lg hover:bg-blue-600 hover:text-gray-50;
    }
    .button-close-right {
        @apply absolute top-3 right-3 text-gray-800 bg-transparent hover:bg-gray-800 hover:text-gray-50 rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center;
    }
    .card {
        @apply px-4 py-1 text-sm rounded-lg text-red-100 rounded-lg bg-red-600;
    }
    .card-small {
        @apply p-6 rounded-xl border border-green-700 max-w-screen-sm mx-auto;
    }
    .card-large {
        @apply w-full bg-transparent border border-green-700 text-gray-700 max-w-screen-lg mx-auto rounded-xl px-6 py-2 my-4;
    }
    .grid-col {
        @apply grid sm:grid-cols-2 lg:grid-cols-3 gap-6;
    }
    .table {
        @apply w-full text-sm text-left text-gray-800;
    }
    .thead {
        @apply text-xs uppercase bg-gray-900 text-gray-50 font-bold;
    }
    .tr {
        @apply border-b border-green-500 hover:bg-gray-200;
    }
    .scroll {
        @apply overflow-x-auto shadow-md md:rounded-lg mt-4;
    }
    .overlay {
        @apply fixed inset-0 z-50 h-auto flex items-center justify-center bg-black/50 backdrop-blur transition-opacity duration-100 ease-in-out;
    }
    .overlay-right {
        @apply fixed z-10 w-full h-full top-0 left-0 bg-black/60 backdrop-blur flex items-center justify-center;
    }
    .modal-right {
        @apply fixed z-40 top-0 right-0 w-full h-dvh overflow-y-auto ml-3 bg-gray-100 rounded-l-lg transform translate-x-full ease-in-out duration-500 pt-5 pb-8 relative;
    }
    .modal-tiny {
        @apply px-6 pb-4 relative w-full max-w-screen-md mx-4 bg-gray-100 rounded-lg border border-green-700 transition-transform duration-100 ease-in-out
        h-dvh max-h-dvh overflow-y-auto lg:h-auto lg:max-h-full;
    }
    .modal-small {
        @apply px-6 pb-4 relative w-full max-w-screen-lg mx-4 bg-gray-100 rounded-lg shadow-lg shadow-gray-500 transition-transform duration-100 ease-in-out
        h-dvh max-h-dvh overflow-y-auto lg:h-auto lg:max-h-full;
    }
    .input-shear {
        @apply block w-full md:w-auto p-2 pl-10 text-sm text-gray-900 border border-gray-700 rounded-lg bg-transparent focus:ring-1 focus:ring-gray-500 focus:border-gray-500 placeholder:text-gray-400;
    }
    .icon-search {
        @apply absolute top-1/2 left-3 transform -translate-y-1/2 w-4 h-4 text-gray-700;
    }
    .input-select {
        @apply block w-full md:w-auto py-2.5 text-xs w-auto border border-gray-600 bg-transparent rounded-lg focus:ring-1 focus:ring-gray-500 focus:border-gray-500;
    }
    .container-title {
        @apply flex flex-wrap justify-center items-center gap-2;
    }
}

/* ================= Genealogy Tree Base ================= */
.gene-tree {
    /* Variables para fácil ajuste */
    --branch-gap: 20px;         /* separación vertical entre nodo y conectores */
    --line: #D1D5DB;            /* color de líneas */
    --hover: #fbbf24;           /* color de resalte (hover) */
    --origin: #fb923c;          /* color del nodo origen (hover) */
    --node-bg: #FFFFFF;         /* fondo del nodo */
    --node-fg: #111827;          /* texto del nodo */
    --node-border: #9CA3AF;     /* borde del nodo */

    overflow-x: auto;
    padding: 20px;
    background: transparent; /* evita conflicto con bg-* del contenedor */
}

.gene-tree ul {
    padding-top: var(--branch-gap);
    position: relative;
    display: table;
    margin: 0 auto;
}

.gene-tree li {
    list-style: none;
    display: table-cell;
    text-align: center;
    position: relative;
    padding: var(--branch-gap) 8px 0 8px;
    vertical-align: top;
}

/* ================= Líneas del Árbol ================= */
.gene-tree li::before,
.gene-tree li::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%;
    height: var(--branch-gap);
    border-top: 1px solid var(--line);
    display: block;
    transition: border-color 0.2s ease;
    pointer-events: none; /* <- líneas no capturan el mouse */
}

.gene-tree li::before {
    right: 50%;
    border-right: 1px solid var(--line);
}

.gene-tree li::after {
    left: 50%;
    border-left: 1px solid var(--line);
}

.gene-tree li:first-child::before { border: 0 none; }
.gene-tree li:last-child::after { border: 0 none; }

.gene-tree li:only-child::before,
.gene-tree li:only-child::after {
    display: none;
}

.gene-tree ul ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: var(--branch-gap);
    border-left: 1px solid var(--line);
    transition: border-color 0.2s ease;
    pointer-events: none; /* <- tronco no bloquea hover */
}

.gene-tree li:only-child { padding-top: 0; }
.gene-tree > ul > li { padding-top: 0; }

/* ================= Nodos ================= */
.gene-node {
    display: inline-block;
    min-width: 90px;
    padding: 8px 12px;
    background: var(--node-bg);
    color: var(--node-fg);
    border: 1px solid var(--node-border);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    font-weight: 600;
    font-size: 1em;
    line-height: 1.2;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto;
    user-select: text;
}

.gene-arete { display: block; }

.gene-name {
    display: block;
    font-size: .7rem;
    color: #6b7280;
    font-weight: normal;
    margin-top: 2px;
}

.gene-role {
    display: block;
    margin-top: 5px;
    font-size: .8rem;
    color: #6B7280;
    font-weight: 500;
}

.gene-generation {
    opacity: 0.7;
    font-size: .8rem;
}

/* ================= Estados Base ================= */
.gene-node.is-missing {
    background: #F9FAFB;
    border-style: dashed;
    color: #9CA3AF;
}

.gene-node.is-root {
    background: #f0fdf4;
    border-color: #10b981;
    border-width: 2px;
}

.gene-node.is-male { border-left: 3px solid #60a5fa; }
.gene-node.is-female { border-left: 3px solid #f472b6; }

/* ================= Estados de Hover ================= */
.gene-node:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* Ancestros resaltados (solo el li activo, no sus hijos) */
li.hover-active > .gene-node {
    background: #fef3c7;
    border-color: var(--hover);
    box-shadow: 0 2px 4px rgba(251, 191, 36, 0.2);
}

/* Nodo origen del hover */
li.hover-origin > .gene-node {
    background: #fed7aa;
    border-color: var(--origin);
    border-width: 2px;
    box-shadow: 0 3px 6px rgba(251, 146, 60, 0.25);
}

/* Líneas resaltadas */
li.hover-active::before,
li.hover-active::after {
    border-color: var(--hover);
}

ul.has-hover-child::before {
    border-color: var(--hover);
}

/* Descendientes (modo descendiente) */
li.hover-descendant > .gene-node {
    background: #dbeafe;
    border-color: #60a5fa;
}

/* Badge de generación solo en el li activo (no cascada) */
li.hover-active > .gene-role > .gene-generation,
li.hover-origin > .gene-role > .gene-generation {
    background: var(--hover);
    color: #78350f;
    padding: 0 4px;
    border-radius: 4px;
    font-weight: 600;
}

/* ================= Estado Pineado ================= */
li.pinned > .gene-node::before {
    content: "📌";
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    z-index: 10;
}

/* Igual que hover, pero para el trazo fijo (pin) */
li.pinned-trace > .gene-node {
    background: #fef3c7;
    border-color: var(--hover);
    box-shadow: 0 2px 4px rgba(251, 191, 36, 0.2);
}

li.pinned-trace::before,
li.pinned-trace::after {
    border-color: var(--hover);
}

ul.has-pinned-child::before {
    border-color: var(--hover);
}

/* Origen pineado (además del 📌 visual) */
li.pinned-origin > .gene-node {
    background: #fed7aa;
    border-color: var(--origin);
    border-width: 2px;
    box-shadow: 0 3px 6px rgba(251, 146, 60, 0.25);
}

/* Badge visible también en trazo pineado */
li.pinned-trace > .gene-role > .gene-generation,
li.pinned-origin > .gene-role > .gene-generation {
    background: var(--hover);
    color: #78350f;
    padding: 0 4px;
    border-radius: 4px;
    font-weight: 600;
}

/* ================= Responsividad ================= */
@media (max-width: 768px) {
    .gene-tree {
        padding: 10px;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        --branch-gap: 14px; /* reduce separación vertical */
    }

    .gene-node {
        min-width: 80px;
        font-size: 0.85rem;
        padding: 6px 10px;
    }

    .gene-role { font-size: 0.65rem; }
}
.pagy {
    @apply flex space-x-1 font-semibold text-sm text-gray-500;
    a:not(.gap) {
        @apply block rounded-lg px-3 py-1 bg-gray-200;
        &:hover {
            @apply bg-gray-300;
        }
        &:not([href]) {
            @apply text-gray-300 bg-gray-100 cursor-default;
        }
        &.current {
            @apply text-white bg-gray-400;
        }
    }
    label {
        @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
        input {
            @apply bg-gray-100 border-none rounded-md;
        }
    }
}
@layer components {
    [data-popper-arrow] {
        @apply absolute w-0 h-0 border-solid;
        content: "";
    }

    /* TOOLTIP */
    .arrow-tooltip[data-popper-placement^="top"] {
        @apply bottom-[-6px] border-x-[6px] border-x-transparent border-t-[6px] border-t-gray-800;
    }
    .arrow-tooltip[data-popper-placement^="bottom"] {
        @apply top-[-6px] border-x-[6px] border-x-transparent border-b-[6px] border-b-gray-800;
    }
    .arrow-tooltip[data-popper-placement^="left"] {
        @apply right-[-6px] border-y-[6px] border-y-transparent border-l-[6px] border-l-gray-800;
    }
    .arrow-tooltip[data-popper-placement^="right"] {
        @apply left-[-6px] border-y-[6px] border-y-transparent border-r-[6px] border-r-gray-800;
    }

    /* POPOVER */
    
    .arrow-popover[data-popper-placement^="top"] {
        @apply bottom-[-6px] border-x-[6px] border-x-transparent border-t-[6px] border-t-white drop-shadow-md;
    }

    .arrow-popover[data-popper-placement^="bottom"] {
        @apply top-[-6px] border-x-[6px] border-x-transparent border-b-[6px] border-b-white drop-shadow;
    }

    .arrow-popover[data-popper-placement^="left"] {
        @apply right-[-6px] border-y-[6px] border-y-transparent border-l-[6px] border-l-white drop-shadow;
    }

    .arrow-popover[data-popper-placement^="right"] {
        @apply left-[-6px] border-y-[6px] border-y-transparent border-r-[6px] border-r-white drop-shadow;
    }

    /* DROPDOWN */
    .arrow-dropdown[data-popper-placement^="top"] {
        @apply bottom-[-6px] border-x-[6px] border-x-transparent border-t-[6px] border-t-gray-100;
    }
    .arrow-dropdown[data-popper-placement^="bottom"] {
        @apply top-[-6px] border-x-[6px] border-x-transparent border-b-[6px] border-b-gray-100;
    }
    .arrow-dropdown[data-popper-placement^="left"] {
        @apply right-[-6px] border-y-[6px] border-y-transparent border-l-[6px] border-l-gray-100;
    }
    .arrow-dropdown[data-popper-placement^="right"] {
        @apply left-[-6px] border-y-[6px] border-y-transparent border-r-[6px] border-r-gray-100;
    }
}
::-webkit-scrollbar {
}

::-webkit-scrollbar-track {
    @apply bg-transparent rounded-lg !important;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-200 rounded-lg border !important;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500 border rounded-md !important;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}
/* Estilo para el contenedor select2 */
.select2-container {
    margin: 0 !important;
    display: block !important;
}

/* Estilo para la selección del select2 */
.select2-container .select2-choice {
    line-height: 25px !important;
    padding: 0.5rem !important;
    border-radius: 0.5rem !important;
    margin: 0 !important;
    height: 2.5rem !important;
    background: transparent !important;
    @apply w-full text-gray-500 text-sm border border-green-700 !important;
}

.select2-container .select2-choice:hover {
    @apply border-green-700 text-gray-600 !important;
}

/* Caja principal drop */
.select2-drop {
    @apply border border-green-700 rounded-b-lg !important;
}

/* Caja del buscador */
.select2-search {
    @apply text-gray-700 bg-gray-100 !important;
}

/* Input del buscador */
.select2-input:focus {
    @apply focus:outline-none focus:ring-0 border focus:border-green-600 rounded-lg !important;
}

/* Selector hover */
.select2-highlighted {
    @apply bg-gray-900 hover:bg-gray-800 text-gray-50 !important;
    border-radius: 0.375rem !important;
}

/* Caja interna del selector */
.select2-display-none {
    @apply border border-green-700 bg-gray-100 !important;
}

/* Contenido de los resultados */
.select2-results {
    @apply text-gray-500 font-semibold text-sm !important;
    border-radius: 0.375rem !important;
}

/* Scroll personalizado del contenido de los resultados */
.select2-results::-webkit-scrollbar {
    width: .2rem;
}

.select2-results::-webkit-scrollbar-track {
    @apply bg-transparent rounded-xl !important;
}

.select2-results::-webkit-scrollbar-thumb {
    @apply bg-green-700 rounded-lg !important;
}

/* Contenido de los no-resultados */
.select2-no-results {
    @apply bg-gray-100 text-red-500 font-bold !important;
}

/* Color de la búsqueda */
.select2-match {
    @apply bg-green-500 text-green-900 font-bold !important;
    padding-bottom: 2px !important;
    padding-top: 2px !important;
    border-radius: 0.375rem !important;
}

/* Otros estilos de select2 */
.select2-container .select2-choice .select2-arrow {
    display: none !important;
}

.select2-container.select2-dropdown-open .select2-choice {
    @apply rounded-t-lg rounded-b-none border border-x border-t border-green-800 !important;
}

span.select2-arrow b {
    margin-top: 5px;
}

.select2-dropdown {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
}

/* Buscador inline */
.select2-container .select2-search--inline .select2-search__field {
    height: 0 !important;
}

span.select2-search.select2-search--inline textarea {
    min-height: 0;
}

.select2-search-field, .select2-search-field input[placeholder] {
    width: 100% !important;
}

/* Estilos de error */
.is-invalid-input .select2-choice, .select2 .is-invalid-input {
    @apply border-red-500 w-full !important;
}

.field_with_errors input, .field_with_errors .select2-container .select2-choice {
    border: 1px solid #ef0e0e !important;
    width: 100% !important;
}

.field_with_errors select, .field_with_errors textarea {
    border: 1px solid #9E0F20 !important;
    background: #fbc6c6 !important;
    width: 100% !important;
}
/*
 * 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.
 *


 */

.turbo-progress-bar {
    visibility: hidden;
}

/* Aumentar el tamaño de los números en el selector de tiempo de flatpickr */
.flatpickr-time {
    font-size: 1.5em; /* Ajusta el tamaño según tus necesidades */
}

.flatpickr-time .flatpickr-hour,
.flatpickr-time .flatpickr-minute,
.flatpickr-time .flatpickr-second,
.flatpickr-time .flatpickr-amPM {
    font-size: 1.5em; /* Ajusta el tamaño según tus necesidades */
}

.flatpickr-time input {
    font-size: 1.5em; /* Ajusta el tamaño según tus necesidades */
}

.numInputWrapper span {
    width: 24px;
    padding: 0 3px 0 3px;
}

.numInputWrapper span.arrowUp:after {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(57, 57, 57, 0.6);
    top: 26%;
}

.no-scroll {
    overflow: hidden;
}

.dropzone {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    border: 10px dashed #3e3e3e !important;
    background: white !important;
}

.dropzone .dz-preview .dz-success-mark {
    background: #BA4253 !important;
}

.dropzone .dz-preview .dz-error-mark {
    background: #9E0F20 !important;
}

.dropzone .dz-preview .dz-remove {
    color: #9E0F20 !important;
}

.dropzone .dz-preview .dz-image {
    border: 1px solid #d8d8d8;
    border-radius: 1rem !important;
}

.dropzone .dz-preview .dz-download {
    font-size: 14px;
    text-align: center;
    display: block;
    cursor: pointer;
    border: none;
    color: #5b5b5b !important;
}

.dropzone .dz-preview:not(.dz-processing) .dz-progress {
    display: none !important;
}

.dz-view {
    font-size: 14px;
    display: block;
    color: #1d4ed8;          /* azul */
    cursor: pointer;
    margin-top: 2px;
}

.dz-view:hover { text-decoration: underline; }

.active-card {
    position: relative;
    background: linear-gradient(to right, #148163, #04231c);
    color: #f9fafb;
    border-radius: 0.5rem;
    transform: scale(1.03);
    transition: all 0.3s ease-in-out;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    animation: pulse-jump 0.6s ease-in-out;
}

.active-card::before {
    content: "📌";
    position: absolute;
    top: -12px;
    right: 0;
    font-size: 2rem;
    animation: pin-bounce 1s infinite ease-in-out;
}

@keyframes pin-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.flatpickr-time__header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 1rem;
    margin: .5rem;
    font-size: 2rem;
    color: #555;
}

.flatpickr-clear-button {
    width: 50%;
    padding: .50rem;
    margin: 0.5rem 0;
    border-radius: 0.5rem;
    background: black;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    color: #ffffff;
}

.flatpickr-clear-button:hover {
    color: #fd0000;
}

.flatpickr-today-button {
    width: 50%;
    padding: .50rem;
    border-radius: 0.5rem;
    background: #00C950FF;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    color: #030712FF;
}

.flatpickr-today-button:hover {
    color: #ffffff;
}
/* --------------------------------------------------
   FADE + ZOOM (apertura)
   -------------------------------------------------- */
@keyframes modal-zoom-in {
    0%   { opacity: 0; transform: scale(0.8) translate(-50%, -50%); }
    100% { opacity: 1; transform: scale(1)   translate(-50%, -50%); }
}

/* FADE + ZOOM (cierre) */
@keyframes modal-zoom-out {
    0%   { opacity: 1; transform: scale(1)   translate(-50%, -50%); }
    100% { opacity: 0; transform: scale(0.8) translate(-50%, -50%); }
}

/* Para movimientos laterales (si usas position=“left” o “right”) */
@keyframes modal-slide-in-left {
    0%   { opacity: 0; transform: translateX(-30%) scale(0.85); }
    100% { opacity: 1; transform: translateX(0)    scale(1); }
}
@keyframes modal-slide-out-left {
    0%   { opacity: 1; transform: translateX(0)    scale(1); }
    100% { opacity: 0; transform: translateX(-30%) scale(0.85); }
}

/* Shake y flash-pulse (tus originales) */
@keyframes shake-x {
    0%   { transform: translateX(0); }
    15%  { transform: translateX(-8px); }
    30%  { transform: translateX(6px); }
    45%  { transform: translateX(-4px); }
    60%  { transform: translateX(3px); }
    75%  { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

@keyframes shake-x-center {
    0%   { transform: translate(-50%, -50%) scale(1) translateX(0); }
    15%  { transform: translate(-50%, -50%) scale(1) translateX(-8px); }
    30%  { transform: translate(-50%, -50%) scale(1) translateX(6px); }
    45%  { transform: translate(-50%, -50%) scale(1) translateX(-4px); }
    60%  { transform: translate(-50%, -50%) scale(1) translateX(3px); }
    75%  { transform: translate(-50%, -50%) scale(1) translateX(-2px); }
    100% { transform: translate(-50%, -50%) scale(1) translateX(0); }
}

.modal[data-modal-id]::before {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, white 10%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.5;
    animation: flash-pulse 0.6s ease-out;
    pointer-events: none;
    border-radius: 9999px;
}

@keyframes flash-pulse {
    0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.8; }
    50%  { transform: translate(-50%, -50%) scale(1);   opacity: 0.4; }
    100% { transform: translate(-50%, -50%) scale(2);   opacity: 0;   }
}

.modal-animate-left {
    transform: translateX(-100%);
    transition: all 0.3s ease;
}
.modal-animate-left.show {
    transform: translateX(0);
    opacity: 1;
}

.modal-animate-right {
    transform: translateX(100%);
    transition: all 0.3s ease;
}
.modal-animate-right.show {
    transform: translateX(0);
    opacity: 1;
}

.modal-animate-top {
    transform: translateY(-100%);
    transition: all 0.3s ease;
}
.modal-animate-top.show {
    transform: translateY(0);
    opacity: 1;
}

.modal-animate-bottom {
    transform: translateY(100%);
    transition: all 0.3s ease;
}
.modal-animate-bottom.show {
    transform: translateY(0);
    opacity: 1;
}

@keyframes fade {
    from { opacity: 0 }
    to   { opacity: 1 }
}

.animate-fade {
    animation: fade 0.3s ease-out;
}

.flash-border {
    position: relative;
}

.flash-border::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 2px solid #22c55e;
    border-radius: 6px;
    box-shadow: 0 0 8px 2px #22c55e60;
    background: rgba(34, 197, 94, 0.15);
    animation: border-fade 20s linear forwards;
}

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

/* --------------------------------------------------
   Endogamia
   -------------------------------------------------- */

@media print {
    .no-print {
        display: none !important;
    }

    body {
        font-size: 12pt;
    }

    .shadow-sm {
        box-shadow: none !important;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* --------------------------------------------------
   Modal de Progreso
   -------------------------------------------------- */

.pulse-ring { animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; }
@keyframes pulse-ring { 0%{transform:scale(0.33)} 40%,50%{opacity:1} 100%{opacity:0;transform:scale(1.33)} }
.progress-shimmer { position:relative; overflow:hidden; }
.progress-shimmer::before {
    content:''; position:absolute; inset:0; left:-100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    animation: shimmer 2s infinite;
}
@keyframes shimmer { 0%{ left:-100% } 100%{ left:100% } }
.fade-in { animation: fadeIn .8s ease-in both; }
@keyframes fadeIn { from{opacity:0; transform: translateY(20px)} to{opacity:1; transform:none} }

@media (prefers-reduced-motion: reduce) {
    .pulse-ring, .progress-shimmer::before, .fade-in, .animate-spin { animation: none !important; }
}