/* Skin "Recuerdos" v4 · Boda Cecilia & José Pablo · 17-oct-2026
   Concepto: la página ES la invitación. Papel luminoso de pared a pared;
   cada bloque flota como pieza de papelería con doble marco y esquinas suaves.
   Fuentes y colores: los del PDF de imprenta autorizado. Motion: solo transform/opacity. */

/* ---------- fuentes reales de la invitación ---------- */
@font-face { font-family: 'Pinyon Script'; src: url('/boda-skin/fonts/PinyonScript-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cormorant SC'; src: url('/boda-skin/fonts/CormorantSC-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cormorant SC'; src: url('/boda-skin/fonts/CormorantSC-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }

/* ---------- tokens del sistema ---------- */
:root {
  --papel: #F1EBDF;
  --papel-card: #F8F4EA;
  --papel-hondo: #E7DFCE;
  --tinta: #4F463B;
  --tinta-suave: #7A6F5F;
  --oro: #8F6F2E;
  --oro-suave: #B99C5F;
  --oro-claro: #DCCB9E;
  --champan: #D8C3A5;
  --espresso: #3A3128;
  --terracota: #A66A5A;
  --sombra-1: 0 2px 8px -2px rgba(58,49,40,.10);
  --sombra-2: 0 18px 44px -20px rgba(58,49,40,.30), 0 4px 14px -8px rgba(58,49,40,.14);
  --sombra-3: 0 26px 60px -24px rgba(58,49,40,.38), 0 6px 18px -8px rgba(58,49,40,.16);
  --radio: 18px;
  --radio-sm: 12px;
  --curva: cubic-bezier(.22,.8,.32,1);
}

/* ---------- lienzo ---------- */
body {
  background-color: var(--papel);
  background-image: url('/boda-skin/textura.jpg?v=2');
  background-size: 840px auto;
  font-family: 'Cormorant SC', 'Cochin', Georgia, serif;
  color: var(--tinta);
  letter-spacing: .03em;
}

::selection { background: var(--oro-claro); color: var(--espresso); }

/* ---------- navbar: cabecera de etiqueta con vidrio suave ---------- */
.navbar {
  background-color: rgba(244, 238, 227, .88) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(185, 156, 95, .45);
}
.navbar, .navbar a, .navbar span {
  font-family: 'Pinyon Script', cursive;
  font-size: 1.6rem;
  color: var(--oro) !important;
  letter-spacing: 0;
}
.navbar-logo { height: 46px; width: auto; }

/* ---------- titulares ---------- */
h1, .display-5 {
  font-family: 'Pinyon Script', cursive;
  font-weight: 400;
  color: var(--oro);
  letter-spacing: 0;
}
h2, h3, h4, .display-6 {
  font-family: 'Cormorant SC', serif;
  color: var(--tinta);
  letter-spacing: .08em;
}
h3.display-6 { font-size: 1.25rem; color: var(--tinta-suave); }

/* título de la galería etiquetado por boda.js */
.boda-title {
  font-family: 'Pinyon Script', cursive !important;
  font-size: clamp(2.6rem, 6vw, 3.6rem) !important;
  color: var(--oro) !important;
  letter-spacing: 0 !important;
  margin-top: .4rem;
}

/* ornamento divisor (SVG inyectado) */
.boda-ornamento { display: block; margin: .35rem auto 1.1rem; width: min(260px, 60vw); height: 18px; opacity: .9; }

/* ---------- la tarjeta de subida: pieza de papelería flotante ---------- */
.file-uploader.bg-dark, .file-uploader {
  background: transparent !important;
  padding-top: 2.2rem !important;
  padding-bottom: 2rem !important;
}
.boda-drop {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  background-color: var(--papel-card) !important;
  background-image: url('/boda-skin/textura.jpg?v=2');
  background-size: 840px auto;
  border: 1px solid var(--oro-suave) !important;
  border-radius: var(--radio) !important;
  box-shadow: var(--sombra-2);
  padding: 2.4rem 2rem 2.2rem !important;
  transition: transform .28s var(--curva), box-shadow .28s var(--curva);
}
.boda-drop::after {
  content: '';
  position: absolute; inset: 9px;
  border: 1px dashed var(--oro-claro);
  border-radius: calc(var(--radio) - 8px);
  pointer-events: none;
}
.boda-drop:hover { transform: translateY(-3px); box-shadow: var(--sombra-3); }
.boda-drop h2 {
  font-family: 'Pinyon Script', cursive;
  font-size: clamp(2rem, 5vw, 2.7rem);
  color: var(--oro);
  letter-spacing: 0;
  margin-top: .4rem;
}
.boda-drop span, .boda-drop small, .boda-drop p, .boda-drop div { color: var(--tinta-suave); }
.boda-drop img { opacity: .8; }

/* sello de cera flotando sobre la tarjeta */
.boda-sello {
  position: static;
  display: block;
  margin: 0 auto .5rem;
  width: 66px; height: auto;
  transform: rotate(-4deg);
  filter: drop-shadow(0 5px 9px rgba(58,49,40,.22));
  pointer-events: none;
}

/* ---------- chips de estadísticas ---------- */
.boda-stats {
  display: flex !important;
  gap: .9rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}
.boda-stat {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  gap: .05rem;
  background: var(--papel-card);
  border: 1px solid rgba(185,156,95,.5);
  border-radius: 14px;
  padding: .6rem 1.7rem .5rem;
  box-shadow: var(--sombra-1);
  font-size: .76rem !important;
  letter-spacing: .18em;
  color: var(--tinta-suave) !important;
}
.boda-stat br { display: none; }
.boda-stat span {
  font-family: 'Cormorant SC', serif;
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--oro);
  line-height: 1.15;
}

/* ---------- tarjeta del QR ---------- */
.boda-card-qr {
  background: var(--papel-card);
  border: 1px solid var(--oro-suave);
  border-radius: var(--radio);
  box-shadow: var(--sombra-2);
  padding: .8rem .8rem .7rem;
  max-width: calc(100% - 14px);
  box-sizing: border-box;
  text-align: center;
  transition: transform .28s var(--curva), box-shadow .28s var(--curva);
}
.boda-card-qr:hover { transform: translateY(-3px); box-shadow: var(--sombra-3); }
.boda-card-qr img, .boda-card-qr canvas, .boda-card-qr svg {
  border-radius: var(--radio-sm);
  display: block; margin: 0 auto;
  max-width: 100%; height: auto;
}
.boda-card-qr .boda-qr-label {
  display: block;
  font-size: .72rem;
  letter-spacing: .2em;
  color: var(--tinta-suave);
  margin-top: .6rem;
  text-transform: uppercase;
}

/* ---------- botones: pastillas de etiqueta ---------- */
.btn {
  font-family: 'Cormorant SC', serif;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 999px !important;
  transition: transform .22s var(--curva), box-shadow .22s var(--curva), background-color .22s var(--curva), color .22s var(--curva);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sombra-1); }
.btn:active { transform: translateY(0); }
.btn-primary-2, .btn-primary {
  background-color: transparent !important;
  border: 1px solid var(--oro-suave) !important;
  color: var(--tinta) !important;
}
.btn-primary-2:hover, .btn-primary:hover {
  background-color: rgba(185,156,95,.16) !important;
  color: var(--espresso) !important;
}
.btn-danger {
  background-color: transparent !important;
  border: 1px solid var(--terracota) !important;
  color: var(--terracota) !important;
}
.btn-danger:hover { background-color: rgba(166,106,90,.12) !important; }

/* ---------- formularios ---------- */
input, select, textarea, .form-control, .form-select, label {
  font-family: 'Cormorant SC', serif;
}
.form-control, .form-select, input[type=text], input[type=password], input[type=number] {
  border-radius: var(--radio-sm) !important;
  border: 1px solid rgba(185,156,95,.45) !important;
  background-color: var(--papel-card) !important;
  color: var(--tinta) !important;
}
:focus-visible { outline: 2px solid var(--oro-suave); outline-offset: 2px; }

/* ---------- tarjetas, tablas, modales ---------- */
.card, .table { border-color: rgba(185,156,95,.4) !important; }
.modal-content {
  background-color: var(--papel-card);
  background-image: url('/boda-skin/textura.jpg?v=2');
  background-size: 840px auto;
  border: 1px solid var(--oro-suave);
  border-radius: var(--radio) !important;
  box-shadow: var(--sombra-3);
}

/* galería de recuerdos: fotos como piezas montadas */
.boda-item, .gallery-item {
  border-radius: var(--radio-sm);
  overflow: hidden;
  box-shadow: var(--sombra-1);
  transition: transform .28s var(--curva), box-shadow .28s var(--curva);
}
.boda-item:hover, .gallery-item:hover { transform: translateY(-3px) scale(1.01); box-shadow: var(--sombra-2); }

/* ---------- reveals de entrada (activados por boda.js) ---------- */
.boda-reveal { opacity: 0; transform: translateY(14px); }
.boda-reveal.boda-in {
  opacity: 1; transform: translateY(0);
  transition: opacity .6s var(--curva), transform .6s var(--curva);
}

@media (prefers-reduced-motion: reduce) {
  .boda-reveal { opacity: 1; transform: none; }
  .boda-drop, .boda-card-qr, .btn, .boda-item { transition: none !important; }
  .boda-drop:hover, .boda-card-qr:hover, .btn:hover, .boda-item:hover { transform: none; }
}

/* ---------- iconografía luxury monoline ---------- */
.navbar .profile-icon a {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--oro-suave);
  border-radius: 999px;
  background-color: var(--papel-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F463B' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.4' r='3.3'/%3E%3Cpath d='M5 19.4c1.4-3.5 4-5.2 7-5.2s5.6 1.7 7 5.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
  box-shadow: var(--sombra-1), inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .22s var(--curva), box-shadow .22s var(--curva);
}
.navbar .profile-icon a:hover {
  transform: translateY(-1px);
  box-shadow: var(--sombra-2), 0 0 0 1px rgba(185,156,95,.4);
}
.navbar .profile-icon a i { display: none; }

.navbar span[title="Change Identity"] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(185,156,95,.55);
  border-radius: 999px;
  background-color: var(--papel-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F463B' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='3.2' y='5.6' width='17.6' height='12.8' rx='2.4'/%3E%3Ccircle cx='8.6' cy='10.9' r='1.8'/%3E%3Cpath d='M5.9 15.4c.65-1.4 1.6-2.1 2.7-2.1s2.05.7 2.7 2.1'/%3E%3Cpath d='M14 9.7h4M14 12.4h4M14 15.1h2.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 21px 21px;
  box-shadow: var(--sombra-1), inset 0 1px 0 rgba(255,255,255,.65);
  cursor: pointer;
  vertical-align: middle;
  transition: transform .22s var(--curva), box-shadow .22s var(--curva);
}
.navbar span[title="Change Identity"]:hover {
  transform: translateY(-1px);
  box-shadow: var(--sombra-2), 0 0 0 1px rgba(185,156,95,.4);
}
.navbar span[title="Change Identity"] i.change-identity {
  opacity: 0; display: block; width: 100%; height: 100%;
}

/* íconos FA restantes (admin) armonizados */
.navbar i.fas { color: var(--oro) !important; }
.navbar .profile-icon a i.fas, .navbar span[title="Change Identity"] i.fas { color: transparent !important; }

/* cámara monoline en la tarjeta de subida */
.boda-drop .upload_svg { display: none; }
.boda-cam { width: 54px; height: 54px; display: block; margin: 0 auto .3rem; opacity: .92; }

/* luz interior superior: profundidad de papel */
.boda-drop { box-shadow: var(--sombra-2), inset 0 1px 0 rgba(255,255,255,.6); }
.boda-card-qr { box-shadow: var(--sombra-2), inset 0 1px 0 rgba(255,255,255,.6); }
.boda-stat { box-shadow: var(--sombra-1), inset 0 1px 0 rgba(255,255,255,.6); }

/* perfil: cubrir también el estado con sesión iniciada (el <i> puede venir sin ancla) */
.navbar .profile-icon a, .navbar .profile-icon i.fas {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--oro-suave);
  border-radius: 999px;
  background-color: var(--papel-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F463B' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.4' r='3.3'/%3E%3Cpath d='M5 19.4c1.4-3.5 4-5.2 7-5.2s5.6 1.7 7 5.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
  box-shadow: var(--sombra-1), inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .22s var(--curva), box-shadow .22s var(--curva);
  color: transparent !important;
  font-size: 0 !important;
  cursor: pointer;
}
.navbar .profile-icon i.fas::before { content: none !important; }
.navbar .profile-icon a i.fas { display: none !important; }
.navbar .profile-icon a:hover, .navbar .profile-icon i.fas:hover {
  transform: translateY(-1px);
  box-shadow: var(--sombra-2), 0 0 0 1px rgba(185,156,95,.4);
}

/* credencial: cazar por clase, el title del span cambia con la sesión */
.navbar span:has(> i.change-identity) {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(185,156,95,.55);
  border-radius: 999px;
  background-color: var(--papel-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F463B' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='3.2' y='5.6' width='17.6' height='12.8' rx='2.4'/%3E%3Ccircle cx='8.6' cy='10.9' r='1.8'/%3E%3Cpath d='M5.9 15.4c.65-1.4 1.6-2.1 2.7-2.1s2.05.7 2.7 2.1'/%3E%3Cpath d='M14 9.7h4M14 12.4h4M14 15.1h2.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 21px 21px;
  box-shadow: var(--sombra-1), inset 0 1px 0 rgba(255,255,255,.65);
  cursor: pointer;
  vertical-align: middle;
  transition: transform .22s var(--curva), box-shadow .22s var(--curva);
}
.navbar span:has(> i.change-identity):hover {
  transform: translateY(-1px);
  box-shadow: var(--sombra-2), 0 0 0 1px rgba(185,156,95,.4);
}
.navbar i.change-identity {
  opacity: 0 !important; display: block; width: 100%; height: 100%; margin: 0 !important;
}

/* credencial catch-all: la cápsula vive en el propio <i>, sin importar el wrapper */
.navbar i.fa-id-card {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(185,156,95,.55);
  border-radius: 999px;
  background-color: var(--papel-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F463B' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='3.2' y='5.6' width='17.6' height='12.8' rx='2.4'/%3E%3Ccircle cx='8.6' cy='10.9' r='1.8'/%3E%3Cpath d='M5.9 15.4c.65-1.4 1.6-2.1 2.7-2.1s2.05.7 2.7 2.1'/%3E%3Cpath d='M14 9.7h4M14 12.4h4M14 15.1h2.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 21px 21px;
  box-shadow: var(--sombra-1), inset 0 1px 0 rgba(255,255,255,.65);
  opacity: 1 !important;
  cursor: pointer;
  vertical-align: middle;
  transition: transform .22s var(--curva), box-shadow .22s var(--curva);
}
.navbar i.fa-id-card::before { content: none !important; }
.navbar i.fa-id-card:hover { transform: translateY(-1px); box-shadow: var(--sombra-2), 0 0 0 1px rgba(185,156,95,.4); }
/* el wrapper span pierde su cápsula si el <i> ya la trae */
.navbar span:has(> i.fa-id-card) { border: none; background: none; box-shadow: none; width: auto; height: auto; }

/* credencial: en el DOM vivo es un <img>; se sustituye el bitmap por el monoline */
.navbar .navbar-options img:not(.navbar-logo), .navbar .float-start img:not(.navbar-logo) {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F463B' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='3.2' y='5.6' width='17.6' height='12.8' rx='2.4'/%3E%3Ccircle cx='8.6' cy='10.9' r='1.8'/%3E%3Cpath d='M5.9 15.4c.65-1.4 1.6-2.1 2.7-2.1s2.05.7 2.7 2.1'/%3E%3Cpath d='M14 9.7h4M14 12.4h4M14 15.1h2.5'/%3E%3C/svg%3E");
  width: 42px; height: 42px;
  padding: 9px;
  box-sizing: border-box;
  border: 1px solid rgba(185,156,95,.55);
  border-radius: 999px;
  background-color: var(--papel-card);
  box-shadow: var(--sombra-1), inset 0 1px 0 rgba(255,255,255,.65);
  cursor: pointer;
  vertical-align: middle;
  transition: transform .22s var(--curva), box-shadow .22s var(--curva);
}
.navbar .navbar-options img:not(.navbar-logo):hover, .navbar .float-start img:not(.navbar-logo):hover {
  transform: translateY(-1px);
  box-shadow: var(--sombra-2), 0 0 0 1px rgba(185,156,95,.4);
}

/* FontAwesome i2svg convierte <i> en <svg class="svg-inline--fa">: el blanco real */
.navbar svg.change-identity {
  width: 42px !important; height: 42px !important;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid rgba(185,156,95,.55);
  border-radius: 999px;
  background-color: var(--papel-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F463B' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='3.2' y='5.6' width='17.6' height='12.8' rx='2.4'/%3E%3Ccircle cx='8.6' cy='10.9' r='1.8'/%3E%3Cpath d='M5.9 15.4c.65-1.4 1.6-2.1 2.7-2.1s2.05.7 2.7 2.1'/%3E%3Cpath d='M14 9.7h4M14 12.4h4M14 15.1h2.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 21px 21px;
  box-shadow: var(--sombra-1), inset 0 1px 0 rgba(255,255,255,.65);
  cursor: pointer;
  vertical-align: middle;
  transition: transform .22s var(--curva), box-shadow .22s var(--curva);
}
.navbar svg.change-identity path { display: none; }
.navbar svg.change-identity:hover { transform: translateY(-1px); box-shadow: var(--sombra-2), 0 0 0 1px rgba(185,156,95,.4); }

/* perfil con sesión iniciada: el fa-circle-user también se vuelve svg */
.navbar .profile-icon a svg { display: none !important; }
.navbar .profile-icon > svg.fa-circle-user, .navbar .profile-icon svg.fa-circle-user:not(a svg) {
  width: 46px !important; height: 46px !important;
  padding: 11px;
  box-sizing: border-box;
  border: 1px solid var(--oro-suave);
  border-radius: 999px;
  background-color: var(--papel-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F463B' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.4' r='3.3'/%3E%3Cpath d='M5 19.4c1.4-3.5 4-5.2 7-5.2s5.6 1.7 7 5.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
  box-shadow: var(--sombra-1), inset 0 1px 0 rgba(255,255,255,.65);
  cursor: pointer;
  transition: transform .22s var(--curva), box-shadow .22s var(--curva);
}
.navbar .profile-icon svg.fa-circle-user path { display: none; }


/* ---------- afinado mobile ---------- */
@media (max-width: 576px) {
  .file-uploader { padding-top: 1.5rem !important; padding-bottom: 1.3rem !important; }
  .boda-drop { padding: 1.7rem 1rem 1.5rem !important; border-radius: 16px !important; }
  .boda-drop::after { inset: 7px; }
  .boda-sello { width: 56px; }
  .boda-drop h2 { font-size: 1.9rem; }
  .boda-title { font-size: 2.3rem !important; }
  .navbar, .navbar a, .navbar span { font-size: 1.28rem; }
  .navbar-logo { height: 38px; }
  .navbar .profile-icon a, .navbar .profile-icon i.fas { width: 42px; height: 42px; }
  .navbar svg.change-identity { width: 40px !important; height: 40px !important; }
  .boda-stat { padding: .5rem 1.05rem .4rem; font-size: .68rem !important; border-radius: 12px; }
  .boda-stat span { font-size: 1.18rem; }
  .boda-card-qr { margin: 0 auto; }
  .boda-ornamento { margin-bottom: .8rem; }
  .btn:not(.btn-sm) { min-height: 44px; align-items: center; justify-content: center; }
}


/* ---------- muralla admin/invitado ---------- */
/* sin sesion: fuera el boton de perfil (JP entra por /Account/Login directo)
   y fuera el boton Ajustes de la galeria; el invitado solo ve lo suyo */
.boda-anon .navbar .profile-icon { display: none !important; }
.boda-anon .btnGallerySettings { display: none !important; }