/* 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 { width: 100%; height: var(--ctl-lg); min-height: var(--ctl-lg); }
.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-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-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); color: var(--text-muted); font-size: var(--fs-meta); }

/* Plantillas del sistema por enviar (desplegable) */
/* Plantillas del sistema por enviar: mismo azul que Avisos, pero más apagado (secundario, que haga juego sin confundirse con la tabla). */
.pt-needs { --brand: var(--info-ink); --brand-strong: var(--info-ink); --brand-soft: var(--info-soft); --btn-primary-bg: var(--info-ink); --btn-primary-hover: color-mix(in srgb, var(--info-ink) 85%, var(--text-primary)); }
.pt-needs .ui-acc-panel { padding: 0; }
/* Filas bajas: con 10-20 plantillas por enviar la lista no debe ocupar la pantalla (dueño 2026-11-02). */
.pt-needs .ui-acc-title { font-size: var(--fs-body); }
.pt-needs .ui-acc-head.has-action > .ui-acc-trigger { padding-right: calc(var(--sp-3) + 11rem); }
.ui-row.is-compact.pt-need { grid-template-columns: minmax(0, 1fr) auto; padding-inline: var(--sp-4) var(--sp-3); } /* le gana a la fila canon sin columna final: el botón va a la derecha */
.pt-need:last-child { border-bottom: 0; }
.pt-need-main { min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pt-need-main:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pt-need-line { min-width: 0; }
/* Fila elegida: el mismo tono azul que la tabla de Avisos, no el verde general. */
.pt-needs .ui-row[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); }
.pt-needs .ui-row:hover { background: color-mix(in srgb, var(--brand) 5%, var(--surface-1)); }
.pt-need-main { flex: 0 1 auto; }
.pt-need-state { display: inline-flex; align-items: center; gap: var(--sp-1); }
.pt-needs-label { display: block; padding: var(--sp-3) var(--sp-4) var(--sp-1); }
.pt-needs-group + .pt-needs-group { border-top: var(--border-w) solid var(--border-soft); }
.pt-needs-group > .t-note { padding: 0 var(--sp-4) var(--sp-2); }
.pt-needs-alert { align-items: center; margin-bottom: var(--sp-2); }
.pt-needs-alert > .pt-banner-text { flex: 1; }

/* 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; }

/* 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, .pt-need .pt-tname { font-weight: var(--fw-regular); color: var(--text-primary); }
.pt-trow[aria-current="true"] .pt-tname, .pt-need[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, .pt-need[aria-current="true"] .pt-tname { color: color-mix(in srgb, var(--brand) 85%, var(--text-primary)); }
/* Avisos en azul y Promociones en verde azulado, para distinguirlas de un vistazo (dueño 2026-11-02): botón «Nueva» y tabla. */
.pt-new.is-notices, .pt-table.is-notices { --brand: var(--info-solid); --focus: var(--info-ink); --brand-strong: var(--info-ink); --btn-primary-bg: var(--info-solid); --btn-primary-hover: var(--info-ink); }
.pt-new.is-promos, .pt-table.is-promos { --brand: var(--teal-solid); --focus: var(--teal-ink); --brand-strong: var(--teal-ink); --btn-primary-bg: var(--teal-solid); --btn-primary-hover: var(--teal-ink); }

/* 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); }