/* ============================================================
   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);
}
/* Clickable card (opens the view/edit modal): cursor + visible focus */
.form-page .pcard[role="button"] { cursor: pointer; }
.form-page .pcard[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* [PAUSE] Another user's paused post, present in the DOM only so the deeplink
   (?pub_id=&pub_tipo=) can auto-open its modal. Must NOT be visible in the public
   grid — anyone without the direct link shouldn't be able to discover it by browsing. */
.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); }

/* ============================================================
   PAUSE / RESUME PUBLICATION
   Hierarchy of the 3 card actions:
   Edit = coral (primary action) · Pause = neutral (reversible
   state change) · Delete = danger (destructive).
   ============================================================ */
.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);
}
/* On a paused card, resuming is the obvious way out of the state → takes the 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); }
/* In flight: no double click, no state flicker */
.form-page .pcard-act.is-busy { pointer-events: none; opacity: 0.55; }

/* State badge (first child of .pcard-body). Deliberately muted grey:
   "paused" is an inactive state, it must not compete with .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; /* no margin: .pcard-body is already a flex column with gap */
}
.form-page .pcard-state i { font-size: 11px; }
.form-page .pcard.is-paused .pcard-state { display: inline-flex; }

/* A paused card dims (it reads as "off the air"), but the actions stay at
   full opacity so it can be resumed. */
.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 carries its own horizontal padding (clamp 20-30px) for the rest
   of the site, but inside the modal the margin is already given by .fmod-body
   (22px) — without this reset both STACKED and the content sat further in
   than the title/buttons (worse on mobile, where the clamp never drops below
   20px). Vertical spacing between sections is preserved (rule below). */
.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: the footer buttons no longer fit side by side and stack instead.
   Rather than let DOM order (Close, Save) stack Close on top, it's reversed
   with column-reverse: the primary action (Save/Delete) ends up on top,
   Close below — without touching the HTML or the button order on 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;
}