:root {
  --dpp-navy: #14234b;
  --dpp-blue: #2563eb;
  --dpp-blue-dark: #1d4ed8;
  /* El acento lavado casi hasta el blanco, para fondos (chips de servicios,
     degradado del hero) cuando el médico sube el alcance del acento. Aquí vale
     el tono de la paleta «azul»; services/pagina_publica.py lo pisa con el
     `suave` de la paleta elegida. Vive en :root y no en el CSS emitido para
     que el alcance funcione TAMBIÉN con la paleta por defecto, donde no se
     emite ningún bloque de variables. */
  --dpp-suave: #eff4fe;
  --dpp-teal: #0f9f8f;
  --dpp-ink: #172033;
  --dpp-muted: #667085;
  --dpp-border: #e4e8f0;
  --dpp-soft: #f5f7fb;
  --dpp-white: #fff;
}

.dpp-editor-page,
.dpp-public-page {
  color: var(--dpp-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dpp-editor-page { max-width: 1440px; margin: 0 auto; }

.dpp-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.dpp-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dpp-editor-header h1 { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.025em; }
.dpp-editor-header p { margin: 7px 0 0; color: var(--dpp-muted); font-size: 14px; line-height: 1.55; max-width: 700px; }

.dpp-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #667085;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.dpp-status i { width: 7px; height: 7px; border-radius: 50%; background: #98a2b3; }
.dpp-status.is-published { background: #ecfdf3; color: #067647; }
.dpp-status.is-published i { background: #12b76a; box-shadow: 0 0 0 3px #d1fadf; }
.dpp-status.is-suspended { background: #fff1f0; color: #b42318; }
.dpp-status.is-suspended i { background: #f04438; }

.dpp-preview-link,
.dpp-button {
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dpp-preview-link { display: inline-flex; align-items: center; gap: 7px; color: #344054; padding: 9px 12px; border: 1px solid #d0d5dd; background: #fff; white-space: nowrap; }
.dpp-preview-link:hover { border-color: #98a2b3; box-shadow: 0 2px 5px rgba(16,24,40,.06); }
.dpp-preview-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.dpp-alert { padding: 13px 15px; border: 1px solid; border-radius: 10px; margin-bottom: 18px; font-size: 13px; line-height: 1.55; }
.dpp-alert.is-success { background: #ecfdf3; border-color: #abefc6; color: #067647; }
.dpp-alert.is-neutral { background: #f8fafc; border-color: #dce3ed; color: #475467; }
.dpp-alert.is-error { background: #fff4f3; border-color: #fecdca; color: #b42318; }
.dpp-alert ul { margin: 7px 0 0 19px; padding: 0; }

/* 25-ago-2026: la vista previa se iba con el scroll y quedaba estrecha.
   `position: sticky` YA estaba puesto en `.dpp-preview-sticky`, pero no podía
   hacer nada: con `align-items: start` la columna se encoge al alto de su
   contenido, así que el elemento pegajoso ocupaba EXACTAMENTE su contenedor y
   no tenía por dónde deslizarse. Medido antes de tocarlo: columna 411 px,
   sticky 411 px, rejilla 3,063 px; al scrollear 1,500 px el `top` pasaba de
   362 a −1138. No faltaba el sticky: le faltaba sitio.
   El `align-items: start` se queda —lo quiere la columna de la izquierda— y la
   de la derecha se estira sola con `align-self`. */
.dpp-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 24px; align-items: start; }
.dpp-editor-main { min-width: 0; }
.dpp-preview-column { align-self: stretch; }

.dpp-editor-panel {
  background: #fff;
  border: 1px solid var(--dpp-border);
  border-radius: 13px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.025);
}
.dpp-panel-heading { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 18px; }
.dpp-panel-heading h2 { margin: 0; font-size: 16px; line-height: 1.35; letter-spacing: -.01em; }
.dpp-panel-heading p { margin: 3px 0 0; color: var(--dpp-muted); font-size: 12px; line-height: 1.5; }
.dpp-step { display: grid; place-items: center; flex: 0 0 25px; height: 25px; border-radius: 8px; background: #eef4ff; color: #3538cd; font-size: 11px; font-weight: 800; }

.dpp-photo-editor { display: flex; gap: 16px; align-items: center; }
.dpp-editor-avatar { width: 84px; height: 84px; border-radius: 18px; object-fit: cover; border: 1px solid #e4e7ec; box-shadow: 0 3px 10px rgba(16,24,40,.08); }
.dpp-editor-initials { display: grid; place-items: center; background: linear-gradient(145deg, #dbeafe, #e0e7ff); color: #3448a4; font-size: 23px; font-weight: 800; }
.dpp-photo-controls { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.dpp-photo-controls small { width: 100%; color: #98a2b3; font-size: 11px; }
.dpp-upload-form { display: flex; align-items: center; }
.dpp-file-button,
.dpp-camera-button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; color: #344054; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.dpp-file-button:hover { border-color: #98a2b3; background: #f9fafb; }
.dpp-camera-button { border-color: #b2ccff; background: #eff4ff; color: #1849a9; }
.dpp-camera-button:hover { border-color: #84adff; background: #e0eaff; }
.dpp-file-button:focus-within,
.dpp-camera-button:focus-visible,
.dpp-camera-button:focus-within { outline: 3px solid rgba(37,99,235,.16); outline-offset: 2px; }
.dpp-file-button input,
.dpp-camera-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.dpp-file-button svg,
.dpp-camera-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.dpp-text-danger { padding: 3px 0; border: 0; background: transparent; color: #d92d20; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* Portafolio — administrador en el editor */
.dpp-portfolio-panel > small { display: block; margin-top: 9px; color: #98a2b3; font-size: 11px; }
.dpp-portfolio-empty { margin: 0 0 12px; padding: 12px; border-radius: 10px; background: #f8fafc; color: #98a2b3; font-size: 12px; text-align: center; }
.dpp-portfolio-manager { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.dpp-portfolio-row { display: flex; align-items: center; gap: 12px; padding: 9px; border: 1px solid #e8ecf3; border-radius: 12px; background: #fcfdfe; flex-wrap: wrap; }
.dpp-portfolio-thumb { flex: 0 0 auto; display: block; border-radius: 9px; overflow: hidden; border: 1px solid #e4e8f0; background: #f2f4f7; }
.dpp-portfolio-thumb img { display: block; width: 76px; height: 58px; object-fit: cover; }

/* Miniatura de vídeo (25-ago-2026): mismo bulto que la foto, con el triángulo
   encima para que se distinga de un vistazo cuál renglón es vídeo. */
.dpp-portfolio-thumb.is-video { position: relative; }
.dpp-portfolio-thumb.is-video video { display: block; width: 76px; height: 58px; object-fit: cover; background: #0f172a; }
.dpp-video-marca {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(15,23,42,.28); pointer-events: none;
}
.dpp-video-marca svg { width: 20px; height: 20px; fill: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }

/* ── Zona de arrastre del portafolio (25-ago-2026) ───────────────────────────
   Antes era un botón chico. Encargo de Francisco: grande, con icono de foto y
   un «+», que invite a hacer clic o a arrastrar. */
.dpp-dropzone {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: 14px; width: 100%; box-sizing: border-box; min-height: 132px;
  padding: 20px 18px; border: 2px dashed #cbd5e1; border-radius: 14px;
  background: #fbfdff; cursor: pointer; text-align: left;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.dpp-dropzone:hover { border-color: var(--dpp-blue); background: #f5f9ff; }
.dpp-dropzone:focus-within { border-color: var(--dpp-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
/* El input se esconde pero NO con display:none: así sigue recibiendo foco y
   el `:focus-within` de arriba puede dibujarlo. */
.dpp-dropzone input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; }

.dpp-dropzone-icono { position: relative; flex: 0 0 auto; display: block; }
.dpp-dropzone-icono svg {
  width: 46px; height: 46px; fill: none; stroke: var(--dpp-blue);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.dpp-dropzone-icono b {
  position: absolute; right: -3px; bottom: 1px;
  display: grid; place-items: center; width: 20px; height: 20px;
  border: 2px solid #fbfdff; border-radius: 50%;
  background: var(--dpp-blue); color: #fff;
  font-size: 14px; font-weight: 800; line-height: 1;
}
.dpp-dropzone-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dpp-dropzone-texto b { color: var(--dpp-ink); font-size: 14px; font-weight: 750; }
.dpp-dropzone-texto small { color: var(--dpp-muted); font-size: 11.5px; }

/* Mientras el archivo va en el aire. El borde se vuelve sólido para que se lea
   «suelta aquí» y no «aquí podrías soltar». */
.dpp-dropzone.esta-encima {
  border-style: solid; border-color: var(--dpp-blue);
  background: #eef4ff; transform: scale(1.005);
}
.dpp-dropzone.esta-encima .dpp-dropzone-icono b { background: var(--dpp-blue-dark); border-color: #eef4ff; }

.dpp-dropzone-limites { display: block; margin-top: 8px; line-height: 1.6; }
.dpp-dropzone-limites b { color: var(--dpp-ink); font-weight: 700; }

/* Vídeo en la página pública: mismo hueco que una foto de la retícula. */
.dpp-portfolio-video {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid #e4e8f0; border-radius: 12px; background: #0f172a;
}
/* ── El portafolio, rehecho (26-ago-2026) ────────────────────────────────────
   Encargo de Francisco: «los recuadros de títulos se ven feos, haz que vayan
   con el resto de la plataforma; reemplaza las flechas por arrastrar; dejemos
   un solo botón de guardar».

   El campo de título ahora es un `.dpp-field` como los demás del editor, así
   que hereda borde, alto, radio y anillo de foco de la MISMA regla que
   «Nombre profesional» — no de una copia que se puede desincronizar. Aquí sólo
   queda cómo se estira dentro de la fila. */
.dpp-portfolio-titulo { flex: 1 1 260px; min-width: 0; }
.dpp-visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* La fila arrastrándose. Mismo lenguaje que la lista de secciones: el asa
   manda el cursor de toda la lista mientras dura la maniobra, porque si no
   parpadea al salirse la fila de debajo del puntero. */
.dpp-portfolio-manager.esta-ordenando { cursor: grabbing; user-select: none; }
.dpp-portfolio-row { transition: box-shadow .12s ease, opacity .12s ease, transform .12s ease; }
.dpp-portfolio-row.is-arrastrando {
  opacity: .93; box-shadow: 0 10px 24px rgba(20,35,75,.16);
  border-color: var(--dpp-blue); transform: scale(1.008);
}

.dpp-portfolio-guardar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 14px;
}
.dpp-portfolio-guardar small { color: var(--dpp-muted); font-size: 11.5px; }
/* El botón se enciende sólo cuando hay algo que guardar: un «Guardar» siempre
   disponible no dice si quedó pendiente un cambio. */
.dpp-portfolio-guardar .dpp-button[disabled] { opacity: .45; cursor: default; }
.dpp-portfolio-add { gap: 9px; flex-wrap: wrap; }
/* 27-ago-2026. Este campo se veía cuadrado y ajeno al resto del editor, y el
   motivo es que NO vive dentro de un `.dpp-field`: no heredaba nada y caía al
   input por defecto del navegador. El arreglo NO es copiarle los valores aquí
   —se desincronizarían al primer retoque de la paleta— sino sumar la clase a
   las cuatro reglas compartidas de abajo (base, alto, foco y placeholder), que
   es la misma convención que ya sigue el <input> del combo con buscador.
   Aquí sólo queda lo que es suyo: cómo se reparte el ancho en la fila.
   OJO: el parche del directorio (28-ago) sobreescribió este archivo y borró
   estas cuatro adiciones; volvieron a ponerse a mano. Si vuelves a reescribir
   el archivo entero, comprueba que sigan. */
.dpp-portfolio-new-title { flex: 1 1 240px; min-width: 0; }

.dpp-camera-dialog {
  position: fixed;
  inset: 0;
  width: min(92vw, 470px);
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--dpp-ink);
  box-shadow: 0 24px 70px rgba(15,23,42,.34);
  overflow: visible;
}
.dpp-camera-dialog::backdrop { background: rgba(15,23,42,.62); backdrop-filter: blur(4px); }
.dpp-camera-modal { max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box; padding: 20px; border-radius: 18px; background: #fff; }
.dpp-camera-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.dpp-camera-header h2 { margin: 0; color: var(--dpp-navy); font-size: 18px; letter-spacing: -.015em; }
.dpp-camera-header p { margin: 4px 0 0; color: #667085; font-size: 12px; line-height: 1.45; }
.dpp-camera-close { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 1px solid #e4e7ec; border-radius: 9px; background: #fff; color: #667085; font: inherit; font-size: 23px; line-height: 1; cursor: pointer; }
.dpp-camera-close:hover { background: #f9fafb; color: #344054; }
.dpp-camera-close:focus-visible { outline: 3px solid rgba(37,99,235,.16); outline-offset: 2px; }
.dpp-camera-stage { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: #101828; }
.dpp-camera-stage video,
.dpp-camera-stage canvas { width: 100%; height: 100%; object-fit: cover; }
.dpp-camera-stage video { transform: scaleX(-1); }
.dpp-camera-placeholder { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; background: linear-gradient(145deg, #172554, #111827); color: #dbeafe; text-align: center; }
.dpp-camera-placeholder svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.dpp-camera-placeholder span { max-width: 300px; font-size: 12px; line-height: 1.5; }
.dpp-camera-frame { position: absolute; z-index: 2; width: 70%; aspect-ratio: 1 / 1.15; border: 2px solid rgba(255,255,255,.82); border-radius: 45% 45% 38% 38%; box-shadow: 0 0 0 999px rgba(15,23,42,.13), inset 0 0 0 1px rgba(15,23,42,.18); pointer-events: none; }
.dpp-camera-status { min-height: 18px; margin: 11px 1px 5px; color: #475467; font-size: 11px; line-height: 1.45; text-align: center; }
.dpp-camera-status.is-error { color: #b42318; }
.dpp-camera-privacy { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin: 0 0 15px; color: #667085; font-size: 10px; line-height: 1.45; text-align: left; }
.dpp-camera-privacy svg { width: 13px; height: 13px; margin-top: 1px; flex: 0 0 auto; fill: none; stroke: #079455; stroke-width: 1.8; }
.dpp-camera-actions { display: flex; justify-content: flex-end; gap: 9px; }
.dpp-camera-actions button { min-height: 39px; padding: 0 15px; border-radius: 9px; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.dpp-camera-secondary { border: 1px solid #d0d5dd; background: #fff; color: #344054; }
.dpp-camera-secondary:hover { background: #f9fafb; }
.dpp-camera-primary { border: 1px solid #2563eb; background: #2563eb; color: #fff; }
.dpp-camera-primary:hover { background: #1d4ed8; }
.dpp-camera-actions button:focus-visible { outline: 3px solid rgba(37,99,235,.16); outline-offset: 2px; }
.dpp-camera-actions button:disabled { border-color: #e4e7ec; background: #e4e7ec; color: #98a2b3; cursor: wait; }

.dpp-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dpp-span-2 { grid-column: 1 / -1; }
.dpp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.dpp-field > span,
.dpp-field > label > span,
.dpp-field legend { color: #344054; font-size: 12px; font-weight: 700; }
.dpp-field b { color: #d92d20; }
.dpp-field input,
.dpp-field textarea,
.dpp-field select,
.dpp-url-input input,
.dpp-portfolio-new-title,
.dpp-share-row input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  color: #101828;
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dpp-field input,
.dpp-portfolio-new-title { height: 39px; padding: 0 11px; }
.dpp-field textarea { padding: 10px 11px; resize: vertical; line-height: 1.5; }

/* Los <select> del editor (25-ago-2026) ─────────────────────────────────────
   Hasta hoy `select` NO estaba en la regla de arriba, así que Especialidad y
   Estado caían al control nativo del navegador: letra de 16 px, borde negro y
   flecha del sistema, justo al lado de un input de 13 px con borde #d0d5dd.
   En la misma fila convivían dos lenguajes visuales distintos.

   `appearance:none` quita la flecha nativa, y por eso la flecha se vuelve a
   dibujar aquí como imagen de fondo — si se quita el `background-image` sin
   quitar el `appearance`, el desplegable se queda SIN ninguna señal de que se
   puede abrir. Van juntos. El SVG va incrustado (no como archivo) para que no
   cueste una petición y para que el color lo controle esta hoja. */
.dpp-field select {
  height: 39px;
  padding: 0 34px 0 11px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  /* Sin esto, Firefox le mete un sangrado propio al texto del select. */
  text-indent: 0;
}
.dpp-field select:hover:not(:disabled) { border-color: #b6bfcd; }
.dpp-field select:disabled { background-color: var(--dpp-soft); color: var(--dpp-muted); cursor: default; }

/* Mientras no ha elegido nada, el texto se ve de color de marcador de posición
   —igual que un `::placeholder`— para que «Selecciona tu especialidad…» no
   parezca una respuesta ya dada. `:has()` es progresivo: donde no exista, el
   texto sale en tinta normal y no se rompe nada. */
.dpp-field select:has(option[value=""]:checked) { color: #98a2b3; }
.dpp-field select option { color: #101828; }

.dpp-field input:focus,
.dpp-field textarea:focus,
.dpp-field select:focus,
.dpp-url-input input:focus,
.dpp-portfolio-new-title:focus { border-color: #528bff; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
/* La flecha también se tiñe de azul al enfocar: el foco se ve completo, no a
   medias (borde azul + flecha gris se lee como un control a medio encender). */
.dpp-field select:focus {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' stroke='%232563eb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.dpp-field input::placeholder,
.dpp-portfolio-new-title::placeholder,
.dpp-field textarea::placeholder { color: #98a2b3; }

/* ── Desplegable con buscador (25-ago-2026) ──────────────────────────────────
   El <input> del combo NO repite borde, alto ni tipografía: ya los hereda de
   la regla `.dpp-field input` de arriba, porque vive dentro del mismo label.
   Aquí sólo va lo que le falta —la flecha y la lista— y así el buscador no
   puede separarse del resto de campos sin que se note. */
.dpp-combo { position: relative; }
/* `.dpp-field .dpp-combo-input` y no `.dpp-combo-input` a secas (26-ago-2026).
   POR QUÉ, porque es sutil y ya mordió una vez: arriba, `.dpp-field input`
   pinta el fondo con el ATAJO `background: #fff`. Un atajo escribe TODOS los
   longhands del fondo, y `.dpp-field input` (0,1,1) le gana a
   `.dpp-combo-input` (0,1,0). Resultado medido en producción:

     cerrado  → hay_imagen:false          ← la flecha no se dibujaba
     abierto  → repeat:repeat, pos:0% 0%  ← la flecha SE REPETÍA EN MOSAICO

   El mosaico solo se veía al abrir porque `.dpp-combo.esta-abierto
   .dpp-combo-input` (0,3,0) sí gana el `background-image`, pero el resto de
   longhands seguían siendo los del atajo. Subir la especificidad a 0,2,0
   arregla las dos mitades de una vez.

   Y por eso el `padding-right` ya NO lleva `!important`: ese `!important` era
   el parche de alguien que chocó con esta misma regla y solo tapó el relleno.
   Con la especificidad correcta sobra, y dejarlo escondería la próxima
   colisión igual que escondió ésta. */
.dpp-field .dpp-combo-input {
  padding-right: 34px;
  cursor: text;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}
.dpp-combo.esta-abierto .dpp-combo-input {
  border-color: #528bff; box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 6.25 6 1.75l4.5 4.5' stroke='%232563eb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dpp-combo-lista {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 4px; list-style: none;
  border: 1px solid #d0d5dd; border-radius: 10px; background: #fff;
  box-shadow: 0 12px 28px rgba(20, 35, 75, .14);
  scrollbar-width: thin;
}
.dpp-combo-lista[hidden] { display: none; }
.dpp-combo-op {
  padding: 8px 10px; border-radius: 7px;
  color: #101828; font-size: 13px; line-height: 1.35; cursor: pointer;
}
/* `esta-activa` es el renglón que manda el TECLADO y `:hover` el del ratón.
   Son cosas distintas a propósito: si el ratón se queda quieto encima de la
   lista mientras se navega con las flechas, dos renglones resaltados a la vez
   confunden menos que uno que salta de sitio. */
.dpp-combo-op:hover { background: var(--dpp-soft); }
.dpp-combo-op.esta-activa { background: #eef4ff; color: var(--dpp-blue-dark); }
.dpp-combo-op.es-elegida { font-weight: 700; }
.dpp-combo-op.es-elegida::after { content: " ✓"; color: var(--dpp-blue); }
.dpp-combo-nada {
  padding: 10px; color: var(--dpp-muted); font-size: 12px; text-align: center;
}
.dpp-field small { color: #98a2b3; font-size: 10.5px; line-height: 1.45; }
.dpp-check { display: flex; align-items: center; gap: 6px; color: #667085; font-size: 11px; cursor: pointer; }
.dpp-check input { width: 14px; height: 14px; accent-color: var(--dpp-blue); }

.dpp-choice-field { border: 0; padding: 0; }
.dpp-choice-field legend { margin-bottom: 7px; }
.dpp-segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.dpp-segmented label { cursor: pointer; }
.dpp-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.dpp-segmented span { display: grid; place-items: center; min-height: 36px; border: 1px solid #d0d5dd; border-radius: 8px; color: #475467; background: #fff; font-size: 12px; font-weight: 650; }
.dpp-segmented input:checked + span { border-color: #84adff; background: #eff4ff; color: #1849a9; box-shadow: inset 0 0 0 1px #84adff; }
.dpp-segmented input:focus-visible + span { outline: 3px solid rgba(37,99,235,.18); }

.dpp-money-input { display: flex; align-items: center; border: 1px solid #d0d5dd; border-radius: 8px; overflow: hidden; height: 39px; }
.dpp-money-input:focus-within { border-color: #528bff; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.dpp-money-input span { padding-left: 11px; color: #667085; font-size: 13px; }
.dpp-money-input input { border: 0; box-shadow: none !important; min-width: 0; padding: 0 6px; }
.dpp-money-input em { padding-right: 10px; color: #98a2b3; font-size: 10px; font-style: normal; font-weight: 700; }

.dpp-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; padding-top: 2px; }
.dpp-switch > input { position: absolute; opacity: 0; }
.dpp-switch-ui { position: relative; width: 37px; height: 21px; border-radius: 99px; background: #d0d5dd; transition: background .18s; flex: 0 0 auto; }
.dpp-switch-ui::after { content: ""; position: absolute; width: 17px; height: 17px; top: 2px; left: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.25); transition: transform .18s; }
.dpp-switch input:checked + .dpp-switch-ui { background: #12b76a; }
.dpp-switch input:checked + .dpp-switch-ui::after { transform: translateX(16px); }
.dpp-switch input:focus-visible + .dpp-switch-ui { outline: 3px solid rgba(37,99,235,.18); }
.dpp-switch strong, .dpp-switch small { display: block; }
.dpp-switch strong { font-size: 12px; color: #344054; }
.dpp-switch small { margin-top: 1px; color: #98a2b3; font-size: 10.5px; }

.dpp-link-panel { background: #f8faff; border-color: #d9e4ff; }
.dpp-url-input { position: relative; display: flex; align-items: center; border: 1px solid #b9ccf9; border-radius: 9px; background: #fff; overflow: hidden; }
.dpp-url-input > span { padding-left: 11px; color: #667085; font-size: 12px; white-space: nowrap; }
.dpp-url-input input { border: 0; border-radius: 0; padding: 10px 9px 10px 2px; color: #1849a9; font-weight: 700; box-shadow: none !important; }
.dpp-url-input input[readonly] { color: #667085; cursor: not-allowed; }
.dpp-url-input svg { width: 16px; height: 16px; margin-right: 11px; fill: none; stroke: #98a2b3; stroke-width: 1.8; flex: 0 0 auto; }

.dpp-save-bar { position: sticky; bottom: 14px; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 14px; margin: 0 0 18px; border: 1px solid #dce3ed; border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 8px 24px rgba(16,24,40,.12); backdrop-filter: blur(10px); }
.dpp-save-bar p { margin: 0; color: #667085; font-size: 11px; }
.dpp-save-bar strong { color: #344054; }
.dpp-button { display: inline-flex; align-items: center; justify-content: center; min-height: 37px; padding: 0 14px; }
.dpp-button:active { transform: translateY(1px); }
.dpp-button.is-primary { color: #fff; background: var(--dpp-blue); }
.dpp-button.is-primary:hover { background: var(--dpp-blue-dark); }
.dpp-button.is-secondary { color: #344054; border: 1px solid #d0d5dd; background: #fff; }
.dpp-button.is-secondary:hover { background: #f9fafb; }
.dpp-button.is-publish { color: #fff; background: #079455; }
.dpp-button.is-publish:hover { background: #067647; }
.dpp-button:disabled { background: #e4e7ec; color: #98a2b3; cursor: not-allowed; transform: none; }
/* Mismo aspecto de «no puedes todavía» sin usar `disabled`, que impediría el
   clic y con él el aviso (3-sep-2026). El botón sigue enfocable y el lector de
   pantalla lo anuncia como deshabilitado. */
.dpp-button[aria-disabled="true"] { background: #e4e7ec; color: #98a2b3; transform: none; }
.dpp-button[aria-disabled="true"]:hover { background: #e4e7ec; }
.dpp-consent-aviso {
  margin: 8px 0 0; padding: 8px 12px; border-radius: 8px;
  background: #fffaeb; border: 1px solid #fedf89; color: #93370d;
  font-size: 13px; line-height: 1.45;
}

.dpp-publish-panel { display: flex; gap: 15px; border-color: #d6e4ff; background: linear-gradient(135deg, #f5f8ff, #fff); padding: 22px; }
.dpp-publish-panel.is-live { border-color: #abefc6; background: linear-gradient(135deg, #ecfdf3, #fff); }
.dpp-publish-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; background: #e0eaff; color: #3538cd; font-weight: 800; }
.dpp-publish-icon.is-live { background: #d1fadf; color: #067647; }
.dpp-publish-icon.is-suspended { background: #fee4e2; color: #b42318; }
.dpp-publish-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; }
.dpp-publish-copy { min-width: 0; flex: 1; }
.dpp-publish-copy h2 { margin: 1px 0 4px; font-size: 16px; }
.dpp-publish-copy > p { margin: 0 0 14px; color: #667085; font-size: 12px; line-height: 1.5; }
.dpp-publish-checklist { padding: 11px 13px; margin: 12px 0; border-radius: 8px; background: #fff; border: 1px solid #d9e4ff; color: #475467; font-size: 11px; line-height: 1.5; }
.dpp-publish-checklist ul { margin: 5px 0 0 17px; padding: 0; }
.dpp-publish-form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.dpp-consent-check { display: flex; align-items: flex-start; gap: 9px; max-width: 740px; color: #475467; font-size: 11px; line-height: 1.5; cursor: pointer; }
.dpp-consent-check input { margin-top: 2px; flex: 0 0 auto; accent-color: #079455; }
.dpp-share-row { display: flex; gap: 7px; margin-top: 12px; }
.dpp-share-row input { min-width: 0; flex: 1; padding: 0 10px; color: #067647; background: #fff; }
.dpp-unpublish-form { margin-top: 12px; }

/* `max-height` + scroll propio: la tarjeta de hoy mide 411 px y cabe, pero la
   vista «Página completa» es un iframe que crece. Sin este tope, lo que pase
   de la altura de la ventana se cortaría por abajo y no habría forma de
   llegar a ello — un recorte silencioso, que es peor que uno visible. */
.dpp-preview-sticky { position: sticky; top: 82px;
  max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; }
/* `wrap` y `gap` (26-ago-2026): el encabezado pasó de dos hijos a tres al
   sumarse «Vista previa completa». Sin envolver, en la columna estrecha el
   par Tarjeta/Página completa se comprimía hasta partir sus palabras. */
.dpp-preview-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 3px 9px; }
/* La variante compacta: el mismo botón del encabezado, más chico, para que
   quepa junto al par de vistas y en la barra de guardar sin dominarlas. */
.dpp-preview-link.is-compacto { padding: 6px 10px; font-size: 11.5px; border-radius: 8px; }
.dpp-preview-link.is-compacto svg { width: 14px; height: 14px; }
/* En la barra de guardar el orden es: aviso · vista previa · Guardar. El
   `auto` empuja los dos botones juntos a la derecha en vez de dejar el nuevo
   flotando en medio, que es lo que hace `space-between` con tres hijos. */
.dpp-save-bar .dpp-preview-link { margin-left: auto; }
.dpp-preview-heading span { color: #344054; font-size: 12px; font-weight: 750; }
.dpp-preview-heading small { color: #98a2b3; font-size: 9.5px; }
.dpp-preview-frame { padding: 15px; border-radius: 22px; background: #edf1f7; border: 1px solid #dce3ed; box-shadow: inset 0 1px 2px rgba(16,24,40,.04); }
.dpp-preview-frame .dpp-profile-card { font-size: .84em; border-radius: 16px; box-shadow: 0 8px 25px rgba(29,41,57,.08); }
.dpp-preview-frame .dpp-card-hero { padding: 18px 16px 13px; }
.dpp-preview-frame .dpp-photo { width: 74px; height: 74px; }
.dpp-preview-frame .dpp-photo { width: 79px; height: 79px; }
.dpp-preview-frame .dpp-chip { font-size: 8px; padding: 3px 7px; }
.dpp-preview-frame .dpp-identity h1 { font-size: 19px; }
.dpp-preview-frame .dpp-card-section { padding: 14px 18px; }
.dpp-preview-frame .dpp-fact { padding: 9px 6px; }
.dpp-preview-frame .dpp-contact { padding: 14px 18px 19px; }

/* Shared public profile card ------------------------------------------------ */
/* `--dpp-card-bg` (26-ago-2026): el fondo de la tarjeta deja de estar escrito
   a mano en cuatro sitios y pasa a ser UNA variable. No es limpieza: el médico
   puede elegir el color de fondo, y todo lo que se apoyaba en «aquí es blanco»
   —el degradado del encabezado, el botón secundario— se quedaba blanco encima
   de un fondo de color. Medido: con fondo «arena» y alcance «pleno», el hero
   degradaba a #fff puro sobre crema y el botón «Contactar» era un recuadro
   blanco flotando. */
.dpp-profile-card { --dpp-card-bg: #fff; width: 100%; overflow: visible; border: 1px solid #e4e8f0; border-radius: 22px; background: var(--dpp-card-bg); box-shadow: 0 16px 50px rgba(20,35,75,.09); }

/* ── 1 · Quién es ─────────────────────────────────────────────────────────
   La foto es el elemento de confianza más fuerte de la página: redonda y
   grande, no un cuadro chico al lado del nombre. */
.dpp-card-hero { padding: 28px 32px 20px; background: linear-gradient(160deg, #f7fbff 0%, var(--dpp-card-bg) 58%, #f2f9f7 100%); border-bottom: 1px solid #edf0f5; }
.dpp-hero-row { display: flex; align-items: center; gap: 20px; }
.dpp-photo-wrap { position: relative; flex: 0 0 auto; }
/* El aro de la foto sigue al fondo de la tarjeta: con `#fff` fijo, sobre un
   fondo profundo quedaba un anillo blanco recortando la cara. */
.dpp-photo { display: block; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 4px solid var(--dpp-card-bg); box-shadow: 0 6px 20px rgba(20,35,75,.18); }
.dpp-photo-placeholder { display: grid; place-items: center; box-sizing: border-box; background: linear-gradient(145deg, #dbeafe, #e0e7ff); color: #3448a4; font-size: 32px; font-weight: 800; letter-spacing: -.04em; }
.dpp-identity { min-width: 0; }
.dpp-identity h1,
.dpp-identity h2 { margin: 0; color: var(--dpp-navy); font-size: 27px; line-height: 1.12; letter-spacing: -.035em; overflow-wrap: anywhere; }
.dpp-specialty { margin: 5px 0 0; color: var(--dpp-blue); font-size: 14.5px; line-height: 1.35; font-weight: 700; }

/* La cédula se muestra y el pie aclara que no la verificamos. El enlace al
   registro de la SEP la vuelve comprobable en un toque. */
.dpp-license { display: inline-flex; align-items: center; gap: 5px; margin: 9px 0 0; padding: 3px 9px 3px 7px; border-radius: 999px; background: #ecfdf3; color: #067647; font-size: 10.5px; font-weight: 700; line-height: 1.4; }
.dpp-license svg { width: 12px; height: 12px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dpp-license span { font-weight: 800; }
.dpp-license a { margin-left: 3px; color: #067647; text-decoration: underline; text-underline-offset: 2px; }

.dpp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.dpp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #e4e8f0; border-radius: 999px; background: #fff; color: #475467; font-size: 10.5px; font-weight: 700; line-height: 1.3; }
.dpp-chip[hidden] { display: none; }
.dpp-chip-avail { background: #ecfdf3; border-color: #c3ecd4; color: #067647; }
.dpp-chip-avail i { width: 6px; height: 6px; border-radius: 50%; background: #12b76a; flex: 0 0 auto; }
.dpp-chip-avail.is-closed { background: #f2f4f7; border-color: #e4e8f0; color: #667085; }
.dpp-chip-avail.is-closed i { background: #98a2b3; }

/* ── 2 · Lo que decide ────────────────────────────────────────────────────
   Horario, precio y modalidad en una línea: son las tres preguntas que alguien
   se hace antes de escribir. Cada celda se colapsa sola si su campo está vacío. */
.dpp-facts { display: flex; border-bottom: 1px solid #edf0f5; }
.dpp-facts[hidden] { display: none; }
.dpp-fact { flex: 1 1 0; min-width: 0; padding: 13px 10px; text-align: center; border-right: 1px solid #edf0f5; }
.dpp-fact:last-child { border-right: 0; }
.dpp-fact[hidden] { display: none; }
.dpp-fact span { display: block; margin-bottom: 3px; color: #98a2b3; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.dpp-fact strong { display: block; color: var(--dpp-navy); font-size: 12px; line-height: 1.35; font-weight: 750; overflow-wrap: anywhere; }

/* ── 3 · La acción ───────────────────────────────────────────────────────
   Dentro de la primera pantalla. Antes vivía debajo de ocho renglones de
   biografía, que en un teléfono es medio scroll. */
.dpp-quick-contact { padding: 18px 32px 6px; }
.dpp-primary-cta { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; border-radius: 12px; background: #079455; color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; box-shadow: 0 6px 16px rgba(7,148,85,.24); transition: background .15s ease, transform .15s ease; }
.dpp-primary-cta:hover { background: #067647; transform: translateY(-1px); }
.dpp-primary-cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.dpp-primary-cta .dpp-ico-wa { fill: currentColor; stroke: none; }

.dpp-secondary-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; }
.dpp-secondary-row > *:only-child { grid-column: 1 / -1; }
.dpp-contact-menu { position: relative; }
.dpp-contact-menu[hidden] { display: none; }
.dpp-secondary-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; box-sizing: border-box; min-height: 42px; padding: 0 12px; border: 1px solid #d8dfe9; border-radius: 11px; background: var(--dpp-card-bg); color: #41546a; font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.dpp-secondary-btn:hover { border-color: #b6c4d6; background: #f9fbfd; }
.dpp-secondary-btn[hidden] { display: none; }
.dpp-secondary-btn svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dpp-secondary-btn .dpp-caret { width: 13px; height: 13px; stroke-width: 2.4; transition: transform .15s ease; }
.dpp-secondary-btn[aria-expanded="true"] { border-color: #b6c4d6; background: #f4f8fc; }
.dpp-secondary-btn[aria-expanded="true"] .dpp-caret { transform: rotate(180deg); }

.dpp-menu { position: absolute; right: 0; left: 0; top: calc(100% + 6px); z-index: 20; overflow: hidden; border: 1px solid #e4e8f0; border-radius: 12px; background: #fff; box-shadow: 0 14px 32px rgba(20,35,75,.18); }
.dpp-menu[hidden] { display: none; }
.dpp-menu a { display: flex; align-items: center; gap: 10px; padding: 11px 13px; color: #344054; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.dpp-menu a + a { border-top: 1px solid #f0f3f7; }
.dpp-menu a:hover { background: #f7fafd; }
.dpp-menu svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.dpp-menu .dpp-ico-wa { fill: #25D366; stroke: none; }
.dpp-menu small { display: block; margin-top: 1px; color: var(--dpp-muted); font-size: 10.5px; font-weight: 500; }

/* ── 4 · El detalle ──────────────────────────────────────────────────────
   El recorte de la biografía es de CSS y no de servidor: el texto completo
   sigue en el HTML para los buscadores y para los lectores de pantalla. */
.dpp-card-section { padding: 20px 32px; border-bottom: 1px solid #edf0f5; }
.dpp-intro h2 { margin: 0 0 8px; color: var(--dpp-navy); font-size: 19px; line-height: 1.35; letter-spacing: -.018em; }
.dpp-intro p { margin: 0; color: #5f6879; font-size: 13px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.dpp-bio.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dpp-readmore { margin-top: 7px; padding: 0; border: 0; background: none; color: var(--dpp-blue); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.dpp-readmore[hidden] { display: none; }
.dpp-card-section h3 { margin: 0 0 12px; color: #344054; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }

.dpp-services { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.dpp-services li { padding: 6px 11px; border-radius: 9px; background: #f2f7fb; color: #33506b; font-size: 11.5px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }

.dpp-location { display: grid; gap: 11px; }
.dpp-location-row { display: flex; align-items: flex-start; gap: 10px; }
.dpp-location-row svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: #5875b9; stroke-width: 1.7; }
.dpp-location-row strong { display: block; color: #344054; font-size: 12.5px; line-height: 1.4; }
.dpp-location-row p { margin: 2px 0 0; color: #667085; font-size: 11.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.dpp-maps-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; color: var(--dpp-blue); font-size: 11.5px; font-weight: 700; text-decoration: none; }
.dpp-maps-link svg { width: 14px; height: 14px; stroke: currentColor; }
.dpp-contact { padding: 20px 32px 28px; }
.dpp-contact-placeholder { margin: 0; padding: 10px; border-radius: 8px; background: #f8fafc; color: #98a2b3; font-size: 10px; text-align: center; }

/* Otras vías de contacto (bloque solo del editor). Estas reglas faltaban: sin
   tamaño declarado, el SVG del correo se dibujaba al ancho completo de la
   tarjeta con el relleno negro por defecto — el "recuadro negro" que se veía
   en la vista previa entre la ubicación y el pie. */
.dpp-secondary-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dpp-secondary-actions a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid #dbe3ee; border-radius: 9px; background: #f8fafc; color: #33506b; font-size: 11.5px; font-weight: 650; text-decoration: none; overflow-wrap: anywhere; }
.dpp-secondary-actions a[hidden] { display: none; }
.dpp-secondary-actions svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ── 5 · Portafolio ──────────────────────────────────────────────────────
   Fotos con pie (consultorio, títulos, diplomas). El recorte a la retícula es
   visual (object-fit); el clic abre la imagen completa en su proporción. */
/* ── Evidencias: rejilla con destacadas (26-ago-2026) ─────────────────────
   Encargo de Francisco: «un diseño más premium, tal vez ampliando unas más
   que otras; un botón para destacar ciertas fotos o videos y que se vean más
   grandes».

   Columnas de 190 px y no de 150: con tres o cuatro piezas por fila, una que
   ocupa el doble se lee como jerarquía; con seis pequeñitas se lee como un
   error de maquetado. `grid-auto-rows` fija el alto de la fila para que
   `span 2` dé exactamente el doble y no un hueco a medias. */
.dpp-portfolio-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  grid-auto-rows: 160px;
}
/* `relative` para anclar la insignia de play a SU pieza y no a la rejilla.
   Y COLUMNA FLEX, que no es adorno: la celda tiene alto fijo
   (`grid-auto-rows`) y el pie va DENTRO de ese alto. Sin esto —medido en
   navegador— el medio ocupaba el 100% de la celda y el `<figcaption>` se
   desbordaba encima de la fila siguiente: los títulos salían cortados por la
   mitad. El medio se estira, el pie ocupa lo suyo. */
.dpp-portfolio-item {
  margin: 0; min-width: 0; position: relative;
  display: flex; flex-direction: column;
}
.dpp-portfolio-item > a,
.dpp-portfolio-item > .dpp-portfolio-play { flex: 1 1 auto; min-height: 0; }
.dpp-portfolio-item > figcaption { flex: 0 0 auto; }
/* La destacada ocupa dos columnas y dos filas. `span 2` se recorta solo
   cuando no hay dos columnas —en móvil— así que no hace falta apagarlo a
   mano en el breakpoint. */
.dpp-portfolio-item.is-destacado { grid-column: span 2; grid-row: span 2; }

/* El botón que ES el video en la rejilla (26-ago-2026). Ya no hay un control
   de «ampliar» de 30 px en la esquina: la pieza entera es el disparador, que
   es lo que Francisco pidió — «darle click, que se abra como las fotos y se
   reproduzca». Es un <button> de verdad, así que llega por teclado y responde
   a Enter y a Espacio sin que haya que programarlo. */
.dpp-portfolio-play {
  display: block; position: relative; width: 100%; height: 100%; padding: 0;
  border: 1px solid #e4e8f0; border-radius: 12px; overflow: hidden;
  background: #0c111d; cursor: pointer;
}
/* El <video> es el CARTEL, no el reproductor. Sin `controls` ya no captura el
   clic, pero algunos navegadores dibujan igual su propio botón de play encima:
   esto se asegura de que el clic sea siempre del botón de fuera. */
.dpp-portfolio-play video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.dpp-play-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 999px; background: rgba(255, 255, 255, .92); color: #14234b;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  transition: transform .15s ease, background .15s ease;
}
.dpp-play-badge svg { width: 22px; height: 22px; margin-left: 2px; }
.dpp-portfolio-play:hover .dpp-play-badge { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.dpp-portfolio-play:focus-visible { outline: 2px solid var(--dpp-blue); outline-offset: 2px; }
/* La destacada merece una insignia más grande: si la pieza mide el doble y el
   play mide igual, la jerarquía se pierde a media pantalla. */
.dpp-portfolio-item.is-destacado .dpp-play-badge { width: 62px; height: 62px; }
.dpp-portfolio-item.is-destacado .dpp-play-badge svg { width: 29px; height: 29px; }

/* El interruptor de destacar, en la fila del editor (26-ago-2026).
   Apagado se lee como una acción disponible; encendido, como un ESTADO —de ahí
   el relleno de la estrella y el fondo ámbar. Un botón que sólo cambia de
   texto obliga a leerlo para saber en qué está. */
.dpp-destacar {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 6px 11px 6px 9px; font: inherit; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--dpp-border); border-radius: 9px;
  background: #fff; color: var(--dpp-muted); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.dpp-destacar svg { width: 15px; height: 15px; }
.dpp-destacar:hover { color: #b54708; border-color: #fec84b; background: #fffcf5; }
.dpp-destacar.is-on { color: #b54708; border-color: #fdb022; background: #fffaeb; }
.dpp-destacar:focus-visible { outline: 2px solid var(--dpp-blue); outline-offset: 2px; }

/* Se conserva `.dpp-ampliar` porque el EDITOR la usa para su propia vista
   previa; en la página pública ya no se dibuja ninguna. */
.dpp-ampliar {
  position: absolute; top: 7px; right: 7px; z-index: 2;
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 0; border-radius: 9px; cursor: pointer;
  background: rgba(12, 17, 29, .62); color: #fff;
  opacity: .85; transition: opacity .15s ease, background .15s ease;
}
.dpp-ampliar svg { width: 15px; height: 15px; }
.dpp-ampliar:hover { opacity: 1; background: rgba(12, 17, 29, .82); }
.dpp-ampliar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; opacity: 1; }
/* El video dentro del visor comparte los topes de la foto: si no, uno vertical
   se sale de la pantalla por abajo. */
.dpp-visor video { max-width: 100%; max-height: 78vh; border-radius: 14px; background: #000; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.dpp-visor img[hidden], .dpp-visor video[hidden] { display: none; }
/* `height:100%` y no una altura fija: la celda ya la fija `grid-auto-rows`, y
   con un alto propio la pieza destacada dejaría medio hueco vacío debajo. */
.dpp-portfolio-item a { display: block; height: 100%; border-radius: 12px; overflow: hidden; border: 1px solid #e4e8f0; background: #f8fafc; }
.dpp-portfolio-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dpp-portfolio-item figcaption { margin-top: 5px; color: #5f6879; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.dpp-preview-frame .dpp-portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; grid-auto-rows: 92px; }
.dpp-preview-frame .dpp-portfolio-item img { height: 100%; }
.dpp-preview-frame .dpp-play-badge { width: 32px; height: 32px; }
.dpp-preview-frame .dpp-play-badge svg { width: 15px; height: 15px; }

/* ── Guía de publicación (editor) ─────────────────────────────────────────
   La barra dice cuánto falta ANTES de llegar al final de la página; cada
   ficha salta a su campo. La llena doctor_public_profile.js en vivo. */
.dpp-guide { margin: 0 0 18px; padding: 14px 18px; border: 1px solid #dbe3ee; border-radius: 14px; background: #fff; box-shadow: 0 3px 14px rgba(20,35,75,.05); }
.dpp-guide[hidden] { display: none; }
.dpp-guide-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dpp-guide-text { margin: 0; font-size: 12.5px; color: #475467; }
.dpp-guide-text strong { color: #1d2939; font-weight: 750; }
.dpp-guide-pct { color: #1849a9; font-size: 13px; font-weight: 800; }
.dpp-guide-bar { height: 7px; margin: 9px 0 0; border-radius: 99px; background: #eef1f6; overflow: hidden; }
.dpp-guide-bar span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #2e90fa, #1849a9); transition: width .45s ease; }
.dpp-guide.is-complete .dpp-guide-bar span { background: linear-gradient(90deg, #12b76a, #079455); }
.dpp-guide.is-complete .dpp-guide-pct { color: #067647; }
.dpp-guide-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.dpp-guide-chips:empty { display: none; }
.dpp-guide-chip { padding: 5px 11px; border: 1px dashed #b2ccff; border-radius: 99px; background: #f5f8ff; color: #1849a9; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.dpp-guide-chip:hover { background: #e0eaff; border-style: solid; }
.dpp-guide-chip.is-required { border-color: #fec84b; background: #fffaeb; color: #b54708; }
.dpp-guide-chip.is-required:hover { background: #fef0c7; }

/* ── Clic-para-editar en la vista previa (editor) ─────────────────────────
   Afordancia al pasar el cursor y resaltón al llegar al campo. Solo dentro
   del marco de la vista previa: en la página pública no hay data-edita vivo. */
.dpp-preview-frame [data-edita] { cursor: pointer; position: relative; border-radius: 8px; transition: box-shadow .15s ease, background-color .15s ease; }
.dpp-preview-frame [data-edita]:hover { box-shadow: 0 0 0 2px rgba(46,144,250,.45); background-color: rgba(46,144,250,.045); }
.dpp-preview-frame [data-edita]:hover::after { content: "Editar ✎"; position: absolute; top: -8px; right: -4px; z-index: 3; padding: 2px 8px; border-radius: 99px; background: #1849a9; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .02em; pointer-events: none; }
.dpp-preview-hint { margin: 9px 3px 0; color: #98a2b3; font-size: 10.5px; text-align: center; }
@keyframes dppFlash { 0% { box-shadow: 0 0 0 3px rgba(46,144,250,.55); } 100% { box-shadow: 0 0 0 3px rgba(46,144,250,0); } }
.dpp-flash { animation: dppFlash 1.5s ease-out 1; border-radius: 10px; }

/* ── Página pública: entrada animada, visor y microinteracciones ──────────
   Todo queda anulado con prefers-reduced-motion, y el editor no se toca
   (las reglas cuelgan de .dpp-public-page). */
.dpp-public-page .dpp-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; transition-delay: calc(var(--dpp-reveal-orden, 0) * 70ms); }
.dpp-public-page .dpp-reveal.is-in { opacity: 1; transform: none; }
.dpp-public-page .dpp-primary-cta { transition: transform .18s ease, box-shadow .18s ease; }
.dpp-public-page .dpp-primary-cta:hover { transform: translateY(-1.5px); box-shadow: 0 10px 26px rgba(7,148,85,.28); }
.dpp-public-page .dpp-portfolio-item a { transition: transform .18s ease, box-shadow .18s ease; }
.dpp-public-page .dpp-portfolio-item a:hover { transform: translateY(-2px) scale(1.012); box-shadow: 0 10px 24px rgba(29,41,57,.14); }
@keyframes dppLatido { 0%, 100% { box-shadow: 0 0 0 0 rgba(7,148,85,.32); } 55% { box-shadow: 0 0 0 11px rgba(7,148,85,0); } }
.dpp-public-page .dpp-primary-cta { animation: dppLatido 2.1s ease-out .8s 2; }

.dpp-visor { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 26px; background: rgba(12,17,29,.86); backdrop-filter: blur(3px); }
.dpp-visor[hidden] { display: none; }
.dpp-visor figure { margin: 0; max-width: min(1080px, 92vw); text-align: center; }
.dpp-visor img { max-width: 100%; max-height: 78vh; border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.dpp-visor figcaption { margin-top: 12px; color: #e6eaf2; font-size: 13.5px; }
.dpp-visor-cerrar { position: absolute; top: 14px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 99px; background: rgba(255,255,255,.14); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.dpp-visor-cerrar:hover { background: rgba(255,255,255,.26); }
.dpp-visor-flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 99px; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.dpp-visor-flecha:hover { background: rgba(255,255,255,.26); }
.dpp-visor-flecha.is-prev { left: 16px; }
.dpp-visor-flecha.is-next { right: 16px; }
body.dpp-visor-abierto { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .dpp-public-page .dpp-reveal { opacity: 1; transform: none; transition: none; }
  .dpp-public-page .dpp-primary-cta { animation: none; }
  .dpp-public-page .dpp-primary-cta:hover,
  .dpp-public-page .dpp-portfolio-item a:hover { transform: none; }
  .dpp-guide-bar span { transition: none; }
  .dpp-flash { animation: none; }
}

/* ── Barra fija ──────────────────────────────────────────────────────────
   Aparece solo cuando el botón principal ya salió de la pantalla, para que
   nunca haya que buscar cómo contactar. */
.dpp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 9px 16px calc(9px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-top: 1px solid #e4e8f0; box-shadow: 0 -6px 20px rgba(20,35,75,.10); transform: translateY(105%); transition: transform .22s ease; }
.dpp-sticky.is-visible { transform: translateY(0); }
.dpp-sticky[hidden] { display: none; }
.dpp-sticky-id { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.dpp-sticky-id img,
.dpp-sticky-id > span { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: linear-gradient(145deg, #dbeafe, #e0e7ff); color: #3448a4; font-size: 12px; font-weight: 800; }
.dpp-sticky-id strong { display: block; color: var(--dpp-navy); font-size: 12.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpp-sticky-id small { display: block; color: var(--dpp-muted); font-size: 10.5px; }
.dpp-sticky-cta { flex: 0 0 auto; padding: 10px 16px; border-radius: 10px; background: #079455; color: #fff; font-size: 12.5px; font-weight: 800; text-decoration: none; }

.dpp-public-shell { width: min(100% - 32px, 640px); margin: 0 auto; padding: 48px 0 30px; }
/* ── Vuelta al directorio (27-ago-2026) ────────────────────────────────────
   Va DEBAJO de la tarjeta y encima del pie, en el fondo de la página y no
   dentro de la tarjeta: es navegación del sitio, no información del médico.
   Por eso usa los grises del sistema y NO las variables del tema
   (--dpp-ink, --dpp-card-bg): si tomara el color elegido por el médico,
   sobre «bosque» o «pizarra» —los dos fondos oscuros— quedaría texto azul
   marino sobre verde oscuro. Aquí el contraste tiene que ser fijo. */
.dpp-directorio { margin-top: 20px; text-align: center; font-size: 11.5px; color: #7b8495; }
.dpp-dir-titulo { display: block; margin-bottom: 6px; font-weight: 600; color: #6b7484; }
.dpp-directorio ul { list-style: none; margin: 0; padding: 0; display: flex;
  flex-wrap: wrap; justify-content: center; gap: 6px 8px; }
.dpp-directorio li { margin: 0; }
.dpp-directorio a { display: inline-block; padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.82); border: 1px solid rgba(120,132,150,.28);
  color: #42526e; text-decoration: none; font-weight: 600; line-height: 1.35; }
.dpp-directorio a:hover { border-color: #52699e; color: #29406e; }

.dpp-powered-by { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; margin-top: 18px; color: #7b8495; font-size: 10px; text-align: center; }
.dpp-powered-by > div { display: flex; align-items: center; gap: 7px; }
.dpp-powered-by a { display: inline-flex; color: #52699e; }
.dpp-powered-by img { width: 105px; height: 20px; object-fit: contain; }
.dpp-powered-by p { max-width: 520px; margin: 0; line-height: 1.5; }

[hidden] { display: none !important; }

@media (max-width: 1180px) {
  .dpp-editor-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; }
}

@media (max-width: 980px) {
  .dpp-editor-grid { grid-template-columns: 1fr; }
  .dpp-preview-column { display: none; }
  .dpp-preview-sticky { position: static; }
  .dpp-preview-frame { max-width: 430px; margin: 0 auto; }
}

@media (max-width: 620px) {
  .dpp-editor-header { align-items: stretch; flex-direction: column; gap: 13px; }
  .dpp-preview-link { align-self: flex-start; }
  .dpp-editor-panel { padding: 16px; border-radius: 11px; }
  .dpp-form-grid { grid-template-columns: 1fr; }
  .dpp-span-2 { grid-column: auto; }
  .dpp-photo-editor { align-items: flex-start; }
  .dpp-editor-avatar { width: 70px; height: 70px; border-radius: 15px; }
  .dpp-photo-controls { gap: 8px; }
  .dpp-file-button, .dpp-camera-button { min-height: 38px; box-sizing: border-box; }
  .dpp-camera-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 15px; }
  .dpp-camera-modal { max-height: calc(100dvh - 20px); padding: 14px; border-radius: 15px; }
  .dpp-camera-header { margin-bottom: 12px; }
  .dpp-camera-header h2 { font-size: 16px; }
  .dpp-camera-stage { border-radius: 13px; }
  .dpp-camera-actions button { flex: 1; }
  .dpp-segmented { grid-template-columns: 1fr; }
  .dpp-save-bar { bottom: 8px; }
  .dpp-save-bar p { display: none; }
  .dpp-save-bar .dpp-button { width: 100%; }
  .dpp-publish-panel { padding: 17px; }
  .dpp-publish-icon { display: none; }
  .dpp-share-row { flex-wrap: wrap; }
  .dpp-share-row input { flex-basis: 100%; height: 38px; }
  .dpp-public-shell { width: min(100% - 20px, 640px); padding-top: 20px; padding-bottom: 84px; }
  .dpp-card-hero { padding: 20px 18px 16px; }
  .dpp-hero-row { gap: 14px; }
  .dpp-photo { width: 86px; height: 86px; border-width: 3px; }
  .dpp-photo-placeholder { font-size: 26px; }
  .dpp-identity h1, .dpp-identity h2 { font-size: 21px; }
  .dpp-specialty { font-size: 13px; }
  .dpp-fact { padding: 11px 6px; }
  .dpp-fact strong { font-size: 11px; }
  .dpp-card-section { padding: 17px 18px; }
  .dpp-quick-contact { padding: 15px 18px 4px; }
  .dpp-contact { padding: 18px 18px 23px; }
  .dpp-url-input { display: block; padding-top: 8px; }
  .dpp-url-input > span { display: block; max-width: calc(100% - 22px); overflow: hidden; text-overflow: ellipsis; padding: 0 11px 3px; }
  .dpp-url-input input { padding: 7px 11px 10px; }
  .dpp-url-input svg { position: absolute; right: 0; margin-top: -31px; }
}

.dpp-maps-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 7px 14px;
  background: #EFF6FF; color: #1565B8;
  border: 1px solid #BFDBFE; border-radius: 9px;
  font-size: 13.5px; font-weight: 700; text-decoration: none;
}
.dpp-maps-link:hover { background: #DBEAFE; }
.dpp-maps-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

.dpp-share-bar { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; }
.dpp-share-menu-wrap { position: relative; width: min(100%, 320px); }
.dpp-share-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; min-height: 46px; padding: 0 18px; border: 1px solid #d8dfe9; border-radius: 12px; background: #fff; color: #344054; font: inherit; font-size: 13.5px; font-weight: 750; text-decoration: none; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.dpp-share-btn:hover { border-color: #b6c4d6; background: #f9fbfd; }
.dpp-share-btn svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dpp-share-btn[aria-expanded="true"] { border-color: #b6c4d6; background: #f4f8fc; }

.dpp-share-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 30; overflow: hidden; border: 1px solid #e4e8f0; border-radius: 13px; background: #fff; box-shadow: 0 16px 38px rgba(20,35,75,.20); }
.dpp-share-menu[hidden] { display: none; }
.dpp-share-menu a,
.dpp-share-menu button { display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box; padding: 12px 14px; border: 0; background: none; color: #344054; font: inherit; font-size: 12.5px; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.dpp-share-menu a + a,
.dpp-share-menu a + button,
.dpp-share-menu button + a,
.dpp-share-menu button + button { border-top: 1px solid #f0f3f7; }
.dpp-share-menu a:hover,
.dpp-share-menu button:hover { background: #f7fafd; }
.dpp-share-menu button:disabled { opacity: .6; cursor: wait; }
.dpp-share-menu svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.dpp-share-menu .dpp-ico-wa { fill: #25D366; stroke: none; }
.dpp-share-menu small { display: block; margin-top: 1px; max-width: 210px; overflow: hidden; color: var(--dpp-muted); font-size: 10.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.dpp-share-toast { margin: 0; padding: 6px 12px; border-radius: 999px; background: #ecfdf3; color: #067647; font-size: 11.5px; font-weight: 700; }
.dpp-share-toast[hidden] { display: none; }

.dpp-ai-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.dpp-ai-button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 9px; cursor: pointer;
  background: #F5F3FF; color: #6D28D9; border: 1.5px solid #DDD6FE;
  font-size: 13px; font-weight: 700; font-family: inherit;
}
.dpp-ai-button:hover { background: #EDE9FE; }
.dpp-ai-button:disabled { opacity: .6; cursor: wait; }
.dpp-ai-button svg { width: 15px; height: 15px; }
.dpp-ai-hint { color: #6B7280; font-size: 12px; }
.dpp-ai-hint.is-error { color: #B91C1C; }

/* ══ Pestañas del editor, diseño y espejo (25-ago-2026) ══════════════════════
   La página, sus evidencias y el portal del paciente viven en un solo editor
   con tres pestañas; el diseño (acento y orden) se aplica en vivo a la vista
   previa y al espejo. */
/* Pestañas = PASOS (26-ago-2026, pedido de Francisco: «más visibles, con
   número 1 y 2 como si fueran pasos a seguir»).

   Antes eran dos etiquetas de texto con un subrayado de 2.5 px: el estado
   activo se distinguía por color y una línea, y a 13.5 px eso es poco peso
   para lo único que decide qué mitad del editor estás viendo. Ahora cada una
   es una caja con su número, y la activa se llena.

   `border-bottom` se fue del contenedor a propósito: una línea que cruza por
   debajo de dos cajas con borde propio lee como tabla, no como pasos. */
.dpp-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 18px; }
.dpp-tab { appearance: none; background: #fff; padding: 9px 15px 9px 10px; font: inherit;
  display: inline-flex; align-items: center; gap: 9px;
  border: 1.5px solid var(--dpp-border); border-radius: 12px;
  font-size: 14.5px; font-weight: 700; color: var(--dpp-muted); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s; }
.dpp-tab-num { display: grid; place-items: center; flex: 0 0 24px; height: 24px;
  border-radius: 8px; background: #eef1f6; color: #6b7280;
  font-size: 12.5px; font-weight: 800; line-height: 1; }
.dpp-tab:hover { color: var(--dpp-ink); border-color: #c3cbd9; }
.dpp-tab.is-active { color: var(--dpp-blue); border-color: var(--dpp-blue); background: #f4f6ff; }
.dpp-tab.is-active .dpp-tab-num { background: var(--dpp-blue); color: #fff; }
/* El foco de teclado no puede ser el mismo anillo azul que el estado activo:
   se confundirían. Va por fuera del borde. */
.dpp-tab:focus-visible { outline: 2px solid var(--dpp-blue); outline-offset: 2px; }

/* La página del portal del paciente (26-ago-2026) es una sola columna de
   interruptores. Sin este tope hereda los 1440 px del editor y las descripciones
   se estiran a un renglón larguísimo. */
.dpp-portal-page { max-width: 900px; }
.dpp-tab-pane { display: none; }
.dpp-tab-pane.is-active { display: block; }

/* La vista previa se esconde con [hidden] aunque la clase traiga estilos. */
.dpp-preview-frame[hidden], .dpp-espejo[hidden] { display: none; }

.dpp-field-title { display: block; font-size: 12.5px; font-weight: 700; color: var(--dpp-ink); margin-bottom: 8px; }

.dpp-swatch-row { display: flex; flex-wrap: wrap; gap: 9px; }
.dpp-swatch { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.dpp-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.dpp-swatch-color { width: 27px; height: 27px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--dpp-border); transition: box-shadow .12s ease, transform .12s ease; }
/* La muestra de FONDO no es un círculo de color: lleva dentro un «Aa» pintado
   con la tinta que ese fondo va a usar (26-ago-2026). Un cuadrito de color
   solo dice «es beige»; lo que el médico necesita juzgar antes de elegir es si
   ese texto sobre ese fondo le gusta y se lee. Por eso es cuadrada y más
   grande: un círculo de 27 px no cabe una letra legible. */
.dpp-swatch-fondo {
  width: 38px; height: 30px; border-radius: 8px;
  border: 1px solid var(--dpp-border); box-shadow: none;
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 800; letter-spacing: -.01em;
}
.dpp-swatch small { font-size: 10px; color: var(--dpp-muted); }
.dpp-swatch input:checked + .dpp-swatch-color { box-shadow: 0 0 0 2.5px var(--dpp-blue); transform: scale(1.08); }
.dpp-swatch input:focus-visible + .dpp-swatch-color { box-shadow: 0 0 0 2.5px var(--dpp-blue-dark); }

.dpp-orden-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dpp-orden-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--dpp-border); border-radius: 10px; background: #fff; }
/* `flex: 1` desde que la fila tiene tres hijos (asa · nombre · controles): con
   el `space-between` a secas el nombre quedaba flotando en medio, separado del
   asa que lo arrastra. Así el asa y el nombre van juntos y los controles se
   pegan a la derecha. */
.dpp-orden-nombre { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--dpp-ink); }
.dpp-orden-controles { display: inline-flex; align-items: center; gap: 7px; }
.dpp-orden-ocultar { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--dpp-muted); cursor: pointer; }
.dpp-orden-ocultar input { width: 13px; height: 13px; accent-color: var(--dpp-blue); }
.dpp-orden-btn { appearance: none; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--dpp-border);
  background: #fff; color: var(--dpp-ink); font-size: 13px; font-weight: 800; cursor: pointer; line-height: 1; }
.dpp-orden-btn:hover:not(:disabled) { background: var(--dpp-soft); }
.dpp-orden-btn:disabled { opacity: .35; cursor: default; }

/* ── Ordenar arrastrando (25-ago-2026) ───────────────────────────────────────
   `touch-action: none` NO es decorativo: sin él, en móvil el navegador se queda
   con el gesto para hacer scroll y el `pointermove` nunca llega — el asa se
   vería y no arrastraría nada. */
.dpp-orden-asa {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 28px; height: 28px; margin-right: 2px;
  padding: 0; border: 0; border-radius: 7px;
  background: none; color: #b3bcc9; cursor: grab;
  touch-action: none;
  transition: background .15s ease, color .15s ease;
}
.dpp-orden-asa svg { width: 16px; height: 16px; fill: currentColor; }
.dpp-orden-asa:hover { background: var(--dpp-soft); color: var(--dpp-muted); }
.dpp-orden-asa:focus-visible { outline: 2px solid var(--dpp-blue); outline-offset: 1px; color: var(--dpp-blue); }
.dpp-orden-asa:active { cursor: grabbing; }

/* Mientras se arrastra, el cursor manda en TODA la lista: si no, al salirse la
   fila de debajo del puntero el cursor parpadea entre «agarrando» y flecha. */
.dpp-orden-lista.esta-ordenando { cursor: grabbing; user-select: none; }
.dpp-orden-item { transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease; }
.dpp-orden-item.is-arrastrando {
  opacity: .93; box-shadow: 0 10px 24px rgba(20,35,75,.16);
  border-color: var(--dpp-blue); transform: scale(1.012);
}

/* ── Grupos de opciones tipo segmento (25-ago-2026) ──────────────────────── */
.dpp-segmento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.dpp-segmento-corto { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.dpp-segmento-op { margin: 0; cursor: pointer; }
.dpp-segmento-op input { position: absolute; opacity: 0; width: 0; height: 0; }
.dpp-segmento-op > span {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  box-sizing: border-box; height: 100%; padding: 9px 8px;
  border: 1px solid #d0d5dd; border-radius: 10px; background: #fff;
  text-align: center;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.dpp-segmento-op b { color: var(--dpp-ink); font-size: 12px; font-weight: 700; }
.dpp-segmento-op small { color: var(--dpp-muted); font-size: 10px; line-height: 1.35; }
.dpp-segmento-op:hover > span { border-color: #b6bfcd; background: #fcfdff; }
.dpp-segmento-op input:checked + span {
  border-color: var(--dpp-blue); background: #f5f8ff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.dpp-segmento-op input:checked + span b { color: var(--dpp-blue-dark); }
/* El foco se dibuja sobre la tarjeta porque el radio real es invisible: sin
   esto, moverse con el teclado por el grupo no se vería. */
.dpp-segmento-op input:focus-visible + span { outline: 2px solid var(--dpp-blue); outline-offset: 2px; }

.dpp-foto-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.dpp-sub-etiqueta { display: block; margin-bottom: 6px; color: var(--dpp-muted); font-size: 10.5px; font-weight: 700; }

/* La muestrita que enseña la forma sin tener que abrir la vista previa. */
.dpp-muestra-foto { display: block; width: 18px; height: 18px; background: linear-gradient(145deg, #cbd5e1, #94a3b8); }
.dpp-muestra-foto.is-circulo { border-radius: 50%; }
.dpp-muestra-foto.is-redondeado { border-radius: 5px; }
.dpp-muestra-foto.is-cuadrado { border-radius: 2px; }

.dpp-portfolio-orden { display: inline-flex; gap: 5px; align-items: center; }

.dpp-vista-toggle { display: inline-flex; gap: 3px; background: var(--dpp-soft); border: 1px solid var(--dpp-border);
  border-radius: 9px; padding: 2px; }
.dpp-vista-btn { appearance: none; border: 0; background: none; font: inherit; font-size: 11px; font-weight: 700;
  color: var(--dpp-muted); padding: 4px 9px; border-radius: 7px; cursor: pointer; }
.dpp-vista-btn.is-active { background: #fff; color: var(--dpp-ink); box-shadow: 0 1px 2px rgba(16,24,40,.08); }

.dpp-espejo { border-radius: 22px; border: 1px solid #dce3ed; overflow: hidden; background: #edf1f7; }
.dpp-espejo iframe { display: block; width: 100%; height: min(74vh, 640px); border: 0; background: #fff; }

.dpp-portal-switches { display: flex; flex-direction: column; gap: 4px; }
.dpp-portal-switches .dpp-switch { padding: 9px 4px; border-bottom: 1px solid #f1f3f8; }
.dpp-portal-switches .dpp-switch:last-child { border-bottom: 0; }

/* El pie del portal (4-sep-2026). Sustituye a la `.dpp-save-bar`: ya no hay
   botón que guardar —cada interruptor se manda solo— así que tampoco hace
   falta una barra pegada al fondo persiguiendo al médico. Lo que queda es la
   frase que explica el trato y el renglón de estado.

   El error va en ROJO y no en ámbar como en la hoja de finanzas, a propósito:
   allá un fallo deja un número sin guardar a la vista; aquí deja al médico
   creyendo que cerró un expediente que sigue abierto. */
.dpp-portal-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                  padding: 11px 13px; border: 1px solid #dce3ed; border-radius: 12px;
                  background: #f8fafc; }
.dpp-portal-pie p { margin: 0; color: #667085; font-size: 11px; }
.dpp-portal-estado { font-size: 11.5px; font-weight: 600; color: #98a2b3; }
.dpp-portal-estado.ok { color: #047857; }
.dpp-portal-estado.malo { color: #b42318; }
@media (max-width: 640px) {
  .dpp-portal-pie { align-items: flex-start; flex-direction: column; gap: 7px; }
}

/* ═══ Barra de publicación — 26-ago-2026 ═════════════════════════════════════
 *
 * Encargo de Francisco: «esto de tu enlace y publica cuando estés listo, ya no
 * lo quiero abajo… redúcelo de tamaño… optimiza los botones de guardar, vista
 * previa completa y publicar/despublicar».
 *
 * Reemplaza TRES bloques que estaban repartidos por la página —el panel «Tu
 * enlace» (paso 5), la barra de guardar pegada al fondo del formulario y el
 * panel «Publica cuando estés listo» hasta abajo— por una sola fila encima de
 * las pestañas.
 *
 * Ya NO es `position:sticky`. La barra de guardar lo era porque vivía al final
 * de un formulario larguísimo y había que poder guardar sin subir; arriba del
 * todo, pegarla flotando sobre el contenido sería robar alto de pantalla en
 * celular a cambio de nada.
 */
.dpp-barra-pub {
  margin: 0 0 16px; padding: 11px 14px;
  border: 1px solid var(--dpp-border); border-radius: 13px; background: #fff;
  box-shadow: 0 2px 10px rgba(20, 35, 75, .05);
}
.dpp-barra-pub.is-live { border-color: #abefc6; background: #f7fdf9; }
.dpp-barra-pub.is-suspended { border-color: #fecdca; background: #fffbfa; }

/* ── Panel del directorio (27-ago-2026) ────────────────────────────────────
   Debajo de la barra de publicar, no dentro: lo de arriba son ACCIONES
   (guardar, publicar, despublicar) y esto es información más una preferencia.
   Mezclarlos pondría una casilla que cambia lo que se ve en público a un
   centímetro del botón de despublicar. */
.dpp-dir-panel {
  margin: 0 0 16px; padding: 13px 15px;
  border: 1px solid var(--dpp-border); border-radius: 13px; background: #fff;
}
.dpp-dir-panel.is-live { border-color: #cfe3fb; background: #f7fbff; }
.dpp-dir-cabeza { display: flex; gap: 10px; align-items: flex-start; }
.dpp-dir-cabeza svg {
  flex: 0 0 auto; width: 19px; height: 19px; margin-top: 1px;
  fill: none; stroke: #1b7bd6; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.dpp-dir-cabeza strong { display: block; font-size: 13px; color: #14234b; line-height: 1.4; }
.dpp-dir-cabeza p { margin: 3px 0 0; font-size: 11.5px; color: #475467; line-height: 1.55; }

.dpp-dir-enlaces { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 29px; }
.dpp-dir-enlaces a {
  font-size: 11.5px; font-weight: 600; color: #175cd3; text-decoration: none;
  background: #eff8ff; border: 1px solid #b2ddff; border-radius: 999px; padding: 4px 10px;
}
.dpp-dir-enlaces a:hover { background: #d1e9ff; }

.dpp-dir-visitas { margin: 10px 0 0 29px; font-size: 11.5px; color: #475467; }
.dpp-dir-visitas strong { color: #14234b; font-size: 13px; }

.dpp-dir-casilla {
  display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 0;
  padding-top: 11px; border-top: 1px solid var(--dpp-border);
  color: #475467; font-size: 11px; line-height: 1.5; cursor: pointer;
}
.dpp-dir-casilla input { margin-top: 2px; flex: 0 0 auto; accent-color: #1b7bd6; }
.dpp-barra-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.dpp-pub-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 5px 11px; border-radius: 999px; background: #f2f4f7;
  color: #475467; font-size: 11.5px; font-weight: 750;
}
.dpp-pub-chip i { width: 6px; height: 6px; border-radius: 50%; background: #98a2b3; }
.dpp-pub-chip.is-live { background: #ecfdf3; color: #067647; }
.dpp-pub-chip.is-live i { background: #12b76a; }
.dpp-pub-chip.is-suspended { background: #fff4f3; color: #b42318; }
.dpp-pub-chip.is-suspended i { background: #f04438; }
.dpp-pub-nota { margin: 0; color: #b42318; font-size: 12.5px; line-height: 1.5; }

/* El enlace se lleva el hueco sobrante; los botones no se encogen nunca. Al
   revés —dejando crecer a los botones— la caja del enlace se quedaba en 80 px
   y no se leía ni el nombre del médico. */
.dpp-url-input.is-compacta { flex: 1 1 240px; min-width: 180px; }
.dpp-url-input.is-compacta input { padding-top: 7px; padding-bottom: 7px; }

.dpp-pub-mini {
  flex: 0 0 auto; padding: 7px 11px; border: 1px solid var(--dpp-border);
  border-radius: 8px; background: #fff; color: #344054;
  font: inherit; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.dpp-pub-mini:hover { border-color: var(--dpp-blue); color: var(--dpp-blue); }

.dpp-barra-acciones { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.dpp-barra-acciones .dpp-unpublish-form { margin: 0; }

/* La casilla de consentimiento encoge de CAJA, no de texto: es una declaración
   legal y recortarla sería cambiar lo que el médico acepta. */
.dpp-consent-compacta {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #f1f3f8;
  font-size: 11.5px; line-height: 1.5;
}

@media (max-width: 720px) {
  /* En celular la fila se parte y las acciones ocupan el ancho: tres botones
     apretados en una fila de 390 px dejan áreas táctiles de menos de 40 px. */
  .dpp-barra-acciones { margin-left: 0; width: 100%; }
  .dpp-barra-acciones > * { flex: 1 1 auto; }
  .dpp-barra-acciones .dpp-button,
  .dpp-barra-acciones .dpp-preview-link { width: 100%; justify-content: center; }
  .dpp-url-input.is-compacta { flex: 1 1 100%; }
}

/* ── La barra de intensidad (1-sep-2026) ────────────────────────────────────
   Sustituye a los tres botones Discreto/Medio/Pleno. Encargo de Francisco, que
   reportó dos veces que «medio» no hacía nada: funcionaba, pero sólo teñía el
   rótulo de sección, el pin y los chips —lo que cae ABAJO del recorte de la
   tarjeta—, así que el control no acusaba recibo donde él miraba.

   El número va al lado y no debajo: mover el tirador y tener que buscar el
   valor en otra línea es el mismo problema en pequeño. */
.dpp-intensidad {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dpp-intensidad input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 6px;
  padding: 0;
  margin: 6px 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #eaeef5 0%, var(--dpp-blue, #2563eb) 100%);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.dpp-intensidad input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--dpp-blue, #2563eb);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .2);
  cursor: pointer;
}
.dpp-intensidad input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--dpp-blue, #2563eb);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .2);
  cursor: pointer;
}
.dpp-intensidad input[type="range"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}
/* Ancho fijo y tabular: el número no debe empujar la barra al pasar de 9% a
   100%, o el tirador «salta» bajo el dedo mientras se arrastra. */
.dpp-intensidad output {
  flex: 0 0 46px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: #344054;
  font-variant-numeric: tabular-nums;
}

/* ══ 26-sep-2026 · La tarjeta más bonita, el botón nunca en una esquina,
      y el avance del perfil ═══════════════════════════════════════════════ */

/* ── 1 · El botón que se queda solo ocupa TODO el renglón ──────────────────
   El renglón es grid 1fr 1fr y `:only-child` sólo cubre al hijo ÚNICO en el
   DOM. Pero aquí los dos hijos siempre existen y el que sobra va `hidden`:
   el visible se quedaba en su media columna, arrinconado — exactamente lo
   que reportó Francisco. Con :has() el que queda se estira; el fallback de
   hermano adyacente cubre el caso «Cómo llegar oculto» sin :has(). */
.dpp-secondary-row > .dpp-secondary-btn[hidden] + .dpp-contact-menu { grid-column: 1 / -1; }
.dpp-secondary-row:has(> .dpp-contact-menu[hidden]) > .dpp-secondary-btn:not([hidden]) { grid-column: 1 / -1; }
/* Y si no queda ninguno, el renglón no deja su hueco de margen. */
.dpp-secondary-row:not(:has(> :not([hidden]))) { display: none; }

/* ── 2 · Más llamativa, sin pelearse con los estilos de fondo ──────────────
   Todo son acentos sobre los tokens que ya existen: la cinta de marca arriba,
   el aro de la foto, el pulso del punto verde y el brillo del CTA. Nada de
   esto pisa `pagina_css` (colores del médico): son sombras y transiciones. */
.dpp-profile-card { position: relative; overflow: hidden; }
.dpp-profile-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--dpp-accent, #1B7BD6) 0%, #079455 100%);
  z-index: 1;
}
.dpp-photo { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--dpp-accent, #1B7BD6), 0 8px 20px rgba(15, 23, 42, .16); }
.dpp-photo-placeholder { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #cbd5e1; }
.dpp-chip-avail:not(.is-closed) i { animation: dppLatido 2.4s ease-in-out infinite; }
@keyframes dppLatido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(7, 148, 85, .45); }
  50%      { box-shadow: 0 0 0 5px rgba(7, 148, 85, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dpp-chip-avail:not(.is-closed) i { animation: none; }
}
.dpp-primary-cta {
  background: linear-gradient(100deg, #079455 0%, #067647 100%);
  letter-spacing: .01em;
}
.dpp-primary-cta:hover { background: linear-gradient(100deg, #08a55e 0%, #079455 100%); }
.dpp-card-section h3 { position: relative; padding-bottom: 7px; }
.dpp-card-section h3::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--dpp-accent, #1B7BD6), #079455);
}
.dpp-fact strong { font-size: 12.5px; }
.dpp-portfolio-item img, .dpp-portfolio-video { transition: transform .25s ease; }
.dpp-portfolio-item:hover img, .dpp-portfolio-item:hover .dpp-portfolio-video { transform: scale(1.03); }