/* ═══ view-property.css ═══
   Vista de detalle de propiedad (Fase 3 del refactor 14.13).
   Familia .pd-* completa.
   Depende de: tokens.css, base.css, layout.css, components.css.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   Fase 3 del refactor 14.13 (v68) — Vista de propiedad

   Estilos asociados a la vista nueva `viewProperty` (app.html, Bloque 2
   de Fase 3). Prefijo `pd-` para "property detail". Se mueven aquí
   desde el bloque inline que `property.js` inyectaba via
   `_ensurePropertyStyles` durante el desarrollo de Bloques 3-5; esa
   función queda retirada al cerrar este bloque.

   La sección está estructurada en cuatro grupos:
     1. Cabecera (franja de color, icono, nombre y color editables).
     2. Botones de acción (Anuncios, PDF, Fotos limpias).
     3. Historial de acciones (sección "Historial de acciones").
     4. Estados auxiliares (loading, error, empty).
   ═══════════════════════════════════════════════════════════════════ */

.pd-loading, .pd-error { padding: 24px 0; color: var(--c-text-muted); }
.pd-error { color: var(--c-danger); }

/* Reserva de hueco: al entrar en una propiedad, property.js pinta primero
   un "Cargando…" pequeño y, al llegar los datos, sustituye el contenido por
   la cabecera + acciones/historial (mucho más alto). Damos al contenedor un
   alto mínimo para que esa transición no haga saltar el pie. El min-height
   no estorba cuando el contenido cargado es más alto. */
#propertyContent {
  min-height: 420px;
}

.pd-header {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  margin-bottom: 24px;
  position: relative;
}
.pd-color-bar {
  height: 4px;
  width: 100%;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.pd-color-bar-empty { background: transparent; }

.pd-header-inner {
  display: flex;
  gap: 20px;
  padding: 24px;
  align-items: flex-start;
}
.pd-icon {
  width: 56px; height: 56px;
  flex-shrink: 0;
  color: var(--c-primary, #C26A4A);
  display: flex; align-items: center; justify-content: center;
}
.pd-icon svg { width: 100%; height: 100%; }

.pd-meta { flex: 1; min-width: 0; }

.pd-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.pd-name {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  cursor: text;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
  line-height: 1.2;
  word-break: break-word;
}
.pd-name:hover { background: var(--c-bg, #F5F1EC); }
.pd-name-input {
  font-size: 24px;
  font-weight: 600;
  padding: 4px 8px;
  border: 1.5px solid var(--c-primary, #C26A4A);
  border-radius: 6px;
  outline: none;
  font-family: var(--font, inherit);
  min-width: 200px;
  max-width: 100%;
  background: var(--c-surface, #fff);
  color: inherit;
}

.pd-color-wrap { position: relative; }
.pd-color {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--c-border);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-muted);
  font-size: 13px;
  background: var(--c-bg);
}
.pd-color:hover { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(194,106,74,0.15); }
.pd-color-empty { border-style: dashed; }

.pd-color-popover {
  position: absolute;
  top: 100%; left: 0;
  margin-top: 8px;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  padding: 12px;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(5, 28px);
  gap: 8px;
}
.pd-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s;
}
.pd-swatch:hover { transform: scale(1.1); }
.pd-swatch.selected { border-color: var(--c-text, #2A2422); }
.pd-swatch-empty {
  background: transparent;
  border: 1.5px dashed var(--c-border);
  color: var(--c-text-muted);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

.pd-basics {
  font-size: 14px;
  color: var(--c-text-muted);
  line-height: 1.5;
}
.pd-basics-empty { font-style: italic; }
.pd-basic-item { display: inline-block; }
.pd-basic-item + .pd-basic-item::before {
  content: " · ";
  margin: 0 2px;
}

/* ─── Afordancia "Editar formulario" (14.85 Ejecutor 3) ───
   Acción SECUNDARIA discreta alineada al resumen de básicos de la
   cabecera: lápiz pequeño + texto en línea, no un bloque. Hereda la
   línea de .pd-basics; tamaño y peso de acción secundaria. El SVG del
   lápiz usa stroke="currentColor", así que el icono toma el color del
   botón (terracota), pequeño (14px). */
.pd-edit-form {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 12px;
  padding: 2px 6px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-primary);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  vertical-align: baseline;
  transition: color 0.15s, background 0.15s;
}
.pd-edit-form:hover {
  color: var(--c-primary-hover);
  background: var(--c-primary-subtle);
}
.pd-edit-form-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pd-edit-form-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* ─── Botones de acción ─── */
.pd-actions-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
@media (max-width: 640px) {
  .pd-actions-buttons { grid-template-columns: 1fr; }
}
.pd-action-btn {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 22px 16px 18px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  font-family: var(--font, inherit);
  color: inherit;
  text-align: center;
}
.pd-action-btn:hover {
  border-color: var(--c-primary, #C26A4A);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.pd-action-btn-icon {
  width: 36px; height: 36px;
  color: var(--c-primary, #C26A4A);
}
.pd-action-btn-icon svg { width: 100%; height: 100%; }
.pd-action-btn-label {
  font-size: 14px;
  font-weight: 600;
}
.pd-action-btn-badge {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.02em;
}
.pd-action-btn-badge.done {
  background: rgba(123, 139, 94, 0.18);
  color: #5A6A40;
}
.pd-action-btn-badge.pending {
  background: var(--c-bg, #F5F1EC);
  color: var(--c-text-muted);
}

/* ─── Historial de acciones ─── */
.pd-actions-section { margin-top: 4px; }
.pd-actions-section-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--c-text);
}
.pd-actions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-action-item {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* 14.85 (Ejecutor 3): el historial es ahora la vía de acceso a tiradas
   previas (la tarjeta "Generar textos" ya no abre la última, siempre
   genera nueva). Los items con data-action-id son clicables → abren la
   tirada en results. Afordancia discreta: cursor + realce de borde. */
.pd-action-item[data-action-id] {
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.pd-action-item[data-action-id]:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.pd-action-item[data-action-id]:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.pd-action-item-icon {
  width: 20px; height: 20px;
  color: var(--c-primary, #C26A4A);
  flex-shrink: 0;
}
.pd-action-item-icon svg { width: 100%; height: 100%; }
.pd-action-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pd-action-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pd-action-item-label {
  font-weight: 500;
}
.pd-action-item-state {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(212, 154, 58, 0.18);
  color: #8A6A2A;
}
.pd-action-item-date {
  font-size: 12px;
  color: var(--c-text-muted);
}
.pd-action-item-sub {
  font-size: 12px;
  color: var(--c-text-muted);
}
.pd-action-item-delete {
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--c-text-muted, #888);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.pd-action-item-delete:hover {
  color: var(--c-danger);
  background: rgba(217, 83, 79, 0.08);
}

.pd-actions-empty, .pd-actions-error {
  text-align: center;
  padding: 24px 16px;
  font-size: 14px;
  border: 1px dashed var(--c-border);
  border-radius: 8px;
  background: var(--c-bg, #F5F1EC);
  color: var(--c-text-muted);
}
.pd-actions-error {
  border-color: var(--c-danger);
  color: var(--c-danger);
  background: rgba(217, 83, 79, 0.05);
}

/* ═══════════════════════════════════════════════════════════════════
   Fase 5 del refactor 14.13 — Estados de la vista de propiedad
   (Ejecutor 1b). Estilos para las clases `pd-*` que el `property.js`
   reescrito genera y que aún no tenían reglas: badge de estado,
   Estado 1 (rellenar datos: drag-and-drop, ejemplos, formatos) y
   Estado 2 (tarjetas de acción + toolbar de "Editar datos").

   NOTA DE TOKENS: las instrucciones de la tarea pedían variables tipo
   `--color-background-warning` / `--border-radius-md`. Ese esquema NO
   existe en este archivo ni en sus hermanos; toda la hoja usa la
   familia `--c-*` (--c-surface, --c-border, --c-primary, --c-text,
   --c-text-muted, --c-bg, --c-danger) y resuelve warning/success con
   mezclas rgba + texto en tono oscuro. Para garantizar claro/oscuro
   (tokens.css no estaba disponible para verificar el otro esquema) se
   mantiene la familia `--c-*`, coherente con las ~300 líneas previas.
   Ver resumen al cierre.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Badge de estado (cabecera) ─── */
.pd-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 8px;
  white-space: nowrap;
}
.pd-status-warning {
  background: rgba(212, 154, 58, 0.18);
  color: #8A6A2A;
}
.pd-status-success {
  background: rgba(123, 139, 94, 0.18);
  color: #5A6A40;
}

/* ═══ Estado 1 — rellenar datos ═══ */
.pd-fill {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Dos tarjetas lado a lado (fila horizontal). En pantallas estrechas
   envuelven a una columna; el diseño base es horizontal. */
.pd-fill-ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 16px;
}
@media (max-width: 560px) {
  .pd-fill-ways {
    grid-template-columns: 1fr;
  }
  /* En móvil la tarjeta manual (muy compacta: solo título + botón) sube
     ARRIBA y la IA queda debajo, para que ambas se vean sin scroll. En
     escritorio el orden del DOM manda (IA izquierda, manual derecha). El
     badge «Recomendado» de la IA vive en el gap sobre su tarjeta y no se
     ve afectado por el reordenamiento. */
  .pd-fill-way-manual { order: -1; }
}

.pd-fill-way {
  position: relative;
  background: var(--c-surface, #fff);
  border: 0.5px solid var(--c-border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.15s, border-width 0.15s, opacity 0.15s;
}
/* No seleccionada: borde 0.5px estándar, aspecto algo más tenue (sin
   llegar a deshabilitado), check oculto. */
.pd-fill-way:not(.pd-fill-way-selected) {
  opacity: 0.82;
}
.pd-fill-way:not(.pd-fill-way-selected):hover {
  opacity: 1;
}
/* La vía recomendada (subida) mantiene un acento info suave en reposo;
   el realce fuerte 2px se reserva para el estado seleccionado. */
.pd-fill-way-recommended {
  border-color: var(--c-primary, #C26A4A);
}
/* Seleccionada: borde de acento info 2px, check ✓ visible, opacidad
   plena. Aplica a cualquiera de las dos vías. */
.pd-fill-way-selected {
  border-width: 2px;
  border-color: var(--c-primary, #C26A4A);
  opacity: 1;
}

/* Check de selección. Oculto por defecto; visible al estar seleccionada. */
.pd-fill-way-check {
  position: absolute;
  top: 16px; right: 16px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-primary, #C26A4A);
  color: #fff;
}
.pd-fill-way-check svg {
  width: 14px;
  height: 14px;
}
.pd-fill-way-selected .pd-fill-way-check {
  display: inline-flex;
}

.pd-fill-way-rec-badge {
  position: absolute;
  top: -10px; left: 24px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--c-primary, #C26A4A);
  color: #fff;
}

.pd-fill-way-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  line-height: 1.3;
  color: var(--c-text);
}
.pd-fill-way-sub {
  font-size: 13px;
  font-weight: 400;
  margin: 0;
  color: var(--c-text-muted);
  line-height: 1.5;
}

/* Zona de subida real (la auto-monta BrikUpload). El contenedor solo
   reserva el sitio; el fallback se ve hasta que el uploader se monta. */
.pd-upload-mount { margin-top: 4px; }

/* La zona de subida ahora vive embebida DENTRO de la tarjeta IA
   (#pdFillWayUpload), que ya aporta superficie, borde y padding propios.
   Cuando la vía seleccionada es la manual, se atenúa la tarjeta IA entera
   —incluida la zona de arrastre embebida— sin sacarla del DOM. La variante
   :hover gana al :hover de tarjeta no seleccionada por orden de fuente. */
.pd-fill-way.pd-upload-dimmed,
.pd-fill-way.pd-upload-dimmed:hover {
  opacity: 0.45;
}
.pd-upload-fallback {
  border: 2px dashed var(--c-primary, #C26A4A);
  border-radius: 12px;
  background: rgba(194, 106, 74, 0.06);
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--c-text-muted);
}
.pd-upload-fallback-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary, #C26A4A);
  font-size: 30px;        /* acota el icono Tabler heredado, no gigante */
}
.pd-upload-fallback-icon svg {
  width: 30px;
  height: 30px;
}

/* Lista/grid de los 4 ejemplos de documento. */
.pd-examples {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.pd-example-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--c-bg, #F5F1EC);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--c-text);
  line-height: 1.3;
}
.pd-example-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--c-primary, #C26A4A);
  font-size: 16px;
}
.pd-example-icon svg {
  width: 16px;
  height: 16px;
}
.pd-example-text {
  font-size: 13px;
  font-weight: 400;
  min-width: 0;
}

/* Barra de formatos admitidos + límite de tamaño. */
.pd-formats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
  font-size: 12px;
  color: var(--c-text-muted);
}
.pd-formats-types {
  font-size: 12px;
  font-weight: 400;
}
.pd-formats-limit {
  font-size: 12px;
  font-weight: 400;
}

/* Botones de avance (uno por vía, ambos siempre visibles). El de la vía
   seleccionada va resaltado con color de acento (.is-active); el de la vía
   no seleccionada va gris/atenuado (.is-dimmed) — visible pero claramente
   secundario. Al cambiar de vía intercambian su estado. */
.pd-fill-way-manual .pd-fill-advance-btn { margin-top: 4px; }

.pd-fill-advance-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;       /* ancla los botones al pie de cada tarjeta */
  font-weight: 500;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
/* Activa: color de acento, llamativa. */
.pd-fill-advance-btn.is-active {
  background: var(--c-primary, #C26A4A);
  border-color: var(--c-primary, #C26A4A);
  color: #fff;
  opacity: 1;
}
/* Atenuada: gris, secundaria. Sin acento, fondo neutro. */
.pd-fill-advance-btn.is-dimmed {
  background: var(--c-bg, #F5F1EC);
  border-color: var(--c-border);
  color: var(--c-text-muted);
  opacity: 0.7;
}

/* Hover de los botones de avance. El hover global de
   .btn-primary/.btn-secondary (definido en styles.css) GANABA por orden
   de cascada/especificidad y dejaba "Abrir formulario" (secundario)
   prácticamente blanco e ilegible — el fix anterior no lo superaba.
   Arreglo 5: subimos especificidad anidando bajo .pd-fill-way y, donde
   hace falta vencer al global, usamos !important PUNTUAL solo en las
   propiedades de color para garantizar que el hover SIEMPRE oscurece/da
   contraste y NUNCA aclara hacia blanco. Usa variables de tema, así que
   funciona en claro y oscuro.
   Activa: oscurece el acento manteniendo texto blanco. */
.pd-fill-way .pd-fill-advance-btn.is-active:hover,
.pd-fill-advance-btn.is-active:hover {
  background: var(--c-primary-dark, #A4543A) !important;
  border-color: var(--c-primary-dark, #A4543A) !important;
  color: #fff !important;
  opacity: 1;
}
/* Atenuada: en hover gana contraste (texto pleno + fondo de superficie
   con borde de acento) en vez de aclararse hacia blanco. El !important
   en color/background es lo que impide que el hover global lo lleve a
   blanco. */
.pd-fill-way .pd-fill-advance-btn.is-dimmed:hover,
.pd-fill-advance-btn.is-dimmed:hover {
  background: var(--c-surface, #fff) !important;
  border-color: var(--c-primary, #C26A4A) !important;
  color: var(--c-text, #222) !important;
  opacity: 1;
}
/* Un botón de avance deshabilitado (vía no seleccionada) no debe
   reaccionar al hover ni invitar al clic. El !important mantiene el
   estado atenuado por encima de cualquier hover global. */
.pd-fill-advance-btn:disabled,
.pd-fill-advance-btn.is-dimmed:disabled,
.pd-fill-advance-btn.is-dimmed:disabled:hover {
  cursor: default;
  background: var(--c-bg, #F5F1EC) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text-muted) !important;
  opacity: 0.7;
}

/* Icono del lápiz, compartido por "Rellenar a mano" y "Editar datos". */
.pd-fill-advance-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.pd-fill-advance-icon svg {
  width: 16px;
  height: 16px;
}

/* ═══ Estado 2 — acciones disponibles ═══ */

/* COLISIÓN DE NOMBRES: `.pd-actions-buttons` ya existía arriba como un
   grid de 3 columnas para los viejos `.pd-action-btn`. El JS reescrito
   la usa como CONTENEDOR VERTICAL (toolbar + título + grid de tarjetas
   `.pd-action-card`). Se redefine aquí; la regla vieja queda anulada
   por orden de cascada. Los `.pd-action-btn*` ya no los usa el JS. */
.pd-actions-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.pd-actions-toolbar {
  display: flex;
}
.pd-edit-data-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pd-actions-cards-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text);
}

.pd-actions-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.pd-action-card {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font, inherit);
  color: inherit;
  text-align: left;
  transition: border-color 0.15s, transform 0.15s;
}
.pd-action-card:hover {
  border-color: var(--c-primary, #C26A4A);
  transform: translateY(-1px);
}
.pd-action-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary, #C26A4A);
  font-size: 24px;
}
.pd-action-card-icon svg {
  width: 24px;
  height: 24px;
}
.pd-action-card-label {
  font-size: 15px;
  font-weight: 500;
}
/* Línea de descripción bajo el nombre de la acción (solo presentación, 14.86).
   Margen negativo para acercarla al label pese al gap de la tarjeta. */
.pd-action-card-desc {
  margin-top: -6px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-text-muted);
}
.pd-action-card-badge {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 8px;
}
.pd-action-card-badge.done {
  background: rgba(123, 139, 94, 0.18);
  color: #5A6A40;
}
.pd-action-card-badge.pending {
  background: var(--c-bg, #F5F1EC);
  color: var(--c-text-muted);
}

/* ═══ Panel de tono desplegable de "Generar textos" (14.85 Ejecutor 3) ═══
   Se despliega bajo las tarjetas de acción al clicar "Generar textos".
   Chips de tono en terracota como el resto de chips del producto:
   no seleccionado con BORDE terracota sobre blanco; seleccionado
   RELLENO terracota con texto blanco. El botón "Generar" lleva además
   la clase .btn.btn-primary (components.css) que aporta el relleno
   primario terracota; aquí solo se posiciona. */
.pd-tone-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: var(--c-bg2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.pd-tone-panel[hidden] {
  display: none;
}

.pd-tone-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
}

.pd-tone-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pd-tone-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 18px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-primary);
  background: #FFFFFF;
  border: 1.5px solid var(--c-primary);
  border-radius: var(--radius-pill);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.pd-tone-chip:hover:not(.selected) {
  background: var(--c-primary-light);
}
.pd-tone-chip:active {
  transform: scale(0.97);
}
/* 14.85: el chip seleccionado usa terracota SUAVE (tint claro + texto
   terracota oscuro), no el relleno primario pleno. Así se diferencia del
   botón ".pd-tone-generate" (que conserva .btn-primary, terracota pleno).
   Mismo patrón tint+texto-oscuro que .badge-primary y los chips de
   selección del wizard (components.css). */
.pd-tone-chip.selected {
  background: var(--c-primary-light);
  border-color: var(--c-primary);
  color: var(--c-primary-dark);
  box-shadow: none;
}

/* Botón "Generar": el relleno primario terracota lo da .btn-primary;
   aquí solo lo alineamos a la izquierda del panel (no ancho completo). */
.pd-tone-generate {
  align-self: flex-start;
}

/* ═══ Selector de idioma del anuncio (rebanada 1) ═══
   Mismo estilo que los chips de tono: no seleccionado con BORDE terracota
   sobre blanco; seleccionado con tint claro + texto terracota oscuro. En
   esta rebanada solo Español está habilitado y preseleccionado; el resto
   se muestran en gris, sin interacción (atributo `disabled`) y con una marca
   discreta "próximamente". No hay lógica de traducción aquí. */
.pd-lang-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
}

.pd-lang-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pd-lang-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-primary);
  background: #FFFFFF;
  border: 1.5px solid var(--c-primary);
  border-radius: var(--radius-pill);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.pd-lang-chip:hover:not(.selected):not(:disabled) {
  background: var(--c-primary-light);
}
.pd-lang-chip:active:not(:disabled) {
  transform: scale(0.97);
}
.pd-lang-chip.selected {
  background: var(--c-primary-light);
  border-color: var(--c-primary);
  color: var(--c-primary-dark);
  box-shadow: none;
}

/* Idiomas aún no disponibles: gris, no pulsables, sin selección posible.
   El atributo `disabled` ya bloquea el clic; estas reglas solo dan el
   aspecto atenuado y el cursor de "no permitido". */
.pd-lang-chip:disabled {
  color: var(--c-text-light);
  background: var(--c-bg, #F5F1EC);
  border-color: var(--c-border);
  cursor: not-allowed;
  box-shadow: none;
}

/* Marca discreta "próximamente" dentro del chip deshabilitado. */
.pd-lang-soon {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-text-light);
}

/* Responsive: en móvil las vías de rellenar y las tarjetas ya colapsan
   a 1 columna por sus propios auto-fit / grid 1fr; nada extra que añadir. */