/* ==========================================================================
   PANEL · PICOPICO STUDIOS
   ==========================================================================
   Claro, pero no blanco: el fondo es un gris cálido (#e9e7e3) para que las
   fotografías se lean bien encima sin el deslumbre del blanco puro, que a
   las dos horas de trabajo cansa. La barra superior va en el mismo negro
   verdoso del sitio (#101411), que es la firma de la casa, y el acento es
   el rojo señal #ff2e12 del sistema visual.

   Esta hoja NO comparte nada con global.css. El panel no puede romper el
   sitio ni el sitio puede descolocar el panel.
   ========================================================================== */

:root {
  --fondo: #e9e7e3;      /* el papel */
  --tarjeta: #f6f5f3;    /* superficies elevadas */
  --hueco: #dedbd6;      /* huecos y placeholders */
  --tinta: #16181a;
  --tinta-media: #5d605e;
  --tinta-baja: #8c8f8c;
  --filete: #d3d0ca;
  --filete-fuerte: #b9b5ae;
  --negro: #101411;      /* la barra superior, el negro del sitio */
  --signal: #ff2e12;     /* el acento del sistema visual */
  --signal-ink: #fff;
  --ok: #1c7f5b;
  --aviso: #a8630f;

  --font: 'Space Grotesk', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --r: 4px;
  --sombra: 0 1px 2px rgba(16, 20, 17, .06), 0 8px 24px rgba(16, 20, 17, .06);
  --barra-h: 58px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
.oculto { display: none !important; }

/* ---------------------------------------------------------------- Piezas */
.et {                      /* etiqueta pequeña en versalitas */
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-baja);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 34px;
  padding: 0 .9rem;
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--r);
  background: var(--tarjeta);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease;
}
.btn:hover { border-color: var(--tinta-media); }
.btn:disabled { opacity: .45; cursor: default; border-color: var(--filete); }
.btn svg { width: 15px; height: 15px; flex: none; }

.btn--fuerte { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.btn--fuerte:hover { background: #e5240a; border-color: #e5240a; }
.btn--plano { border-color: transparent; background: transparent; color: var(--tinta-media); }
.btn--plano:hover { background: rgba(16,20,17,.06); border-color: transparent; color: var(--tinta); }
.btn--peligro { color: #b3200a; border-color: #e0bcb4; background: #fbf1ef; }
.btn--peligro:hover { background: #f7e2de; border-color: #cf6a55; }
.btn--pequeno { height: 28px; padding: 0 .6rem; font-size: 11.5px; }

.campo { display: grid; gap: .4rem; margin-bottom: 1.4rem; }
.campo > label { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.campo .pista { font-size: 11.5px; color: var(--tinta-baja); line-height: 1.5; }
.campo input[type='text'],
.campo input[type='password'],
.campo input[type='date'],
.campo textarea,
.campo select {
  width: 100%;
  padding: .55rem .7rem;
  background: var(--tarjeta);
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--r);
  font-size: 13.5px;
}
.campo textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-color: var(--tinta);
  box-shadow: 0 0 0 3px rgba(16,20,17,.08);
}

.interruptor { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor__pista {
  width: 38px; height: 21px;
  border-radius: 999px;
  background: var(--filete-fuerte);
  position: relative;
  transition: background 160ms ease;
}
.interruptor__pista::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform 160ms ease;
}
.interruptor input:checked + .interruptor__pista { background: var(--ok); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(17px); }

.pastilla {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .18rem .5rem;
  border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.pastilla--vivo { background: #dff0e8; color: var(--ok); }
.pastilla--borrador { background: var(--hueco); color: var(--tinta-media); }
.pastilla--expirado { background: #f6e6cf; color: var(--aviso); }

/* --------------------------------------------------------------- Entrada */
.entrada {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: var(--negro);
}
.entrada__caja { width: min(330px, 100%); text-align: center; color: #f2f2f2; }
.entrada__candado {
  width: 42px; height: 42px;
  margin: 0 auto 1.6rem;
  display: grid; place-items: center;
  border: 1px solid #2a322c;
  color: #8d968f;
}
.entrada__caja h1 {
  font-size: 13px; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  margin-bottom: 2rem;
}
.entrada input {
  width: 100%;
  padding: .8rem 1rem;
  background: transparent;
  border: 1px solid #2a322c;
  border-radius: var(--r);
  color: #f2f2f2;
  text-align: center;
  letter-spacing: .08em;
}
.entrada input:focus { outline: none; border-color: #45504a; }
.entrada button {
  width: 100%; margin-top: .5rem;
  padding: .8rem 1rem;
  background: var(--signal); color: #fff;
  border-radius: var(--r);
  font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
.entrada__error { min-height: 1.5rem; margin-top: .9rem; color: #ff7a63; font-size: 12px; }

/* ------------------------------------------------------------ Estructura */
.tope {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1rem;
  height: var(--barra-h);
  padding: 0 clamp(.8rem, 2vw, 1.6rem);
  background: var(--negro);
  color: #f2f2f2;
}
.tope a, .tope .btn--plano { color: #c9cec9; }
.tope .btn--plano:hover { background: rgba(255,255,255,.08); color: #fff; }
.tope__marca { font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.tope__sep { width: 1px; height: 22px; background: #2a322c; }
.tope__titulo { font-size: 14px; font-weight: 600; }
.tope__sub { font-size: 11px; color: #8d968f; }
.tope__der { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

/* ------------------------------------------------------------- El espacio
   Cuánto llevas gastado de la nube, siempre a la vista en la barra de
   arriba. La barrita cambia de color sola: verde mientras vas holgado,
   ámbar al acercarte al aviso y rojo cuando ya te has pasado del regalo.
   Pulsarla abre el desglose sin salir de la pantalla. */
.espacio {
  display: flex;
  align-items: center;
  gap: .55rem;
  height: 34px;
  padding: 0 .75rem;
  border: 1px solid #2a322c;
  border-radius: var(--r);
  background: transparent;
  color: #c9cec9;
  font-size: 11.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
.espacio:hover { border-color: #46514a; color: #fff; }
.espacio__barra {
  position: relative;
  width: 74px;
  height: 5px;
  border-radius: 999px;
  background: #2a322c;
  overflow: hidden;
  flex: none;
}
.espacio__lleno {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--ok);
  transition: width 320ms ease, background 200ms ease;
}
.espacio[data-nivel='alto']   .espacio__lleno { background: #e0a020; }
.espacio[data-nivel='pasado'] .espacio__lleno { background: var(--signal); }
.espacio[data-nivel='pasado'] { border-color: var(--signal); color: #ffd9d2; }
.espacio__txt { font-variant-numeric: tabular-nums; }

/* La misma barra, grande, dentro de la ventanita del desglose. */
.espacio--grande {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  margin: .2rem 0 1.2rem;
  border: 0;
  cursor: default;
}
.espacio--grande .espacio__barra { width: 100%; height: 10px; background: var(--hueco); }
.espacio--grande:hover { border-color: transparent; }

/* En pantallas estrechas la barra se queda, pero sin el texto: lo que
   importa de un vistazo es el color y cuánto lleva llena. */
@media (max-width: 720px) {
  .espacio { padding: 0 .5rem; }
  .espacio__txt { display: none; }
  .espacio__barra { width: 52px; }
}

/* El desglose por colección */
.modal--ancho { width: min(560px, 100%); }
.desglose {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: .5rem;
  max-height: 46vh;
  overflow: auto;
}
.desglose li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 64px;
  align-items: center;
  gap: .7rem;
  font-size: 12.5px;
}
.desglose__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desglose__b { height: 6px; border-radius: 999px; background: var(--hueco); overflow: hidden; }
.desglose__b span { display: block; height: 100%; background: var(--tinta-media); border-radius: 999px; }
.desglose__v { text-align: right; color: var(--tinta-media); font-variant-numeric: tabular-nums; }
.espacio__aviso { color: #b3200a; font-size: 12px; min-height: 1em; }

.hoja { padding: clamp(1.2rem, 3vw, 2.4rem); max-width: 1560px; margin: 0 auto; }

.cabecera {
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.cabecera h2 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.cabecera__der { margin-left: auto; display: flex; gap: .5rem; }

.pestanas { display: flex; gap: .25rem; }
.pestanas button {
  padding: .45rem .9rem;
  border-radius: var(--r);
  font-size: 12.5px; font-weight: 500;
  color: var(--tinta-media);
}
.pestanas button[aria-selected='true'] { background: var(--tinta); color: var(--fondo); }
.pestanas button:hover[aria-selected='false'] { background: rgba(16,20,17,.07); }

.buscar {
  flex: 1 1 200px; max-width: 320px;
  padding: .45rem .7rem;
  background: var(--tarjeta);
  border: 1px solid var(--filete);
  border-radius: var(--r);
  font-size: 13px;
}
.buscar:focus { outline: none; border-color: var(--filete-fuerte); }

/* ------------------------------------------------------------- Tarjetas */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.tarjeta { display: block; text-align: left; }
.tarjeta__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--hueco);
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--filete);
}
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta:hover .tarjeta__foto { border-color: var(--filete-fuerte); }
.tarjeta__vacia { display: grid; place-items: center; height: 100%; color: var(--tinta-baja); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.tarjeta__estado { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; }
.tarjeta__nombre { margin-top: .7rem; font-size: 14.5px; font-weight: 600; }
.tarjeta__meta { margin-top: .15rem; font-size: 11.5px; color: var(--tinta-baja); display: flex; gap: .5rem; flex-wrap: wrap; }

.vacio {
  padding: 4rem 1rem;
  text-align: center;
  color: var(--tinta-baja);
  border: 1px dashed var(--filete-fuerte);
  border-radius: var(--r);
}
.vacio p { margin-bottom: 1rem; font-size: 13px; }

/* -------------------------------------------------------------- Editor */
.editor { display: grid; grid-template-columns: 268px 1fr; min-height: calc(100dvh - var(--barra-h)); }
@media (max-width: 860px) { .editor { grid-template-columns: 1fr; } }

.lateral { border-right: 1px solid var(--filete); background: var(--tarjeta); }
.lateral__portada { aspect-ratio: 16 / 10; background: var(--hueco); position: relative; overflow: hidden; }
.lateral__portada img { width: 100%; height: 100%; object-fit: cover; }
.lateral__portada span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-baja); }

.lateral__iconos { display: flex; border-bottom: 1px solid var(--filete); }
.lateral__iconos button {
  flex: 1;
  height: 46px;
  display: grid; place-items: center;
  color: var(--tinta-baja);
  border-bottom: 2px solid transparent;
}
.lateral__iconos button:hover { color: var(--tinta); }
.lateral__iconos button[aria-selected='true'] { color: var(--tinta); border-bottom-color: var(--signal); }
.lateral__iconos svg { width: 18px; height: 18px; }

.lateral__grupo { padding: 1rem 0 .5rem; }
.lateral__titulo { padding: 0 1rem .6rem; }
.lateral__item {
  width: 100%;
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 1rem;
  font-size: 13px;
  color: var(--tinta-media);
  text-align: left;
}
.lateral__item:hover { background: rgba(16,20,17,.05); color: var(--tinta); }
.lateral__item[aria-selected='true'] { background: var(--hueco); color: var(--tinta); font-weight: 600; }
.lateral__item svg { width: 16px; height: 16px; flex: none; }
.lateral__item .cuenta { margin-left: auto; font-size: 11px; color: var(--tinta-baja); }
.lateral__item .borrar { margin-left: auto; opacity: 0; color: var(--tinta-baja); }
.lateral__item:hover .borrar { opacity: 1; }
.lateral__item .borrar:hover { color: #b3200a; }

.lateral__nota { padding: 0 1rem; font-size: 11.5px; color: var(--tinta-baja); line-height: 1.6; }
.lateral__nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------ Favoritas: lista de gente */
/* La casilla se dibuja a mano (no es un <input>) porque la fila entera es el
   botón: pulsar en cualquier parte del renglón marca o desmarca la persona. */
.lateral__item--fav .casilla {
  width: 15px; height: 15px; flex: none;
  border: 1.5px solid var(--filete-fuerte);
  border-radius: 3px;
  position: relative;
}
.lateral__item--fav[aria-selected='true'] .casilla { background: var(--signal); border-color: var(--signal); }
.lateral__item--fav[aria-selected='true'] .casilla::after {
  content: '';
  position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
/* Copiar y borrar se ven SIEMPRE, no sólo al pasar el ratón: copiar los
   nombres de una persona es media razón de ser de esta pantalla, y un botón
   que hay que descubrir pasando por encima es un botón que no existe. */
.lateral__item--fav .fav-bts { display: flex; gap: 2px; margin-left: .25rem; }
.lateral__item--fav .fav-bts .borrar { margin-left: 0; opacity: .55; }
.lateral__item--fav:hover .fav-bts .borrar { opacity: 1; }
.lateral__item--fav .fav-bts .borrar:hover { color: var(--tinta); }
.lateral__item--fav .fav-bts [data-accion='fav-borrar']:hover { color: #b3200a; }
.lateral__item--fav .cuenta { margin-left: auto; }

.panelito { padding: clamp(1.2rem, 2.4vw, 2rem); }
.panelito__titulo { font-size: 20px; font-weight: 600; margin-bottom: 1.4rem; }
.panelito__seccion { max-width: 520px; }
.panelito__seccion + .panelito__seccion { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--filete); }

/* ------------------------------------------------- Fotos dentro del editor */
.zona {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.foto {
  position: relative;
  aspect-ratio: 1;
  background: var(--hueco);
  border-radius: var(--r);
  overflow: hidden;
  cursor: grab;
}
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto.arrastrando { opacity: .35; }
.foto.destino { outline: 2px solid var(--signal); outline-offset: 2px; }
.foto__barra {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 4px; justify-content: flex-end;
  padding: 6px;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  opacity: 0; transition: opacity 140ms ease;
}
.foto:hover .foto__barra, .foto:focus-within .foto__barra { opacity: 1; }
.foto__bt {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: #16181a;
}
.foto__bt:hover { background: #fff; }
.foto__bt svg { width: 14px; height: 14px; }
.foto__portada {
  position: absolute; left: 6px; top: 6px;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: var(--signal); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}

.soltar {
  display: grid; place-items: center;
  gap: .6rem;
  min-height: 150px;
  padding: 1.4rem;
  border: 1px dashed var(--filete-fuerte);
  border-radius: var(--r);
  color: var(--tinta-baja);
  text-align: center;
  font-size: 12.5px;
  transition: border-color 140ms ease, background 140ms ease;
}
.soltar.encima { border-color: var(--signal); background: rgba(255,46,18,.05); color: var(--tinta); }

.progreso { margin: 1rem 0; font-size: 12.5px; color: var(--tinta-media); }
.progreso__pista { height: 3px; margin-top: .5rem; background: var(--hueco); border-radius: 999px; overflow: hidden; }
.progreso__barra { height: 100%; background: var(--signal); width: 0; transition: width 200ms ease; }

/* -------------------------------------------- Favoritas: mandos y rejilla */
.fav-mandos {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.segmento { display: inline-flex; border: 1px solid var(--filete-fuerte); border-radius: var(--r); overflow: hidden; }
.segmento button {
  padding: .45rem .9rem;
  font-size: 12px;
  color: var(--tinta-media);
  white-space: nowrap;
}
.segmento button + button { border-left: 1px solid var(--filete-fuerte); }
.segmento button:hover { background: rgba(16,20,17,.05); color: var(--tinta); }
.segmento button[aria-pressed='true'] { background: var(--tinta); color: var(--fondo); }

.fav-resumen { margin-bottom: 1rem; font-size: 13px; color: var(--tinta-media); }

/* La foto marcada enseña su nombre de archivo debajo: es el dato que se copia,
   así que tiene que poder leerse sin pasar el ratón por encima. */
.zona--fav { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.foto--fav {
  aspect-ratio: auto;
  cursor: default;
  background: transparent;
  overflow: visible;
}
.foto--fav img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--hueco);
}
.fav-pie {
  padding: .45rem .15rem 0;
  font-size: 11.5px;
  color: var(--tinta-media);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fav-votos {
  position: absolute; left: 6px; top: 6px;
  padding: .15rem .4rem;
  border-radius: 999px;
  background: rgba(16,20,17,.78); color: #fff;
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
}

/* ---------------------------------------------------- Diseño: muestrarios */
.muestras { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; max-width: 420px; }
.muestra {
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--r);
  background: var(--tarjeta);
  overflow: hidden;
  text-align: center;
}
.muestra[aria-pressed='true'] { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
.muestra__lienzo { aspect-ratio: 3 / 2; position: relative; background: var(--hueco); display: grid; place-items: center; overflow: hidden; }
.muestra__pie { padding: .45rem; font-size: 11.5px; border-top: 1px solid var(--filete); }
.muestra__pie small { display: block; color: var(--tinta-baja); font-size: 10.5px; }
.muestra__bolas { display: flex; gap: 6px; }
.muestra__bola { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); }

/* Miniaturas esquemáticas de las portadas */
.mini-portada { width: 74%; aspect-ratio: 3/2; background: #b6b2ac; position: relative; display: grid; place-items: center; }
.mini-portada i { display: block; height: 5px; background: #fff; width: 42%; font-style: normal; }
.mini-portada.izq { place-items: end start; padding: 8px; }
.mini-portada.marco { width: 62%; box-shadow: 0 0 0 8px var(--tarjeta); }
.mini-portada.recuadro::before { content: ''; position: absolute; inset: 18%; border: 1px solid #fff; }
.mini-portada.ninguna { background: repeating-linear-gradient(45deg, #cfcbc5 0 6px, #c3bfb8 6px 12px); }

/* Vista previa */
.previa { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.previa__marco {
  border: 1px solid var(--filete);
  border-radius: var(--r);
  background: var(--tarjeta);
  overflow: hidden;
  height: min(70vh, 720px);
}
.previa__marco iframe { width: 100%; height: 100%; border: 0; display: block; }
.previa__marco[data-dispositivo='movil'] { width: 400px; max-width: 100%; margin: 0 auto; }
.previa__pies { display: flex; justify-content: center; gap: .35rem; }

/* -------------------------------------------------------------- Mensajes */
.aviso-linea {
  padding: .7rem .9rem;
  margin-bottom: 1.2rem;
  border-radius: var(--r);
  border: 1px solid var(--filete-fuerte);
  background: var(--tarjeta);
  font-size: 12.5px;
}
.aviso-linea--error { border-color: #e0bcb4; background: #fbf1ef; color: #8f1c08; }
.aviso-linea--ok { border-color: #b6ddc9; background: #eef7f2; color: var(--ok); }

.brindis {
  position: fixed; left: 50%; bottom: 24px; z-index: 90;
  transform: translate(-50%, 160%);
  padding: .7rem 1.1rem;
  border-radius: 999px;
  background: var(--negro); color: #f2f2f2;
  font-size: 12.5px;
  box-shadow: var(--sombra);
  transition: transform 260ms cubic-bezier(.22,1,.36,1);
  max-width: min(520px, 90vw);
  text-align: center;
}
.brindis.visible { transform: translate(-50%, 0); }

/* --------------------------------------------------------------- Modales */
.velo {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 1.5rem;
  background: rgba(16, 20, 17, .55);
  backdrop-filter: blur(3px);
}
.modal {
  width: min(420px, 100%);
  padding: 1.5rem;
  background: var(--fondo);
  border-radius: 6px;
  box-shadow: var(--sombra);
}
.modal h3 { font-size: 17px; font-weight: 600; margin-bottom: .4rem; }
.modal p { font-size: 12.5px; color: var(--tinta-media); margin-bottom: 1.2rem; line-height: 1.6; }
.modal__pie { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.2rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
}