/* ============================================================
   DUALTIC — ADMIN FORMS (crear/editar publicaciones + cuenta)
   Sistema de formularios del área admin. Reutilizable por:
   agregar/editar ventas e interés, editar perfil, contraseña…
   Scopeado bajo .form-page para no chocar con Bootstrap 4.6 +
   styles.min.css. Tokens en admin-ui.css. Conversa con el
   lenguaje visual del dashboard (.dash-page).
   ============================================================ */

.form-page { font-family: var(--body); color: var(--ink); }
.form-page *, .form-page *::before, .form-page *::after { box-sizing: border-box; }
.form-page h1, .form-page h2, .form-page h3, .form-page p,
.form-page ul, .form-page form, .form-page figure { margin: 0; padding: 0; }
.form-page button, .form-page input, .form-page select, .form-page textarea { font: inherit; color: inherit; }
.form-page ::selection { background: var(--accent); color: var(--on-accent); }

/* Reset defensivo: styles.min.css le pone borde/box negro a varios .bi-*
   (p. ej. .bi-plus-lg, .bi-pencil-square, .bi-x-lg). Neutralizamos aquí
   para que los iconos rendericen limpios dentro del sistema de formularios. */
.form-page .bi {
  border: 0 !important; background: none !important; border-radius: 0 !important;
  padding: 0 !important; box-shadow: none !important; text-shadow: none !important;
  color: inherit; line-height: 1; vertical-align: -0.06em;
}

/* ============================================================
   BAND (encabezado, espejo de .search-band del dashboard)
   ============================================================ */
.form-page .form-band {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(24px, 3.6vw, 40px);
}
.form-page .fb-top { margin-bottom: 16px; }
.form-page .back-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink-mut); text-decoration: none;
  padding: 6px 12px 6px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--panel);
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.form-page .back-link i { font-size: 14px; transition: transform .2s var(--ease); }
.form-page .back-link:hover { border-color: var(--line-3); color: var(--ink); background: var(--accent-tint); }
.form-page .back-link:hover i { transform: translateX(-2px); }

.form-page .form-band h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -0.025em; line-height: 1.05;
}
.form-page .form-band .sub {
  color: var(--ink-mut); font-size: 15px; margin-top: 8px; max-width: 60ch; text-wrap: pretty;
}

/* ============================================================
   MAIN + PANEL
   ============================================================ */
.form-page .form-main { padding-block: clamp(26px, 4vw, 42px); }
.form-page .form-shell { width: 100%; }

.form-page .fpanel {
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 16px 40px -28px rgba(0,0,0,0.30);
  overflow: hidden;
}

/* sección dentro del panel (separadas por hairline) */
.form-page .fsection { padding: clamp(20px, 3vw, 30px); }
.form-page .fsection + .fsection { border-top: 1px solid var(--line); }

.form-page .fsection-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.form-page .fs-ico {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-size: 18px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-deep);
}
.form-page .fsection-head h2 {
  font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.015em;
}
.form-page .fsection-head .fs-sub { color: var(--ink-mut); font-size: 13.5px; margin-top: 3px; line-height: 1.45; }

/* grid de campos */
.form-page .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.form-page .fgrid .span-2 { grid-column: 1 / -1; }

/* ============================================================
   CAMPOS (label arriba, input, hint)
   ============================================================ */
.form-page .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.form-page .f-label {
  font-family: var(--body); font-size: 13.5px; font-weight: 600; color: var(--ink);
  display: inline-flex; align-items: baseline; gap: 4px;
}
.form-page .f-label .req { color: var(--accent-deep); font-weight: 700; }
.form-page .f-hint {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.01em;
  color: var(--ink-faint); line-height: 1.4;
}
.form-page .f-check {
  display: flex; align-items: center; gap: 8px; margin-top: 2px;
  font-family: var(--body); font-size: 12.5px; color: var(--ink-mut);
  cursor: pointer; user-select: none;
}
.form-page .f-check input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer;
}

.form-page .f-input,
.form-page .f-textarea,
.form-page .f-select {
  width: 100%; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--panel); color: var(--ink); font-size: 15px;
  padding: 12px 14px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-page .f-input::placeholder,
.form-page .f-textarea::placeholder { color: var(--ink-faint); }
.form-page .f-input:hover,
.form-page .f-textarea:hover,
.form-page .f-select:hover { border-color: var(--line-3); }
.form-page .f-input:focus,
.form-page .f-textarea:focus,
.form-page .f-select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(237,111,92,0.16);
}
.form-page .f-textarea { resize: vertical; min-height: 120px; line-height: 1.5; }

/* select con chevron propio */
.form-page .f-select-wrap { position: relative; }
.form-page .f-select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
}
.form-page .f-select-wrap > .bi-chevron-down {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  pointer-events: none; font-size: 12px; color: var(--ink-mut);
}

/* teléfono: código de país + número agrupados como UN solo control.
   El select nace con una sola opción (Chile); al habilitar más países en
   codigosTelefonoPais() no hay que tocar este CSS. */
.form-page .tel-combo { display: flex; align-items: stretch; }
.form-page .tel-combo .f-select-wrap { flex: none; }
.form-page .tel-combo .f-select {
  width: auto; padding-right: 34px;
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.form-page .tel-combo .f-input {
  flex: 1; min-width: 0; margin-left: -1px;
  border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* el control enfocado monta sobre el borde compartido para que el anillo no se corte */
.form-page .tel-combo .f-select:focus,
.form-page .tel-combo .f-input:focus { position: relative; z-index: 1; }

/* ============================================================
   UPLOAD DE IMÁGENES (tiles con preview)
   ============================================================ */
.form-page .up-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.form-page .up-tile {
  position: relative; display: block; cursor: pointer;
  aspect-ratio: 4 / 3; border-radius: var(--r);
  border: 1.5px dashed var(--line-3); background: var(--accent-tint);
  overflow: hidden; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.form-page .up-tile:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.form-page .up-tile.has-file { border-style: solid; border-color: var(--line-2); background: var(--panel); }
.form-page .up-file {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2;
}
.form-page .up-idle {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; padding: 12px; text-align: center;
}
.form-page .up-idle i { font-size: 26px; color: var(--accent-deep); }
.form-page .up-idle .ut { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--ink); }
.form-page .up-idle .us { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em; color: var(--ink-faint); }
.form-page .up-tile.has-file .up-idle { display: none; }
.form-page .up-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.form-page .up-tile.has-file .up-img { display: block; }
.form-page .up-x {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  background: rgba(20,20,20,0.78); color: #fff;
  transition: background .2s var(--ease), transform .15s var(--ease);
}
.form-page .up-x:hover { background: var(--ink); transform: scale(1.06); }
.form-page .up-tile.has-file .up-x { display: inline-flex; }
.form-page .up-badge {
  position: absolute; left: 8px; bottom: 8px; z-index: 3;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(20,20,20,0.72); color: #fff;
}
.form-page .up-tile.optional .up-badge { background: rgba(20,20,20,0.55); }

/* ============================================================
   ACCIONES (leyenda + submit)
   ============================================================ */
.form-page .factions {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px clamp(20px, 3vw, 30px); border-top: 1px solid var(--line);
  background: var(--bg-soft);
}
.form-page .req-legend { font-family: var(--mono); font-size: 11.5px; color: var(--ink-mut); }
.form-page .req-legend .req { color: var(--accent-deep); font-weight: 700; }
.form-page .f-submit {
  display: inline-flex; align-items: center; gap: 9px; justify-content: center;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  font-family: var(--display); font-weight: 600; font-size: 15px;
  padding: 12px 26px; border-radius: var(--r-pill); cursor: pointer;
  transition: background .2s var(--ease), border-color .2s, transform .15s var(--ease), box-shadow .2s var(--ease);
}
.form-page .f-submit:hover {
  background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(237,111,92,0.7);
}
.form-page .f-submit:active { transform: translateY(0); }
.form-page .f-submit i { font-size: 16px; }

/* ============================================================
   LISTADO DE PUBLICACIONES PROPIAS (#reload)
   ============================================================ */
.form-page .listing { padding-block: clamp(20px, 3vw, 36px) 80px; }
.form-page .listing-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.form-page .listing-head h2 {
  font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em;
}
.form-page .count {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-mut);
  padding: 6px 13px; border-radius: var(--r-pill); border: 1px solid var(--line);
}
.form-page .count b { font-weight: 600; color: var(--ink); }

.form-page .pgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }

.form-page .pcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 22px -16px rgba(0,0,0,0.18);
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.form-page .pcard:hover {
  border-color: var(--accent-line); background: var(--accent-tint); transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 18px 36px -20px rgba(0,0,0,0.28);
}
/* Tarjeta clicable (abre el modal de ver/editar): cursor + foco visible */
.form-page .pcard[role="button"] { cursor: pointer; }
.form-page .pcard[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* [PAUSAR] Publicación pausada de OTRO usuario, presente en el DOM solo para que el
   deeplink (?pub_id=&pub_tipo=) pueda auto-abrir su modal. NO debe verse en la grilla
   pública — quien no tenga el enlace directo no debe poder descubrirla navegando. */
.form-page .pcard.deeplink-only { display: none; }
.form-page .pcard-img { position: relative; aspect-ratio: 16 / 10; border-bottom: 1px solid var(--line); overflow: hidden; background: var(--accent-soft); }
.form-page .pcard-img img { width: 100%; height: 100%; object-fit: cover; }
.form-page .pcard-count {
  position: absolute; right: 10px; bottom: 10px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  padding: 4px 9px; border-radius: var(--r-pill);
  background: rgba(20,20,20,0.74); color: #fff;
}
.form-page .pcard-body { padding: 15px 16px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
/* etiqueta de tipo para tarjetas sin imagen (intereses) — mismo tratamiento
   de píldora sólida que .card-kind/.card-badge en dashboard.css */
.form-page .pcard-kind {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--ink); color: #ffffff;
}
.form-page .pcard-kind i { font-size: 12px; }
.form-page .pcard-title {
  font-family: var(--display); font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.form-page .pcard-desc {
  color: var(--ink-mut); font-size: 13px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.form-page .pcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.form-page .pcard-tags span {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-mut);
  border: 1px solid var(--line); padding: 3px 8px; border-radius: var(--r-pill);
}
.form-page .pcard-tags .more { background: var(--accent-soft); border-color: var(--accent-line); color: var(--ink); }
.form-page .pcard-foot {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 11px 16px; border-top: 1px solid var(--line);
}
.form-page .pcard-edit {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--ink);
  text-decoration: none; padding: 7px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--panel);
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.form-page .pcard-edit i { font-size: 14px; }
.form-page .pcard-edit:hover { border-color: var(--accent-line); background: var(--accent-tint); color: var(--accent-deep); }

/* estado vacío */
.form-page .empty {
  text-align: center; padding: clamp(40px, 7vw, 72px) 20px; max-width: 460px; margin-inline: auto;
}
.form-page .empty-ico {
  width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 18px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  display: grid; place-items: center; font-size: 28px; color: var(--accent-deep);
}
.form-page .empty h3 { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.015em; }
.form-page .empty p { color: var(--ink-mut); font-size: 14px; margin-top: 8px; line-height: 1.5; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) { .form-page .pgrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 820px)  { .form-page .pgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) {
  .form-page .fgrid { grid-template-columns: minmax(0, 1fr); }
  .form-page .up-grid { grid-template-columns: 1fr 1fr; }
  .form-page .factions { flex-direction: column-reverse; align-items: stretch; }
  .form-page .f-submit { width: 100%; }
}
@media (max-width: 440px) {
  .form-page .pgrid { grid-template-columns: minmax(0, 1fr); }
  .form-page .up-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   LISTADO EDITABLE (editar-ventas / editar-interes)
   El JS recarga `.row-tarjeta` (ventas), así que el grid vive
   sobre esa clase. Cada tarjeta lleva acciones editar + eliminar.
   ============================================================ */
.form-page .row-tarjeta {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px;
  margin: 0; /* anula el row de Bootstrap */
}
.form-page .row-tarjeta > * { width: 100%; max-width: 100%; padding: 0; }

.form-page .pcard-actions {
  display: flex; align-items: center; gap: 8px; width: 100%; justify-content: flex-end;
}
.form-page .pcard-act {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 13px;
  text-decoration: none; padding: 7px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--panel); color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.form-page .pcard-act i { font-size: 14px; }
.form-page .pcard-act:active { transform: scale(0.97); }
.form-page .pcard-act.edit:hover { border-color: var(--accent-line); background: var(--accent-tint); color: var(--accent-deep); }
.form-page .pcard-act.del { width: 38px; height: 34px; justify-content: center; padding: 0; }
.form-page .pcard-act.del:hover { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

/* ============================================================
   PAUSAR / REACTIVAR PUBLICACIÓN
   Jerarquía de las 3 acciones de la tarjeta:
   Editar = coral (acción principal) · Pausar = neutro (cambio de
   estado, reversible) · Eliminar = danger (destructivo).
   ============================================================ */
.form-page .pcard-act.pause { width: 38px; height: 34px; justify-content: center; padding: 0; }
.form-page .pcard-act.pause:hover {
  border-color: var(--line-3); background: rgba(0,0,0,0.045); color: var(--ink);
}
/* En una tarjeta pausada, reactivar es la salida evidente del estado → toma el coral */
.form-page .pcard.is-paused .pcard-act.pause { border-color: var(--accent-line); color: var(--accent-deep); }
.form-page .pcard.is-paused .pcard-act.pause:hover { background: var(--accent-tint); border-color: var(--accent); }
/* En vuelo: sin doble clic, sin parpadeo de estado */
.form-page .pcard-act.is-busy { pointer-events: none; opacity: 0.55; }

/* Badge de estado (primer hijo de .pcard-body). Gris apagado a propósito:
   "pausada" es un estado inactivo, no debe competir con .pcard-kind. */
.form-page .pcard-state {
  display: none; align-items: center; gap: 6px; align-self: flex-start;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-mut); background: rgba(0,0,0,0.055);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 4px 10px; /* sin margin: .pcard-body ya es flex column con gap */
}
.form-page .pcard-state i { font-size: 11px; }
.form-page .pcard.is-paused .pcard-state { display: inline-flex; }

/* La tarjeta pausada se atenúa (se lee como "fuera del aire"), pero las
   acciones se mantienen a plena opacidad para poder reactivarla. */
.form-page .pcard.is-paused .pcard-img img {
  opacity: 0.45; filter: grayscale(0.6);
  transition: opacity .2s var(--ease), filter .2s var(--ease);
}
.form-page .pcard.is-paused .pcard-title,
.form-page .pcard.is-paused .pcard-desc { opacity: 0.62; transition: opacity .2s var(--ease); }
.form-page .pcard.is-paused .pcard-kind { opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
  .form-page .pcard-act:active { transform: none; }
}

/* ============================================================
   MODALES DE EDICIÓN / BORRADO (Bootstrap modal + estilo de marca)
   .fmod va en el .modal; .modal-content lleva además .form-page
   para que los campos (.field/.f-*) y el reset de iconos apliquen.
   ============================================================ */
.fmod .modal-dialog { max-width: min(1180px, calc(100vw - 40px)); margin: 1.75rem auto; }
.fmod.fmod-sm .modal-dialog { max-width: 600px; }
.fmod .modal-content {
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -22px rgba(0,0,0,0.38); overflow: hidden; background: var(--panel);
}
.fmod .fmod-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 17px 22px; border-bottom: 1px solid var(--line); background: var(--bg-soft);
}
.fmod .fmod-head h3 { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.015em; margin: 0; }
.fmod .fmod-x {
  width: 36px; height: 36px; flex: none; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink-mut);
  display: grid; place-items: center; padding: 0;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.fmod .fmod-x svg { display: block; }
.fmod .fmod-x:hover { background: var(--accent-soft); color: var(--ink); border-color: var(--accent-line); transform: rotate(90deg); }
.fmod .fmod-body { padding: 22px; max-height: 68vh; overflow-y: auto; }
/* .fsection trae su propio padding horizontal (clamp 20-30px) para el resto
   del sitio, pero dentro del modal el margen ya lo da .fmod-body (22px) —
   sin este reset se SUMABAN ambos y el contenido quedaba más adentro que el
   título/los botones (visible sobre todo en mobile, donde el clamp no baja
   de 20px). Se preserva la separación vertical entre secciones (regla de abajo). */
.fmod .fmod-body .fsection { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.fmod .fmod-body .fsection-head { margin-bottom: 16px; }
.fmod .fmod-body .fsection + .fsection { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.fmod .fmod-text { color: var(--ink-mut); font-size: 14.5px; line-height: 1.55; }
.fmod .fmod-text strong { color: var(--ink); font-weight: 600; }
.fmod .fmod-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 22px; border-top: 1px solid var(--line); background: var(--bg-soft);
}
.fmod .fmod-foot .req-legend { margin-right: auto; }
.fmod .fbtn-ghost {
  font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--ink);
  padding: 11px 20px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--line-2); background: var(--panel);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.fmod .fbtn-ghost:hover { border-color: var(--line-3); background: var(--accent-tint); }
.fmod .fbtn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--on-accent);
  padding: 11px 22px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent);
  transition: background .2s var(--ease), border-color .2s, transform .15s var(--ease);
}
.fmod .fbtn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-1px); }
.fmod .fbtn-danger {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 600; font-size: 14px; color: #fff;
  padding: 11px 22px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--danger); background: var(--danger);
  transition: background .2s var(--ease), border-color .2s, transform .15s var(--ease);
}
.fmod .fbtn-danger:hover { background: var(--danger-deep); border-color: var(--danger-deep); transform: translateY(-1px); }

/* Mobile: los botones del pie ya no caben lado a lado y se apilan. En vez de
   dejar que el orden del DOM (Cerrar, Guardar) los apile con Cerrar arriba,
   se invierte con column-reverse: la acción primaria (Guardar/Eliminar) queda
   arriba, Cerrar abajo — sin tocar el HTML ni el orden de los botones en desktop. */
@media (max-width: 560px) {
  .fmod .fmod-foot { flex-direction: column-reverse; align-items: stretch; }
  .fmod .fmod-foot .fbtn-ghost,
  .fmod .fmod-foot .fbtn-primary,
  .fmod .fmod-foot .fbtn-danger { width: 100%; justify-content: center; }
  .fmod .fmod-foot .req-legend { margin-right: 0; text-align: center; }
}

@media (max-width: 1080px) { .form-page .row-tarjeta { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 820px)  { .form-page .row-tarjeta { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 440px)  { .form-page .row-tarjeta { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   EDITAR PERFIL: grid de 3 columnas, subheads, subida de
   avatar + logo, autocomplete de ciudad y accesos rápidos.
   ============================================================ */
.form-page .fgrid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px 18px; }
.form-page .f-subhead {
  font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--ink);
  margin: 6px 0 2px; display: inline-flex; align-items: baseline; gap: 4px;
}
.form-page .f-subhead .req { color: var(--accent-deep); font-weight: 700; }
.form-page .f-note { color: var(--ink-mut); font-size: 13.5px; line-height: 1.45; margin-bottom: 8px; }

/* subida de imágenes (avatar de perfil + logo de empresa) */
.form-page .hidden-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.form-page .pf-images { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; align-items: start; }
.form-page .pf-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.form-page .pf-up {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer; aspect-ratio: 1 / 1; width: 100%; max-width: 180px; padding: 14px; text-align: center;
  border: 1.5px dashed var(--line-3); background: var(--accent-tint); border-radius: var(--r-lg); overflow: hidden;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.form-page .pf-up.pf-round { border-radius: 50%; }
.form-page .pf-up:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.form-page .pf-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--panel); }
.form-page .pf-idle { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.form-page .pf-idle i { font-size: 28px; color: var(--accent-deep); }
.form-page .pf-idle .ut { font-family: var(--display); font-weight: 600; font-size: 13.5px; color: var(--ink); }
.form-page .pf-idle .us { font-family: var(--mono); font-size: 10px; letter-spacing: .02em; color: var(--ink-faint); }
.form-page .pf-cap { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--ink-mut); }

/* autocomplete de ciudad */
.form-page .city-field { position: relative; }
.form-page #sugerencias-ciudad {
  position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 50;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: 0 14px 32px -16px rgba(0,0,0,0.32); overflow: hidden auto; max-height: 240px;
}
.form-page #sugerencias-ciudad .list-group-item {
  display: block; padding: 10px 14px; font-size: 14px; color: var(--ink); cursor: pointer;
  border: 0; background: transparent; transition: background .15s, color .15s;
}
.form-page #sugerencias-ciudad .list-group-item + .list-group-item { border-top: 1px solid var(--line); }
.form-page #sugerencias-ciudad .list-group-item:hover { background: var(--accent-tint); color: var(--accent-deep); }

/* autocomplete de empresa (mismo look que ciudad, reutiliza .city-field) */
.form-page #sugerencias-empresa {
  position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 50;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: 0 14px 32px -16px rgba(0,0,0,0.32); overflow: hidden auto; max-height: 240px;
}
.form-page #sugerencias-empresa .list-group-item {
  display: block; padding: 10px 14px; font-size: 14px; color: var(--ink); cursor: pointer;
  border: 0; background: transparent; transition: background .15s, color .15s;
}
.form-page #sugerencias-empresa .list-group-item + .list-group-item { border-top: 1px solid var(--line); }
.form-page #sugerencias-empresa .list-group-item:hover { background: var(--accent-tint); color: var(--accent-deep); }
.form-page .f-hint-suggest {
  cursor: pointer; color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px;
}
.form-page .f-hint-suggest:hover { color: var(--accent); }

/* accesos rápidos a publicaciones (bajo el formulario) */
.form-page .pf-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.form-page .pf-linkcard {
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--panel); padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.form-page .pf-linkcard .pl-head { display: flex; align-items: flex-start; gap: 12px; }
.form-page .pf-linkcard .pl-ico {
  width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 18px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-deep);
}
.form-page .pf-linkcard h3 { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.form-page .pf-linkcard p { color: var(--ink-mut); font-size: 13px; margin-top: 2px; line-height: 1.4; }
.form-page .pf-linkcard .pl-actions { display: flex; gap: 8px; margin-top: auto; }

@media (max-width: 760px) {
  .form-page .fgrid-3 { grid-template-columns: minmax(0, 1fr); }
  .form-page .pf-images { grid-template-columns: 1fr 1fr; }
  .form-page .pf-links { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   CONFIGURACIÓN DE CUENTA (opciones / options)
   Panels apilados (cuenta / preferencias / datos) con filas de
   acción navegables + bloque de preferencia de idioma.
   ============================================================ */
.form-page .opt-stack { display: flex; flex-direction: column; gap: 18px; }
.form-page .opt-rows { display: flex; flex-direction: column; gap: 10px; }

.form-page .opt-row {
  display: flex; align-items: center; gap: 15px;
  padding: 15px 16px; border-radius: var(--r-lg);
  border: 1px solid var(--line-2); background: var(--panel);
  text-decoration: none; color: var(--ink); cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease),
              transform .15s var(--ease), box-shadow .2s var(--ease);
}
.form-page .opt-row:hover {
  border-color: var(--accent-line); background: var(--accent-tint);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -16px rgba(0,0,0,0.30);
}
.form-page .opt-row:active { transform: translateY(0) scale(0.992); }

.form-page .opt-ico {
  width: 42px; height: 42px; flex: none; border-radius: 11px;
  display: grid; place-items: center; font-size: 19px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-deep);
}
/* Neutraliza el estilo legacy que styles.min.css aplica a iconos de la
   página vieja (.bi-lock-fill / .bi-cloud-arrow-down-fill traen
   margin-right + padding asimétrico + font-size:24px). Forzamos el glifo
   a llenar la caja y centrarse en ambos ejes. */
.form-page .opt-ico i {
  margin: 0 !important; font-size: inherit !important; color: inherit !important;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; line-height: 1;
}
.form-page .opt-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.form-page .opt-txt .ot {
  font-family: var(--display); font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em;
}
.form-page .opt-txt .os { color: var(--ink-mut); font-size: 13px; line-height: 1.4; }
.form-page .opt-row > .bi-chevron-right {
  margin-left: auto; flex: none; font-size: 16px; color: var(--ink-faint);
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.form-page .opt-row:hover > .bi-chevron-right { transform: translateX(3px); color: var(--accent-deep); }

/* variante destructiva (eliminar cuenta) */
.form-page .opt-row.danger .opt-ico {
  background: var(--danger-soft); border-color: rgba(198,40,40,0.28); color: var(--danger);
}
.form-page .opt-row.danger:hover { border-color: rgba(198,40,40,0.40); background: var(--danger-soft); }
.form-page .opt-row.danger:hover > .bi-chevron-right { color: var(--danger); }
.form-page .opt-row.danger .opt-txt .ot { color: var(--danger-deep); }

/* fila de ESTADO (no navegable): verificación de correo.
   Siempre visible: informa aunque no haya acción disponible. */
.form-page .opt-row.static { cursor: default; }
.form-page .opt-row.static:hover {
  border-color: var(--line-2); background: var(--panel);
  transform: none; box-shadow: none;
}
.form-page .opt-row.static:active { transform: none; }

.form-page .opt-row.ok .opt-ico {
  background: var(--success-soft); border-color: rgba(46,158,107,0.28); color: var(--success-deep);
}
.form-page .opt-row.warn {
  border-color: var(--warn-line); background: var(--warn-soft);
}
.form-page .opt-row.warn:hover { border-color: var(--warn-line); background: var(--warn-soft); }
.form-page .opt-row.warn .opt-ico {
  background: #fff; border-color: var(--warn-line); color: var(--warn-deep);
}
.form-page .opt-row.warn .opt-txt .ot { color: var(--warn-deep); }

/* píldora de estado (verificado) */
.form-page .opt-state {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill);
}
.form-page .opt-state.ok {
  background: var(--success-soft); border: 1px solid rgba(46,158,107,0.28); color: var(--success-deep);
}
.form-page .opt-state .bi { font-size: 12px; color: inherit !important; }

/* acción secundaria dentro de la fila (reenviar enlace) */
.form-page .opt-btn {
  margin-left: auto; flex: none;
  padding: 9px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--warn-line); background: #fff; color: var(--warn-deep);
  font-family: var(--display); font-weight: 600; font-size: 13.5px; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .16s var(--ease);
}
.form-page .opt-btn:hover { background: var(--warn-soft); border-color: var(--warn); }
.form-page .opt-btn:active { transform: scale(0.97); }
.form-page .opt-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* variante neutra: acción rutinaria (revocar UN dispositivo de una lista),
   no una advertencia — solo se tiñe de peligro al pasar el mouse. */
.form-page .opt-btn.ghost { border-color: var(--line-2); background: #fff; color: var(--ink-mut); }
.form-page .opt-btn.ghost:hover { background: var(--danger-soft); border-color: rgba(198,40,40,0.32); color: var(--danger-deep); }

/* fila de dispositivo: distingue el actual del resto */
.form-page .opt-row.device.current { border-color: var(--accent-line); background: var(--accent-tint); }
.form-page .opt-row.device.current .opt-ico {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-deep);
}

/* mensaje de resultado del reenvío */
.form-page .opt-msg {
  font-size: 12.5px; line-height: 1.4; margin-top: 4px;
  color: var(--ink-mut); opacity: 0; transform: translateY(-2px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.form-page .opt-msg.show { opacity: 1; transform: translateY(0); }
.form-page .opt-msg.ok { color: var(--success-deep); }
.form-page .opt-msg.warn { color: var(--warn-deep); }

/* ------------------------------------------------------------------
   Visibilidad del perfil: tarjetas de opción (radio) con implicancias.
   No es un toggle mudo — cada opción explica qué gana y qué pierde el
   usuario, porque la decisión afecta cuánta gente puede encontrarlo.
   ------------------------------------------------------------------ */
.form-page .vis-opts { display: flex; flex-direction: column; gap: 10px; }

.form-page .vis-opt {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px; margin: 0; border-radius: var(--r-lg);
  border: 1px solid var(--line-2); background: var(--panel); cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease),
              box-shadow .2s var(--ease), transform .15s var(--ease);
}
.form-page .vis-opt:hover { border-color: var(--accent-line); background: var(--accent-tint); }
.form-page .vis-opt:active { transform: scale(0.992); }
.form-page .vis-opt.is-on {
  border-color: var(--accent); background: var(--accent-tint);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
/* el radio nativo se oculta pero sigue siendo el control real (teclado/lector) */
.form-page .vis-opt input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.form-page .vis-opt:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.form-page .vis-ico {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  display: grid; place-items: center; font-size: 17px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-deep);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.form-page .vis-ico i { margin: 0 !important; font-size: inherit !important; color: inherit !important; }
.form-page .vis-opt.is-on .vis-ico { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.form-page .vis-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.form-page .vis-tit {
  font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.form-page .vis-rec {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--r-pill);
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-deep);
}
.form-page .vis-des { color: var(--ink-mut); font-size: 13px; line-height: 1.45; }
.form-page .vis-impl { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.form-page .vis-impl .vi {
  display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.4;
}
.form-page .vis-impl .vi i { flex: none; margin: 0 !important; font-size: 11px !important; margin-top: .18em !important; }
.form-page .vis-impl .vi.ok { color: var(--success-deep); }
.form-page .vis-impl .vi.no { color: var(--ink-faint); }
.form-page .vis-impl .vi.info { color: var(--ink-mut); }

.form-page .vis-check {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 8px;
  border: 1px solid var(--line-2); background: #fff; color: transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.form-page .vis-check i { font-size: 12px !important; margin: 0 !important; color: inherit !important; }
.form-page .vis-opt.is-on .vis-check { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

@media (max-width: 560px) {
  .form-page .vis-check { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .form-page .vis-opt, .form-page .vis-opt:active { transform: none; }
}

/* ------------------------------------------------------------------
   Datos de contacto visibles: switches por dato, dentro del panel de
   visibilidad. Ocultar un dato NO lo borra de la cuenta.
   ------------------------------------------------------------------ */
.form-page .cvis { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.form-page .cvis-head {
  font-family: var(--display); font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em; margin: 0 0 6px; color: var(--ink);
}
.form-page .cvis-sub { color: var(--ink-mut); font-size: 13px; line-height: 1.5; margin: 0 0 16px; max-width: 62ch; }
.form-page .cvis-rows { display: flex; flex-direction: column; gap: 8px; }

.form-page .cvis-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r);
  border: 1px solid var(--line-2); background: var(--panel);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.form-page .cvis-row.is-empty { background: var(--bg); }

.form-page .cvis-ico {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  display: grid; place-items: center; font-size: 15px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-deep);
}
.form-page .cvis-ico i { margin: 0 !important; font-size: inherit !important; color: inherit !important; }
.form-page .cvis-row.is-empty .cvis-ico {
  background: #fff; border-color: var(--line-2); color: var(--ink-faint);
}

.form-page .cvis-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.form-page .cvis-txt .cvt { font-weight: 600; font-size: 14px; }
.form-page .cvis-txt .cvv {
  color: var(--ink-mut); font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.form-page .cvis-row.is-empty .cvv { font-style: italic; color: var(--ink-faint); }

.form-page .cvis-link {
  flex: none; font-size: 13px; font-weight: 600; color: var(--accent-deep); text-decoration: none;
  padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--accent-line);
  transition: background .2s var(--ease), transform .16s var(--ease);
}
.form-page .cvis-link:hover { background: var(--accent-soft); text-decoration: none; color: var(--accent-deep); }
.form-page .cvis-link:active { transform: scale(0.97); }
.form-page .cvis-link.disabled {
  color: var(--ink-faint); border-color: var(--line); cursor: not-allowed;
  display: inline-flex; align-items: center; gap: 5px;
}
.form-page .cvis-link.disabled:hover { background: none; transform: none; }
.form-page .cvis-link.disabled i { font-size: .85em; }

/* switch: el checkbox real queda accesible (teclado/lector), el track es lo visible */
.form-page .cvis-sw { flex: none; margin: 0; cursor: pointer; display: inline-flex; }
.form-page .cvis-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.form-page .cvis-track {
  width: 42px; height: 24px; border-radius: var(--r-pill); padding: 3px;
  background: var(--line-3); border: 1px solid var(--line-2); display: block;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.form-page .cvis-knob {
  display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.22);
  transition: transform .2s var(--ease);
}
.form-page .cvis-input:checked + .cvis-track { background: var(--accent); border-color: var(--accent); }
.form-page .cvis-input:checked + .cvis-track .cvis-knob { transform: translateX(18px); }
.form-page .cvis-input:focus-visible + .cvis-track { box-shadow: 0 0 0 3px var(--accent-soft); }
.form-page .cvis-sw:active .cvis-knob { transform: scale(0.92); }
.form-page .cvis-input:checked + .cvis-track:active .cvis-knob { transform: translateX(18px) scale(0.92); }
.form-page .cvis-input:disabled + .cvis-track { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .form-page .cvis-knob, .form-page .cvis-link:active { transition: none; transform: none; }
  .form-page .cvis-input:checked + .cvis-track .cvis-knob { transform: translateX(18px); }
}

/* bloque de idioma (field reutilizado dentro de la sección) */
.form-page .opt-langfield { max-width: 340px; }

@media (max-width: 560px) {
  .form-page .opt-row.static { flex-wrap: wrap; }
  .form-page .opt-btn,
  .form-page .opt-state { margin-left: 57px; }
}

@media (prefers-reduced-motion: reduce) {
  .form-page .opt-row,
  .form-page .opt-row:hover,
  .form-page .opt-row:active { transform: none; }
  .form-page .opt-row:hover > .bi-chevron-right { transform: none; }
  .form-page .opt-btn:active { transform: none; }
  .form-page .opt-msg { transition: opacity .2s var(--ease); transform: none; }
}

/* ============================================================
   CUENTA: contraseña, eliminar cuenta, descargar datos
   Formularios cortos centrados en una columna estrecha.
   ============================================================ */
.form-page .fnarrow { max-width: 720px; margin-inline: auto; }

/* rellena el alto del viewport (menos el topbar de 66px) para que el footer
   quede abajo en páginas de poco contenido. Scopeado con .fp-fill para no
   afectar al .modal-content que también lleva .form-page. */
.form-page.fp-fill { min-height: calc(100vh - 66px); }

/* variantes de icono de sección */
.form-page .fs-ico.ok {
  background: var(--success-soft); border-color: rgba(46,158,107,0.30); color: var(--success-deep);
}
.form-page .fs-ico.danger {
  background: var(--danger-soft); border-color: rgba(198,40,40,0.28); color: var(--danger);
}

/* submit deshabilitado (lo togglea el JS de validación) */
.form-page .f-submit:disabled {
  opacity: .45; cursor: not-allowed; transform: none; box-shadow: none;
}
.form-page .f-submit:disabled:hover {
  background: var(--accent); border-color: var(--accent); transform: none; box-shadow: none;
}

/* ------------------------------------------------------------
   CONTRASEÑA: input con mostrar/ocultar, medidor y requisitos
   (los nombres de clase los consume el JS inline de la vista)
   ------------------------------------------------------------ */
.form-page .password-input-wrapper { position: relative; display: flex; align-items: center; }
.form-page .password-input-wrapper .f-input { flex: 1; min-width: 0; padding-right: 46px; }
/* El botón es un flex-child centrado por align-items del wrapper (inmune a
   cualquier diferencia de alto), superpuesto sobre el input con margin-left
   negativo. position:relative + inset:auto anula el top:50%/right:12px legacy
   de styles.min.css. */
.form-page .toggle-password-btn {
  flex: none; position: relative; z-index: 2; margin-left: -39px;
  top: auto; right: auto; bottom: auto; left: auto; transform: none;
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer; padding: 0;
  display: grid; place-items: center;
  border: 1px solid transparent; background: transparent; color: var(--ink-mut);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.form-page .toggle-password-btn:hover { background: var(--accent-tint); color: var(--ink); border-color: var(--line-2); }
.form-page .toggle-password-btn:active { transform: scale(0.94); }
.form-page .toggle-password-btn i { font-size: 16px; }

.form-page .password-strength-meter { display: flex; align-items: center; gap: 11px; margin-top: 11px; }
.form-page .password-strength-bar {
  flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden;
}
.form-page .password-strength-fill {
  height: 100%; width: 0; border-radius: inherit; background: var(--line-3);
  transition: width .35s var(--ease), background-color .35s var(--ease);
}
.form-page .password-strength-text {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  min-width: 66px; text-align: right; color: var(--ink-mut);
}

.form-page .password-requirements {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; margin-top: 16px;
}
.form-page .requirement {
  display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-mut);
  transition: color .2s var(--ease);
}
.form-page .requirement i {
  font-size: 9px; color: var(--ink-faint);
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.form-page .requirement.valid { color: var(--ink); }
.form-page .requirement.valid i { color: var(--success); transform: scale(1.3); }

.form-page .password-match-indicator {
  align-items: center; gap: 7px; margin-top: 11px;
  font-size: 13px; font-weight: 500;
}
.form-page .password-match-indicator i { font-size: 15px; }

/* leyenda de obligatorios suelta (formularios sin .factions) */
.form-page .req-note { font-family: var(--mono); font-size: 11.5px; color: var(--ink-mut); }
.form-page .req-note .req { color: var(--accent-deep); font-weight: 700; }

/* ------------------------------------------------------------
   DESCARGAR DATOS: listas de inclusión/exclusión + nota
   ------------------------------------------------------------ */
.form-page .dl { display: flex; flex-direction: column; gap: 11px; }
.form-page .dl li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14.5px; line-height: 1.5; color: var(--ink); list-style: none;
}
.form-page .dl li i { flex: none; font-size: 16px; margin-top: 2px; }
.form-page .dl.include li i { color: var(--success); }
.form-page .dl.exclude li { color: var(--ink-mut); }
.form-page .dl.exclude li i { color: var(--ink-faint); }

.form-page .callout {
  display: flex; gap: 13px; padding: 16px 18px; border-radius: var(--r-lg);
  background: var(--danger-soft); border: 1px solid rgba(198,40,40,0.22);
}
.form-page .callout i { flex: none; font-size: 20px; color: var(--danger); margin-top: 1px; }
.form-page .callout .ct { font-family: var(--display); font-weight: 700; font-size: 14.5px; color: var(--danger-deep); }
.form-page .callout p { color: var(--ink); font-size: 13.5px; line-height: 1.5; margin-top: 3px; }

/* ------------------------------------------------------------
   ELIMINAR CUENTA: zona de peligro + botón destructivo
   ------------------------------------------------------------ */
.form-page .fpanel.danger-zone { border-color: rgba(198,40,40,0.30); }
.form-page .danger-consequences { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 4px; }
.form-page .danger-consequences li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--ink); list-style: none;
}
.form-page .danger-consequences li i { flex: none; color: var(--danger); font-size: 15px; margin-top: 2px; }

.form-page .f-danger {
  display: inline-flex; align-items: center; gap: 9px; justify-content: center; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--danger);
  padding: 12px 24px; border-radius: var(--r-pill);
  border: 1px solid var(--danger); background: var(--panel);
  transition: background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}
.form-page .f-danger:hover { background: var(--danger); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(198,40,40,0.6); }
.form-page .f-danger:active { transform: translateY(0) scale(0.98); }
.form-page .f-danger i { font-size: 17px; }

/* texto de error bajo un campo (modal de borrado) */
.form-page .field-error {
  display: block; margin-top: 7px; font-size: 12.5px; color: var(--danger); font-family: var(--body);
}

@media (max-width: 560px) {
  .form-page .password-requirements { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .form-page .requirement.valid i,
  .form-page .f-danger:hover,
  .form-page .toggle-password-btn:active { transform: none; }
}

/* ============================================================
   IMAGE PLACEHOLDER (archivo roto o sin imagen de usuario)
   ============================================================ */
.img-ph {
  background-color: #ffe5df;
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 1px, transparent 1px 11px);
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.img-ph::after {
  content: attr(data-label);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px dashed var(--line);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.6);
}

/* ============================================================
   MODAL DE SOLO LECTURA (.fmod-view) — ver una publicación
   desde agregar-ventas / agregar-interes.
   Reutiliza la mecánica Bootstrap de .fmod, pero NO su tamaño:
   .fmod está dimensionado para el modal de EDICIÓN (1180px, un
   formulario con 3 slots de imagen). Para un modal que solo
   muestra título + descripción + etiquetas eso quedaba enorme.
   Se replica el look del modal de detalle de perfil.php
   (.detail-modal): 820px, media 16/9 con object-fit:contain,
   título de display grande y etiquetas en píldora.
   ============================================================ */
.fmod-view .modal-dialog {
  max-width: min(820px, calc(100vw - 32px));
  display: flex; align-items: center; min-height: calc(100% - 3.5rem);
}
/* Igual que .detail-modal de perfil.php: columna flex con la cabecera y el pie
   fijos y SOLO el cuerpo scrolleando. Sin esto (max-height suelto en el body)
   el modal crece sin tope y se sale por arriba del viewport. */
.fmod-view .modal-content {
  width: 100%; max-height: calc(100dvh - 56px);
  display: flex; flex-direction: column;
}
.fmod-view .fmod-head, .fmod-view .fmod-foot { flex: none; }
.fmod-view .fmod-head { padding: 18px clamp(20px, 3vw, 28px); }
.fmod-view .fmod-head h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(19px, 2.4vw, 24px); letter-spacing: -0.02em; line-height: 1.12;
}
/* min-height:0 es imprescindible: sin el, un hijo flex no baja de su
   contenido y el overflow-y nunca llega a activarse. */
.fmod-view .fmod-body {
  padding: clamp(20px, 3vw, 28px);
  max-height: none; overflow-y: auto; flex: 1 1 auto; min-height: 0;
}

/* Galería: misma caja 16/9 y `contain` que perfil.php, para no recortar
   imágenes cuadradas o verticales (misma razón que el CAMBIO #044). Carrusel
   de 1 imagen a la vez (no grilla): mismo lenguaje visual que
   .modal-gallery-nav de profile.css (flechas + puntos superpuestos abajo a
   la derecha), con los puntos en tono oscuro/coral en vez de blanco, porque
   aquí el fondo de la caja es claro (#f0ede8), no una foto oscura. */
.fmod-view .fv-media { position: relative; margin-bottom: 18px; }
.fmod-view .fv-media-img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: contain;
  background: #f0ede8; border: 1px solid var(--line);
  border-radius: var(--r); display: block;
}
.fmod-view .fv-media-nav {
  position: absolute; bottom: 14px; right: 14px; z-index: 2;
  display: flex; align-items: center; gap: 7px;
}
.fmod-view .fv-dots { display: flex; gap: 5px; align-items: center; }
.fmod-view .fv-dots .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(0,0,0,.22); transition: background .2s, transform .2s; cursor: pointer;
}
.fmod-view .fv-dots .dot.on { background: var(--accent); transform: scale(1.3); }
.fmod-view .fv-nav-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.9); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink); font-size: 14px;
  transition: background .2s; cursor: pointer;
}
.fmod-view .fv-nav-btn:hover { background: #fff; }
.fmod-view .fv-desc {
  margin: 0; font-family: var(--body); font-size: 15px; line-height: 1.65; color: var(--ink);
}
.fmod-view .fv-tags-lab {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint); margin: 20px 0 10px;
}
.fmod-view .fv-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.fmod-view .fv-tags span {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 12px; color: var(--ink);
  border: 1px solid var(--line-2); padding: 6px 12px; border-radius: var(--r-pill);
}

/* Enlace inline dentro de un .f-hint (ej. "¿Olvidaste tu contraseña actual?"
   bajo el campo de contraseña actual en editar-contrasena). */
.form-page .f-link {
  color: var(--accent-deep); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .2s var(--ease);
}
.form-page .f-link:hover { border-bottom-color: var(--accent-deep); }
.form-page .f-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Marca de campo OPCIONAL en una etiqueta (contrapunto de .req). Se usa en la
   encuesta de motivo al eliminar la cuenta, donde dejar claro que no es
   obligatorio no es cosmetico: la baja nunca puede condicionarse a responder. */
.form-page .f-opt {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--ink-faint); text-transform: lowercase;
}