/* V&D Photo Studio - estilos propios (Mobile First). Bootstrap solo como base. */

:root {
  --vyd-fondo: #f3f4f6;
  --vyd-superficie: #ffffff;
  --vyd-oscuro: #14181f;
  --vyd-texto: #1f2937;
  --vyd-texto-suave: #6b7280;
  --vyd-borde: #e5e7eb;
  --vyd-acento: #d4202c;
  --vyd-acento-hover: #b51a24;
  --vyd-radio: 14px;
  --vyd-sombra: 0 1px 3px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .05);
}

html {
  font-size: 16px;
}

body {
  background: var(--vyd-fondo);
  color: var(--vyd-texto);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

.btn:focus-visible, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(212, 32, 44, .25);
  border-color: var(--vyd-acento);
}

/* ---------- Barra superior ---------- */
.vyd-appbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  padding-top: env(safe-area-inset-top);
  background: var(--vyd-oscuro);
  color: #fff;
}

.vyd-marca {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
}

.vyd-marca:hover { color: #fff; }

.vyd-marca-logo {
  background: var(--vyd-acento);
  border-radius: 8px;
  padding: 3px 8px;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .5px;
}

.vyd-marca-texto {
  font-weight: 600;
  font-size: 1rem;
}

.vyd-usuario {
  background: none;
  border: 0;
  padding: 0;
}

.vyd-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2b313c;
  color: #fff;
  font-weight: 700;
}

.vyd-menu-usuario {
  min-width: 220px;
  border-radius: var(--vyd-radio);
  border: 1px solid var(--vyd-borde);
  box-shadow: var(--vyd-sombra);
}

.vyd-chip-rol {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fde8ea;
  color: var(--vyd-acento);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .4px;
}

/* ---------- Contenido ---------- */
.vyd-contenido {
  padding-bottom: env(safe-area-inset-bottom);
}

.vyd-pagina {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 16px 32px;
}

.vyd-titulo {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.vyd-subtitulo {
  color: var(--vyd-texto-suave);
  margin-bottom: 20px;
}

.vyd-tarjeta {
  background: var(--vyd-superficie);
  border: 1px solid var(--vyd-borde);
  border-radius: var(--vyd-radio);
  box-shadow: var(--vyd-sombra);
  padding: 16px;
}

/* ---------- Botones ---------- */
.btn-vyd {
  background: var(--vyd-acento);
  border-color: var(--vyd-acento);
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  min-height: 48px;
}

.btn-vyd:hover, .btn-vyd:active, .btn-vyd:focus-visible {
  background: var(--vyd-acento-hover) !important;
  border-color: var(--vyd-acento-hover) !important;
  color: #fff !important;
}

/* ---------- Login ---------- */
.vyd-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 16px;
  background: linear-gradient(180deg, var(--vyd-oscuro) 0, var(--vyd-oscuro) 42%, var(--vyd-fondo) 42%);
}

.vyd-login-caja {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.vyd-login-cabecera {
  text-align: center;
  color: #fff;
  margin-bottom: 24px;
}

.vyd-login-cabecera .vyd-marca-logo {
  display: inline-block;
  font-size: 1.4rem;
  padding: 6px 14px;
  border-radius: 12px;
  margin-bottom: 10px;
}

.vyd-login-cabecera h1 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
}

.vyd-login-cabecera p {
  color: #9ca3af;
  margin: 4px 0 0;
  font-size: .9rem;
}

.vyd-login .vyd-tarjeta {
  padding: 24px 20px;
}

.vyd-login .form-control {
  min-height: 48px;
  border-radius: 10px;
}

.vyd-login .form-label {
  font-weight: 600;
  font-size: .9rem;
}

@media (min-width: 768px) {
  .vyd-titulo { font-size: 1.75rem; }
  .vyd-pagina { padding: 32px 24px 48px; }
}

/* =====================================================================
   FASE 2 - Biblioteca, ficha, formularios y administración
   ===================================================================== */

:root {
  --vyd-placeholder-fondo: #e9ecf1;
  --vyd-placeholder-icono: #c3c9d3;
}

/* ---------- Navegación de la barra ---------- */
.vyd-nav {
  display: none;
  gap: 4px;
  margin-left: 24px;
  margin-right: auto;
}

.vyd-nav a {
  color: #b9c0cc;
  text-decoration: none;
  font-weight: 500;
  font-size: .95rem;
  padding: 6px 12px;
  border-radius: 8px;
}

.vyd-nav a:hover { color: #fff; }
.vyd-nav a.activo { color: #fff; background: #2b313c; }

@media (min-width: 768px) {
  .vyd-nav { display: flex; }
}

/* ---------- Avisos (TempData) ---------- */
.vyd-aviso {
  max-width: 1200px;
  margin: 12px auto 0;
  width: calc(100% - 32px);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .92rem;
  font-weight: 500;
}

.vyd-aviso-exito { background: #e7f6ec; color: #18663a; border: 1px solid #c4e8d0; }
.vyd-aviso-info  { background: #fff6e0; color: #7a5a00; border: 1px solid #f3e1a8; }

/* ---------- Página ---------- */
.vyd-pagina-ancha { max-width: 1200px; }
.vyd-pagina-form  { max-width: 760px; }

.vyd-encabezado {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.vyd-volver {
  display: inline-block;
  color: var(--vyd-texto-suave);
  text-decoration: none;
  font-size: .9rem;
  margin-bottom: 10px;
}

.vyd-volver:hover { color: var(--vyd-texto); }

.vyd-seccion-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.vyd-contador {
  font-size: .8rem;
  font-weight: 500;
  color: var(--vyd-texto-suave);
}

.vyd-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .3px; }

.vyd-btn-secundario {
  border-radius: 10px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
}

/* ---------- Buscador ---------- */
.vyd-buscador {
  position: relative;
  margin-bottom: 12px;
}

.vyd-buscador input {
  width: 100%;
  height: 50px;
  border: 1px solid var(--vyd-borde);
  border-radius: 12px;
  padding: 0 14px 0 44px;
  background: var(--vyd-superficie);
  box-shadow: var(--vyd-sombra);
  font-size: 1rem;
  outline: none;
}

.vyd-buscador input:focus {
  border-color: var(--vyd-acento);
  box-shadow: 0 0 0 .2rem rgba(212, 32, 44, .15);
}

.vyd-buscador-icono {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--vyd-texto-suave);
  pointer-events: none;
}

/* ---------- Filtros por estado (chips con scroll horizontal en móvil) ---------- */
.vyd-filtros {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  margin-bottom: 8px;
  scrollbar-width: none;
}

.vyd-filtros::-webkit-scrollbar { display: none; }

.vyd-filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--vyd-borde);
  background: var(--vyd-superficie);
  color: var(--vyd-texto);
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
}

.vyd-filtro span {
  color: var(--vyd-texto-suave);
  font-size: .8rem;
}

.vyd-filtro.activo {
  background: var(--vyd-oscuro);
  border-color: var(--vyd-oscuro);
  color: #fff;
}

.vyd-filtro.activo span { color: #b9c0cc; }

.vyd-punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* ---------- Estados ---------- */
.vyd-estado {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
}

.vyd-estado-pendiente { background: #fff1d6; color: #8a5a00; }
.vyd-estado-proceso   { background: #dfeeff; color: #1a56a8; }
.vyd-estado-completo  { background: #dcf3e4; color: #18663a; }
.vyd-estado-archivado { background: #eceef1; color: #5b6472; }

.vyd-punto.vyd-estado-pendiente { background: #e3a008; }
.vyd-punto.vyd-estado-proceso   { background: #2f7de1; }
.vyd-punto.vyd-estado-completo  { background: #22a05a; }
.vyd-punto.vyd-estado-archivado { background: #8a93a1; }

/* ---------- Grilla de tarjetas ---------- */
.vyd-grilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 576px)  { .vyd-grilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .vyd-grilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .vyd-grilla { grid-template-columns: repeat(4, 1fr); } }

.vyd-tv {
  display: flex;
  flex-direction: column;
  background: var(--vyd-superficie);
  border: 1px solid var(--vyd-borde);
  border-radius: var(--vyd-radio);
  box-shadow: var(--vyd-sombra);
  overflow: hidden;
  color: var(--vyd-texto);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

.vyd-tv:hover {
  color: var(--vyd-texto);
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 10px 28px rgba(0, 0, 0, .08);
}

.vyd-tv-portada {
  position: relative;
  aspect-ratio: 16 / 10;
}

.vyd-tv-portada .vyd-estado {
  position: absolute;
  top: 10px;
  left: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.vyd-tv-cuerpo {
  padding: 12px 14px 6px;
  flex-grow: 1;
}

.vyd-tv-titulo {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
}

.vyd-tv-version {
  color: var(--vyd-texto-suave);
  font-size: .88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vyd-tv-ids {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 10px;
}

.vyd-tv-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--vyd-borde);
  font-size: .82rem;
  color: var(--vyd-texto);
}

.vyd-tv-pie svg {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 2px;
}

.vyd-tv-sucursal {
  margin-left: auto;
  color: var(--vyd-texto-suave);
}

/* Patente estilo placa */
.vyd-patente {
  display: inline-block;
  padding: 2px 8px;
  border: 2px solid var(--vyd-oscuro);
  border-radius: 6px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: 1.5px;
  color: var(--vyd-oscuro);
}

.vyd-patente-grande { font-size: 1.15rem; padding: 4px 12px; }

.vyd-vin {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .78rem;
  color: var(--vyd-texto-suave);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Placeholder de portada */
.vyd-portada-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vyd-placeholder-fondo);
  color: var(--vyd-placeholder-icono);
}

.vyd-portada-placeholder svg { width: 42%; max-width: 160px; }

/* Estado vacío */
.vyd-vacio {
  text-align: center;
  padding: 32px 16px;
  background: var(--vyd-superficie);
  border: 1px dashed #cfd5de;
  border-radius: var(--vyd-radio);
}

.vyd-vacio .vyd-portada-placeholder {
  width: 120px;
  height: 72px;
  margin: 0 auto 12px;
  border-radius: 12px;
}

.vyd-vacio h2 { font-size: 1.1rem; font-weight: 700; }
.vyd-vacio p  { color: var(--vyd-texto-suave); }

/* Botón flotante (móvil) */
.vyd-fab {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--vyd-acento);
  color: #fff;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(212, 32, 44, .4);
  z-index: 1010;
}

.vyd-fab:hover { color: #fff; background: var(--vyd-acento-hover); }

/* ---------- Ficha ---------- */
.vyd-ficha-cabecera {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 12px;
  margin-bottom: 16px;
}

.vyd-ficha-portada {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
}

.vyd-ficha-portada-texto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
  font-size: .8rem;
  color: #8b94a3;
}

.vyd-ficha-resumen { padding: 4px 6px 8px; }

.vyd-ficha-titulo {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 10px 0 2px;
}

.vyd-ficha-version { color: var(--vyd-texto-suave); }

.vyd-ficha-acciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0 6px;
}

.vyd-ficha-acciones .btn-vyd:disabled {
  background: #e6b3b6;
  border-color: #e6b3b6;
  opacity: 1;
  cursor: not-allowed;
}

.vyd-accion-con-ayuda {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vyd-ficha-columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .vyd-ficha-cabecera { grid-template-columns: 1.1fr 1fr; padding: 16px; gap: 24px; }
  .vyd-ficha-acciones { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .vyd-ficha-titulo { font-size: 2rem; }
}

@media (min-width: 992px) {
  .vyd-ficha-columnas { grid-template-columns: 1fr 1fr; align-items: start; }
}

.vyd-datos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin: 0;
}

.vyd-datos dt {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--vyd-texto-suave);
}

.vyd-datos dd {
  margin: 2px 0 0;
  font-weight: 500;
  word-break: break-word;
}

.vyd-tag-inactiva {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 6px;
  background: #eceef1;
  color: #5b6472;
  font-size: .7rem;
  font-weight: 600;
}

.vyd-sesiones, .vyd-historial {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vyd-sesiones li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--vyd-borde);
}

.vyd-sesiones li:first-child { border-top: 0; padding-top: 0; }

.vyd-sesion-numero {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--vyd-fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
}

.vyd-historial li {
  position: relative;
  padding: 0 0 14px 20px;
  border-left: 2px solid var(--vyd-borde);
  margin-left: 5px;
}

.vyd-historial li:last-child { padding-bottom: 0; border-left-color: transparent; }

.vyd-historial li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--vyd-superficie);
  border: 2px solid var(--vyd-acento);
}

.vyd-historial-detalle {
  margin-top: 4px;
  padding: 6px 8px;
  background: var(--vyd-fondo);
  border-radius: 8px;
  color: var(--vyd-texto);
  word-break: break-word;
}

/* ---------- Formularios ---------- */
.vyd-pagina-form .form-control,
.vyd-pagina-form .form-select {
  min-height: 46px;
  border-radius: 10px;
}

.vyd-pagina-form .input-group .form-control { border-radius: 10px 0 0 10px; }
.vyd-pagina-form .input-group-text { border-radius: 0 10px 10px 0; }

.vyd-pagina-form .form-label {
  font-weight: 600;
  font-size: .88rem;
}

.vyd-input-id { text-transform: uppercase; letter-spacing: .5px; }
.vyd-input-id[readonly] { background: var(--vyd-fondo); }

.vyd-normalizado {
  min-height: 1.2em;
  margin-top: 4px;
  color: #1a56a8;
}

.vyd-normalizado.error { color: #b42318; }

.vyd-form-acciones {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  margin-top: 8px;
}

@media (min-width: 576px) {
  .vyd-form-acciones { flex-direction: row; justify-content: flex-end; }
}

.vyd-conflictos {
  background: #fff4f4;
  border: 1px solid #f3c7ca;
  border-radius: var(--vyd-radio);
  padding: 14px;
  margin-bottom: 16px;
}

.vyd-conflicto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 8px;
  background: #fff;
  border: 1px solid var(--vyd-borde);
  border-radius: 10px;
  color: var(--vyd-texto);
  text-decoration: none;
}

.vyd-conflicto:hover { color: var(--vyd-texto); border-color: var(--vyd-acento); }

.vyd-conflicto-tag {
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 600;
  color: var(--vyd-acento);
}

/* ---------- Lista administrativa (sucursales) ---------- */
.vyd-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vyd-lista-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 14px;
  background: var(--vyd-superficie);
  border: 1px solid var(--vyd-borde);
  border-radius: var(--vyd-radio);
  box-shadow: var(--vyd-sombra);
}

.vyd-lista-item.inactiva { opacity: .7; }

.vyd-lista-icono {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fde8ea;
  color: var(--vyd-acento);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.vyd-lista-item.inactiva .vyd-lista-icono { background: #eceef1; color: #5b6472; }

.vyd-lista-texto { min-width: 0; }

.vyd-lista-acciones {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.vyd-lista-acciones .btn { border-radius: 8px; min-width: 90px; }

@media (min-width: 768px) {
  .vyd-lista-item { grid-template-columns: auto 1fr auto auto; }
  .vyd-lista-acciones { grid-column: auto; }
}

.vyd-chip-activo {
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

.vyd-chip-activo.si { background: #dcf3e4; color: #18663a; }
.vyd-chip-activo.no { background: #eceef1; color: #5b6472; }

/* Botones de las listas: altura cómoda para tocar con el dedo en el celular. */
.vyd-lista-acciones .btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .vyd-lista-acciones .btn { min-height: 0; }
}

/* =====================================================================
   FASE 3A - Sesiones fotográficas
   ===================================================================== */

/* ---------- Portada real (Biblioteca y ficha) ---------- */
.vyd-portada-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--vyd-placeholder-fondo);
}

.vyd-ficha-portada > a { display: block; width: 100%; height: 100%; }

.vyd-chip-portada {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--vyd-acento);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.vyd-chip-portada-linea { position: static; margin-left: 6px; vertical-align: middle; }

/* ---------- Galería de la ficha ---------- */
.vyd-galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.vyd-galeria-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--vyd-placeholder-fondo);
}

.vyd-galeria-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vyd-galeria-item .vyd-chip-portada { top: 4px; right: 4px; font-size: .6rem; }

@media (min-width: 768px) {
  .vyd-galeria { grid-template-columns: repeat(6, 1fr); gap: 8px; }
}

/* Lista de sesiones de la ficha: toda la fila es un enlace */
.vyd-sesiones li { position: relative; }
.vyd-sesion-enlace { position: absolute; inset: 0; border-radius: 10px; z-index: 1; }
.vyd-sesion-enlace:hover { background: rgba(20, 24, 31, .03); }

/* ---------- Cabecera de la sesión ---------- */
.vyd-sesion-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.vyd-sesion-cabecera .vyd-subtitulo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

/* ---------- Checklist ---------- */
.vyd-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

.vyd-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--vyd-borde);
  border-radius: 12px;
  cursor: pointer;
  min-height: 52px;
}

.vyd-checklist-item:has(input:checked) { border-color: #9fd8b4; background: #f1fbf4; }
.vyd-checklist-item .form-check-input { width: 1.4rem; height: 1.4rem; margin: 0; flex-shrink: 0; }
.vyd-checklist-item .form-check-input:checked { background-color: #22a05a; border-color: #22a05a; }

.vyd-checklist-resultado { list-style: none; padding: 0; margin: 0 0 8px; }
.vyd-checklist-resultado li { padding: 3px 0; }
.vyd-checklist-resultado li.ok { color: #18663a; }
.vyd-checklist-resultado li.no { color: #a11a23; }

/* ---------- Progreso ---------- */
.vyd-progreso-cifras {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.vyd-progreso-total { font-size: 2rem; font-weight: 800; line-height: 1; }
.vyd-progreso-de { color: var(--vyd-texto-suave); font-weight: 600; }

.vyd-barra {
  height: 8px;
  border-radius: 999px;
  background: #e9ecf1;
  overflow: hidden;
  margin: 10px 0 8px;
}

.vyd-barra-relleno { height: 100%; background: var(--vyd-acento); border-radius: 999px; transition: width .3s; }
.vyd-barra-relleno.completa { background: #22a05a; }

.vyd-progreso-detalle { display: flex; flex-wrap: wrap; gap: 4px 14px; }

.vyd-motivos { margin: 10px 0 0; padding-left: 18px; color: #8a5a00; }
.vyd-motivos li + li { margin-top: 2px; }

/* ---------- Posiciones de fotos ---------- */
.vyd-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 576px) { .vyd-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .vyd-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.vyd-slot {
  display: flex;
  flex-direction: column;
  background: var(--vyd-superficie);
  border: 1px solid var(--vyd-borde);
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
}

.vyd-slot-imagen {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--vyd-placeholder-fondo);
}

.vyd-slot-imagen > a, .vyd-slot-imagen > a img { display: block; width: 100%; height: 100%; }
.vyd-slot-imagen img { object-fit: cover; }

.vyd-slot-vacio {
  position: absolute;
  inset: 8px;
  border: 2px dashed #c3c9d3;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa3b0;
  font-size: 1.6rem;
  font-weight: 800;
}

.vyd-slot-cuerpo { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; flex-grow: 1; }
.vyd-slot-nombre { font-weight: 700; font-size: .88rem; line-height: 1.25; overflow-wrap: anywhere; }

.vyd-slot-instruccion {
  font-size: .75rem;
  color: var(--vyd-texto-suave);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

.vyd-slot-cuerpo > .btn { margin-top: auto; min-height: 38px; }
.vyd-slot-acciones { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.vyd-slot-acciones .btn { min-height: 38px; width: 100%; }
.vyd-form-eliminar { display: flex; flex-direction: column; gap: 4px; }
.vyd-confirmar { display: flex; gap: 4px; }
.vyd-confirmar .btn { width: auto; flex: 1; }
.vyd-confirmar[hidden] { display: none; }

.vyd-agregar-adicional { padding: 12px 14px; }

/* ---------- Estado de la cola sobre la foto ---------- */
.vyd-slot-cola:empty { display: none; }

.vyd-slot-cola {
  position: absolute;
  inset: 0;
  background: #1f2937;
}

.vyd-slot-cola > img { width: 100%; height: 100%; object-fit: cover; opacity: .55; display: block; }

.vyd-cola-estado {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 8px;
  background: rgba(20, 24, 31, .82);
  color: #fff;
  font-size: .72rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  align-items: center;
}

.vyd-cola-estado strong { letter-spacing: .03em; }
.vyd-cola-estado.cola strong { color: #c7d2fe; }
.vyd-cola-estado.espera strong { color: #fcd34d; }
.vyd-cola-estado.error { background: rgba(161, 26, 35, .92); top: 0; align-content: center; }
.vyd-cola-botones { display: flex; gap: 4px; width: 100%; margin-top: 2px; }
.vyd-cola-botones .btn { padding: 2px 6px; font-size: .72rem; flex: 1; }

.vyd-cola-aviso {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff1d6;
  color: #7a4b00;
  border: 1px solid #f3d38a;
  font-size: .9rem;
}

.vyd-cola-aviso[hidden] { display: none; }
.vyd-cola-aviso a { color: inherit; font-weight: 700; }

/* ---------- Vista previa (Repetir / Aceptar) ---------- */
.vyd-preview {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgba(10, 12, 16, .88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.vyd-preview[hidden] { display: none; }

.vyd-preview-caja {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 100%;
  overflow: auto;
  background: var(--vyd-superficie);
  border-radius: var(--vyd-radio);
  padding: 14px;
}

.vyd-preview-titulo { font-weight: 700; padding-right: 36px; margin-bottom: 10px; }
.vyd-preview-imagen { background: #111; border-radius: 10px; overflow: hidden; }
.vyd-preview-imagen img { display: block; width: 100%; max-height: 60dvh; object-fit: contain; }
.vyd-preview-info { margin-top: 8px; }
.vyd-preview-error { color: #a11a23; margin-top: 4px; }
.vyd-preview-error:empty { display: none; }
.vyd-preview-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.vyd-preview-acciones .btn { min-height: 46px; }

.vyd-preview-cerrar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f0f2f5;
  font-size: 1rem;
}

/* ---------- Visor a pantalla completa ---------- */
.vyd-visor {
  position: fixed;
  inset: 0;
  z-index: 1070;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vyd-visor[hidden] { display: none; }
.vyd-visor img { max-width: 100%; max-height: calc(100dvh - 56px); object-fit: contain; }

.vyd-visor-cerrar, .vyd-visor-nav {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  line-height: 1;
}

.vyd-visor-cerrar { top: 10px; right: 10px; font-size: 1.1rem; }
.vyd-visor-nav { top: 50%; transform: translateY(-50%); }
.vyd-visor-nav.anterior { left: 8px; }
.vyd-visor-nav.siguiente { right: 8px; }
.vyd-visor-nav[hidden] { display: none; }

.vyd-visor-pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  font-size: .9rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7));
}

.vyd-visor-original { color: #fff; }
.vyd-visor-original[hidden] { display: none; }

.vyd-sin-scroll { overflow: hidden; }

/* ---------- Plegables y listado de sesiones ---------- */
.vyd-plegable > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.vyd-plegable > summary::-webkit-details-marker { display: none; }
.vyd-plegable > summary::after { content: "▾"; color: var(--vyd-texto-suave); }
.vyd-plegable[open] > summary::after { content: "▴"; }

.vyd-sesion-mini {
  width: 56px;
  height: 42px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--vyd-placeholder-fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #7b8494;
}

.vyd-sesion-mini img { width: 100%; height: 100%; object-fit: cover; }