:root {
    --cardRadius: 12px;
    --cardBorder: 3px;
    --accentMorado1: #7b1fa2;
    --accentMorado2: #a34dc5;
    --textoOscuro: #222;
}

/* Ventana */
.ventanaEncarta.retroModal.modalConHoverTarjeta {
    border-color: transparent !important;
    box-shadow: none !important;
}

.ventanaEncarta.retroModal {
    overflow: visible;
}

.barraVentana-proyects {
    background: linear-gradient(90deg, #54d8a4, var(--verdeEncarta));
    color: #052b1a;
    padding: 12px 16px;
    font-weight: 700;
    border-bottom-left-radius: calc(var(--cardRadius) - 2px);
    border-bottom-right-radius: calc(var(--cardRadius) - 2px);
}

/* Tarjeta */
.tarjetaProyecto {
    position: relative;
    border: none;
    overflow: visible;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
    display: block;
    border-radius: var(--cardRadius);
}

.tarjetaProyecto::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--cardRadius);
    padding: var(--cardBorder);
    background: linear-gradient(90deg, var(--accentMorado1), var(--accentMorado2), #36f5ac, var(--accentMorado1));
    background-size: 200% 200%;
    z-index: 2;
    pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .20s ease;
}

.tarjetaProyecto:hover::before {
    opacity: 1;
    animation: borderMove 1.9s linear infinite;
}

@keyframes borderMove {
    from {
        background-position: 0% 50%
    }

    to {
        background-position: 100% 50%
    }
}

.tarjetaInner {
    position: relative;
    z-index: 1;
    border-radius: calc(var(--cardRadius) - var(--cardBorder));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ---------- IMAGEN + OVERLAY ---------- */
.imagenWrapper {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    display: block;
}

.imagenProyecto {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* ajusta la imagen sin recortarla */
    object-position: center;
    /* la centra dentro del espacio */
    background: #fff;
    /* color de fondo detrás de la imagen (puede ser otro) */
    border-top-left-radius: calc(var(--cardRadius) - var(--cardBorder));
    border-top-right-radius: calc(var(--cardRadius) - var(--cardBorder));
    transition: transform .25s ease;
}

/* overlay que aparece al hover sobre la imagen (o focus-within para teclado) */
.imagenOverlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
    /* activamos botones solo cuando está visible */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.55));
}

/* mostrar overlay al hover/focus del wrapper */
.imagenWrapper:hover .imagenOverlay,
.imagenWrapper:focus-within .imagenOverlay {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* contenido interno del overlay: description + botones abajo */
.overlayContent {
    width: 100%;
    height: 100%;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    text-align: center;
}

/* texto */
/* Nota: overlayTitle se dejó en CSS por compatibilidad, pero en el HTML ahora el título se muestra en el card-body */
.overlayTitle {
    color: #fff;
    margin: 0;
    font-size: 1rem;
}

.overlayDesc {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.92rem;
    margin: 6px 0 0;
}

/* botones dentro del overlay (círculos)
   <-- Eliminé sus propiedades de tamaño/forma; dejé solo colores/bordes/hovers más abajo --> */

/* ajustar los colores de los botones para que resalten en el overlay */
.imagenOverlay .btnAccion {
    background: linear-gradient(90deg, var(--accentMorado2), var(--accentMorado1));
    color: #fff;
    border: none;
}

.imagenOverlay .btnAccionSecundaria {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* efecto hover de los botones dentro del overlay (se mantiene hover, eliminé transform si no quieres) */
.imagenOverlay .btn:hover {
    transform: translateY(-3px);
}

/* ---------- TARJETA BODY (chips) ---------- */
.tarjetaBody {
    padding: 16px;
    color: var(--textoOscuro);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- ICONOS DEVICON: sin borde, solo ícono grande, con hover --- */
.chipTecnologia {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin-right: 0.5rem;
    cursor: default;
    transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
    -webkit-tap-highlight-color: transparent;
}

.chipTecnologia i[class^="devicon-"],
.chipTecnologia i.devicon-plain {
    font-size: 1.6rem;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

/* ocultar label si por alguna razón existe (mantenemos accesibilidad si usas .chipLabel) */
.chipTecnologia .chipLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Hover: sutil escala en los iconos de tecnología */
.chipTecnologia:hover {
    transform: scale(1.08);
}

/* Estilo del título del proyecto (se muestra arriba de los íconos, fuera del overlay) */
.projectTitle {
    display: inline-block;
    border-top: 1.5px solid #7b1fa2;
    border-bottom: 1.5px solid #7b1fa2;
    margin: 0 0 8px;
    font-size: 1.5rem;
    color: var(--textoOscuro);
    text-align: center;
    font-weight: 600;
}

/* ---------- BOTONES GLOBALES ---------- */
/* <-- Eliminé focus/active custom (outline/box-shadow) para dejar comportamiento por defecto --> */

.btnAccion,
.btnAccionSecundaria {
    border: none;
}

.btnAccion {
    background: linear-gradient(90deg, var(--accentMorado2), var(--accentMorado1));
    color: white;
}

.btnAccionSecundaria {
    background: transparent;
    color: var(--accentMorado1);
    border: 2px solid rgba(163, 77, 197, .14);
}

/* ---------- CONTROLES CENTRADOS (debajo del proyecto central) */
/* Contenedor centrado respecto a #carouselProyectos */
#carouselProyectos {
    position: relative; /* importante para posicionamiento absoluto de los controles */
}

/* -------------- NUEVA ESTRATEGIA: colocación absoluta y determinista -------------- */
/* el ancho del contenedor = 36 + 36 + 10 (gap) = 82px -> ajusta si cambias tamaños */
.carousel-controls-centered {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* centro exacto respecto al carrusel */
    bottom: -10px; /* separación máxima de 10px respecto a la tarjeta */
    z-index: 120; /* por encima de modal-footer */
    width: 82px; /* ancho fijo que contiene ambos botones + gap */
    height: 36px;
    pointer-events: auto;
    /* eliminamos display:flex para evitar que reglas externas inviertan orden */
    display: block;
    /* limpieza defensiva */
    margin: 0;
    padding: 0;
}

/* colocamos los botones en posiciones absolutas dentro del contenedor,
   de modo que su colocación visual sea independiente del DOM o flex-direction */
.carousel-controls-centered .carousel-control-prev,
.carousel-controls-centered .carousel-control-next {
    position: absolute;
    top: 7vh;               /* idéntica alineación vertical */
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    background: rgba(151, 46, 196, 0.829); /* morado suave */
    border: 1px solid rgba(123,31,162,0.12);
    transition: background .14s ease, transform .14s ease, box-shadow .14s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Prev a la izquierda absoluta, Next a la derecha absoluta */
.carousel-controls-centered .carousel-control-prev { left: 0; }
.carousel-controls-centered .carousel-control-next { right: 0; }

/* Aseguramos que los iconos sean blancas y centradas */
.carousel-controls-centered .carousel-control-prev i,
.carousel-controls-centered .carousel-control-next i {
    color: #fff !important;
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
    padding: 2px;
}

/* Hover/focus: morado intenso (gradiente) y sutil elevación */
.carousel-controls-centered .carousel-control-prev:hover,
.carousel-controls-centered .carousel-control-next:hover,
.carousel-controls-centered .carousel-control-prev:focus,
.carousel-controls-centered .carousel-control-next:focus {
    transform: translateY(-3px) scale(1.03);
    background: linear-gradient(90deg, var(--accentMorado2), var(--accentMorado1));
    border-color: rgba(123,31,162,0.22);
    box-shadow: 0 8px 20px rgba(123,31,162,0.12);
    outline: none;
}

/* Responsive: mantener proporciones y gap (ajustamos ancho contenedor) */
@media (max-width: 768px) {
    .carousel-controls-centered {
        bottom: -10px;
        width: 74px; /* 34 + 34 + 6 gap */
        height: 34px;
    }
    .carousel-controls-centered .carousel-control-prev,
    .carousel-controls-centered .carousel-control-next { width: 34px; height: 34px; }
    .carousel-controls-centered .carousel-control-prev { left: 0; }
    .carousel-controls-centered .carousel-control-next { right: 0; }
    .carousel-controls-centered i { font-size: 16px; }
}

@media (max-width: 576px) {
    .carousel-controls-centered {
        bottom: -10px;
        width: 72px; /* 32 + 32 + 8 gap */
        height: 32px;
    }
    .carousel-controls-centered .carousel-control-prev,
    .carousel-controls-centered .carousel-control-next { width: 32px; height: 32px; }
    .carousel-controls-centered i { font-size: 15px; }
}

/* Estilos personalizados para el footer del modal */
.modal-footer {
  justify-content: center;       /* centra horizontalmente el contenido */
}

/* Estilo del texto dentro del footer */
.modal-footer .textoSutil {
  font-size: 0.9rem;             /* más pequeño que el texto normal */
  color: var(--colorTextoSecundario, #6c757d); /* tono gris o el que uses */
  text-align: center;            /* centrado */
}

/* ========== AJUSTES MÍNIMOS PARA EL PROBLEMA DEL ESPACIO BLANCO LATERAL ========== */
/* Evita que Bootstrap añada un padding-right visible al abrir el modal (previene el "espacio en blanco" a la derecha) */
body.modal-open {
    padding-right: 0 !important;
}

/* Limitar el ancho del dialogo específico para que nunca exceda la ventana (previene overflow horizontal) */
#modalProyectos .modal-dialog {
    max-width: calc(100% - 48px);
    margin: 0 24px;
}

/* Evitar overflow horizontal dentro del body del modal */
#modalProyectos .modal-body {
    overflow-x: hidden;
}