/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.5); }
    50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.8); }
}
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.animate-fade-in { animation: fadeIn 0.6s ease-out forwards; }
.animate-fade-in-left { animation: fadeInLeft 0.6s ease-out forwards; }
.animate-fade-in-right { animation: fadeInRight 0.6s ease-out forwards; }
.animate-pulse-glow { animation: pulse-glow 2s infinite; }
.animate-gradient { background-size: 200% 200%; animation: gradient-shift 8s ease infinite; }

/* Scrollbar custom (dark mode) */
.dark ::-webkit-scrollbar { width: 8px; }
.dark ::-webkit-scrollbar-track { background: #0F172A; }
.dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Scrollbar custom (light mode) */
html:not(.dark) ::-webkit-scrollbar { width: 8px; }
html:not(.dark) ::-webkit-scrollbar-track { background: #f1f5f9; }
html:not(.dark) ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }

/* Scroll suave + base font 18px */
html { scroll-behavior: smooth; font-size: 18px; }

/* Loading spinner */
.htmx-indicator { opacity: 0; transition: opacity 0.2s ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Imagenes en contenido markdown:
   - max-width:100% + width/height:auto = nunca desbordan horizontalmente
   - max-height:75vh = evita scroll vertical excesivo con imagenes retrato
     (documentos escaneados, certificados, etc.)
   - Centradas horizontalmente
   - min-width:0 en el padre evita que el tamano intrinseco de la imagen
     infle el contenedor aunque tenga overflow-x:auto */
.prose,
.markdown-content {
    min-width: 0;
}
.prose img,
.markdown-content img {
    display: block;
    max-width: 100%;
    max-height: 75vh;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0.5rem;
}

/* Lightbox para imagenes markdown */
#md-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    align-items: center;
    justify-content: center;
}
#md-lightbox.active {
    display: flex;
}
#md-lightbox .lightbox-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 0.75rem;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    cursor: default;
    animation: lightboxIn 0.3s ease-out;
}
@keyframes lightboxIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}
#md-lightbox .lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1.5rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10;
}
#md-lightbox .lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
}
#md-lightbox .lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1.5rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10;
}
#md-lightbox .lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.25);
}
#md-lightbox .lightbox-nav.prev { left: 1.5rem; }
#md-lightbox .lightbox-nav.next { right: 1.5rem; }
#md-lightbox .lightbox-counter {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
}
body.lightbox-open {
    overflow: hidden;
}

/* ============================
   MARKDOWN / PROSE EN MOVIL
   ============================ */

/* Evita overflow horizontal del contenido markdown en pantallas pequenas */
.prose {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-word;
    word-break: break-word;
}

.prose pre {
    overflow-x: auto;
    white-space: pre;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.prose table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.prose code {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Reducir tamano de letra del prose un ~15% en movil */
@media (max-width: 640px) {
    .prose {
        font-size: 0.85rem !important;
    }
    .prose.prose-lg {
        font-size: 0.95rem !important;
    }
    .prose.prose-xl {
        font-size: 1.0625rem !important;
    }
}

/* ============================
   GRIDS: CENTRAR CARDS POCAS
   ============================ */
/* Cuando un grid tiene 1 hijo, lo centramos y le damos
   el ancho equivalente a una columna del grid mas grande.
   Cuando tiene 2 hijos, los movemos al centro del grid
   (sin huecos a la derecha). */
.grid-center-single > :only-child {
    grid-column: 1 / -1;   /* ocupa todo el ancho del grid */
    max-width: 28rem;      /* tamano de una card en grid de 2 cols */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

@media (min-width: 768px) {
    .grid-center-single > :only-child {
        max-width: 32rem;
    }
}

@media (min-width: 1024px) {
    .grid-center-single > :only-child {
        max-width: 36rem;
    }
}

/* Cuando hay exactamente 2 hijos en el grid:
   usamos flexbox para centrar el bloque horizontalmente.
   Las 2 cards se muestran lado a lado centradas (en desktop)
   o una encima de otra (en movil). */
.grid-center-single:has(> :nth-child(2):last-child) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;  /* gap-6 de Tailwind */
}

.grid-center-single:has(> :nth-child(2):last-child) > * {
    flex: 0 1 20rem;  /* ancho base, similar a una columna del grid */
    max-width: 28rem;
}

/* En movil, las 2 cards van una encima de otra y llenan el ancho */
@media (max-width: 767px) {
    .grid-center-single:has(> :nth-child(2):last-child) > * {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* ============================
   BOTON CV VISUAL: ANIMADO (sutil)
   ============================ */
/* Animaciones personalizadas para el boton de descarga del CV visual.
   Mantiene un look solido y distinguido pero menos agresivo: solo
   un pulso de brillo MUY sutil (opacidad baja) y un destello blanco
   discreto. Sin salto vertical para igualar el ritmo de los otros 2
   botones. */
@keyframes cv-glow-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.12),
                    0 2px 6px 0 rgba(37, 99, 235, 0.08);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0),
                    0 4px 12px 2px rgba(37, 99, 235, 0.18);
    }
}

/* Modo oscuro: el halo es emerald (mismo color que el boton) */
.dark .btn-cv-visual {
    animation: cv-glow-pulse-emerald 2.4s ease-in-out infinite;
}

@keyframes cv-glow-pulse-emerald {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.12),
                    0 2px 6px 0 rgba(16, 185, 129, 0.08);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0),
                    0 4px 12px 2px rgba(16, 185, 129, 0.18);
    }
}

/* NOTA: Se elimino la animacion de cambio de colores (cv-gradient-shift).
   El gradiente es FIJO: solo pulsa el brillo (box-shadow) y el destello
   (::before) cruza el boton. Asi los colores nunca cambian. */

@keyframes cv-shine-sweep {
    0% { transform: translateX(-120%) skewX(-20deg); }
    100% { transform: translateX(220%) skewX(-20deg); }
}

/* Boton base: mismo color solido que el ATS en cada modo, sin gradientes.
   Animacion: solo pulso de brillo muy sutil (sin salto vertical,
   para igualar el ritmo de los otros 2 botones). */
.btn-cv-visual {
    position: relative;
    overflow: hidden;
    background: #2563eb; /* blue-600 = mismo color que ATS en modo claro */
    animation: cv-glow-pulse 2.4s ease-in-out infinite;
    color: white;
    border: none;
}

/* Destello blanco muy sutil que cruza el boton cada cierto tiempo */
.btn-cv-visual::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 100%);
    animation: cv-shine-sweep 3.2s ease-in-out infinite;
    pointer-events: none;
}

/* Modo oscuro: color solido emerald (mismo que ATS en dark) */
.dark .btn-cv-visual {
    background: #10b981; /* emerald-500 = mismo color que ATS en dark */
    animation: cv-glow-pulse-emerald 2.4s ease-in-out infinite;
}

.dark .btn-cv-visual::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 100%);
}

/* Hover: elevacion sutil + intensificacion leve del brillo.
   El transform del hover ya no compite con el bounce (eliminado). */
.btn-cv-visual:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 16px 0 rgba(37, 99, 235, 0.25),
                0 0 0 2px rgba(37, 99, 235, 0.1);
    animation: cv-glow-pulse 1.2s ease-in-out infinite;
}

.dark .btn-cv-visual:hover {
    box-shadow: 0 6px 16px 0 rgba(16, 185, 129, 0.28),
                0 0 0 2px rgba(16, 185, 129, 0.12);
    animation: cv-glow-pulse-emerald 1.2s ease-in-out infinite;
}

/* Active: feedback de click (escala hacia abajo) */
.btn-cv-visual:active {
    transform: translateY(-1px) scale(0.98);
    transition-duration: 50ms;
}

/* Icono de sparkles: gira suavemente y crece */
.btn-cv-visual i[data-lucide="sparkles"] {
    display: inline-block;
    animation: cv-sparkle-rotate 3s linear infinite;
}

/* Pausar animaciones para usuarios con reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .btn-cv-visual,
    .btn-cv-visual::before,
    .btn-cv-visual i[data-lucide="sparkles"] {
        animation: none !important;
    }
    .btn-cv-visual:hover {
        transform: none;
    }
}