/* Páginas de cuenta: registro, acceso, perfil y confirmación de correo.
   Hoja aparte y pequeña: solo la cargan estas cuatro páginas, así que no engorda
   site.css ni el pintado del resto del portal. */

.cuenta-section {
  padding-block: clamp(32px, 6vw, 72px);
}

.cuenta-shell {
  max-width: 34rem;
}

/* ── Marco de «mi cuenta»: menú a la izquierda, contenido a la derecha ─────────── */

.cuenta-marco {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 3vw, 40px);
  /* Ancho de verdad en escritorio: antes toda la cuenta era una columna de 34rem
     aunque la pantalla tuviera 1600 píxeles. */
  max-width: 76rem;
}

.cuenta-menu {
  position: sticky;
  top: 90px;                 /* por debajo de la cabecera fija */
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(20, 20, 23, 0.92);
}

.cuenta-menu__volver {
  padding: 6px 10px;
  border-radius: 8px;
  color: #c9ccd2;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.cuenta-menu__volver:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.cuenta-menu__lista {
  display: grid;
  gap: 2px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 10px;
}

.cuenta-menu__seccion {
  padding: 14px 10px 4px;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 8px;
  list-style: none;
}

.cuenta-menu__seccion:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 4px;
}

.cuenta-menu__enlace {
  display: block;
  min-height: 44px;          /* se pulsa con el dedo */
  padding: 11px 10px;
  border-radius: 9px;
  color: #c9ccd2;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}

.cuenta-menu__enlace:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.cuenta-menu__enlace.is-active {
  background: #d7172f;
  color: #ffffff;
}

.cuenta-menu__enlace:focus-visible,
.cuenta-menu__volver:focus-visible {
  outline: 3px solid #fabd00;
  outline-offset: 2px;
}

.cuenta-menu__guardar {
  margin-top: 14px;
  width: 100%;
  background: #a62024;
  color: #ffffff;
  border: 1px solid #8e1b1f;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  transition: background 0.15s ease, transform 0.1s ease;
}

.cuenta-menu__guardar:hover:not(:disabled) {
  background: #bd272c;
  transform: translateY(-1px);
}

.cuenta-menu__guardar:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.cuenta-menu__salir {
  margin-top: 10px;
  width: 100%;
}

.cuenta-panel {
  min-width: 0;
}

.cuenta-panel > h1 {
  margin-top: 0;
}

@media (max-width: 900px) {
  /* En pantalla estrecha el menú se pone arriba, en una fila que se desliza. */
  .cuenta-marco { grid-template-columns: 1fr; }
  .cuenta-menu {
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    overflow-x: auto;
    padding: 10px 12px;
  }
  .cuenta-menu__seccion {
    display: none !important;
  }
  .cuenta-menu__lista {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .cuenta-menu__enlace { white-space: nowrap; }
  .cuenta-menu__guardar { width: auto; margin: 0; white-space: nowrap; }
  .cuenta-menu__salir { width: auto; margin: 0; }
}

/* ── Banner de bienvenida en primer acceso y perfil incompleto ────────────── */

.cuenta-bienvenida-banner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(215, 23, 47, 0.12) 0%, rgba(250, 189, 0, 0.08) 100%);
  border: 1px solid rgba(215, 23, 47, 0.3);
  border-radius: 14px;
  color: #f2f3f5;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.cuenta-bienvenida-banner[hidden] {
  display: none !important;
}

.cuenta-bienvenida-banner__icono {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #d7172f;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cuenta-bienvenida-banner__icono svg {
  width: 22px;
  height: 22px;
}

.cuenta-bienvenida-banner__cuerpo {
  flex: 1;
  min-width: 0;
}

.cuenta-bienvenida-banner__titulo {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.cuenta-bienvenida-banner__texto {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #d1d5db;
}

.cuenta-bienvenida-banner--completado {
  background: linear-gradient(135deg, rgba(46, 125, 50, 0.15) 0%, rgba(30, 70, 32, 0.1) 100%);
  border-color: rgba(76, 175, 80, 0.4);
}

.cuenta-bienvenida-banner--completado .cuenta-bienvenida-banner__icono {
  background: #2e7d32;
}

.cuenta-campo--destacado {
  border-color: #d7172f !important;
  box-shadow: 0 0 0 3px rgba(215, 23, 47, 0.35) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ── Rejilla de «mis fotos y vídeos» ──────────────────────────────────────────── */

.subidas-barra {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.subidas-barra .search-field {
  display: grid;
  gap: 4px;
  color: #c9ccd2;
  font-size: 0.8rem;
  font-weight: 700;
}

.subidas-barra select {
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  background: #17171a;
  color: #f2f3f5;
  color-scheme: dark;
  font: inherit;
  font-weight: 400;
}

.subidas-total {
  margin-left: auto;
  color: #9aa0a9;
  font-size: 0.84rem;
}

.subidas-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 14px;
}

.subidas-paginas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
  color: #c9ccd2;
  font-size: 0.88rem;
}

.subidas-paginas .cuenta-boton[disabled] {
  opacity: 0.4;
  cursor: default;
}

.cuenta-shell h1,
.cuenta-panel h1 {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  letter-spacing: -0.02em;
}

/* Estos dos van directamente sobre el fondo casi negro del portal, no dentro de
   una tarjeta blanca: con el gris oscuro se quedaban en 2,47:1 de contraste y hace
   falta 4,5:1. */
.cuenta-intro {
  margin: 0 0 24px;
  color: #c9ccd2;
  line-height: 1.6;
}

.cuenta-form {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.25rem);
  padding: 24px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 16px;
  background: #ffffff;
  color: #141417;
}

.cuenta-seccion-card {
  margin: 0;
}

.cuenta-form legend {
  font-size: 1.02rem;
  font-weight: 700;
  color: #111827;
}

.cuenta-foto-picker-standalone {
  display: grid;
  gap: 6px;
}

.cuenta-foto-rotulo {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #141417;
}

.cuenta-form label {
  display: grid;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #22262d;
}

/* El portal declara <meta name="color-scheme" content="dark">, así que el navegador
   pinta el texto de los campos en blanco por su cuenta. Con la caja también blanca,
   lo escrito no se veía: no había forma de comprobar si te habías equivocado.
   Se fija el color a mano y se declara esquema claro solo para estos campos. */
.cuenta-form input[type="email"],
.cuenta-form input[type="password"],
.cuenta-form input[type="tel"],
.cuenta-form input[type="text"] {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(17, 24, 39, 0.18);
  border-radius: 10px;
  background: #ffffff;
  color: #141417;
  color-scheme: light;
  font: inherit;
  font-weight: 400;
}

.cuenta-form input::placeholder {
  color: #6d717a;
  opacity: 1;
}

.cuenta-input-con-prefijo {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.cuenta-input-prefijo {
  position: absolute;
  left: 14px;
  color: #71757e;
  font-weight: 700;
  font-size: 1.05rem;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

.cuenta-input-con-prefijo input {
  padding-left: 32px !important;
}

/* Al autocompletar, Chrome y Safari imponen su propio fondo y su propio color de
   texto, y volvía a quedar ilegible. El fondo solo se les puede cambiar con una
   sombra interior; el color del texto, con -webkit-text-fill-color. */
.cuenta-form input:-webkit-autofill,
.cuenta-form input:-webkit-autofill:hover,
.cuenta-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #141417;
  -webkit-box-shadow: 0 0 0 40px #ffffff inset;
  box-shadow: 0 0 0 40px #ffffff inset;
  caret-color: #141417;
}

.cuenta-form input:focus-visible {
  outline: 3px solid rgba(250, 189, 0, 0.85);
  outline-offset: 2px;
}

.cuenta-ayuda {
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.45;
  color: #6d717a;
}

/* La casilla y su texto en dos columnas: el texto no se mete debajo de la casilla
   aunque ocupe tres líneas. */
.cuenta-check {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  font-weight: 400;
  line-height: 1.5;
}

.cuenta-check input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
}

.cuenta-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid rgba(215, 23, 47, 0.28);
  border-radius: 12px;
  background: #d7172f;
  color: #ffffff;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease;
}

.cuenta-boton:hover {
  background: #9e1021;
}

.cuenta-boton--suave {
  border-color: rgba(212, 160, 23, 0.55);
  background: #fdf3d2;
  color: #7a5a00;
}

.cuenta-boton--suave:hover {
  background: #fbe6a4;
}

.cuenta-mensaje {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(215, 23, 47, 0.3);
  background: #fdeaec;
  color: #9e1021;
  font-size: 0.88rem;
  line-height: 1.5;
}

.cuenta-mensaje[data-tipo="bien"] {
  border-color: rgba(22, 135, 74, 0.3);
  background: #e8f6ee;
  color: #0f6136;
}

.cuenta-mensaje[data-tipo="aviso"] {
  border-color: rgba(163, 99, 5, 0.3);
  background: #fdf3d2;
  color: #7a5a00;
}

.cuenta-hecho,
.cuenta-aviso,
.cuenta-perfil {
  margin-top: 20px;
  padding: 20px 22px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 16px;
  background: #f6f6f8;
}

/* El color va explícito: estas cajas son claras y el titular heredaba el color
   del texto del portal, que es casi blanco. «Solicitud enviada» salía blanco
   sobre blanco y no lo ha leído nadie nunca. */
.cuenta-hecho h2,
.cuenta-aviso h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  color: #141417;
}

.cuenta-hecho p,
.cuenta-aviso p {
  margin: 0 0 12px;
  line-height: 1.6;
  color: #4a4f57;
}

.cuenta-detalle {
  margin-top: 18px;
}

.cuenta-detalle summary {
  padding: 10px 0;
  cursor: pointer;
  font-weight: 700;
  color: #22262d;
}

.cuenta-detalle .cuenta-form {
  margin-top: 10px;
}

.cuenta-datos {
  display: grid;
  gap: 14px;
  margin: 0 0 20px;
}

.cuenta-datos dt {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6d717a;
}

.cuenta-datos dd {
  margin: 4px 0 0;
  font-size: 1rem;
  color: #141417;
}

.cuenta-pie {
  margin-top: 20px;
  color: #c9ccd2;
}

/* Aviso de «esta ficha puede ser tuya» en la página pública del fotógrafo. Va sobre
   el fondo oscuro del portal, así que la tarjeta es clara y el texto oscuro. */
.reclamar-ficha {
  max-width: 46rem;
  padding: 22px 24px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 16px;
  background: #ffffff;
}

.reclamar-ficha h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  color: #141417;
}

.reclamar-ficha p {
  margin: 0 0 16px;
  color: #3a3f47;
  line-height: 1.6;
}

/* La ficha del fotógrafo tiene muchos campos: se le deja más ancho que al resto de
   páginas de cuenta, que son formularios de cuatro líneas. */
.cuenta-shell--ancha {
  max-width: 46rem;
}

.cuenta-redes {
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(17, 24, 39, 0.14);
  border-radius: 12px;
}

.cuenta-redes legend {
  padding: 0 6px;
  font-size: 0.86rem;
  font-weight: 800;
  color: #22262d;
}

.cuenta-red {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 8px;
  margin-bottom: 10px;
}

.cuenta-red input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(17, 24, 39, 0.18);
  border-radius: 10px;
  background: #ffffff;
  color: #141417;
  color-scheme: light;
  font: inherit;
  font-weight: 400;
}

.cuenta-red .cuenta-boton {
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.82rem;
}

@media (max-width: 640px) {
  .cuenta-red {
    grid-template-columns: 1fr;
  }
}

/* Textareas: la regla de los campos de texto no las cubría y salían con el color
   del navegador, que en esquema oscuro es blanco sobre blanco. */
.cuenta-form textarea,
.cuenta-form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(17, 24, 39, 0.18);
  border-radius: 10px;
  background: #ffffff;
  color: #141417;
  color-scheme: light;
  font: inherit;
  font-weight: 400;
  line-height: 1.5;
}

/* Subir fotos: navegador de carpetas, miniaturas y lo que ya se ha subido. */

/* Navegador de carpetas: comunidad › provincia › ciudad › hermandad.
   Es el mismo de Multimedia en el panel —misma cuadrícula, mismo icono de carpeta y
   mismos colores— porque es la misma tarea y no hay por qué aprenderla dos veces. */
.carpetas {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 16px;
  background: #f6f6f8;
}

.carpetas__ruta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.9rem;
}

.carpetas__ruta strong { color: #141417; }
.carpetas__separador { color: #8a8e96; }

.carpetas__atras {
  padding: 3px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #9e1021;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.carpetas__atras:hover { background: rgba(17, 24, 39, 0.05); }

.carpetas__atras:focus-visible,
.carpetas__carpeta:focus-visible,
.carpetas__ficha:focus-visible {
  outline: 3px solid #141417;
  outline-offset: 2px;
}

.carpetas__filtro input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(17, 24, 39, 0.2);
  border-radius: 9px;
  background: #ffffff;
  color: #141417;
  font: inherit;
}

.carpetas__lista {
  display: grid;
  /* 110px de mínimo para que en un móvil entren dos por fila: con una sola se pasa el
     rato bajando y la carpeta deja de parecer una carpeta. */
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  align-content: start;
  gap: 14px;
  /* Altura fija: si no, con cien pueblos el botón de subir se va a tomar viento. */
  max-height: 420px;
  overflow-y: auto;
  padding: 4px;
}

/* La tarjeta es la del panel: icono grande arriba, nombre debajo, sin caja. */
.carpetas__carpeta,
.carpetas__ficha {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  padding: 10px 6px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #141417;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.carpetas__carpeta:hover,
.carpetas__ficha:hover {
  background: rgba(17, 24, 39, 0.05);
}

.carpetas__marco {
  display: grid;
  place-items: center;
  width: 100%;
  height: 84px;
}

.mac-folder-icon {
  flex: none;
  /* El SVG viene con alto fijo; así encoge con la tarjeta en vez de desbordarla. */
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 1px 1px rgba(17, 24, 39, 0.12));
}

/* Las hermandades no son carpetas: se dibujan como una hoja con la esquina doblada,
   para que quede claro que ahí termina el camino y eso es lo que se elige. */
.mac-file-icon {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 1px 2px rgba(17, 24, 39, 0.18));
}

.carpetas__nombre {
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.carpetas__cuantas {
  color: #6b7078;
  font-size: 0.72rem;
}

.carpetas__ficha[aria-selected="true"] {
  border-color: #c8102e;
  background: rgba(200, 16, 46, 0.08);
}

.carpetas__ficha[aria-selected="true"] .mac-file-icon {
  filter: drop-shadow(0 2px 5px rgba(200, 16, 46, 0.4));
}

.carpetas__ficha[aria-selected="true"] .carpetas__nombre { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .carpetas__carpeta,
  .carpetas__ficha { transition: none; }
}

/* Miniaturas de lo que se va a subir, antes de mandarlo. */
.subir-miniaturas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}

.subir-miniatura {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.16);
  border-radius: 10px;
  background: #f6f6f8;
}

.subir-miniatura--error {
  border-color: #dc2626;
  box-shadow: 0 0 0 1px #dc2626;
}

.subir-miniatura__duracion {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.78);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.subir-miniatura__duracion--exceso {
  background: #dc2626;
  color: #ffffff;
}

.subir-miniatura img,
.subir-miniatura video {
  display: block;
  width: 100%;
  height: 96px;
  object-fit: cover;
  background: #111113;
}

/* Cada cosa que ha subido este fotógrafo: verla, etiquetarla y retirarla. */
.subida {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 14px;
  background: #ffffff;
}

.subida__marco {
  overflow: hidden;
  border-radius: 10px;
  background: #f1f1f3;
}

.subida__marco img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}

/* El vídeo se ve como se ve la foto: mismo alto y mismo recorte, para que la
   rejilla no baile según lo que haya subido cada uno. */
.subida__marco video {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: #0b0b0d;
}

/* Y con su triángulo encima, que si no parece una foto que no se abre. */
.subida__marco--video {
  position: relative;
}

.subida__marco--video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 20px no-repeat;
  pointer-events: none;
}

.subida__marco--sin-foto {
  display: grid;
  place-items: center;
  height: 160px;
  color: rgba(17, 24, 39, 0.5);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.subida__cuerpo {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.subida__nombre {
  color: #141417;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.subida__donde { color: #4a4f57; font-size: 0.84rem; }

.subida__etiqueta {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #22262d;
}

.subida__etiqueta input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(17, 24, 39, 0.18);
  border-radius: 10px;
  background: #ffffff;
  color: #141417;
  color-scheme: light;
  font: inherit;
  font-weight: 400;
}

.subida__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.subida__acciones .cuenta-boton {
  min-height: 42px;
  padding: 0 14px;
  font-size: 0.82rem;
}

/* Retirar una foto no se deshace: el botón se ve, pero no compite con el de guardar. */
.cuenta-boton--peligro {
  border-color: rgba(158, 16, 33, 0.35);
  background: #ffffff;
  color: #9e1021;
}

.cuenta-boton--peligro:hover {
  background: #fdeaec;
}



.subir-miniatura figcaption {
  padding: 6px 8px;
  color: #3a3f47;
  font-size: 0.72rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.subir-vacio,
.subir-elegida {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f6f6f8;
  color: #3a3f47;
  font-size: 0.88rem;
}

.subir-elegida {
  background: #e8f6ee;
  color: #0f6136;
  font-weight: 700;
}

.cuenta-form input[type="file"] {
  width: 100%;
  padding: 10px;
  border: 1px dashed rgba(17, 24, 39, 0.3);
  border-radius: 10px;
  background: #fafafb;
  color: #141417;
  color-scheme: light;
  font: inherit;
  font-weight: 400;
}

/* Historial: va sobre el fondo oscuro del portal, así que cada fila es una tarjeta. */
[data-subir-historial] h2 {
  margin: 32px 0 12px;
  font-size: 1.15rem;
  color: #f7f7f8;
}

.subir-fila {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 10px;
  background: #ffffff;
  color: #141417;
  margin-bottom: 8px;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.subir-estado {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
  white-space: nowrap;
}

.subir-estado--pendiente { background: #fdf3d2; color: #7a5a00; }
.subir-estado--aprobada  { background: #e8f6ee; color: #0f6136; }
.subir-estado--rechazada { background: #fdeaec; color: #9e1021; }

.subir-nota {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: #4a4f57;
}

@media (max-width: 640px) {
  .subir-fila { grid-template-columns: 1fr; }
}

/* ── Panel de «Mi cuenta» y preferencias ──────────────────────────────────────── */

.panel-bloque {
  margin-top: clamp(1.75rem, 3.5vw, 2.25rem);
}

.panel-bloque + .panel-bloque {
  margin-top: clamp(2rem, 4vw, 2.5rem);
}

.panel-bloque h2 {
  margin: 0 0 6px;
  font-size: 1.2rem;
}

.panel-bloque h3 {
  margin: 26px 0 12px;
  font-size: 1rem;
  color: #c9ccd2;
}

.panel-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.panel-dato {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(20, 20, 23, 0.92);
  color: #c9ccd2;
  text-decoration: none;
}

a.panel-dato:hover {
  border-color: rgba(215, 23, 47, 0.5);
}

.panel-dato strong {
  color: #f7f7f8;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
}

.panel-dato span { font-size: 0.86rem; line-height: 1.35; }

/* Lo que aún no existe se ve apagado y lo dice: no puede confundirse con un dato. */
.panel-dato--pendiente { border-style: dashed; }
.panel-dato--pendiente strong { color: #6d717a; }
.panel-dato--pendiente em {
  color: #8a8e96;
  font-size: 0.74rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mensajes { display: grid; gap: 12px; }

.mensaje {
  padding: 16px 18px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 14px;
  background: #ffffff;
}

.mensaje header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.mensaje header strong { color: #141417; }
.mensaje__fecha { margin-left: auto; color: #6d717a; font-size: 0.8rem; }

.mensaje__cuerpo {
  margin: 0;
  color: #3a3f47;
  line-height: 1.6;
  /* Se guardó tal cual lo escribieron: los saltos de línea se respetan. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mensaje__respuesta {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid #d7172f;
  border-radius: 0 10px 10px 0;
  background: #f6f6f8;
}

.mensaje__respuesta strong {
  display: block;
  margin-bottom: 4px;
  color: #9e1021;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mensaje__respuesta p {
  margin: 0;
  color: #3a3f47;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mensaje__espera {
  margin: 10px 0 0;
  color: #7a5a00;
  font-size: 0.84rem;
}

.cuenta-form textarea {
  min-height: 120px;
  resize: vertical;
}

/* Los datos de la cuenta van sobre el fondo oscuro del portal, no dentro de un
   formulario: sin tarjeta clara, el texto quedaba negro sobre negro. */
.cuenta-datos--tarjeta {
  padding: 20px 22px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 16px;
  background: #ffffff;
}

/* ── Campos de contraseña: verla y generar una fuerte ─────────────────────────── */

.clave-caja {
  position: relative;
  display: block;
}

/* Hueco a la derecha para los botones, para que no tapen lo que se escribe. */
.clave-caja input {
  padding-right: 88px;
}

.clave-caja:has(> .clave-boton:only-of-type) input {
  padding-right: 50px;
}

.clave-boton {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  /* 40px de lado: se pulsa con el dedo sin apretar los ojos. */
  width: 40px;
  height: 40px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 9px;
  background: transparent;
  /* Un <button> no hereda el color: el navegador le pone el suyo, y con la página en
     esquema oscuro eso era blanco sobre la caja blanca. El icono se pintaba y no se
     veía, porque los trazos de reicon usan currentColor. */
  color: #5c6068;
  line-height: 1;
  cursor: pointer;
}

.clave-boton:hover {
  background: rgba(17, 24, 39, 0.07);
  color: #141417;
}

.clave-boton:focus-visible {
  outline: 3px solid rgba(250, 189, 0, 0.85);
  outline-offset: -2px;
}

/* El de ver siempre pegado al borde; el del dado, a su izquierda. */
[data-clave-ver] { right: 5px; }
[data-clave-generar] { right: 47px; }

.clave-generada {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fdf3d2;
  color: #7a5a00;
  font-weight: 700;
}

/* La norma de qué se publica, en la página de subir. Va dentro del formulario, antes
   de elegir los archivos: leerla después de subir cuarenta fotos no sirve de nada. */
.subir-norma {
  padding: 16px 18px;
  border: 1px solid rgba(163, 99, 5, 0.28);
  border-radius: 12px;
  background: #fdf3d2;
  color: #5c4400;
}

.subir-norma h2 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: #7a5a00;
}

.subir-norma p { margin: 0 0 8px; line-height: 1.55; font-size: 0.86rem; }

.subir-norma ul {
  margin: 0 0 8px;
  padding-left: 1.2em;
  font-size: 0.86rem;
  line-height: 1.55;
}

.subir-norma li { margin-bottom: 3px; }

.subir-norma__pie {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(163, 99, 5, 0.2);
  font-size: 0.8rem;
}

/* Una foto que puso la administración: se ve y se etiqueta, pero no se retira. */
.subida__origen {
  align-self: center;
  color: #6d717a;
  font-size: 0.78rem;
}

/* ── Campos obligatorios ──
   El título va envuelto en su propio hueco: la etiqueta es una rejilla y, sin esto,
   el «(*)» se cae a la línea de abajo como si fuera otro campo. */
.cuenta-etiqueta {
  display: block;
}

.obligatorio {
  color: #d7172f;
  font-weight: 700;
}

.cuenta-obligatorios {
  margin: 2px 0 0;
  color: #6d717a;
  font-size: 0.85rem;
}

/* ── Elegir ciudad y hermandades ─────────────────────────────────────────────────
   Sin recuadros. Un campo, lo que sale de él y el botón, separados por aire y por
   líneas de un píxel. Todo va sobre el fondo casi negro de la cuenta: una tarjeta
   blanca aquí sería un foco en mitad de la pantalla. */

.seguidas-alta {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.seguidas-campo {
  display: grid;
  gap: 6px;
  max-width: 26rem;
}

.seguidas-campo > span {
  color: #9aa0a6;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.seguidas-campo input {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  background: #17171a;
  color: #f2f3f5;
  color-scheme: dark;
  font: inherit;
}

.seguidas-campo input::placeholder {
  color: #6d717a;
}

.seguidas-campo input:focus-visible {
  outline: 2px solid #fabd00;
  outline-offset: 2px;
}

/* Las ciudades que salen al escribir. Van pegadas al campo, no flotando encima:
   en el móvil un desplegable superpuesto acaba tapado por el teclado. */
.cuenta-sugerencias {
  display: grid;
  max-width: 26rem;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: #131316;
}

.cuenta-sugerencias[hidden] {
  display: none;
}

.cuenta-sugerencia {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: transparent;
  color: #f2f3f5;
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}

.cuenta-sugerencia:last-child {
  border-bottom: 0;
}

.cuenta-sugerencia span {
  color: #8a8e96;
  font-size: 0.79rem;
}

.cuenta-sugerencia:hover,
.cuenta-sugerencia:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

/* Las hermandades de la ciudad elegida. En columnas si caben: una ciudad grande tiene
   cuarenta y en una sola columna hay que bajar muchísimo para ver si está la que se
   busca. */
.cuenta-casillas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0 20px;
  max-height: 320px;
  overflow-y: auto;
}

.cuenta-casillas[hidden] {
  display: none;
}

.cuenta-casillas__titulo {
  grid-column: 1 / -1;
  margin: 4px 0 8px;
  color: #9aa0a6;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cuenta-form .cuenta-casilla,
.cuenta-casilla {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 9px;
  color: #f2f3f5;
  font-size: 0.95rem;
  font-weight: 400;
  cursor: pointer;
}

.cuenta-casilla:hover {
  background: rgba(255, 255, 255, 0.05);
}

.cuenta-casilla input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #d7172f;
  color-scheme: dark;
  cursor: pointer;
}

.seguidas-alta .cuenta-boton {
  justify-self: start;
  min-width: 13rem;
}

/* ── Las que ya sigue ──
   Agrupadas por ciudad. Sin tarjetas: el nombre de la ciudad en pequeño y arriba, sus
   hermandades debajo separadas por una línea, y el aspa a la derecha en gris hasta que
   se pasa por encima. Quitar algo no debe pedir la atención más que tenerlo. */

.seguidas-lista {
  margin-top: 26px;
}

.seguidas-ciudad + .seguidas-ciudad {
  margin-top: 26px;
}

.seguidas-ciudad h3 {
  margin: 0 0 4px;
  color: #9aa0a6;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.seguidas-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 1rem;
}

.seguidas-quitar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6d717a;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.seguidas-quitar:hover,
.seguidas-quitar:focus-visible {
  background: rgba(215, 23, 47, 0.16);
  color: #ff6b7d;
}

.seguidas-quitar[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .seguidas-quitar { transition: none; }
}

/* ── El mismo bloque, dentro del formulario de alta ──────────────────────────────
   Lo de arriba está pensado para el panel de la cuenta, que va sobre el fondo casi
   negro del portal. El alta es una tarjeta blanca, así que aquí se le da la vuelta a
   los colores. Es el único sitio del portal donde conviven los dos fondos. */

.cuenta-form .cuenta-sugerencias {
  border-color: rgba(17, 24, 39, 0.14);
  background: #ffffff;
}

.cuenta-form .cuenta-sugerencia {
  border-bottom-color: rgba(17, 24, 39, 0.08);
  color: #141417;
}

.cuenta-form .cuenta-sugerencia span {
  color: #6d717a;
}

.cuenta-form .cuenta-sugerencia:hover,
.cuenta-form .cuenta-sugerencia:focus-visible {
  background: rgba(215, 23, 47, 0.07);
}

.cuenta-form .cuenta-casillas__titulo {
  color: #6d717a;
}

.cuenta-form .cuenta-casilla {
  color: #141417;
}

.cuenta-form .cuenta-casilla:hover {
  background: rgba(215, 23, 47, 0.07);
}

/* El bloque de interés dentro del alta: sin recuadro, solo una línea que lo separa
   de los campos de arriba y el aire suficiente para que se lea como un apartado. */
.cuenta-interes {
  display: grid;
  gap: 12px;
  margin: 4px 0;
  padding: 20px 0 4px;
  border: 0;
  border-top: 1px solid rgba(17, 24, 39, 0.1);
}

.cuenta-interes legend {
  padding: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #22262d;
}

.cuenta-interes > .cuenta-ayuda {
  margin: 0;
}

/* ── Me gusta y comentarios recibidos ─────────────────────────────────────────
   Una fila por archivo: miniatura, nombre y las dos cuentas. En «Comentarios» la
   fila se abre y la conversación cae debajo, con su propio desplazamiento. */
/* Una sola caja con las filas pegadas, no tarjetas sueltas: con la banda alterna
   el ojo sigue la fila de la miniatura hasta los números del otro extremo. */
.social-lista {
  display: grid;
  gap: 0;
  margin-top: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.social-fila {
  background: transparent;
  overflow: hidden;
}

.social-fila:nth-child(even) {
  background: rgba(255, 255, 255, 0.045);
}

.social-fila + .social-fila {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* La abierta se separa del resto: mientras se leen sus comentarios, manda ella. */
.social-fila.is-abierta {
  background: rgba(255, 255, 255, 0.075);
}

.social-fila__cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease;
}

/* Por encima de la banda alterna (0,045): si no, en las filas pares no se nota. */
.social-fila__cabecera:hover,
.social-fila__cabecera:focus-visible {
  background: rgba(255, 255, 255, 0.09);
}

.social-fila__mini {
  position: relative;
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 8px;
  overflow: hidden;
  background: #131418;
}

.social-fila__mini img,
.social-fila__mini video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* El triángulo que distingue un vídeo de una foto sin tener que leer nada. */
.social-fila__mini--video::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-40%, -50%);
  border-left: 13px solid rgba(255, 255, 255, 0.92);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

.social-fila__nombre {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.social-fila__cuentas {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.social-fila__cuenta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.social-fila__cuenta svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

/* La flecha que indica que la fila se abre, solo donde se abre de verdad. */
.social-fila__cabecera[aria-expanded]::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-left: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0.55;
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.social-fila.is-abierta .social-fila__cabecera::after {
  transform: rotate(-135deg) translate(-3px, -3px);
}

/* Alto fijo y desplazamiento por dentro: la página no crece al abrir una fila. */
.social-panel {
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  animation: social-abre 200ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes social-abre {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.social-panel__nota {
  margin: 4px 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
}

.social-comentario {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.social-comentario:last-child { border-bottom: 0; }

.social-comentario__autor {
  margin: 0 0 3px;
  font-size: 0.78rem;
  font-weight: 700;
}

.social-comentario__texto {
  margin: 0 0 4px;
  font-size: 0.88rem;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.social-comentario__votos {
  margin: 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.74rem;
}

@media (max-width: 560px) {
  /* En estrecho el nombre se lleva la fila y las cuentas bajan debajo. */
  .social-fila__cabecera { flex-wrap: wrap; }
  .social-fila__nombre { flex-basis: calc(100% - 86px); }
  .social-fila__cuentas { margin-left: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  .social-panel { animation: none; }
  .social-fila__cabecera[aria-expanded]::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Lo que sigues: cinco secciones en una página
   ═══════════════════════════════════════════════════════════════════════════
   Cinco bloques iguales seguidos se leen como una lista sin fin. Lo que los
   separa es una línea y el aire de encima, no un recuadro por bloque.
   ═══════════════════════════════════════════════════════════════════════════ */
.sigues-bloque + .sigues-bloque {
  margin-top: 38px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sigues-bloque h2 {
  margin: 0 0 2px;
  font-size: 1.24rem;
}

.sigues-bloque__intro {
  margin: 0 0 6px;
}

/* Dentro de un bloque el buscador va pegado a su título, no despegado como
   cuando era el único de la página. */
.sigues-bloque .seguidas-alta {
  margin-top: 14px;
}

.sigues-bloque .seguidas-lista {
  margin-top: 18px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Los bloques de la hermandad
   ═══════════════════════════════════════════════════════════════════════════
   Cada fila es una tarjeta con sus campos etiquetados, no una hilera de cajas
   sin nombre: una procesión tiene siete columnas y un itinerario largo, y en
   fila no se lee nada.
   ═══════════════════════════════════════════════════════════════════════════ */
.bloque-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 12px 14px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.02);
}

.bloque-campo {
  display: grid;
  gap: 4px;
  min-width: 0;          /* sin esto, un textarea largo ensancha toda la rejilla */
}

/* El título y los textos largos ocupan la fila entera: partirlos en columnas
   estrechas obliga a escribir un itinerario por una rendija. */
.bloque-campo--ancho {
  grid-column: 1 / -1;
}

.bloque-campo > span {
  color: #5b6068;
  font-size: 0.78rem;
  font-weight: 600;
}

.bloque-campo input,
.bloque-campo textarea {
  width: 100%;
  min-width: 0;
}

.bloque-quitar {
  grid-column: 1 / -1;
  justify-self: start;
}

/* Contenedor de bloques de hermandad: separación uniforme idéntica a las tarjetas */
[data-mi-ficha-bloques] {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.25rem);
}

.bloque {
  margin: 0;
}

/* La primera tarjeta ya viene con el aire del fieldset: la de abajo no necesita
   más separación que el margen que ya lleva. */
.bloque > [data-bloque-filas] {
  margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Novedades en lo que sigues
   ═══════════════════════════════════════════════════════════════════════════
   Arriba del todo, antes de las cinco secciones: es lo que se viene a mirar.
   Lo que se lee de un vistazo es el nombre de la ficha; qué cambió y cuándo
   van en gris, que son la letra pequeña.
   ═══════════════════════════════════════════════════════════════════════════ */
.sigues-novedades {
  margin-bottom: 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sigues-novedades h2 {
  margin: 0 0 8px;
  font-size: 1.24rem;
}

.novedades {
  margin: 0;
  padding: 0;
  list-style: none;
}

.novedades li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.95rem;
}

.novedades li:last-child {
  border-bottom: 0;
}

.novedades a {
  font-weight: 600;
}

.novedades__que {
  flex: 1 1 8rem;
  color: #9aa0a6;
}

.novedades__cuando {
  margin-left: auto;
  color: #9aa0a6;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Verificar que es de la casa
   ═══════════════════════════════════════════════════════════════════════════ */
.verificar {
  margin: 6px 0 4px;
  padding: 16px 18px;
  border: 1px solid rgba(17, 24, 39, 0.14);
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.03);
}

.verificar__titulo {
  margin: 0 0 4px;
  font-weight: 700;
  color: #141417;
}

.verificar__paso {
  margin-top: 12px;
}

/* El código son seis cifras: caja corta y monoespaciada, que es como se leen
   sin equivocarse al copiarlas del correo. */
.verificar [data-verificar-codigo] {
  max-width: 9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.3rem;
  letter-spacing: 0.28em;
  text-align: center;
}

.verificar__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.verificar__hecho {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(67, 209, 122, 0.14);
  color: #14532d;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   Mensajes directos
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* El número de sin leer, junto a «Mensajes» en el menú de la izquierda. */
.cuenta-menu__enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cuenta-menu__aviso {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #d7172f;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.cuenta-menu__enlace.is-active .cuenta-menu__aviso {
  background: #ffffff;
  color: #d7172f;
}

/* ── Los dos paneles ─────────────────────────────────────────────────────────────
   En escritorio, lista y conversación a la vez. En móvil no caben, así que se ve uno
   u otro: lo decide data-panel, que pone el JS. */
.dm {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 16px;
  min-height: 60vh;
}

.dm__lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* ── Los cajones: conversaciones y solicitudes ──────────────────────────────────── */
.dm__cajones {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.dm__cajon {
  flex: 1;
  min-height: 44px;
  padding: 10px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: #c9ccd2;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.dm__cajon.is-active {
  border-bottom-color: #d7172f;
  color: #ffffff;
}

.dm__aviso {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: #d7172f;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
}

/* ── La lista de conversaciones ─────────────────────────────────────────────────── */
.dm__conversaciones {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  max-height: 60vh;
}

.dm__conversacion-boton {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dm__conversacion-boton:hover {
  background: rgba(255, 255, 255, 0.07);
}

.dm__conversacion-boton.is-active {
  background: rgba(215, 23, 47, 0.22);
}

.dm__conversacion-nombre {
  font-weight: 700;
  font-size: 0.92rem;
}

/* El adelanto en una línea: si se deja crecer, cada fila mide distinto y la lista
   deja de leerse de un vistazo. */
.dm__conversacion-ultimo {
  grid-column: 1;
  overflow: hidden;
  color: #a9adb5;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm__conversacion-fecha {
  grid-column: 2;
  grid-row: 1;
  color: #a9adb5;
  font-size: 0.76rem;
  white-space: nowrap;
}

/* ═══ La conversación abierta ═══════════════════════════════════════════════════════
   Fondo blanco a propósito, contra el oscuro del resto de la cuenta: es donde se lee
   y donde se escribe, y tiene que destacar como destaca la ventana de un chat.
   
   Como el panel de alrededor es oscuro, aquí TODOS los colores de texto van escritos
   uno a uno. Lo que no se declare hereda el blanco del tema y desaparece sobre este
   fondo: era lo que pasaba con el nombre de la cabecera y con las contestaciones. */
.dm__hilo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  color: #16181d;
}

.dm__cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e5ea;
  background: #f7f7f8;
}

.dm__con {
  flex: 1;
  margin: 0;
  overflow: hidden;
  color: #16181d;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm__acciones {
  display: flex;
  gap: 4px;
}

.dm__accion {
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: #5a5f68;
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
}

.dm__conversacion {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 2px;
  border-radius: 10px;
}

.dm__conversacion:hover {
  background: rgba(255, 255, 255, 0.04);
}

.dm__conversacion .dm__conversacion-boton {
  flex: 1;
  min-width: 0;
}

.dm__conversacion-acciones {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 6px;
  opacity: 0.75;
}

.dm__conversacion:hover .dm__conversacion-acciones,
.dm__conversacion:focus-within .dm__conversacion-acciones {
  opacity: 1;
}

.dm__conversacion-accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8e95a2;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.dm__conversacion-accion:hover,
.dm__conversacion-accion:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.dm__conversacion-accion--eliminar:hover,
.dm__conversacion-accion--eliminar:focus-visible {
  background: rgba(220, 38, 38, 0.2);
  color: #ef4444;
}

.dm__conversacion-boton.is-unread .dm__conversacion-nombre {
  color: #ffffff;
  font-weight: 800;
}

.dm__conversacion-boton.is-unread .dm__conversacion-ultimo {
  color: #e2e8f0;
  font-weight: 600;
}

.dm__aviso--punto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 0.65rem;
}

.dm__accion--peligro {
  color: #dc2626;
}

.dm__accion--peligro:hover,
.dm__accion--peligro:focus-visible {
  color: #b91c1c;
  font-weight: 600;
}

.dm__accion:hover {
  color: #d7172f;
}

/* En escritorio la lista siempre está ahí al lado: el botón de volver sobra. */
.dm__volver {
  display: none;
  min-height: 44px;
  padding: 0 8px;
  white-space: nowrap;
  border: 0;
  background: none;
  color: #d7172f;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.dm__mensajes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 240px;
  max-height: 55vh;
  padding: 16px 14px;
  overflow-y: auto;
  background: #ffffff;
}

/* ── Las burbujas ────────────────────────────────────────────────────────────────
   Como en Mensajes de Apple: lo que escribo yo en azul y a la derecha, lo que me
   contestan en gris y a la izquierda. Es lo que ya sabe leer todo el mundo, y ahorra
   tener que mirar el nombre en cada línea para saber quién habla. */
.dm__mensaje {
  max-width: 74%;
  padding: 8px 13px;
  border-radius: 18px 18px 18px 5px;
  background: #e9e9eb;
  color: #16181d;
}

.dm__mensaje--mio {
  align-self: flex-end;
  border-radius: 18px 18px 5px 18px;
  /* Un punto más oscuro que el azul de Apple (#007AFF). Con el suyo exacto, el texto
     blanco encima se queda en 3,65 de contraste y hace falta 4,5; así llega a 5,04 y
     se sigue viendo el mismo azul. */
  background: #0a6ed1;
  color: #ffffff;
}

.dm__mensaje-autor {
  display: block;
  color: #5a5f68;
  font-size: 0.74rem;
  font-weight: 700;
}

/* Se respetan los saltos de línea que escribió la persona, y se parten las palabras
   larguísimas para que una URL sin espacios no ensanche la columna. */
.dm__mensaje-texto {
  margin: 0;
  font-size: 0.94rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.dm__mensaje-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.72rem;
}

.dm__mensaje-fecha {
  display: inline-block;
  opacity: 0.75;
}

.dm__mensaje-editado {
  display: inline-block;
  font-style: italic;
  opacity: 0.8;
}

.dm__mensaje-editar {
  display: inline-block;
  background: none;
  border: none;
  padding: 0 4px;
  font-size: 0.72rem;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.85;
}

.dm__mensaje-editar:hover,
.dm__mensaje-editar:focus-visible {
  opacity: 1;
}

.dm__mensaje-editar-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}

.dm__mensaje-editar-input {
  width: 100%;
  min-width: 180px;
  padding: 6px 8px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
  background: #ffffff;
  color: #16181d;
  resize: vertical;
}

.dm__mensaje-editar-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.dm__mensaje-editar-cancelar,
.dm__mensaje-editar-guardar {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.dm__mensaje-editar-cancelar {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: inherit;
}

.dm__mensaje--mio .dm__mensaje-editar-cancelar {
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.dm__mensaje-editar-guardar {
  background: #141417;
  border: none;
  color: #ffffff;
}

.dm__mensaje--mio .dm__mensaje-editar-guardar {
  background: #ffffff;
  color: #0a6ed1;
}

/* El vacío del hilo va sobre blanco; el de la lista, sobre el fondo oscuro. */
.dm__vacio {
  padding: 16px 10px;
  color: #a9adb5;
  font-size: 0.9rem;
}

.dm__mensajes .dm__vacio {
  color: #7a7f88;
  text-align: center;
}

.dm__nota {
  margin: 0;
  padding: 10px 12px;
  background: #fff7e6;
  color: #6b4b00;
  font-size: 0.86rem;
}

.dm__escribir {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #e5e5ea;
  background: #f7f7f8;
}

.dm__escribir-etiqueta {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.dm__texto {
  flex: 1;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d4d4d8;
  border-radius: 18px;
  background: #ffffff;
  color: #16181d;
  font: inherit;
  resize: vertical;
}

.dm__texto::placeholder {
  color: #8a8f98;
}

.dm__texto:focus-visible {
  border-color: #0a6ed1;
  outline: 2px solid rgba(10, 110, 209, 0.4);
  outline-offset: 1px;
}

.dm__enviar {
  flex: 0 0 auto;
}

/* ── Móvil: un panel cada vez ───────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .dm {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .dm[data-panel="lista"] .dm__hilo,
  .dm[data-panel="hilo"] .dm__lista {
    display: none;
  }

  .dm__volver {
    display: block;
  }

  /* En dos filas: volver y las acciones arriba, y debajo con quién se habla. Con las
     tres cosas en una sola línea, el nombre se quedaba sin sitio y desaparecía: en
     una conversación lo primero que hay que saber es con quién es. */
  .dm__cabecera {
    flex-wrap: wrap;
  }

  /* En móvil el botón se queda en la flecha sola. Con «‹ Conversaciones» entero no
     cabían en una línea la flecha, el nombre y las dos acciones, y lo que se caía era
     el nombre: en una conversación lo primero que hay que saber es con quién es. */
  .dm__volver-texto {
    display: none;
  }

  .dm__volver {
    order: 1;
    flex: 0 0 auto;
    font-size: 1.4rem;
    line-height: 1;
  }

  .dm__con {
    order: 2;
  }

  .dm__acciones {
    order: 3;
    flex: 1 0 100%;
    justify-content: flex-end;
  }

  .dm__mensajes {
    max-height: none;
  }

  .dm__mensaje {
    max-width: 86%;
  }
}

/* ── Editor Visual WYSIWYG (Diseño UI/UX Pro Max) ───────────────────────── */

.ssee-wysiwyg-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 0.35rem;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
}

.ssee-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.ssee-editor-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 4px !important;
  border: none !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.ssee-editor-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.ssee-editor-btn:active {
  transform: scale(0.94) !important;
}

.ssee-editor-btn.is-active {
  background: #d7172f !important;
  color: #ffffff !important;
}

.ssee-editor-btn:focus-visible {
  outline: 2px solid #d7172f !important;
  outline-offset: 1px !important;
}

.ssee-editor-btn svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  fill: currentColor !important;
  pointer-events: none !important;
}

.ssee-editor-sep {
  width: 1px;
  height: 20px;
  background: #cbd5e1;
  margin-inline: 4px;
}

.ssee-wysiwyg-content {
  display: block !important;
  width: 100% !important;
  min-height: 130px !important;
  max-height: 480px !important;
  overflow-y: auto !important;
  padding: 12px 14px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  color: #0f172a !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  position: relative !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.ssee-wysiwyg-content:focus {
  outline: 2px solid #d7172f !important;
  border-color: #d7172f !important;
}

.ssee-wysiwyg-content[data-placeholder]:empty:before {
  content: attr(data-placeholder);
  color: #94a3b8;
  pointer-events: none;
  display: block;
}

.ssee-wysiwyg-content p,
.ssee-wysiwyg-content ul,
.ssee-wysiwyg-content ol,
.ssee-wysiwyg-content li,
.ssee-wysiwyg-content div,
.ssee-wysiwyg-content span {
  font-weight: 400;
  color: #0f172a;
}

.ssee-wysiwyg-content p {
  margin: 0 0 0.75em;
}

.ssee-wysiwyg-content p:last-child {
  margin-bottom: 0;
}

.ssee-wysiwyg-content ul,
.ssee-wysiwyg-content ol {
  padding-left: 1.5em;
  margin: 0 0 0.75em;
}

.ssee-wysiwyg-content a {
  color: #2563eb;
  text-decoration: underline;
}

.ssee-wysiwyg-content b,
.ssee-wysiwyg-content strong {
  font-weight: 700 !important;
}

.ssee-wysiwyg-content i,
.ssee-wysiwyg-content em {
  font-style: italic !important;
}

.ssee-wysiwyg-content u {
  text-decoration: underline !important;
}

/* ── Aviso de autenticación previa para comunicados y notas de prensa ─────────── */

.cuenta-card-aviso-auth {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  padding: 20px 22px;
  border-radius: 14px;
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #f1f5f9;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.cuenta-card-aviso-auth__icono {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.cuenta-card-aviso-auth__cuerpo {
  flex: 1;
  min-width: 0;
}

.cuenta-card-aviso-auth__titulo {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fef3c7;
}

.cuenta-card-aviso-auth__texto {
  margin: 0 0 16px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #cbd5e1;
}

.cuenta-card-aviso-auth__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cuenta-badge-entidad {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #a7f3d0;
  font-size: 0.92rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   Menciones en comentarios
   ═══════════════════════════════════════════════════════════════════════════════════ */
.menciones-lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}

.mencion-tarjeta {
  background: var(--cuenta-panel-bg, #ffffff);
  border: 1px solid var(--cuenta-borde, #e2e8f0);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.mencion-tarjeta__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--cuenta-borde, #f1f5f9);
  padding-bottom: 8px;
}

.mencion-tarjeta__autor {
  font-weight: 700;
  color: var(--cuenta-texto, #0f172a);
}

.mencion-tarjeta__fecha {
  font-size: 0.85rem;
  color: var(--cuenta-apagado, #64748b);
}

.mencion-tarjeta__texto {
  margin: 0 0 14px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--cuenta-texto, #334155);
  white-space: pre-wrap;
  word-break: break-word;
}

.mencion-tarjeta__pie {
  display: flex;
  justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   Gestores de la Hermandad (multi-gestión hasta 2 personas)
   ═══════════════════════════════════════════════════════════════════════════════════ */
.cuenta-gestores-lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
}

.cuenta-gestor-tarjeta {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cuenta-gestor-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.cuenta-gestor-nombre {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
}

.cuenta-gestor-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cuenta-gestor-badge--tu {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.cuenta-gestor-badge--segundo {
  background: rgba(59, 130, 246, 0.16);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #60a5fa;
}

.cuenta-gestor-detalles {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: 0.92rem;
}

.cuenta-gestor-detalles dt {
  color: #9aa0a6;
  font-weight: 600;
}

.cuenta-gestor-detalles dd {
  margin: 0;
  color: #e8eaed;
}

.cuenta-gestor-acciones {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cuenta-boton--peligro {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: 1px solid #b91c1c !important;
}

.cuenta-boton--peligro:hover,
.cuenta-boton--peligro:focus-visible {
  background: #b91c1c !important;
}

.cuenta-boton--peq {
  padding: 6px 14px !important;
  font-size: 0.88rem !important;
}