/* ALEA JACTA EST */

.alea {
  margin:0;                   /* sin márgenes que rompan el cálculo */
  box-sizing:border-box;
  font-family: var(--title);
  font-size: 1.6em;
  text-transform: uppercase;
  background: var(--white);
  color: var(--antracita);
  border:.1em solid;
  line-height:1;
}

.alea, input[type=text].alea, input[type=number].alea {
  font-family: var(--title);
  font-size: 1.6em;
  text-transform: uppercase;
  background: var(--white);
  color: var(--antracita);
  border: .1em solid var(--antracita);
  margin: 0;
  vertical-align: middle;
  box-sizing: border-box;
  line-height: 1; 
}

#falea {
  display:flex;
  align-items:stretch;
  gap:.6rem;      
  flex-wrap: wrap;
  border: .2em solid var(--antracita);
  outline: 1em solid var(--beige);

  background: linear-gradient(to bottom,
    var(--cielo), var(--crema)
  );
  padding: 1.6em;
  margin-top: 2em;
  border-radius: .1em;
}

#falea h2 {
  width: 100%;
  margin: 0;
  text-align: center;;
}

#nalea {
  flex:0 0 4.5ch;             /* ~2–3 dígitos + spinners */
  text-align:center;
  padding:.2em 0;
}

#qalea {
  flex: 1 1 auto;              /* crece y se encoge para llenar */
  min-width: 0;                /* evita overflow en flex */
  width: auto;                 /* anula tu width previo */
  padding: .2em .4em;
}

#balea {
  width:100%;
  margin: 0;
}





/* Botón por defecto */

a.button {
  background-color: #8C2F39;
  color: #FFE9CE;
  border: 2px solid #C9A227;
  padding: 0.6em 1.2em;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}


/* Hover */

a.button:hover {
  /*background-color: #5D1A4A;   
  transform: translateY(-2px); */
}


/* Active (cuando se hace clic) */

a.button:active {
  background-color: #732C3E;   /* rojo vino más oscuro */
  transform: translateY(0);    /* vuelve al sitio */
}


/* CARTAS EN LA HOME */

a {
  word-break: break-all;       /* Rompe la palabra en cualquier punto si es muy larga */
  overflow-wrap: anywhere;     /* Alternativa moderna para navegadores nuevos */
  display: inline-block;       /* Para que funcione mejor con saltos */
  max-width: 100%;             /* Que no se desborde del contenedor */
}


.card-container {
  display:grid;
  gap:1em;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.card { text-align:center; box-sizing:border-box; }
.card img { width:100%; height:auto; display:block; }

.card p { 
  margin:0;
  font-size: .8em;
}



  /* Estado base (sin selección): limpio y visible */
  body:not(.has-selection) .card img { filter: none; opacity: 1; }

  /* === CARTAS === */
  .card {
    position: relative;
    cursor: pointer;
    user-select: none;
    overflow: visible;
    transition: box-shadow 200ms ease;
  }

  /* Enfoque por teclado */
  .card:focus-visible {
    outline: 3px solid #444;
    outline-offset: 2px;
  }

  /* Imagen con transición suave */
  .card img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 200ms ease, filter 200ms ease, box-shadow 200ms ease;
    will-change: transform, filter;
    transform-origin: center center;
    filter: none;
    opacity: 1;
  }

  .card.selected img {
    transform: scale(1.2);
    filter: brightness(1.05) contrast(1.05);
    position: relative;             /* para que el z-index surta efecto */
    z-index: 5;                     /* por encima de vecinas */
    box-shadow: 0 8px 20px rgba(0,0,0,.25); /* opcional */
  }

  .has-selection .card:not(.selected) img {
    filter: grayscale(80%) brightness(.8);
  }

  /* Respetar usuarios con “reducir animaciones” */
  @media (prefers-reduced-motion: reduce) {
    .card, .card img { transition: none; }
  }

  /* === DOCK DEL BOTÓN FLOTANTE (lo que ya usas) === */
  .sel-dock {
    position: fixed;
    right: 1rem; bottom: 1rem;
    z-index: 9999;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .sel-dock[hidden] { display: none !important; }
  .sel-dock-btn { box-shadow: 0 6px 16px rgba(0,0,0,.2); }
  .sel-dock-btn:empty { display: none !important; }



    .switch {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 26px;
      vertical-align: middle;
      margin-right: 8px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0;
      right: 0; bottom: 0;
      background-color: #ccc;
      transition: .3s;
      border-radius: 26px;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 20px; width: 20px;
      left: 3px; bottom: 3px;
      background-color: white;
      transition: .3s;
      border-radius: 50%;
    }

    input:checked + .slider {
      background-color: #C94C4C;
    }

    input:checked + .slider:before {
      transform: translateX(24px);
    }

    .switch-label {
      font-size: 14px;
      vertical-align: middle;
    }

    .btnplus {
      position: fixed;
      top: 50%;
      right: 2rem;
      transform: translateY(-50%);               /* centrado vertical */
      z-index: 99999;

      width: 3.5rem;
      height: 3.5rem;
      border-radius: 50%;

      padding: 0;
      border: none;
      background: var(--endrina);
      color: #fff;

      display: flex;
      align-items: center;
      justify-content: center;

      cursor: pointer;
      box-shadow: 0 6px 16px rgba(0,0,0,.2);
      transition: transform .15s ease, box-shadow .15s ease;
      /* opcional: mejora animación */
      will-change: transform;
    }

    .btnplus svg {
      width: 55%;
      height: 55%;
      display: block;
    }

    .btnplus:hover {
      transform: translateY(-50%) translateY(-1px) scale(1.03); /* conserva el centrado */
      box-shadow: 0 12px 24px rgba(0,0,0,.22), 0 8px 8px rgba(0,0,0,.14);
    }

    .btnplus:active {
      transform: translateY(-50%) scale(.98);    /* conserva el centrado */
    }

    .btnplus:disabled {
      opacity: .5;
      cursor: not-allowed;
      box-shadow: none;
    }

    .btnplus.busy {
      opacity: .6;
      pointer-events: none; /* evita más clics */
    }











  /* Si tu contenedor de cartas recorta, desbloquéalo */
  .card-container { overflow: visible; }












/* Responsivo */
@media (max-width:1200px){ .card-container{ grid-template-columns:repeat(6,1fr);} }
@media (max-width:992px) { .card-container{ grid-template-columns:repeat(5,1fr);} }
@media (max-width:768px) { .card-container{ grid-template-columns:repeat(4,1fr);} }
@media (max-width:600px) { .card-container{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:420px) { .card-container{ grid-template-columns:repeat(2,1fr);} }



/* CARTAS EN CARTA */

#tapiz {
  padding-top: 2em;
}

.cartas { display:flex; flex-wrap:wrap; justify-content:center; }
.carta { flex:0 0 33.333%; box-sizing:border-box; cursor:grab; }
.carimagen { width:100%; height:auto; }
.carta.dragging { opacity:.5; }
.carta:active, .carta.dragging { cursor:grabbing; }


.carnombre { margin:0; }

.toggle-content { display:none; }

.toggle-title { cursor:pointer; }

.image-checkbox { cursor:pointer; }

.checkbox-button { 
  transition:background-color .3s, transform .3s; 
  font-size: .9em; 
  display: inline-block; 
  background-color: #e0e0e0;
  color: #333; 
}

.checkbox-button.active {
  /*background-color: #1976d2;
  color: #fff;*/
  background: var(--melocoton);
  color: var(--ciruela);
  border: 1px solid var(--ocre);

  background: var(--terracota); color: #fff; border-color: transparent;
}

.checkbox-button:hover {
  background: #FFC98C;
}

input[type="checkbox"]:checked + .checkbox-button { transform:scale(1.05); }

.checkbox-button.active { transform:scale(1.05); }

.galeria { display:flex; flex-wrap:wrap; gap:.4em; margin:1rem 0 1.5rem 0; }
.galeria img { width: 16em; aspect-ratio:1/1; object-fit:cover; display:block;border-radius:.4em; }

.imgfull:fullscreen {
  object-fit: contain;   /* ajusta sin recortar */
  width: 100%;
  height: 100%;
  background: #000;      /* opcional: fondo negro */
}

/*
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

nav ul li {
  margin: 0 10px;
}

nav ul li a {
  text-decoration: none;
  color: var(--antracita);
}

nav ul li a:hover {
  border-bottom: .2em solid var(--antracita);
}

*/

#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(255, 233, 206, .96);
  background: rgba(0, 0, 0, .9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#lightbox.open { display: flex; }

#lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 1em;
}

#lightbox .hit {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33%;
  cursor: pointer;
  z-index: 1;            /* debajo de la X */
}
#lightbox .left { left: 0; }
#lightbox .right { right: 0; }

#lightbox .close {
  position: absolute;
  top: 8px;
  right: 12px;
  font: 700 28px/1 system-ui;
  color: #5D1A4A;
  cursor: pointer;
  z-index: 2;            /* por encima de todo */
}

/* Botón de cerrar con estilo btnplus */
#lightbox .close.btnplus {
  position: absolute;
  top: 1rem;
  right: 2rem;
  bottom: auto;
  transform: none;
  font: 700 1.4rem/1 system-ui;
  color: #fff;
  z-index: 2;
}
#lightbox .close.btnplus:hover,
#lightbox .close.btnplus:active {
  transform: scale(1.08);
}

body.noscroll { overflow: hidden; }

/* Botones redondos abajo-derecha (lightbox "?" y back "←") */
#lightbox .btnplus.lb-link,
.btnplus.back-btn {
  top: auto;
  bottom: 1rem;
  right: 2rem;
  transform: none;
  text-decoration: none;
  font: 700 1.4rem/1 system-ui;
  color: #fff;
}
#lightbox .btnplus.lb-link {
  position: absolute;
  z-index: 2;
}
#lightbox .btnplus.lb-link:hover,
#lightbox .btnplus.lb-link:active,
.btnplus.back-btn:hover,
.btnplus.back-btn:active {
  transform: scale(1.08);
}
.btnplus.back-btn:visited {
  color: #fff;
}






/* Ajuste de posición para el botón de compartir */
.btnplus.btnshare {
  top: calc(50% + 4.5rem); /* posiciona debajo del btnplus de añadir carta */
}

/* Lightbox de compartir */
.share-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 100000;
  align-items: center;
  justify-content: center;
}

.share-lightbox.open {
  display: flex;
}

.share-dialog {
  background: white;
  padding: 2em;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  position: relative;
}

.share-dialog h2 {
  margin-top: 0;
  margin-bottom: 1em;
}

.share-dialog .close {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  font-size: 2em;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
  color: #666;
}

.share-dialog .close:hover {
  color: #000;
}

.share-dialog input[type="email"] {
  width: 100%;
  padding: 0.8em;
  margin-bottom: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
  box-sizing: border-box;
}

.share-dialog .button-group {
  display: flex;
  gap: 1em;
  justify-content: flex-end;
}

.share-dialog button[type="submit"] {
  padding: 0.8em 1.5em;
  background: var(--endrina);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
}

.share-dialog button[type="submit"]:hover {
  opacity: 0.9;
}

.share-dialog button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.share-msg {
  padding: 0.8em;
  margin-bottom: 1em;
  border-radius: 4px;
  display: none;
}

.share-msg.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.share-msg.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.share-msg.show {
  display: block;
}

.share-disclaimer {
  padding: 0.8em;
  margin-bottom: 1em;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  color: #856404;
  font-size: 0.9em;
  line-height: 1.4;
}










/* Ajuste de posición para botón compartir/guardar */
.btnplus.btnshare,
.btnplus.btnsave {
  top: calc(50% + 4.5rem);
}

.btnplus.btnsave:disabled {
  background: #4caf50;
  cursor: default;
}

/* Estilos del lightbox de compartir (ya los tienes, solo verifica) */
.share-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 100000;
  align-items: center;
  justify-content: center;
}

.share-lightbox.open {
  display: flex;
}

.share-dialog {
  background: white;
  padding: 2em;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  position: relative;
}

.share-dialog h2 {
  margin-top: 0;
  margin-bottom: 1em;
}

.share-dialog .close {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  font-size: 2em;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
  color: #666;
}

.share-dialog .close:hover {
  color: #000;
}

.share-dialog input[type="email"] {
  width: 100%;
  padding: 0.8em;
  margin-bottom: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
  box-sizing: border-box;
}

.share-dialog .button-group {
  display: flex;
  gap: 1em;
  justify-content: flex-end;
}

.share-dialog button[type="submit"] {
  padding: 0.8em 1.5em;
  background: var(--endrina);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
}

.share-dialog button[type="submit"]:hover {
  opacity: 0.9;
}

.share-dialog button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.share-msg {
  padding: 0.8em;
  margin-bottom: 1em;
  border-radius: 4px;
  display: none;
}

.share-msg.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.share-msg.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.share-msg.show {
  display: block;
}






#editor {background: white}




.page-arrow {
  position:fixed; top:50%; transform:translateY(-50%);
  font:700 38px/1 system-ui; text-decoration:none;
  color:#5D1A4A;
  padding:.25em .4em; z-index:200;
  user-select:none;
}
.page-arrow.left{  left:.5rem; }
.page-arrow.right{ right:.5rem; }
.page-arrow:hover{ filter:contrast(1.2); }

/* Mobile: btnplus transparentes (solo icono, como las flechas) */
@media (max-width: 600px) {

  .sel-dock { right: 50%; transform: translateX(50%); bottom: .8rem; }

  .btnplus, #lightbox .btnplus.lb-link {
    background: transparent;
    color: #5D1A4A;
    width: 2.8rem;
    height: 2.8rem;
  }
  .btnplus svg {
    stroke: #5D1A4A;
  }
  .btnplus:hover,
  .btnplus:active {
    background: transparent;
  }
  #lightbox .close.btnplus {
    color: #5D1A4A;
  }
}



/* para el sistema de sugerencias de etiquetas */

.tags-input {
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:.4em;
  padding:.4em;
  background:#fff
}

.chips {display:flex;flex-wrap:wrap;gap:.4em;margin:0;padding:0;list-style:none}

.chips li, .sug {
  background:#5D1A4A;
  color:#fff;
  padding:.2em .5em .3em;
  display:flex;
  align-items:center;
  gap:.3em;
  font-family: var(--title);
  text-transform: uppercase;
}

.chips li.new {
  background: #7A2D6766;
  color: black;
}

#sug div.sel { background: rgba(255,255,255,.1); }

.blkwhite {
  background: white;
}

.chips button{border:0;background:transparent;color:#fff;cursor:pointer;font-weight:700}

#tagInput{
  flex:1 1 160px;
  border:0;
  outline:0;
  min-width:120px;
  background-color: transparent;
  margin: .6em 0 .3em;
  padding: 0 0 0 .4em;
}

.sug {
  position: absolute;
  left:.4em;
  right:.4em;
  top:100%;
  z-index: 20;
  color: white;
  
  margin-top:.25em;
  display: none;
  max-height: 220px;
  width: fit-content;
  overflow: auto;
  padding: 0;
  background:#5D1A4A
}

.sug.open {
  display: block
}

.sug div {
  padding:.4em .6em;
  cursor:pointer
}


/* Tooltip de carta */
.card-tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  border-radius: 10px;
  padding: 6px;
  max-width: 280px;     /* ajusta a tu gusto */
  max-height: 360px;    /* ajusta a tu gusto */
  display: none;
}
.card-tooltip img {
  display: block;
  max-width: 100%;
  max-height: 340px;
  height: auto;
  border-radius: 6px;
}

/* Tags desplegables en spread */
.spread-tags {
  margin: 1em 0;
}
.spread-tags summary {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  cursor: pointer;
  font-size: .85em;
  opacity: .6;
  user-select: none;
  list-style: none;
}
.spread-tags summary:hover { opacity: .9; }
.spread-tags summary::-webkit-details-marker { display: none; }
.spread-tags summary::before {
  content: '▸';
  display: inline-block;
  width: .8em;
  font-size: .8em;
  transition: transform .18s ease;
}
.spread-tags[open] summary::before {
  transform: rotate(90deg);
}
.spread-tags-list {
  margin-top: .6em;
}