/* =========================================================
   La Cabina — Ajustes puntuales (alineación, contraste, file input)
   Sin rediseño global; solo refinamientos visibles
   ========================================================= */

:root {
  --lcb-gap: 12px;
  --lcb-radius: 14px;
  --lcb-contrast-bg: #111;   /* alto contraste p/ botones */
  --lcb-contrast-fg: #fff;   /* texto blanco */
  --lcb-border: rgba(0,0,0,.15);
}

/* ------------------------------
   (1) ALINEACIÓN RESPONSIVE
   ------------------------------ */

/* Grids típicos en el plugin y en la página de evento */
.lcb-grid,
.lcb-gallery .grid,
.lcbx-wrap .lcbx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--lcb-gap);
}

/* Cobertura en la página de evento, aunque no use clases lcb- */
body.single-evento .entry-content .wp-block-gallery,
body.single-evento .entry-content .gallery,
body.single-evento .entry-content .galeria,
body.single-evento .entry-content .photos,
body.single-evento .entry-content .grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--lcb-gap);
}

/* Tarjetas con altura visual consistente (recorte elegante) */
.lcb-grid > *,
.lcbx-wrap .lcbx-item,
.lcb-gallery .item,
body.single-evento .entry-content .gallery .gallery-item,
body.single-evento .entry-content .wp-block-gallery .blocks-gallery-item,
body.single-evento .entry-content figure {
  border-radius: var(--lcb-radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;      /* 3:4 típico fotográfico, evita “saltos” */
}

/* Imágenes adaptadas a la tarjeta */
.lcb-grid img,
.lcbx-wrap img,
.lcb-gallery img,
body.single-evento .entry-content .gallery img,
body.single-evento .entry-content .wp-block-gallery img,
body.single-evento .entry-content figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* recorte suave, llena tarjeta */
  display: block;
}

/* Pequeños refinamientos responsive */
@media (max-width: 640px) {
  .lcb-grid,
  .lcbx-wrap .lcbx-grid,
  body.single-evento .entry-content .wp-block-gallery,
  body.single-evento .entry-content .gallery,
  body.single-evento .entry-content .galeria,
  body.single-evento .entry-content .photos,
  body.single-evento .entry-content .grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }
}

/* ------------------------------
   (2) CONTRASTE EN ACCIONES
   ------------------------------ */

/* Botones y acciones solo donde interesa (plugin + página de evento) */
.lcb-load, .lcb-btn, .lcb-button, .button.lcb, .lcbx-wrap .lcbx-load,
body.single-evento .entry-content .button,
body.single-evento .entry-content button,
body.single-evento .entry-content input[type="button"],
body.single-evento .entry-content input[type="submit"] {
  background: var(--lcb-contrast-bg);
  color: var(--lcb-contrast-fg);
  border: 1px solid var(--lcb-contrast-bg);
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .06s ease, filter .15s ease;
}

.lcb-load:hover, .lcb-btn:hover, .lcb-button:hover, .button.lcb:hover, .lcbx-wrap .lcbx-load:hover,
body.single-evento .entry-content .button:hover,
body.single-evento .entry-content button:hover,
body.single-evento .entry-content input[type="button"]:hover,
body.single-evento .entry-content input[type="submit"]:hover {
  filter: brightness(1.08);
}

.lcb-load:active, .lcb-btn:active, .lcb-button:active, .button.lcb:active, .lcbx-wrap .lcbx-load:active,
body.single-evento .entry-content .button:active,
body.single-evento .entry-content button:active,
body.single-evento .entry-content input[type="button"]:active,
body.single-evento .entry-content input[type="submit"]:active {
  transform: translateY(1px);
}

.lcb-load:disabled, .lcbx-wrap .lcbx-load:disabled {
  opacity: .65; cursor: not-allowed;
}

/* ------------------------------
   (3) SELECCIÓN DE ARCHIVOS
   ------------------------------ */

/* Input de archivos más claro y usable (sin JS extra) */
.lcb-form input[type="file"],
body.single-evento .entry-content input[type="file"] {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--lcb-border);
  border-radius: 10px;
  background: #fff;
  color: #111;
  font: inherit;
}

/* Botón nativo del file input (navegadores modernos) */
.lcb-form input[type="file"]::file-selector-button,
body.single-evento .entry-content input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: var(--lcb-contrast-bg);
  color: var(--lcb-contrast-fg);
  cursor: pointer;
  font-weight: 600;
}

/* Foco accesible (teclado) */
.lcb-form input[type="file"]:focus,
body.single-evento .entry-content input[type="file"]:focus,
.lcb-load:focus, .lcb-btn:focus, .lcb-button:focus, .button.lcb:focus,
body.single-evento .entry-content .button:focus,
body.single-evento .entry-content button:focus,
body.single-evento .entry-content input[type="button"]:focus,
body.single-evento .entry-content input[type="submit"]:focus {
  outline: 2px solid #2563eb;      /* azul accesible */
  outline-offset: 2px;
}

/* Reducir animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* Pie bajo cada miniatura */
.lcb-card__footer{
  margin-top: 6px;
  display: flex;
  justify-content: center;
}
.lcb-btn-download{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;           /* altura táctil y evita CLS */
  font-size: 13px;
  border-radius: 12px;
  text-decoration: none;
}


/* Controles del lightbox */
dialog.lcb-lightbox .lcb-lightbox-controls{
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  display: flex; gap: 12px; justify-content: center;
}
dialog.lcb-lightbox .lcb-lightbox-controls button{
  background: rgba(17,17,17,.75);
  color: #fff; border: 0; border-radius: 10px;
  padding: 8px 12px; font-weight: 600; cursor: pointer;
}

/* Botón de pantalla completa */
dialog.lcb-lightbox .lcb-lightbox-controls .lcb-fullscreen{
  background: rgba(17,17,17,.75);
  color:#fff; border:0; border-radius:10px;
  padding:8px 12px; font-weight:600; cursor:pointer;
}

/* Fade + Zoom (300ms) */
dialog.lcb-lightbox .lcb-lightbox-img{
  opacity: 1;
  transform: scale(1) translateZ(0);
  transition:
    opacity .3s ease-out,
    transform .5s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}
dialog.lcb-lightbox .lcb-lightbox-img.is-fading{
  opacity: 0;
  transform: scale(.985) translateZ(0); /* sutil encogimiento al salir */
}

/* Respeta usuarios con menos animación */
@media (prefers-reduced-motion: reduce){
  dialog.lcb-lightbox .lcb-lightbox-img{
    transition: opacity .2s linear; /* sin zoom */
  }
  dialog.lcb-lightbox .lcb-lightbox-img.is-fading{
    transform: none;
  }
}

/* Respeta usuarios con menos animación */
@media (prefers-reduced-motion: reduce){
  dialog.lcb-lightbox .lcb-lightbox-img{
    transition: opacity .2s linear; /* sin zoom */
  }
  dialog.lcb-lightbox .lcb-lightbox-img.is-fading{
    transform: none;
  }
}


/* Estado "activo" en verde para Play y Fullscreen */
dialog.lcb-lightbox .lcb-lightbox-controls .lcb-play[aria-pressed="true"],
dialog.lcb-lightbox .lcb-lightbox-controls .lcb-fullscreen[aria-pressed="true"]{
  background: #16a34a; /* verde */
  box-shadow: 0 0 0 2px rgba(22,163,74,.35);
  transition: background .15s ease, box-shadow .15s ease;
}

/* Pulso breve en verde al hacer click en Prev/Next */
dialog.lcb-lightbox .lcb-lightbox-controls .lcb-prev:active,
dialog.lcb-lightbox .lcb-lightbox-controls .lcb-next:active{
  background: #16a34a;
  box-shadow: 0 0 0 2px rgba(22,163,74,.35);
}

/* Cuando el botón tenga foco (teclado), usa aro verde */
dialog.lcb-lightbox .lcb-lightbox-controls button:focus{
  outline: 2px solid #16a34a;
  outline-offset: 2px;
}

/* Ken Burns sutil: ahora con zoom ~3% + pan suave */
@keyframes lcb-kenburns {
  from {
    /* usa variables para pan y escala inicial */
    transform: translate(var(--kb-tx-start, 0), var(--kb-ty-start, 0)) scale(1) translateZ(0);
  }
  to {
    /* fin: pan opuesto + escala configurable */
    transform: translate(var(--kb-tx-end, 0), var(--kb-ty-end, 0)) scale(var(--kb-scale, 1.03)) translateZ(0);
  }
}

/* Se aplica solo si JS añade .is-kenburns */
dialog.lcb-lightbox .lcb-lightbox-img.is-kenburns{
  animation: lcb-kenburns var(--kb-duration, 3500ms) linear forwards;
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
}

/* Si existía un botón KB de versiones previas, escóndelo (no lo usamos) */
dialog.lcb-lightbox .lcb-lightbox-controls .lcb-kb{ display:none !important; }

/* Accesibilidad: respetar reducir movimiento */
@media (prefers-reduced-motion: reduce){
  dialog.lcb-lightbox .lcb-lightbox-img.is-kenburns{ animation: none; }
}
