/* Pantalla de plantillas (lista + detalle). La usan Bandejas › Plantillas y, después, Marketing › Plantillas. Solo tokens del sistema visual canon. */
.pt-screen { min-width: 0; }
.pt-lead > p { display: inline; margin-right: var(--sp-1); }
.pt-flat { margin: 0; }

/* Lista + detalle */
.pt-split { display: grid; grid-template-columns: minmax(340px, 42%) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.pt-split.is-form { grid-template-columns: minmax(0, 1fr); }
.pt-split.is-form .pt-list { display: none; }
.pt-list { display: grid; gap: var(--sp-3); min-width: 0; }
.pt-list .ui-toolbar { --ctl-h: var(--ctl-md); }
.pt-list .ui-toolbar > .ui-search { flex: 1 1 100%; min-width: 0; }
.pt-filters-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); width: 100%; }
.pt-filters-row .ui-select { --ctl-h: var(--ctl-md); font-size: var(--fs-meta); }
.pt-list .ui-toolbar.pt-toolbar { display: grid; gap: var(--sp-3); }
.pt-search-row { display: flex; align-items: center; gap: var(--sp-2); width: 100%; }
.pt-search-row > .ui-search { flex: 1 1 9rem; min-width: 0; }
.pt-search-row > .pt-new { flex: none; }
.pt-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); width: 100%; }
.pt-list .pt-chips .ui-chip { --ctl-h: var(--ctl-md); }
.pt-sync { display: flex; justify-content: center; }
.pt-group-title { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 0 var(--sp-1); flex-wrap: wrap; }
.pt-group-title > .t-label { white-space: nowrap; } /* «5 plantillas» no se parte en dos líneas: los botones bajan en vez de apretarlo */
.pt-detail { min-width: 0; position: sticky; top: var(--sp-3); display: grid; gap: var(--sp-2); max-height: calc(100vh - var(--sp-6)); overflow: auto; }
.pt-split.is-form .pt-detail { max-height: none; overflow: visible; }
.pt-detail-empty { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--text-muted); border: var(--border-w) dashed var(--border-default); border-radius: var(--r-lg); }
.pt-detail-empty .ui-icon { width: var(--icon-lg); height: var(--icon-lg); color: var(--text-subtle); }
.pt-skel { height: var(--row-h); border-radius: var(--r-md); margin-bottom: var(--sp-2); }
.pt-skel-card { height: var(--ctl-lg); width: 60%; }

/* Filas: botones que se abren con Enter o Espacio; la abierta lleva barra verde a la izquierda */
.pt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2) var(--sp-3); width: 100%; min-height: var(--row-h); padding: var(--sp-3) var(--sp-4); border: 0; border-bottom: var(--border-w) solid var(--border-soft); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ui-list > li:last-child > .pt-row { border-bottom: 0; }
.pt-row:hover { background: var(--surface-hover); }
.pt-row[aria-current="true"] { background: var(--surface-selected); box-shadow: inset 4px 0 0 var(--brand), inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent); }
.pt-row[aria-current="true"] .pt-row-name { color: var(--text-heading); }
.pt-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pt-row-main { display: grid; gap: var(--sp-2); min-width: 0; }
.pt-row-name { font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--text-strong); overflow-wrap: anywhere; }
.pt-row-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 0; }
/* Sedes: tono suave propio (violeta), más visible que el gris y sin competir con el color del estado. */
.pt-site { max-width: 100%; border-color: color-mix(in srgb, var(--violet-solid) 28%, transparent); background: color-mix(in srgb, var(--violet-solid) 12%, var(--surface-1)); color: var(--violet-ink); font-weight: var(--fw-medium); }
.pt-site .ui-icon { width: 1.05em; height: 1.05em; }
.pt-row-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); color: var(--text-muted); font-size: var(--fs-meta); }
/* La etiqueta del tipo («Información o recordatorio») se lee entera: la fila ya envuelve en varias líneas. */
.pt-row-sub .ui-tag { max-width: 100%; }
.pt-row-end { color: var(--text-muted); font-size: var(--fs-meta); white-space: nowrap; }

/* «Faltan enviar a revisión» */
.pt-needs { border-color: color-mix(in srgb, var(--coral-solid) 40%, var(--border-default)); }
.pt-needs > .ui-card-head { background: var(--coral-soft); border-bottom-color: color-mix(in srgb, var(--coral-solid) 25%, transparent); flex-wrap: wrap; }
.pt-needs > .ui-card-head .t-section { color: var(--coral-ink); }
.pt-need { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); padding-right: var(--sp-3); border-bottom: var(--border-w) solid var(--border-soft); }
.pt-need:last-child { border-bottom: 0; }
.pt-need > .pt-row { border-bottom: 0; }

/* Ficha */
.pt-card { display: grid; gap: var(--sp-5); padding: var(--sp-5); }
.pt-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.pt-head-title { display: grid; gap: var(--sp-1); min-width: 0; }
.pt-head-title .ui-cluster { gap: var(--sp-1) var(--sp-2); }
.pt-title { margin: 0; overflow-wrap: anywhere; font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: 1.25; color: var(--text-strong); }
.pt-actions { justify-content: flex-end; }
.pt-tech { overflow-wrap: anywhere; }
.pt-two { display: grid; grid-template-columns: minmax(13rem, 0.85fr) minmax(17rem, 1.15fr); gap: var(--sp-5); align-items: start; }
.pt-stage { padding: var(--sp-5) var(--sp-4); }
.pt-stage .inbox-tpl-wa { width: 100%; }

/* Franja de estado: a lo ancho, con ícono, título y una línea de qué significa. El color lo da el estado. */
.pt-banner { --tone-soft: var(--neutral-soft); --tone-ink: var(--neutral-ink); --tone-solid: var(--neutral-solid); display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: var(--border-w) solid color-mix(in srgb, var(--tone-solid) 40%, transparent); border-radius: var(--r-md); background: var(--tone-soft); }
.pt-banner.is-success { --tone-soft: var(--success-soft); --tone-ink: var(--success-ink); --tone-solid: var(--success-solid); }
.pt-banner.is-info { --tone-soft: var(--info-soft); --tone-ink: var(--info-ink); --tone-solid: var(--info-solid); }
.pt-banner.is-warning { --tone-soft: var(--warning-soft); --tone-ink: var(--warning-ink); --tone-solid: var(--warning-solid); }
.pt-banner.is-danger { --tone-soft: var(--danger-soft); --tone-ink: var(--danger-ink); --tone-solid: var(--danger-solid); }
.pt-banner.is-coral { --tone-soft: var(--coral-soft); --tone-ink: var(--coral-ink); --tone-solid: var(--coral-solid); }
.pt-banner > .ui-icon { width: var(--icon-md); height: var(--icon-md); margin-top: 1px; color: var(--tone-ink); }
.pt-banner-text { display: grid; gap: 2px; min-width: 0; }
.pt-banner-text > strong { color: var(--tone-ink); font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.pt-banner-text > span { color: var(--text-primary); font-size: var(--fs-meta); line-height: var(--lh-body); overflow-wrap: anywhere; }

/* Tarjeta de datos: etiqueta chica gris arriba y el valor debajo, en dos columnas con aire. */
.pt-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-5); padding: var(--sp-4) var(--sp-5); border: var(--border-w) solid var(--border-soft); border-radius: var(--r-lg); background: var(--surface-2); }
.pt-fact { display: grid; gap: var(--sp-1); align-content: start; min-width: 0; }
.pt-fact.is-wide { grid-column: 1 / -1; }
.pt-fact-label { color: var(--text-muted); font-size: var(--fs-meta); line-height: var(--lh-snug); }
.pt-fact-value { color: var(--text-strong); font-size: var(--fs-body); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.pt-fact-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.pt-fact-list > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-2); color: var(--text-strong); font-size: var(--fs-body); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.pt-fact-sub { color: var(--text-muted); font-size: var(--fs-meta); font-weight: var(--fw-regular); }
.pt-none { color: var(--text-subtle); font-size: var(--fs-body); }
.pt-side { display: grid; gap: var(--sp-2); align-content: start; }
.pt-block { display: grid; gap: var(--sp-1); }
.pt-rej { border-color: color-mix(in srgb, var(--danger-solid) 35%, transparent); background: var(--danger-soft); color: var(--danger-ink); }
.pt-form-back { display: none; justify-self: start; }
.pt-split.is-form .pt-form-back { display: inline-flex; }


@media (max-width: 1100px) {
  .pt-two { grid-template-columns: minmax(0, 1fr); }
}

/* F4: una fila por cuenta de WhatsApp en la ficha: nombre y estado arriba, el motivo en su línea y «Corregir y reenviar» a la derecha (debajo en celular). */
.pt-copies { display: grid; gap: var(--sp-2); }
.pt-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1) var(--sp-3); }
.pt-copy-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); grid-column: 1; min-width: 0; }
.pt-copy-reason { grid-column: 1; }
.pt-copy > .ui-btn { grid-column: 2; grid-row: 1 / span 2; }
.pt-copy > .ui-btn:first-child { grid-row: 1; }
.ui-toast.is-warning { background: var(--warning-soft); color: var(--warning-ink); border: var(--border-w) solid var(--warning-solid); }

/* Casillas de sedes y de cuentas de WhatsApp (mismo componente en los dos campos): todo el renglón se pulsa y mide lo que un dedo. */
.inbox-tpl-checks { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); } /* sedes y cuentas: interruptores en fila */
.inbox-tpl-checks.is-nested { margin-inline-start: var(--sp-6); }
.inbox-tpl-check-row { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--text-primary); cursor: pointer; }

/* Tema noche: los campos bloqueados (tipo e idioma de una plantilla aprobada) y las cápsulas neutras («Borrador») se leen con más contraste (tokens existentes: --text-muted / --text-value). */
:root[data-theme="dark"] .ui-select:disabled, :root[data-theme="dark"] .ui-input:disabled { opacity: 1; color: var(--text-muted); -webkit-text-fill-color: var(--text-muted); border-color: var(--border-strong); }
:root[data-theme="dark"] .mk-screen .ui-status.is-neutral, :root[data-theme="dark"] .pt-screen .ui-status.is-neutral { color: var(--text-value); }

/* Rediseño de la ficha: ajustes finos. */
.pt-fact > .ui-status { justify-self: start; }
.pt-fact-sub { overflow-wrap: anywhere; }
.pt-search-row > .ui-search, .pt-search-row > .pt-new { --ctl-h: var(--ctl-lg); }
.pt-search-row > .pt-new { height: var(--ctl-lg); }
.pt-search-row > .ui-search { align-self: stretch; }
.pt-search-row > .ui-search input { height: 100%; }

/* Marketing › Plantillas: lista como tabla de tres columnas (Plantilla · Estado · Sedes), texto llano; solo el punto del estado lleva color. */
.pt-search-row > .pt-state-select { flex: none; }
.pt-search-row > .pt-state-select .ui-select { max-width: 11rem; }
.pt-table { overflow: hidden; }
.pt-table-head, .pt-trow { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(6.5rem, 1fr) minmax(0, 1fr); align-items: center; gap: var(--sp-3); }
.pt-table-head { padding: var(--sp-2) var(--sp-4); border-bottom: var(--border-w) solid var(--border); background: transparent; color: var(--brand-strong); font-size: var(--fs-meta); font-weight: var(--fw-bold); }
.pt-trow { min-height: 0; padding: var(--sp-3) var(--sp-4); }
.pt-tcell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body); color: var(--text-body); }
.pt-tname { font-weight: var(--fw-medium); color: var(--text-strong); }
.pt-trow[aria-current="true"] .pt-tname { color: var(--text-heading); }
.pt-tstate { display: inline-flex; align-items: center; gap: var(--sp-2); }
.pt-tsites { color: var(--text-muted); }
.pt-dot { width: var(--sp-2); height: var(--sp-2); flex: none; border-radius: var(--r-full); background: var(--neutral-solid); }
.pt-dot.is-success { background: var(--success-solid); }
.pt-dot.is-info { background: var(--info-solid); }
.pt-dot.is-danger { background: var(--danger-solid); }
.pt-dot.is-warning { background: var(--warning-solid); }
.pt-dot.is-coral { background: var(--coral-solid, var(--danger-solid)); }
/* Nombres y sedes largos bajan de línea en vez de cortarse con «…». */
.pt-trow .pt-tname, .pt-trow .pt-tsites { white-space: normal; overflow-wrap: anywhere; line-height: var(--lh-snug); }
.pt-search-row > .pt-state-select .ui-select { min-width: 7.5rem; }

/* Buscador, combo de estado y «Nueva» a la misma altura y alineados. */
.pt-search-row { align-items: stretch; }
.pt-search-row > .ui-search, .pt-search-row > .pt-new, .pt-search-row > .pt-state-select .ui-select { height: var(--ctl-lg); min-height: var(--ctl-lg); }
.pt-search-row > .pt-state-select { display: flex; }
/* Junto a la vista previa, los datos van en una sola columna (la tarjeta es más angosta). */
.pt-two .pt-facts { grid-template-columns: minmax(0, 1fr); }

/* Cabecera de la ficha: en PC los botones quedan siempre a la altura del título; si el nombre es largo, baja de línea el nombre, no los botones. */
.pt-head { flex-wrap: nowrap; }
.pt-head-title { flex: 1 1 auto; }
.pt-head > .pt-actions { flex: none; flex-wrap: nowrap; }
/* Datos de la plantilla: solo informativos, en letra chica y pareja; el protagonista es el mensaje de la vista previa. */
.pt-facts { gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: transparent; }
.pt-fact { gap: 2px; }
.pt-fact-label { color: var(--text-secondary); font-weight: var(--fw-medium); }
.pt-fact-value, .pt-fact-list > li { color: var(--text-primary); font-size: var(--fs-meta); font-weight: var(--fw-regular); }
.pt-fact-list { gap: var(--sp-1); }
.pt-fact-label-row { display: inline-flex; align-items: center; gap: var(--sp-1); }
/* Qué hace cada botón: entre paréntesis y más chico que el nombre del botón. */
.pt-fact-list .pt-fact-sub { font-size: var(--fs-hint); }
/* Cada botón: nombre arriba y, debajo, qué hace; más aire entre un botón y el siguiente. */
.pt-fact-list.pt-buttons { gap: var(--sp-3); }
.pt-fact-list.pt-buttons > li { display: grid; gap: 1px; }
/* Nombres de la tabla en peso normal (no compiten entre sí); solo la fila elegida va en negrita. */
.pt-trow .pt-tname { font-weight: var(--fw-regular); color: var(--text-primary); }
.pt-trow[aria-current="true"] .pt-tname { font-weight: var(--fw-bold); }
/* Cebra muy tenue en la tabla (filas pares); la fila elegida y el paso del mouse mandan sobre ella. */
.pt-table .ui-list > li:nth-child(even) > .pt-trow:not([aria-current="true"]):not(:hover) { background: color-mix(in srgb, var(--text-primary) 2.5%, transparent); }
/* Prueba del dueño: cabecera de la tabla en verde de la marca con letras claras. */
.pt-table-head { background: var(--brand); color: var(--on-brand); border-bottom-color: var(--brand); }
/* Fila elegida de la tabla más suave: fondo, texto y barra lateral con menos verde. */
.pt-trow[aria-current="true"] { background: color-mix(in srgb, var(--brand) 10%, var(--surface-1)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--brand) 80%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent); }
.pt-trow[aria-current="true"] .pt-tname { color: color-mix(in srgb, var(--brand) 85%, var(--text-primary)); }

/* Ventana de «Editar» en una aprobada: introducción sin viñeta, dos reglas con viñeta y, aparte, cuántas ediciones quedan. */
.pt-edit-ask { display: grid; gap: var(--sp-3); }
.pt-edit-ask .ui-tip-body { display: grid; gap: var(--sp-2); }
.pt-edit-ask .ui-tip-intro { display: block; }
.pt-edit-ask .ui-tip-list { margin: 0; padding-left: var(--sp-4); }
.pt-edit-ask .ui-tip-list li + li { margin-top: var(--sp-1); }
.pt-edit-status { margin: 0; color: var(--text-strong); font-weight: var(--fw-medium); }