/* Los colores, tamaños y la marca salen de tokens.css (mismo sistema que el cuestionario del cliente).
   Aquí solo hay alias para el CSS anterior de los diálogos, y el diseño de la Fábrica. */
:root {
  --bg: var(--canvas); --surface: var(--surface-1); --line: var(--border);
  --accent: var(--brand); --success: var(--green); --danger: var(--red); --warning: var(--amber); --info: var(--blue);
  --sans: var(--font); --r: var(--r-md); --dur: var(--dur-2);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
main { width: 100%; margin: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: white; color: black; padding: 8px; border-radius: 8px; }
.eyebrow { font: 600 .75rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.login h1 { font-size: var(--t-xl); margin: .4rem 0 .2rem; }
h2 { margin: .3rem 0 1rem; }
p { color: var(--muted); }
.panel p, .panel h2, .panel h3, .panel h4, .top h1 { margin: 0; }
.panel p { color: inherit; }
button, input, select { font: inherit; }
input[type="radio"] { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 1.05rem; height: 1.05rem; margin: 0; padding: 0; flex: 0 0 auto;
  border: 1.5px solid var(--accent); border-radius: 4px;
  background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 72%;
  cursor: pointer;
}
input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2345b24f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 8.2l3.2 3.2L13 4.4'/%3E%3C/svg%3E");
}
input[type="checkbox"]:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cline x1='3' y1='8' x2='13' y2='8' stroke='%2345b24f' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
:where(button) { border: 0; border-radius: 9px; background: var(--primary); color: #fff; font-weight: 700; font-size: .88rem; padding: .55rem .9rem; cursor: pointer; min-height: var(--h-md); transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease); }
:where(button:hover:not(:disabled)) { background: var(--primary-hover); filter: none; }
:where(button:active) { transform: translateY(1px); }
:where(button:disabled) { cursor: not-allowed; filter: none; opacity: .48; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.secondary, .ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.ghost { color: var(--muted); }
.login { max-width: 460px; margin: 12vh auto 0; padding: 32px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 88%, transparent); border-radius: var(--r); box-shadow: 0 26px 70px #0005; }
.login form { display: grid; gap: 16px; margin-top: 28px; }
.login button { min-height: var(--h-lg); }
/* Tres colores distintos a propósito, de más a menos prominente: título del
   campo (--ink, el más claro) > texto que el usuario ya escribió (--ink) >
   descripción de ayuda (--muted) > placeholder de ejemplo (mezcla apagada,
   el más tenue de todos). Antes título/descripción/placeholder compartían
   --muted y no se distinguían entre sí. */
label { display: grid; gap: 8px; color: var(--accent); font: 650 .88rem/1.3 var(--sans); letter-spacing: normal; text-transform: none; }
input, select, textarea { width: 100%; background: var(--canvas); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); padding: .75rem; font: 400 .95rem/1.4 var(--sans); letter-spacing: normal; text-transform: none; }
input::placeholder { color: color-mix(in srgb, var(--muted) 55%, var(--bg) 45%); opacity: 1; font-weight: 400; }
label small { color: var(--muted); font: 400 .8rem/1.45 var(--sans); letter-spacing: normal; text-transform: none; }

/* Barra superior: siempre visible; título de la pestaña activa + acciones globales. */
.operation-pill { display: inline-flex; align-items: center; gap: 9px; min-height: var(--h-lg); max-width: 340px; padding: .5rem .9rem; border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--brand) 7%, transparent); color: var(--ink); font-size: .8rem; font-weight: 650; }
.operation-pill { min-width: 0; }
.operation-pill > span:nth-child(2) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pill-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 40%, transparent); animation: pulse 1.6s ease-out infinite; }
.pill-percent { color: var(--accent); font: 700 .74rem var(--sans); }
.operation-pill[data-tone="success"] { border-color: color-mix(in srgb, var(--green) 40%, transparent); background: color-mix(in srgb, var(--green) 7%, transparent); }
.operation-pill[data-tone="success"] .pill-dot { background: var(--success); animation: none; }
.operation-pill[data-tone="error"] { border-color: color-mix(in srgb, var(--red) 40%, transparent); background: color-mix(in srgb, var(--red) 7%, transparent); }
.operation-pill[data-tone="error"] .pill-dot { background: var(--danger); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 40%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }

.tab-panel { animation: enter 260ms var(--ease) both; }
.panel-lead { margin: 0 0 22px; font-size: 1.02rem; }
.panel-toolbar { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 20px; }
.panel-toolbar .panel-lead { margin: 0; max-width: 72ch; }
.panel-toolbar > button, .panel-toolbar > .view-toggle { flex: 0 0 auto; }

/* Resumen */
.activity-filter { max-width: 320px; margin: 0 0 14px; }
.activity-filter select { min-height: var(--h-lg); }
.empty.quiet { padding: 18px; font-size: .88rem; }

/* Dock de seguimiento: área global fuera de las pestañas. */

/* Toasts */
.toast-stack { position: fixed; top: 92px; right: 20px; z-index: 60; display: grid; gap: 8px; width: min(400px, calc(100vw - 32px)); pointer-events: none; }
.toast { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px 12px 12px 14px; border: 1px solid var(--line); border-left-width: 3px; border-radius: 13px; background: color-mix(in srgb, var(--surface-2) 96%, transparent); color: var(--ink); box-shadow: 0 18px 50px #0008; pointer-events: auto; animation: enter 220ms var(--ease) both; }
.toast.leaving { opacity: 0; transform: translateY(-6px); transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
.toast .icon { margin-top: 2px; }
.toast-copy { display: grid; gap: 2px; min-width: 0; font-size: .86rem; line-height: 1.4; }
.toast-copy strong { font-size: .84rem; }
.toast-copy span { color: var(--muted); overflow-wrap: anywhere; }
.toast-close { min-height: auto; padding: 0 6px; background: transparent; color: var(--muted); font-size: 1.2rem; line-height: 1; }
.toast-success { border-left-color: var(--success); }
.toast-success .icon { color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-error .icon { color: var(--danger); }
.toast-warning { border-left-color: var(--warning); }
.toast-warning .icon { color: var(--warning); }
.toast-info { border-left-color: var(--accent); }
.toast-info .icon { color: var(--accent); }

/* Centro de notificaciones */
.notification-backdrop { position: fixed; inset: 0; z-index: 45; background: #0007; }
.notification-backdrop[hidden] { display: none; }
.notification-center { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; display: flex; flex-direction: column; width: min(440px, 100vw); border-left: 1px solid var(--line); background: var(--surface-2); box-shadow: -30px 0 90px #0009; animation: slide-in 240ms var(--ease) both; }
.notification-center[hidden] { display: none; }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.notification-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; padding: 22px 18px 14px 22px; border-bottom: 1px solid var(--line); }
.notification-head h2 { margin: .25rem 0 0; font-size: 1.2rem; }
.notification-head .icon-button { font-size: 1.3rem; }
.notification-tools { display: flex; gap: 8px; padding: 12px 22px; border-bottom: 1px solid var(--line); }
.notification-tools button { min-height: var(--h-sm); padding: .45rem .8rem; font-size: .8rem; }
.notification-list { display: grid; gap: 8px; padding: 14px 18px 24px; overflow: auto; }
.notification-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--canvas) 53%, transparent); }
.notification-card.unread { border-color: color-mix(in srgb, var(--brand) 27%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 5%, transparent), transparent 60%), color-mix(in srgb, var(--canvas) 53%, transparent); }
.notification-dot { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--accent); }
.notification-card.tone-success .notification-dot { background: var(--success); }
.notification-card.tone-error .notification-dot, .notification-card.tone-danger .notification-dot { background: var(--danger); }
.notification-card.tone-warning .notification-dot { background: var(--warning); }
.notification-copy { display: grid; gap: 3px; min-width: 0; }
.notification-copy strong { font-size: .88rem; }
.notification-copy p { margin: 0; font-size: .8rem; line-height: 1.4; }
.notification-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.notification-meta time { color: var(--muted); font: .72rem var(--sans); }
.link { min-height: auto; padding: 0; background: transparent; color: var(--accent); font-size: .78rem; font-weight: 650; }
.link:hover { filter: none; text-decoration: underline; }

.maintenance-progress { position: relative; overflow: hidden; margin: 22px 0 28px; padding: 22px; border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); border-radius: var(--r); background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 7%, transparent), transparent 52%), var(--surface); box-shadow: 0 20px 55px #0003; }
.maintenance-progress[hidden] { display: none; }
.maintenance-progress::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent); }
.maintenance-progress.success { border-color: color-mix(in srgb, var(--green) 40%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--green) 7%, transparent), transparent 52%), var(--surface); }
.maintenance-progress.success::before { background: var(--success); }
.maintenance-progress.error { border-color: color-mix(in srgb, var(--red) 40%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--red) 7%, transparent), transparent 52%), var(--surface); }
.maintenance-progress.error::before { background: var(--danger); }
.maintenance-progress-head { display: flex; align-items: start; justify-content: space-between; gap: 24px; }
.maintenance-progress-head h2 { margin: .38rem 0 .3rem; }
.maintenance-progress-head p { margin: 0; }
.maintenance-progress-badge { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 11%, transparent); color: var(--accent); font-size: .78rem; font-weight: 750; }
.maintenance-progress.success .maintenance-progress-badge { background: color-mix(in srgb, var(--green) 11%, transparent); color: var(--success); }
.maintenance-progress.error .maintenance-progress-badge { background: color-mix(in srgb, var(--red) 11%, transparent); color: var(--danger); }
.maintenance-meter { height: 7px; margin: 20px 0 18px; overflow: hidden; border-radius: 999px; background: var(--canvas); }
.maintenance-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width 420ms var(--ease); }
.maintenance-progress.success .maintenance-meter span { background: var(--success); }
.maintenance-progress.error .maintenance-meter span { background: var(--danger); }
.maintenance-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0; margin: 0 0 18px; list-style: none; }
.maintenance-steps li { display: grid; grid-template-columns: auto 1fr; gap: 1px 9px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: color-mix(in srgb, var(--canvas) 40%, transparent); }
.maintenance-steps li > span { grid-row: 1/3; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 50%; font: 700 .69rem var(--mono); }
.maintenance-steps strong { color: inherit; font-size: .82rem; }
.maintenance-steps small { font-size: .69rem; line-height: 1.25; }
.maintenance-steps li.done { border-color: color-mix(in srgb, var(--green) 33%, transparent); color: var(--success); }
.maintenance-steps li.done > span { border-color: var(--success); background: color-mix(in srgb, var(--green) 9%, transparent); }
/* "Donde estoy" va DESPUÉS de los colores de estado y, sobre todo, se dice con
   propiedades que ningún estado toca —fondo y aro—: con los cuatro grupos
   completos, .done pintaba las cuatro etapas iguales y la tira, que es la única
   navegación del diálogo, dejaba de decir en cuál estabas. */
.maintenance-steps li.active { border-color: color-mix(in srgb, var(--brand) 53%, transparent); color: var(--ink); background: color-mix(in srgb, var(--brand) 8%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }
.maintenance-steps li.active > span { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--brand) 13%, transparent); }
.operations-list { display: grid; gap: 10px; max-width: 960px; }
.operations-list .maintenance-progress { display: grid; gap: 9px; margin: 0; padding: 12px 16px 12px 20px; }
.operations-list .maintenance-progress-head { align-items: center; gap: 12px; }
.operations-list .maintenance-progress-head .eyebrow { display: none; }
.operations-list .maintenance-progress-head h2 { margin: 0; font-size: 1rem; }
.operations-list .maintenance-progress-head p { margin: 2px 0 0; color: var(--muted); font-size: .8rem; }
.operations-list .maintenance-progress-badge { padding: 3px 9px; font-size: .72rem; }
.operations-list .maintenance-meter { height: 5px; margin: 0; }
.operations-list .maintenance-facts { display: flex; flex-wrap: wrap; gap: 4px 22px; overflow: visible; border: 0; border-radius: 0; background: none; }
.operations-list .maintenance-facts div { display: flex; align-items: baseline; gap: 6px; padding: 0; background: none; }
.operations-list .maintenance-facts dt { font-size: .75rem; }
.operations-list .maintenance-facts dd { margin: 0; font-size: .8rem; }
.operations-list .maintenance-steps { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
.operations-list .maintenance-steps li { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; }
.operations-list .maintenance-steps li > span { width: 20px; height: 20px; font-size: .6rem; }
.operations-list .maintenance-steps strong { font-size: .76rem; }
.operations-list .maintenance-steps small { display: none; }
.operations-list .progress-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.progress-close[hidden] { display: none; }
.operations-list .progress-close { min-height: 0; padding: 4px 16px; font-size: .76rem; }
.maintenance-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.maintenance-facts.facts-3 { grid-template-columns: repeat(3, 1fr); }
.maintenance-facts div { min-width: 0; padding: 11px 12px; background: var(--canvas); }
.maintenance-facts dt { color: var(--muted); font-size: .7rem; }
.maintenance-facts dd { margin: 3px 0 0; color: var(--ink); font-weight: 700; font-size: .85rem; overflow-wrap: anywhere; }

.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin: 34px 0 14px; }
.section-heading h2 { margin: .25rem 0 0; font-size: 1.2rem; }
.section-heading p { margin: 0; }
.drafts { display: grid; gap: 12px; }
[hidden] { display: none !important; }
.draft-card { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.2fr); gap: 24px; padding: 20px; border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); border-radius: var(--r); background: linear-gradient(110deg, color-mix(in srgb, var(--brand) 5%, transparent), transparent 52%), var(--surface); }
.draft-card h3 { margin: .35rem 0 0; font-size: 1.05rem; }
.draft-card p { margin: .25rem 0 0; }
.badge.preparation { background: color-mix(in srgb, var(--brand) 11%, transparent); color: var(--accent); }
.domain-stack { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; gap: 5px 12px; padding-left: 22px; border-left: 1px solid var(--line); }
.domain-stack span { color: var(--muted); font-size: .75rem; }
.domain-stack b { color: var(--ink); font-weight: 600; font-size: .82rem; overflow-wrap: anywhere; }
.domain-stack code { color: var(--ink); font: .78rem/1.5 var(--mono); overflow-wrap: anywhere; }
.install-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; margin: 2px 0 0; }
.install-meta span { color: var(--muted); font-size: .75rem; }
.install-meta b { color: var(--ink); font: 600 .8rem/1.5 var(--sans); overflow-wrap: anywhere; }
.install-meta code { color: var(--ink); font: .78rem/1.5 var(--mono); overflow-wrap: anywhere; }
.draft-actions { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.product-settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 420px)); gap: 12px; align-items: stretch; }
.product-settings-card { display: flex; flex-direction: column; align-items: start; gap: 4px; padding: 20px; border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); border-radius: var(--r); background: linear-gradient(110deg, color-mix(in srgb, var(--brand) 5%, transparent), transparent 52%), var(--surface); }
.product-settings-card h3 { margin: .35rem 0 0; font-size: 1.05rem; }
.product-settings-card button { margin-top: 14px; }
.view-toggle { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--canvas) 40%, transparent); align-self: start; }
.view-toggle-button { min-height: 32px; width: 36px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--muted); border-radius: 7px; }
.view-toggle-button[aria-pressed="true"] { background: var(--accent); color: var(--on-brand); }
.view-toggle-button:not([aria-pressed="true"]):hover { color: var(--ink); }

.installations-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0; }
.filter-search { flex: 1 1 240px; min-width: 0; }
.filter-search input { padding: .55rem .75rem; min-height: var(--h-md); }

.list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 400px)); gap: 16px; align-items: stretch; }
.list-table { display: block; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.installations-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.installations-table th { text-align: left; padding: 12px 14px; color: var(--muted); font: 600 .7rem var(--sans); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); }
.installations-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.installations-table tr:last-child td { border-bottom: 0; }
.installations-table strong { display: block; font-size: .92rem; margin-top: 2px; }
.row-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-right: 6px; }
.row-dot.warning { background: var(--warning); }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-button { min-height: 32px; width: 32px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; }
.icon-button:hover:not(:disabled) { color: var(--ink); border-color: #ffffff33; background: #ffffff08; }
.icon-button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--red) 33%, transparent); }
.icon-button.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--red) 10%, transparent); border-color: color-mix(in srgb, var(--red) 53%, transparent); }
.icon-button.warning { color: var(--warning); border-color: color-mix(in srgb, var(--amber) 33%, transparent); }
.icon-button.warning:hover:not(:disabled) { background: color-mix(in srgb, var(--amber) 10%, transparent); border-color: color-mix(in srgb, var(--amber) 53%, transparent); }
.icon-button .icon { width: 15px; height: 15px; }
.card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: visible; background: var(--surface); min-height: 218px; animation: enter 360ms var(--ease) both; }
.rail { height: 6px; background: var(--success); border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0; }
.rail.warn { background: var(--warning); }
.card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px; }
.card-body .actions-primary { margin-top: auto; padding-top: 18px; }
.card-sub { margin: -.4rem 0 .6rem; color: var(--muted); font-size: .84rem; }
.card h2 { font-size: 1.05rem; }
.meta { display: inline-flex; align-items: center; gap: 5px; font: 500 .78rem var(--mono); color: var(--muted); word-break: break-word; text-underline-offset: 3px; }
.meta .icon { width: 13px; height: 13px; }
.badge { display: inline-flex; white-space: nowrap; padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--green) 11%, transparent); color: var(--success); font-size: .78rem; font-weight: 700; }
.badge.warning { background: color-mix(in srgb, var(--amber) 10%, transparent); color: var(--warning); }
.badge.danger { background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--danger); }
.badge.muted { background: #a9b5af19; color: var(--muted); }
/* Reenvío de la configuración de producto a las instalaciones ya creadas. */
.product-sync-list { display: grid; gap: 10px; margin: 12px 0; max-height: min(48vh, 420px); overflow: auto; }
.product-sync-item { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font: inherit; }
.product-sync-item input { align-self: flex-start; margin-top: 2px; }
.product-sync-item > span { display: flex; flex-flow: row wrap; column-gap: 8px; row-gap: 1px; align-items: baseline; flex: 1 1 auto; min-width: 0; }
.product-sync-item strong { color: var(--ink); font-weight: 700; font-size: .84rem; }
.product-sync-item .badge { margin-left: auto; padding: 1px 7px; font-size: .68rem; }
.product-sync-item small { flex-basis: 100%; color: var(--muted); font: 400 .76rem/1.3 var(--sans); }
/* Avisos de la agencia a los dueños de los negocios. Reusan la lista del
   reenvío de configuración: mismo tipo de elección, misma piel. */
.product-notice-item { align-items: center; justify-content: space-between; gap: 12px; }
.product-notice-item > span { flex: 1 1 auto; min-width: 0; }
.product-notice-item button { flex: 0 0 auto; width: auto; }

/* El diálogo de Avisos es más ancho que el resto (760px de .provision-dialog)
   porque tiene dos cosas que mirar a la vez: lo que se escribe y cómo va a
   quedar. Con una sola columna el formulario se iba de pantalla y había que
   bajar a buscar el botón de publicar. */
.notice-dialog { max-width: min(96vw, 66rem); }
/* El indicador de pasos reusa .maintenance-steps (así dibuja esta consola una
   secuencia de etapas); aquí son tres y además se puede pulsar para volver. */
.notice-steps { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin-bottom: 14px; }
.notice-steps li { cursor: pointer; }
.notice-step { display: grid; gap: 12px; }
.notice-step[hidden] { display: none; }
.notice-compose { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 16px 20px; align-items: start; }
.notice-targets-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: end; gap: 10px; }
/* Con el buscador escrito son dos controles, y en una ventana estrecha no
   caben en una línea: se envuelven en vez de sacar scroll horizontal al
   diálogo entero. */
.notice-targets-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.notice-targets-actions button { flex: 0 0 auto; min-height: var(--h-lg); padding: .5rem .9rem; }
/* La casilla maestra: marcada, indeterminada o vacía, con el mismo alto que el
   botón de al lado para que no salten al aparecer/desaparecer. */
.notice-select-all { display: flex; align-items: center; gap: 8px; min-height: var(--h-lg); font-weight: 600; cursor: pointer; }

/* La lista entera no pesa igual que la que se ve: alcanza a todos los
   clientes, así que lleva el color de aviso en vez del de un botón cualquiera. */
.notice-targets-everyone { border-color: color-mix(in srgb, var(--warning) 55%, var(--line)); color: var(--warning); }
.notice-targets-count { margin: 0; color: var(--muted); font-size: .82rem; }
/* Altura acotada y scroll propio: con decenas de instalaciones la lista no
   puede estirar el diálogo hasta sacar el botón de publicar de la pantalla. */
.notice-targets-list { margin: 10px 0 0; max-height: min(34vh, 19rem); }
.notice-target.has-issue { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); }
.notice-target-issue { color: var(--warning); }
.notice-summary { display: grid; gap: 8px; margin: 0; padding-left: 1.2rem; color: var(--muted); font-size: .88rem; }
.notice-summary strong { color: var(--ink); }
.notice-fields { display: grid; gap: 12px; align-content: start; }
/* Tipo y las dos fechas caben juntos; cuando no caben, se apilan solos. */
.notice-fields-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 12px; align-items: start; }
.notice-preview-side { display: grid; gap: 8px; align-content: start; position: sticky; top: 0; }
.notice-preview-label { margin: 0; color: var(--accent); font: 650 .88rem/1.3 var(--sans); }
.notice-preview-foot { margin: 0; color: var(--muted); font: 400 .8rem/1.45 var(--sans); }

/* Configurar producto. Reusa el diálogo ancho y la tira de pasos de Avisos,
   porque es el mismo problema —demasiado para una columna— y un tercer estilo
   en esta consola sería un defecto. Lo que cambia es el papel de la columna de
   apoyo: en Avisos enseña cómo va a quedar el aviso; aquí, qué hay guardado de
   los ocho valores, que es lo que se viene a mirar antes de cambiar uno. */
/* El cuerpo es lo que se desplaza, no el diálogo entero: así «Guardar» está a
   la vista sin bajar, también a 375 px, donde la columna de "Qué hay guardado"
   se apila entera debajo del formulario. */
.settings-dialog { max-width: min(96vw, 60rem); max-height: min(92vh, 58rem); overflow: hidden; }
.settings-dialog > form { display: flex; flex-direction: column; gap: 12px; max-height: calc(min(92vh, 58rem) - 44px); }
.settings-dialog > form > .settings-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 3px; margin: -3px; }
.settings-dialog > form > menu { flex: 0 0 auto; }
/* El cuerpo de Configurar se desplazaba con la seccion de Instagram (544px de
   contenido en 497 visibles) mientras el dialogo tenia sitio de sobra. En una
   columna flexible los margenes no se pliegan, y dos huecos se comian ese sitio:
   el parrafo de error, vacio casi siempre, reservaba 44px (su hueco de columna
   mas 16px de margen arriba y abajo), y el rotulo de arriba llevaba 12px de
   margen superior que no hace falta, porque la X ya flota en la esquina. Sin
   ellos el cuerpo cabe entero y el dialogo no crece: baja de 928 a 920px. */
.settings-dialog #product-settings-error:empty { display: none; }
.settings-dialog > form > .eyebrow { margin-top: 0; }
.settings-steps { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 8px; margin-bottom: 12px; }
.settings-steps li { padding: 9px 10px; }
.settings-steps li { cursor: pointer; }
/* Un grupo a medias no es ni un pendiente ni un listo, y en Instagram es
   justamente el estado que rompe: con dos de tres claves no conecta nadie. */
.settings-steps li.partial { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); color: var(--ink); }
.settings-steps li.partial > span { border-color: var(--warning); color: var(--warning); }
/* Un portátil de 1366×768 deja 640 px de alto útiles, y ahí la cabecera fija
   —eyebrow, título, intro y las cuatro tarjetas de paso— se comía el
   formulario: 158 px de cuerpo, con el App Secret ya fuera de la vista. Por
   debajo de 48rem de alto la cabecera adelgaza. Lo que se va es lo que se
   repite en otro sitio: el eyebrow (lo dice el título), la intro (la repiten
   el aviso de después de guardar y «Actualizar instalaciones») y el subtítulo
   de cada paso (el rótulo ya nombra el grupo). */
@media (max-height: 48rem) {
  .settings-dialog { max-height: 96vh; padding-top: 14px; padding-bottom: 14px; }
  .settings-dialog > form { max-height: calc(96vh - 28px); gap: 8px; }
  .settings-dialog .eyebrow,
  .settings-dialog .dialog-intro,
  .settings-steps li small { display: none; }
  .settings-steps { margin-bottom: 6px; }
  .settings-steps li { padding: 6px 9px; }
}
.settings-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 16px 20px; align-items: start; }
.settings-panel { display: grid; gap: 12px; align-content: start; }
.settings-panel[hidden] { display: none; }
.settings-panel-intro { margin: 0; color: var(--muted); font: 400 .84rem/1.5 var(--sans); }
/* La trampa de Instagram se cuenta una vez, donde se cae en ella, y con el peso
   de un aviso: fuera de este grupo no le importa a nadie. */
.settings-warning { margin: 0; padding: 11px 13px; border-left: 3px solid var(--warning); background: color-mix(in srgb, var(--amber) 5%, transparent); color: var(--warning); font: 400 .84rem/1.5 var(--sans); }
.settings-warning strong { color: var(--warning); }
.settings-details { border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--canvas) 40%, transparent); }
.settings-details summary { padding: 10px 13px; cursor: pointer; color: var(--muted); font-size: .84rem; }
.settings-details[open] summary { color: var(--ink); }
.settings-details p { margin: 0 13px 10px; color: var(--muted); font: 400 .82rem/1.5 var(--sans); }
/* Ahora sí pega: quien hace scroll es .settings-body, no el diálogo, así que
   la columna acompaña al formulario largo en vez de irse hacia arriba. */
.settings-state { display: grid; gap: 10px; align-content: start; position: sticky; top: 0; }
/* Scroll propio para cuando haya canales de sobra, pero no antes: con 30vh los
   ocho valores de hoy ya nacían cortados en una pantalla de 720. */
.settings-state-list { display: grid; gap: 5px; max-height: min(58vh, 30rem); overflow: auto; }
/* El rótulo del grupo: "Config ID de WhatsApp", "Config ID de Messenger" y
   "URL de retorno" seguidos, separados solo por aire, no dicen de qué canal
   habla cada uno. */
.settings-state-group { margin: 9px 0 1px; color: var(--muted); font: 700 .68rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.settings-state-group:first-child { margin-top: 0; }
/* Borrar lo guardado de un secreto: es la única salida del estado "a medias"
   una vez puesta una clave, porque vaciar el campo lo conserva a propósito. */
.settings-clear { justify-self: start; min-height: 0; padding: 3px 9px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: .72rem; font-weight: 600; }
.settings-clear:hover { border-color: var(--danger); color: var(--danger); filter: none; }
.settings-clear[hidden] { display: none; }
/* Marcado para borrar: mientras está pendiente sí se ve en rojo sin pasar el
   ratón, porque ahora es un estado del formulario y no un botón en reposo. */
.settings-clear.is-clearing { border-color: var(--danger); color: var(--danger); }
.settings-panel small.is-clearing { color: var(--danger); }
.settings-panel input:disabled { opacity: .5; }
/* Cuando no se pudo leer lo guardado, la columna de apoyo es la salida: dice
   por qué no se puede guardar y ofrece reintentar. */
.settings-state [data-settings-retry] { justify-self: start; min-height: 0; padding: 5px 11px; font-size: .78rem; }
/* Lo opcional se dice en el rótulo, no en el párrafo de abajo: es lo que evita
   rellenar un canal que no se vende. */
.field-optional { margin-left: 6px; color: var(--muted); font: 500 .8rem/1.3 var(--sans); }
/* Cada valor es un botón que lleva a su campo: cambiar una sola cosa son dos
   clics, no recorrer la pantalla entera. */
.settings-state-row { display: grid; grid-template-columns: minmax(3rem, auto) minmax(2.5rem, 1fr); align-items: baseline; gap: 10px; width: 100%; min-height: 0; padding: 5px 9px; border: 1px solid var(--line); border-top-color: #ffffff1f; border-radius: 10px; background: #1b2221cc; color: var(--muted); font-weight: 500; font-size: .76rem; text-align: left; cursor: pointer; box-shadow: 0 2px 0 #00000066, 0 3px 6px #00000055; transition: border-color .12s, background-color .12s, transform .08s, box-shadow .08s; }
.settings-state-row:hover { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--brand) 11%, transparent); filter: none; }
.settings-state-row:active { transform: translateY(2px); background: color-mix(in srgb, var(--brand) 17%, transparent); box-shadow: 0 0 0 transparent; }
/* Una fila, una línea: un valor largo —la URL de retorno— se recorta con
   puntos suspensivos y se lee entero en el campo, que es donde se cambia.
   Envolviéndolo, la fila crecía a tres líneas y se comía el rótulo. */
.settings-state-row > span, .settings-state-row > code { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.settings-state-row code { color: var(--ink); font-size: .72rem; text-align: right; }
.settings-state-row.missing code { color: var(--muted); }

/* La tarjeta de Productos: el resumen de lo que edita el diálogo, agrupado
   igual y con las mismas palabras. Cuatro bandas en vez de nueve filas de
   identificadores; el color vive en el borde izquierdo —verde completo, ámbar
   incompleto, nada lo que ni se usa— para que el diagnóstico entre por el ojo
   sin convertir la tarjeta en un arcoíris. */
.settings-summary { display: grid; gap: 6px; width: 100%; align-self: stretch; margin: 10px 0 0; padding: 0; list-style: none; }
.settings-summary li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--line); border-left-width: 3px; border-radius: 10px; background: color-mix(in srgb, var(--canvas) 40%, transparent); }
.settings-summary b { color: var(--ink); font: 600 .82rem var(--sans); }
.settings-summary span { color: var(--muted); font: 500 .74rem var(--sans); white-space: nowrap; }
.settings-summary li.listo { border-left-color: var(--success); }
.settings-summary li.listo span { color: var(--success); }
.settings-summary li.parcial, .settings-summary li.falta { border-left-color: var(--warning); }
.settings-summary li.parcial span, .settings-summary li.falta span { color: var(--warning); }
/* Lo que no se usa no se apaga del todo: sigue siendo algo que se puede
   activar, no un error. */
.settings-summary li.sin-usar b { color: var(--muted); }
/* La vista de lista dice lo mismo con las mismas palabras y los mismos tonos. */
.settings-cell { color: var(--muted); font: 500 .8rem var(--sans); }
.settings-cell.listo { color: var(--success); }
.settings-cell.parcial, .settings-cell.falta { color: var(--warning); }

/* Vista previa del aviso: la misma pinta que tendrá en el dashboard del cliente.
   Es una copia deliberada de .meta-connect-alert + .agency-notice de Mono Local
   (dashboard-v3/visual-system.css) traducida a los tokens de esta consola. No se
   comparte hoja de estilos porque son dos aplicaciones distintas, con dos
   sistemas visuales propios; lo que se mantiene igual es la estructura
   (icono · remitente · título · mensaje · "Entendido") y la correspondencia de
   tonos: informativo→info, mantenimiento→warning, novedad→verde (--success,
   el equivalente del --brand verde de allá).
   Ninguno usa el rojo: allá está reservado a las alarmas del propio negocio. */
.agency-notice-preview { display: grid; gap: 8px; }
.agency-notice-preview-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.agency-notice-preview-icon { display: inline-flex; flex: 0 0 auto; margin-top: 1px; }
.agency-notice-preview-copy { display: flex; flex: 1 1 16rem; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.agency-notice-preview-copy strong { font-size: .95rem; line-height: 1.35; overflow-wrap: anywhere; }
.agency-notice-preview-source { color: var(--muted); font: 600 .68rem/1.4 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.agency-notice-preview-message { color: var(--ink); font-size: .82rem; line-height: 1.45; overflow-wrap: anywhere; }
/* Campo aún vacío: se enseña el ejemplo, atenuado, para que la tarjeta no
   aparezca en blanco y se note que eso todavía no es texto de nadie. */
.agency-notice-preview-pending { color: color-mix(in srgb, var(--muted) 55%, var(--bg) 45%); }
.agency-notice-preview-dismiss { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: .8rem; font-weight: 650; white-space: nowrap; }
.agency-notice-preview-card.is-informativo { border-color: color-mix(in srgb, var(--info) 45%, transparent); background: color-mix(in srgb, var(--info) 9%, var(--surface)); }
.agency-notice-preview-card.is-informativo .agency-notice-preview-icon,
.agency-notice-preview-card.is-informativo .agency-notice-preview-copy > strong { color: var(--info); }
.agency-notice-preview-card.is-mantenimiento { border-color: color-mix(in srgb, var(--warning) 45%, transparent); background: color-mix(in srgb, var(--warning) 9%, var(--surface)); }
.agency-notice-preview-card.is-mantenimiento .agency-notice-preview-icon,
.agency-notice-preview-card.is-mantenimiento .agency-notice-preview-copy > strong { color: var(--warning); }
/* Novedad va en verde, no en el amarillo de marca: allá usa --brand, que es
   verde, y aquí el amarillo es casi el mismo que --warning, así que novedad y
   mantenimiento se confundían de un vistazo. */
.agency-notice-preview-card.is-novedad { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.agency-notice-preview-card.is-novedad .agency-notice-preview-icon,
.agency-notice-preview-card.is-novedad .agency-notice-preview-copy > strong { color: var(--success); }
.checkbox-line { display: flex; gap: 10px; align-items: flex-start; }
.checkbox-line input { margin-top: 3px; }

.badge.plan { margin-left: 8px; }
.badge.plan-basico { background: #5bc8ff19; color: #5bc8ff; }
.badge.plan-pro { background: #a88cff1f; color: #a88cff; }
.badge.plan-premium { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--accent); }
.icon { width: 16px; height: 16px; flex: 0 0 auto; }

.actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 18px; }
.actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--h-md); padding: .5rem .8rem; font-size: .82rem; font-weight: 700; }
.actions button .icon { width: 14px; height: 14px; }
.actions-primary button { flex: 1 1 0; }
.product-settings-card .actions-primary { display: grid; grid-template-columns: 1fr 1fr; }
.product-settings-card .actions-primary button:last-child { grid-column: 1 / -1; }
.actions-secondary { margin-top: 8px; }
.actions-secondary button { flex: 1 1 auto; min-height: var(--h-sm); padding: .3rem .6rem; font-size: .78rem; font-weight: 600; background: transparent; color: var(--muted); border: 1px solid var(--line); }
.actions-secondary button:hover:not(:disabled) { color: var(--ink); border-color: #ffffff33; filter: none; }
.actions-secondary button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--red) 33%, transparent); }
.actions-secondary button.warning { color: var(--warning); border-color: color-mix(in srgb, var(--amber) 33%, transparent); }
.actions-secondary .icon-button { flex: 0 0 auto; }
.action-note { font-size: .76rem; margin: .55rem 0 0; }
.empty { grid-column: 1/-1; padding: 26px; border: 1px dashed var(--line); border-radius: var(--r); }
.empty.error { color: var(--danger); }
.history-list { display: grid; gap: 9px; }
.history-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--canvas) 53%, transparent); }
.history-card h3 { margin: .25rem 0 0; font-size: 1rem; }
.history-card p { margin: .22rem 0 0; font-size: .82rem; }
.history-card time { color: var(--muted); font: .74rem/1.4 var(--sans); text-align: right; }
.history-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--green) 7%, transparent); color: var(--success); font: 800 1rem var(--mono); }
.history-card.deleted .history-mark { border-color: color-mix(in srgb, var(--red) 40%, transparent); background: color-mix(in srgb, var(--red) 7%, transparent); color: var(--danger); }
dialog { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--r); max-width: 570px; width: calc(100% - 32px); padding: 22px; box-shadow: 0 30px 100px #000a; }
dialog::backdrop { background: #000a; }
dialog form { display: grid; gap: 12px; }
dialog h2 { font-size: 1.2rem; }
dialog h2:empty { display: none; }
/* Cuando el h2 queda vacío (creación) el eyebrow es el único título: se
   agranda para que cumpla ese rol en vez de dejar solo texto pequeño. */
dialog h2:empty + .dialog-intro, dialog .eyebrow:has(+ h2:empty) { margin-top: 0; }
dialog .eyebrow:has(+ h2:empty) { font-size: 1rem; }
dialog menu { display: flex; justify-content: end; gap: 10px; padding: 0; margin: 5px 0 0; }
.close { position: absolute; right: 12px; top: 12px; background: transparent; color: var(--muted); padding: .2rem .55rem; font-size: 1.5rem; min-height: auto; }
dialog .dialog-section { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 1rem; font-weight: 750; }
dialog .dialog-section + .dialog-intro { margin-top: 6px; }
fieldset { border: 0; padding: 0; margin: 0; }
fieldset legend { font-weight: 750; margin-bottom: 10px; }
.mode-option { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin-top: 6px; cursor: pointer; background: color-mix(in srgb, var(--canvas) 40%, transparent); text-transform: none; letter-spacing: normal; font: 400 .95rem/1.4 var(--sans); }
.mode-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.mode-option input { margin-top: 4px; }
.mode-option span { display: grid; gap: 3px; color: var(--ink); }
.mode-option small { color: var(--muted); font-size: .79rem; line-height: 1.4; }
.mode-option em { color: var(--warning); font-size: .76rem; font-style: normal; }
.mode-option.unavailable { opacity: .58; cursor: not-allowed; }
.scope-help { margin: 0 0 10px; font-size: .78rem; }
.scope-options { display: grid; gap: 8px; }
.scope-option { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--canvas) 40%, transparent); cursor: pointer; text-transform: none; letter-spacing: normal; font: 400 .95rem/1.4 var(--sans); }
.scope-option:has(input:checked) { border-color: color-mix(in srgb, var(--brand) 53%, transparent); }
.scope-option input { margin-top: 4px; }
.scope-option span { display: grid; gap: 2px; color: var(--ink); }
.scope-option small { color: var(--muted); font-size: .76rem; line-height: 1.35; }
.detail-dialog { max-width: 620px; }
.detail-body { display: grid; gap: 18px; max-height: 65vh; overflow: auto; padding-right: 2px; }
.detail-section h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .92rem; color: var(--accent); }
.detail-section p { margin: 0; }
.detail-section a { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); }
.detail-note { color: var(--muted); font-size: .83rem; line-height: 1.5; margin-top: 4px; }
.detail-modes { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.detail-mode { padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--canvas) 40%, transparent); }
.detail-mode strong { display: block; font-size: .88rem; }
.detail-mode p { color: var(--muted); font-size: .8rem; line-height: 1.45; margin: 3px 0 0; }
.detail-mode.unavailable { opacity: .6; }
.detail-mode-note { display: block; margin-top: 6px; font-size: .74rem; color: var(--warning); }
.master-password-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.master-password-value { font: .82rem/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; user-select: none; }
.snapshots-dialog { max-width: 820px; }
.snapshots-list { display: grid; gap: 9px; max-height: 55vh; overflow: auto; }
.snapshot-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--canvas) 53%, transparent); }
.snapshot-card > div:first-child { display: grid; gap: 3px; min-width: 0; }
.snapshot-card small, .snapshot-card code { color: var(--muted); font-size: .74rem; overflow-wrap: anywhere; }
.snapshot-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 7px; }
.snapshot-actions button { min-height: var(--h-md); padding: .55rem .7rem; font-size: .78rem; }
.danger { background: color-mix(in srgb, var(--red) 11%, transparent); color: var(--danger); border: 1px solid color-mix(in srgb, var(--red) 33%, transparent); }
.preview { margin: 0; padding: 11px 13px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--brand) 5%, transparent); font-size: .84rem; }
.preview.error { border-color: var(--danger); color: var(--danger); }
#login-error, #action-error, #provision-error, #preflight-error, #credentials-error { color: var(--danger); margin: 0; min-height: 1.5em; }
.dialog-intro { margin-top: -.55rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
/* Producto lleva el nombre más largo; Entorno solo "Producción" o "Desarrollo". */
.form-grid.provision-choices { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.5fr) minmax(0, 1fr); }
.slug-field { display: flex; align-items: center; background: var(--canvas); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.slug-field:focus-within { outline: 1px solid var(--accent); outline-offset: 1px; }
.slug-field input { border: 0; border-radius: 0; outline: 0 !important; min-width: 8rem; }
.slug-field span { padding-right: .75rem; color: var(--muted); font: .76rem var(--mono); white-space: nowrap; text-transform: none; letter-spacing: normal; }
.check-option { display: grid; grid-template-columns: auto 1fr; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--canvas) 40%, transparent); }
.check-option[hidden] { display: none; }
.check-option input { margin-top: 3px; }
.check-option span { display: grid; gap: 2px; color: var(--ink); }
.provision-preview { display: grid; gap: 3px; padding: 13px 15px; border-left: 3px solid var(--success); background: color-mix(in srgb, var(--green) 5%, transparent); color: var(--muted); font-size: .84rem; }
.provision-preview strong { color: var(--success); }
.provision-dialog:not(.settings-dialog) { max-width: 760px; }
.provision-credentials { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--canvas) 40%, transparent); }
.provision-credentials > h3 { margin: 0; font-size: 1rem; }
.provision-credentials > p { margin: 0; font-size: .82rem; }
.credential-input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.test-profile-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); border-radius: 13px; background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 7%, transparent), color-mix(in srgb, var(--canvas) 40%, transparent)); }
.test-profile-panel[hidden] { display: none; }
.test-profile-panel > div { display: grid; grid-template-columns: auto 1fr; align-items: center; justify-content: start; gap: 3px 9px; }
.test-profile-panel strong { color: var(--ink); font-size: .88rem; }
.test-profile-panel small { grid-column: 1 / -1; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.test-profile-panel button { white-space: nowrap; }
.test-profile-panel button[aria-pressed="true"] { border-color: var(--success); color: var(--success); background: color-mix(in srgb, var(--green) 5%, transparent); }

/* Primer paso: elegir el origen de las credenciales (reusa .mode-option,
   el mismo radio-card que ya usa el diálogo de mantenimiento). Los campos
   solo aparecen si el origen elegido es "del cliente". */
.credential-origin { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.credential-origin[hidden] { display: none; }
.credential-origin legend { padding: 0; margin: 0 0 2px; font-size: .78rem; font-weight: 500; color: var(--muted); }
.credential-origin .mode-option { margin-top: 0; }
.test-profile-badge { display: inline-flex; width: max-content; color: var(--warning); font: 700 .66rem var(--sans); letter-spacing: .06em; }
.credentials-dialog { max-width: 820px; }
.dialog-shell { display: grid; gap: 12px; }
.credentials-list { display: grid; gap: 10px; }
.credential-card { display: grid; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--canvas) 53%, transparent); }
.credential-card-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.credential-card-head h3 { margin: 0; font-size: 1rem; }
.credential-card-head p { margin: 3px 0 0; font-size: .78rem; }
.credential-card form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.credential-state { margin: 0; color: var(--muted); font-size: .75rem; }
.credential-state.error { color: var(--danger); }
.preflight-dialog { max-width: 680px; }
.preflight-ok { padding: 12px 14px; color: var(--success); background: color-mix(in srgb, var(--green) 5%, transparent); border-left: 3px solid var(--success); }
.preflight-blockers { padding: 13px 15px; color: var(--danger); background: color-mix(in srgb, var(--red) 5%, transparent); border-left: 3px solid var(--danger); }
.preflight-blockers ul { margin-bottom: 0; padding-left: 1.2rem; }
.preflight-notice { margin-top: 10px; padding: 12px 14px; color: var(--warning); background: color-mix(in srgb, var(--amber) 5%, transparent); border-left: 3px solid var(--warning); }
.credentials-missing-note { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--amber) 24%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--amber) 5%, transparent); color: var(--warning); font-size: .84rem; }
.credentials-missing-note .icon { flex: 0 0 auto; width: 15px; height: 15px; }
.resource-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.resource-summary div { display: grid; gap: 3px; padding: 12px; background: var(--canvas); }
.resource-summary dt { color: var(--muted); font-size: .76rem; }
.resource-summary dd { margin: 0; font-weight: 750; overflow-wrap: anywhere; }
.preflight-steps { display: grid; gap: 8px; margin: 0; padding-left: 1.35rem; color: var(--muted); }
.execute-provision { display: grid; gap: 8px; padding: 14px; border: 1px solid color-mix(in srgb, var(--brand) 33%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--brand) 4%, transparent); }
.execute-provision[hidden] { display: none; }
.execute-provision p { margin: 0; font-size: .8rem; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 620px) {
  .login { width: calc(100% - 36px); margin-top: 7vh; }
  .toast-stack { top: 8px; right: 8px; width: calc(100vw - 16px); }
  .panel-toolbar { display: grid; gap: 12px; }
  .maintenance-progress-head { display: grid; gap: 12px; }
  .maintenance-progress-badge { justify-self: start; }
  .maintenance-steps { grid-template-columns: 1fr 1fr; }
  .settings-body { grid-template-columns: 1fr; }
  /* En un teléfono la tira de pasos se parte en dos filas y se comía el
     formulario entero: con el subtítulo fuera, sigue diciendo en qué grupo
     estás y deja sitio para el campo que se viene a cambiar. */
  .settings-steps small { display: none; }
  .settings-steps li { padding: 8px 9px; }
  .settings-dialog { max-height: 96vh; }
  .settings-dialog > form { max-height: calc(96vh - 44px); }
  .maintenance-facts { grid-template-columns: 1fr 1fr; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 6px; }
  .history-card { grid-template-columns: auto minmax(0, 1fr); }
  .history-card time { grid-column: 2; text-align: left; }
  .draft-card { grid-template-columns: 1fr; }
  .domain-stack { padding: 13px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .form-grid, .form-grid.provision-choices { grid-template-columns: 1fr; }
  .credential-input-grid { grid-template-columns: 1fr; }
  .credential-section-head { display: grid; gap: 6px; }
  .test-profile-panel { grid-template-columns: 1fr; }
  .test-profile-panel button { width: 100%; white-space: normal; }
  .credential-card form { grid-template-columns: 1fr; }
  .slug-field { display: grid; }
  .slug-field span { padding: 0 .75rem .7rem; white-space: normal; overflow-wrap: anywhere; }
  .actions { flex-wrap: wrap; }
  .snapshot-card { display: grid; }
  .snapshot-actions { justify-content: stretch; }
  .snapshot-actions button { flex: 1; }
  dialog { padding: 22px 18px; }
  dialog menu { display: grid; grid-template-columns: 1fr 1fr; }
  dialog menu button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
.ops-heading { margin: 1.6rem 0 .7rem; font-size: clamp(1rem, .9rem + .3vw, 1.2rem); }
.ops-heading:first-of-type { margin-top: .4rem; }
.step-timeline { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .25rem; font-size: clamp(.8rem, .75rem + .2vw, .95rem); }
.step-timeline li { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .75rem; padding: .3rem 0; border-top: 1px solid var(--line); }
.step-timeline time { font-family: var(--mono); color: var(--muted); }
.step-timeline b { font-family: var(--mono); font-weight: 600; }

/* ---- Control v2: clientes y usuarios (denso, encabezados compactos) ---- */
.pt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.pt-toolbar input[type="search"] { width: 280px; max-width: 100%; }
.pt-spacer { flex: 1 1 auto; }
.pt-name { font-size: 1.1rem; letter-spacing: -.02em; }
.pt-muted { color: var(--muted); }
.pt-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0 0 14px; }
.pt-card h3 { margin: 0 0 10px; font-size: .95rem; letter-spacing: -.01em; }
.pt-card h3 small { font-weight: 400; }
.pt-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.pt-two > .pt-card { margin-bottom: 14px; }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 12px; align-items: end; }
.pt-card label, .pt-grid label { display: grid; gap: 4px; font-size: .78rem; color: var(--muted); }
.pt-card input, .pt-card select, .pt-card textarea, .pt-toolbar input, .pt-toolbar select, .pt-table select {
  width: 100%; min-height: var(--h-md); background: var(--canvas); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: .88rem; }
.pt-card textarea { resize: vertical; margin-bottom: 8px; }
.pt-toolbar select { width: auto; }
.pt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pt-copy { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.pt-copy input, .pt-copy select { flex: 1 1 auto; min-width: 0; }
.pt-copy button { flex: 0 0 auto; }
.pt-line { margin: 0 0 8px; font-size: .86rem; }
.pt-help { margin: 6px 0 0; font-size: .78rem; color: var(--muted); }
.pt-foot { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 0; }
.danger-text { color: var(--danger); }
.pt-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 14px; }
.pt-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.pt-table th { text-align: left; font: 600 .7rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pt-table td { padding: 8px 12px; border-bottom: 1px solid #34413e66; vertical-align: middle; }
.pt-table tr:last-child td { border-bottom: 0; }
.pt-table tr[data-client] { cursor: pointer; }
.pt-table tr[data-client]:hover { background: #ffffff08; }
.pt-table tr[data-client]:focus-visible { background: #ffffff0d; outline: 2px solid var(--accent); outline-offset: -2px; }
.pt-table td small { display: block; color: var(--muted); font-size: .74rem; }
.pt-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.pt-row-actions button { min-height: 32px; padding: .3rem .65rem; }
.pt-group { margin: 10px 0 0; }
.pt-group h4 { margin: 0 0 6px; font-size: .82rem; display: flex; gap: 8px; align-items: center; }
.pt-group ul { margin: 0; padding-left: 18px; font-size: .84rem; }
.pt-group li { margin: 0 0 5px; }
.pt-group li b { color: var(--ink); }
.pt-group li em { display: block; color: var(--muted); font-style: normal; font-size: .8rem; }
.pt-message { margin: 0; padding: 10px 12px; background: var(--canvas); border: 1px solid var(--line); border-radius: 8px; white-space: pre-wrap; font: .82rem/1.5 var(--sans); max-height: 240px; overflow: auto; }
/* Crear en pruebas: avance por etapa */
.pb-error, .pb-error-box { color: var(--danger); }
.pb-error-box { margin: 0 0 8px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--red) 40%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--red) 10%, transparent); font-size: .84rem; overflow-wrap: anywhere; }
.pb-warn { color: var(--warning); }
.pb-access { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.pb-access h4 { margin: 0 0 6px; font-size: .84rem; }
.pb-log { margin-top: 10px; font-size: .8rem; }
.pb-log pre { max-height: 220px; overflow: auto; margin: 8px 0 0; padding: 10px 12px; background: var(--canvas); border: 1px solid var(--line); border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font: .74rem/1.5 var(--mono); }
a.button { display: inline-flex; align-items: center; gap: 6px; min-height: var(--h-md); padding: .55rem .9rem; border-radius: 9px; font-weight: 700; font-size: .88rem; text-decoration: none; color: var(--ink); border: 1px solid var(--line); }
a.button:hover { filter: brightness(1.15); }
@media (max-width: 860px) { .pt-two { grid-template-columns: 1fr; } .pt-toolbar input[type="search"] { width: 100%; flex: 1 1 100%; } }

/* Estados del cliente y activación */
.badge.success { background: color-mix(in srgb, var(--green) 10%, transparent); color: var(--success); }
.pt-help-card summary { cursor: pointer; font-weight: 600; }
.pt-states { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 10px 0 0; font-size: .85rem; }
.pt-states dt { font-weight: 600; }
.pt-states dd { margin: 0; color: var(--muted); }
.pt-steps { margin: 6px 0 8px 18px; padding: 0; font-size: .88rem; }
.pt-check { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; }
#pf-activation h4 { margin: 14px 0 4px; font-size: .9rem; }

/* Ficha por pasos: un solo paso abierto, los anteriores plegados con resumen, los siguientes bloqueados */
/* <progress>, no un div con style en línea: la política de seguridad de la consola bloquea los style="…" y la barra salía siempre llena. */
.ps-bar { flex: 1 1 100%; appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--line); overflow: hidden; }
.ps-bar::-webkit-progress-bar { background: var(--line); border-radius: 3px; }
.ps-bar::-webkit-progress-value { background: var(--accent); border-radius: 3px; }
.ps-bar::-moz-progress-bar { background: var(--accent); border-radius: 3px; }
@media (max-width: 640px) {
  .pt-copy { flex-wrap: wrap; }
  .pt-copy input, .pt-copy select { flex: 1 1 100%; }
}

/* Cambio de contraseña */
.password-dialog { max-width: 460px; }
.password-rules { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: .82rem; color: var(--muted); }
.password-rules li::before { content: "○"; display: inline-block; width: 1.4em; color: var(--muted); }
.password-rules li.ok { color: var(--success); }
.password-rules li.ok::before { content: "✓"; color: var(--success); }
#password-error { color: var(--danger); margin: 0; min-height: 1.5em; }

/* Operador: solo trabaja con Clientes, así que no hay menú lateral que ocupe sitio. */

/* Ficha: avisos, vacío, cierre y errores de la creación */
.pb-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.pb-error-box p { margin: 6px 0 0; color: var(--ink); font-size: .84rem; }
.pb-error-box .pt-actions { margin-top: 10px; }
.pt-fold { margin: 10px 0 0; font-size: .84rem; }
.pt-fold summary { cursor: pointer; color: var(--muted); }
.pt-fold ul { margin: 8px 0 0; padding-left: 18px; }
.pt-fold li { margin: 0 0 5px; }
.pt-fold li b { color: var(--ink); }
.pt-table td select + small { margin-top: 4px; }
.confirm-dialog { max-width: 460px; }
#confirm-error { color: var(--danger); margin: 0; min-height: 1.5em; }
#confirm-error:empty { display: none; }
@media (max-width: 620px) {
  /* Tablas como tarjetas: cada fila es una ficha con sus rótulos, sin scroll horizontal ni columnas cortadas. */
  .pt-table-wrap { overflow: visible; border: 0; background: none; }
  .pt-cards, .pt-cards tbody, .pt-cards tr, .pt-cards td { display: block; }
  .pt-cards thead { position: absolute; left: -9999px; }
  .pt-cards tr { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  .pt-cards td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 8px; align-items: start; padding: 5px 0; border: 0; }
  .pt-cards td::before { content: attr(data-label); padding-top: 2px; color: var(--muted); font: 600 .7rem var(--sans); letter-spacing: .05em; text-transform: uppercase; }
  .pt-cards td .badge { justify-self: start; white-space: normal; }
  .pt-cards td.pt-actions-cell { display: block; padding-top: 8px; }
  .pt-cards td.pt-actions-cell::before { content: none; }
  .pt-cards .pt-row-actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* ===== Fábrica: diseño aprobado (prototipo fabrica.html) ===== */
/* Fábrica (Control v2) · densidad de herramienta de gestión · tema pizarra */
body { min-height: 100vh; }
.sprite { position: absolute; overflow: hidden; }
.control-content { min-width: 0; }
.f-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }

/* ---------- Menú lateral ---------- */
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3) var(--s3) var(--s3); background: var(--canvas); border-right: 1px solid var(--border); }
.side .brand { display: flex; align-items: center; gap: var(--s3); height: 40px; padding: 0 var(--s2); margin-bottom: var(--s3); text-decoration: none; color: var(--ink); }
.side .brand svg { width: 28px; height: 28px; }
.side .brand b { font-size: var(--t-lg); font-weight: var(--w-bold); }
.side .brand small { display: block; font-size: var(--t-xs); color: var(--muted); font-weight: var(--w-regular); margin-top: -2px; }
.nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav a, .nav button, .nav-group > summary { display: flex; align-items: center; gap: var(--s3); width: 100%; height: 36px; padding: 0 var(--s3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font-size: var(--t-md); font-weight: var(--w-medium); text-decoration: none; cursor: pointer; text-align: left; }
.nav a:hover, .nav button:hover, .nav-group > summary:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--surface-3); color: var(--ink); font-weight: var(--w-semibold); box-shadow: inset 2px 0 0 var(--lima); }
.nav .count { margin-left: auto; }
.nav .i, .nav-group > summary .i { color: var(--muted); }
.nav a[aria-current="page"] .i { color: var(--lima); }
.nav .chev { margin-left: auto; transition: transform var(--dur-2) var(--ease); }
.nav-group[open] > summary .chev { transform: rotate(180deg); }
.nav-group > summary { list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-sub { margin: 2px 0 0; padding: 0 0 0 28px; display: grid; gap: 2px; }
.nav-sub a { height: 32px; font-size: var(--t-md); }
.side .grow { flex: 1; }
.side .sep { height: 1px; background: var(--border); margin: var(--s2) var(--s2); }
.account { display: flex; align-items: center; gap: var(--s3); width: 100%; height: 48px; padding: 0 var(--s2); border: 0; border-radius: var(--r-sm); background: transparent; cursor: pointer; text-align: left; }
.account:hover { background: var(--surface-2); }
.account .who { font-size: var(--t-md); font-weight: var(--w-semibold); line-height: 1.2; }
.account .who small { display: block; font-size: var(--t-sm); color: var(--muted); font-weight: var(--w-regular); }
.account .i { margin-left: auto; color: var(--muted); }

/* ---------- Barra superior ---------- */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--s3); height: var(--topbar); padding: 0 var(--s6); background: color-mix(in srgb, var(--canvas) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.top h1 { font-size: var(--t-xl); font-weight: var(--w-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .sub { color: var(--muted); font-size: var(--t-md); white-space: nowrap; }
.top .spacer { flex: 1; }
.searchbox { position: relative; width: 280px; }
.searchbox .i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.searchbox .input { height: var(--h-sm); padding-left: 32px; background: var(--surface-1); border-color: var(--border); font-size: var(--t-md); }
.searchbox kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 600 11px var(--font); color: var(--muted); border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 5px; }
.bell { position: relative; }
.bell .badge { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--canvas); }
.top .btn { height: var(--h-sm); font-size: var(--t-md); }
.top .btn-icon { width: var(--h-sm); }
.top-back { display: none; }
.m-only { display: none !important; }

/* ---------- Contenido ---------- */
.page { padding: var(--s5) var(--s6) var(--s8); display: grid; gap: var(--s4); }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s4); align-items: start; }
.stack { display: grid; gap: var(--s4); }

/* Pendientes */
.todo > li { grid-template-columns: 32px minmax(0, 1fr) auto auto; }
.tone { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--gray-soft); color: var(--gray); }
.tone-amber { background: var(--amber-soft); color: var(--amber); }
.tone-red { background: var(--red-soft); color: var(--red); }
.tone-blue { background: var(--blue-soft); color: var(--blue); }
.tone-green { background: var(--green-soft); color: var(--green); }
.what b { font-weight: var(--w-semibold); color: var(--ink); }
.what { color: var(--ink-2); min-width: 0; }
.what small { display: block; color: var(--muted); font-size: var(--t-sm); }
.when { color: var(--muted); font-size: var(--t-sm); white-space: nowrap; }
.todo .btn { height: var(--h-sm); font-size: var(--t-sm); min-width: 112px; }
.running > li { grid-template-columns: 32px minmax(0, 1fr) 160px 88px; }
.running .bar { width: 100%; }
.running .pct { font-size: var(--t-sm); color: var(--muted); text-align: right; }

/* Sistemas */
.health-sum { display: flex; gap: var(--s4); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); font-size: var(--t-md); color: var(--ink-2); }
.health-sum span { display: inline-flex; align-items: center; gap: 6px; }
.sys > li { grid-template-columns: minmax(0, 1fr) auto; min-height: 48px; }
.sys .n { font-weight: var(--w-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sys .n small { display: block; font-weight: var(--w-regular); color: var(--muted); font-size: var(--t-sm); }
.week { display: grid; grid-template-columns: repeat(3, 1fr); }
.week div { padding: var(--s3) var(--s4); border-left: 1px solid var(--border); }
.week div:first-child { border-left: 0; }
.week b { display: block; font-size: var(--t-xl); font-weight: var(--w-semibold); }
.week span { font-size: var(--t-sm); color: var(--muted); }

/* ---------- Clientes ---------- */
.toolbar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.toolbar .select { height: var(--h-sm); width: auto; min-width: 160px; font-size: var(--t-md); }
.seg .count { background: transparent; color: inherit; padding: 0 2px; min-width: 0; }
.seg [aria-pressed="true"] .count-amber { background: var(--amber); color: #1B1204; padding: 0 6px; }
.seg .count-amber { background: var(--amber-soft); color: var(--amber); padding: 0 6px; }
.clients td.cli small { display: block; color: var(--muted); font-size: var(--t-sm); }
.clients .stage { display: flex; align-items: center; gap: var(--s2); white-space: nowrap; color: var(--ink-2); font-size: var(--t-sm); }
.clients td.next { color: var(--ink-2); }
.clients td.act { text-align: right; width: 1%; white-space: nowrap; }
.clients td.act .btn { min-width: 120px; }
.clients tr.need td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.clients tr.fail td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.clients .when { width: 1%; }
.cards { display: none; }

/* ---------- Ficha ---------- */
.ficha-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.ficha-head h2 { font-size: var(--t-xl); }
.ficha-head .spacer { flex: 1; }
.steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.step { display: grid; gap: 6px; text-decoration: none; color: var(--ink-2); padding-bottom: 2px; }
.step .lv { height: 8px; background: var(--surface-3); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%, 6px 50%); }
.step:first-child .lv { clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%); border-radius: 3px 0 0 3px; }
.step .lb { display: flex; align-items: center; gap: 6px; font-size: var(--t-md); font-weight: var(--w-semibold); padding-left: 4px; }
.step .lb .n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); font-size: 10.5px; font-weight: var(--w-bold); color: var(--muted); flex: none; }
.step .st { font-size: var(--t-sm); color: var(--muted); padding-left: 4px; }
.step.done .lv { background: var(--done); }
.step.done .n { background: var(--done); border-color: var(--done); color: var(--on-brand); }
.step.done .n .i { width: 11px; height: 11px; stroke-width: 3; vertical-align: 0; }
.step.now .lv { background: var(--lima); }
.step.now { color: var(--ink); }
.step.now .n { border-color: var(--lima); color: var(--lima); }
.step.fail .lv { background: var(--red); }
.step.fail .n { border-color: var(--red); color: var(--red); }
.step.fail .st { color: var(--red); }
.step:hover .lb { color: var(--ink); }
.m-steps { display: none; }

.work { padding: 0; }
.work .panel-body { display: grid; gap: var(--s4); }
.work .foot { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-md) var(--r-md); }
.work .foot .spacer { flex: 1; }
.lead-line { color: var(--ink-2); }
.find > li { grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; padding-top: var(--s3); padding-bottom: var(--s3); }
.find > li > .i { color: var(--amber); margin-top: 2px; }
.find .acts { display: flex; gap: var(--s2); }
.find .acts .btn { height: var(--h-sm); font-size: var(--t-sm); }
.find .ref { display: block; font-size: var(--t-sm); color: var(--muted); margin-top: 2px; }
.list-box { border: 1px solid var(--border); border-radius: var(--r-sm); }
.fold-f summary { display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); cursor: pointer; list-style: none; font-weight: var(--w-semibold); }
.fold-f summary::-webkit-details-marker { display: none; }
.fold-f summary .muted { font-weight: var(--w-regular); }
.fold-f summary .i:last-child { margin-left: auto; color: var(--muted); }
.fold-f[open] summary { border-bottom: 1px solid var(--border); }
.fold-f .kv { padding: var(--s2) var(--s4); }

.stages { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.stages li { display: grid; grid-template-columns: 24px minmax(0, 1fr) 64px; gap: var(--s3); align-items: center; min-height: var(--h-lg); border-bottom: 1px solid var(--border); }
.stages li:last-child { border-bottom: 0; }
.stages li .i { width: 18px; height: 18px; }
.stages li.ok .i { color: var(--green); }
.stages li.run .i { color: var(--blue); animation: spin 1s linear infinite; }
.stages li.wait { color: var(--muted); }
.stages li.wait .i { color: var(--border-strong); }
.stages li.bad .i { color: var(--red); }
.stages li.bad { color: var(--ink); font-weight: var(--w-semibold); }
.stages li.run { font-weight: var(--w-semibold); }
.stages .t { font-variant-numeric: tabular-nums; font-size: var(--t-sm); color: var(--muted); text-align: right; font-weight: var(--w-regular); }
.progress-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: center; }
.progress-line .bar { height: 8px; }
.domain { display: flex; align-items: stretch; max-width: 460px; }
.domain .input { height: var(--h-md); font-family: var(--mono); font-size: var(--t-md); }

.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; min-height: 48px; border-bottom: 1px solid var(--border); }
.checks li:last-child { border-bottom: 0; }
.checks li > .i { color: var(--green); }
.checks small { display: block; color: var(--muted); font-size: var(--t-sm); }

.kv { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px var(--s3); font-size: var(--t-md); }
.kv dt { color: var(--muted); }
.kv dd.mono { grid-column: 1 / -1; margin-top: -4px; font-size: 12.5px; }
.kv dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.feed { list-style: none; margin: 0; display: grid; gap: var(--s3); }
.feed li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: var(--s3); font-size: var(--t-md); color: var(--ink-2); }
.feed li .dot { margin-top: 6px; color: var(--border-strong); }
.feed li:first-child .dot { color: var(--lima); }
.feed li .when { font-size: var(--t-sm); }

/* ---------- Barra inferior y hoja «Más» (móvil) ---------- */
.bottom { display: none; }
.sheet-bg, .sheet { display: none; }

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

@media (max-width: 760px) {
  .f-shell { display: block; }
  .side { display: none; }
  .top { height: 56px; padding: 0 var(--s3) 0 var(--s4); gap: var(--s2); }
  .top .sub, .searchbox, .top .d-only { display: none; }
  .m-only { display: inline-flex !important; }
  .top .btn-icon { width: var(--touch); height: var(--touch); }
  .top-back { display: inline-flex; margin-left: calc(-1 * var(--s2)); }
  .page { padding: var(--s3) var(--s3) calc(var(--bottombar) + var(--s6)); gap: var(--s3); }
  .todo > li { grid-template-columns: 32px minmax(0, 1fr); padding: var(--s3); }
  .todo .when { display: none; }
  .todo .btn { grid-column: 2; justify-self: start; height: var(--h-lg); }
  .running > li { grid-template-columns: 32px minmax(0, 1fr) 48px; }
  .running .bar { grid-column: 2 / -1; grid-row: 2; }
  .running .pct { grid-column: 3; grid-row: 1; }
  .toolbar { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--s3)); padding: 0 var(--s3) 2px; scrollbar-width: none; }
  .toolbar .select, .toolbar .spacer { display: none; }
  .seg button { height: var(--h-lg); }
  .btn-sm { height: var(--h-lg); }
  .panel-head { min-height: 56px; }
  .cards .nm { display: block; padding: 10px 0; margin: -10px 0; }
  .table.clients { display: none; }
  .cards { display: block; }
  .cards > li { grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--s3); padding: var(--s3); }
  .cards .nm { font-weight: var(--w-semibold); }
  .cards .nm small { font-weight: var(--w-regular); color: var(--muted); }
  .cards .ln { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s2); color: var(--ink-2); font-size: var(--t-md); }
  .cards .btn { grid-column: 1 / -1; height: var(--h-lg); }
  .cards li.need { box-shadow: inset 3px 0 0 var(--amber); }
  .cards li.fail { box-shadow: inset 3px 0 0 var(--red); }
  .ficha-head { display: none; }
  .steps { display: none; }
  .m-steps { display: grid; gap: var(--s2); }
  .m-steps .m-meta { display: flex; justify-content: space-between; font-size: var(--t-md); }
  .m-steps .m-meta b { font-weight: var(--w-semibold); }
  .m-steps .levels .lv.now { background: var(--lima); }
  .find > li { grid-template-columns: 20px minmax(0, 1fr); }
  .find .acts { grid-column: 2; flex-wrap: wrap; }
  .fold-f summary .muted { display: none; }
  .find .acts .btn { height: var(--h-lg); }
  .work .foot { flex-wrap: wrap; }
  .work .foot .btn { flex: 1; height: var(--touch); }
  .work .foot .spacer { display: none; }
  .work .foot .grow-m { flex-basis: 100%; }
  .kv { grid-template-columns: 104px minmax(0, 1fr); }
  .domain { max-width: none; }
  .stages li { grid-template-columns: 24px minmax(0, 1fr) 48px; }
  .stage-dom { display: none; }

  .bottom { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--bottombar) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--surface-1); border-top: 1px solid var(--border); }
  .bottom a, .bottom button { position: relative; display: grid; place-items: center; align-content: center; gap: 2px; border: 0; background: transparent; color: var(--muted); font-size: 11.5px; font-weight: var(--w-semibold); text-decoration: none; cursor: pointer; }
  .bottom .i { width: 22px; height: 22px; }
  .bottom [aria-current="page"] { color: var(--ink); }
  .bottom [aria-current="page"] .i { color: var(--lima); }
  .bottom [aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--lima); border-radius: 0 0 2px 2px; }
  .bottom .count { position: absolute; top: 6px; left: calc(50% + 6px); height: 16px; min-width: 16px; font-size: 10.5px; }
  .sheet-bg.open { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .55); }
  .sheet.open { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; background: var(--surface-1); border-radius: 14px 14px 0 0; border-top: 1px solid var(--border); padding: var(--s2) var(--s3) calc(var(--s4) + env(safe-area-inset-bottom)); }
  .sheet .grab { width: 36px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 0 auto var(--s3); }
  .sheet h2 { font-size: var(--t-sm); color: var(--muted); font-weight: var(--w-semibold); padding: var(--s2) var(--s3); }
  .sheet .nav a, .sheet .nav button { height: 48px; font-size: 15px; }
}

/* ---------- Añadidos de la consola (no están en el prototipo estático) ---------- */
.account-menu { position: relative; }
.account-name { display: block; }
.account-panel { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 10; display: grid; gap: 2px; padding: var(--s2); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); box-shadow: var(--shadow-2); }
.account-role { padding: 6px var(--s3); border-bottom: 1px solid var(--border); color: var(--muted); font-size: var(--t-sm); overflow-wrap: anywhere; }
.account-item { display: flex; align-items: center; gap: var(--s3); height: 36px; padding: 0 var(--s3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font-size: var(--t-md); font-weight: var(--w-medium); text-align: left; cursor: pointer; min-height: 0; }
.account-item:hover { background: var(--surface-3); color: var(--ink); }
.account-item .i { color: var(--muted); }
.topbar-actions { display: flex; align-items: center; gap: var(--s2); }
.top .operation-pill { min-height: var(--h-sm); padding: 0 var(--s3); font-size: var(--t-sm); }
.top-logo { width: 26px; height: 26px; }
.bell-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; min-width: 0; padding: 0; overflow: hidden; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--canvas); font-size: 0; }
.bell-badge { min-width: 0; padding: 0; }
.top .btn, .top .btn-icon { min-height: 0; }
.top-back { display: none; }
.tab-panel { display: grid; gap: var(--s4); align-content: start; }
.btn, .seg button, .nav a, .nav button, .bottom button, .account { min-height: 0; }
.btn { filter: none; }
.btn:hover { filter: none; }
.btn:active { transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.linkbox { font-family: var(--mono); font-size: var(--t-sm); }
.step[aria-disabled="true"] { cursor: not-allowed; }
.ficha-head .muted { font-size: var(--t-md); }
.list-box .empty { padding: var(--s4); }
.cli small.sub-line { display: block; }
.side .nav-group { margin-top: 2px; }

@media (max-width: 760px) {
  .top-back:not([hidden]) { display: inline-flex; margin-left: calc(-1 * var(--s2)); }
  .top-logo.m-only[data-hide-on-back] { display: none !important; }
  .side .nav-group { display: none; }
  .bottom { grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none; }
  .sheet .nav a, .sheet .nav button { min-height: 0; }
  .sheet .sep { height: 1px; background: var(--border); margin: var(--s2) 0; }
  .topbar-actions { display: none; }
}
@media (min-width: 761px) { .sheet .sep { display: none; } }

/* Piezas de la ficha y de Inicio que el prototipo estático no dibuja */
.top-extra { display: flex; align-items: center; gap: var(--s2); }
.top-extra:empty { display: none; }
.grid-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.grid-fields .field.span-all { grid-column: 1 / -1; }
.field > label { white-space: nowrap; }
.field .input, .field .select, .field .textarea { width: 100%; }
.field .hint { color: var(--muted); font-size: var(--t-sm); }
.field.is-error .hint, .field .hint.error { color: var(--red); }
.work .foot .btn-primary { margin-left: auto; }
.fold-body { display: grid; gap: var(--s3); padding: var(--s3) var(--s4); }
.fold-f .fold-body.kv { grid-template-columns: 180px minmax(0, 1fr); }
.fold-f .kv dt { overflow-wrap: anywhere; }
.dot-green { color: var(--green); }
.dot-red { color: var(--red); }
.empty-row, .rows > li.empty-row { display: block; min-height: 0; padding: var(--s4); color: var(--muted); }
.rows > li.more { display: block; min-height: 0; color: var(--muted); font-size: var(--t-sm); }
.fw-regular { font-weight: var(--w-regular); }
.hint { display: block; font-size: var(--t-sm); color: var(--muted); font-weight: var(--w-regular); }
.check { display: flex; align-items: flex-start; gap: var(--s2); color: var(--ink); font-size: var(--t-md); font-weight: var(--w-regular); }
.act-block { display: grid; gap: var(--s2); }
.act-block h4, .adv-block h4, .pb-access h4 { font-size: var(--t-md); font-weight: var(--w-semibold); }
.adv-block { display: grid; gap: var(--s2); }
.ps-empty { display: grid; gap: var(--s1); padding: var(--s6) var(--s4); border: 1px dashed var(--border-strong); border-radius: var(--r-md); text-align: center; }
.warn-line { display: block; color: var(--amber); font-weight: var(--w-regular); font-size: var(--t-sm); }
.pt-steps { margin: 0; padding-left: 20px; display: grid; gap: var(--s1); }
.pb-access { display: grid; gap: var(--s2); }
.pb-access code { font-family: var(--mono); }
.foot-inner { display: contents; }
.work .foot .muted { font-size: var(--t-sm); }
.step[aria-current="step"] .lb { color: var(--ink); }
.step[aria-current="step"] .st { color: var(--ink-2); }
.find > li.done > .i { color: var(--green); }
.find > li.done .ref { color: var(--green); }
.find > li:has(.i:first-child) { }
.ps-history { margin: 0; padding-left: 18px; font-size: var(--t-sm); color: var(--muted); }
.progress-line .ps-bar { flex: 1; }
.seg .count-amber { color: var(--amber); }
@media (max-width: 760px) {
  .top-extra .btn { min-height: 0; }
  .fold-f .fold-body.kv { grid-template-columns: 104px minmax(0, 1fr); }
  .grid-fields { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) { .grid-fields { grid-template-columns: minmax(0, 1fr); } }

.sys .n small { overflow: hidden; text-overflow: ellipsis; }
#pf-activation { display: grid; gap: var(--s4); }
.stage-dom { font-weight: var(--w-regular); }

.m-steps { padding: 12px 14px; }
.cards .nm { color: inherit; text-decoration: none; }
.ps-bar::-webkit-progress-value { background: var(--blue); }
.ps-bar::-moz-progress-bar { background: var(--blue); }

/* Planes: armador (Ajustes › Planes) y «Plan y excepciones» en la ficha del cliente */
.pl-stack { gap: 14px; }
.pl-table td small { display: block; color: var(--muted); font-size: .74rem; font-weight: 400; }
.pl-table .pl-group th { background: #ffffff08; padding: 6px 12px; font-size: .7rem; }
.pl-table td .badge { margin-left: 6px; }
.pl-num { width: 6.5rem; min-height: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.pl-num[aria-invalid] { border-color: var(--danger); }
.pl-changed { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; border-radius: 6px; }
.pl-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .86rem; padding: 2px 4px; }
.pl-switch input { accent-color: var(--accent); width: 18px; height: 18px; }
.pl-soon td { color: var(--muted); }
.pl-override td { background: color-mix(in srgb, var(--amber) 7%, transparent); }
.pl-override .btn { margin-left: 6px; }
.pl-errors { margin: 10px 0 0; padding-left: 18px; color: var(--danger); font-size: .84rem; }
#pl-messages .alert ul { margin: 6px 0 0; padding-left: 18px; }
#pl-messages p { margin: 10px 0 0; }
.pl-note { flex: 1 1 14rem; min-width: 0; }
.pl-lines { margin: 0 0 8px; padding-left: 18px; font-size: .88rem; }
.pl-lines li { margin: 0 0 4px; }
.pl-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pl-version { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.pl-version.pl-current { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.pl-version-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pl-version p { margin: 4px 0 0; }
.pl-diff { margin: 6px 0 0; padding-left: 18px; font-size: .82rem; color: var(--muted); }
.pl-audit { margin: 0; padding: 0; list-style: none; }
.pl-audit small { color: var(--muted); }
@media (max-width: 860px) { .pl-num { width: 100%; max-width: 9rem; } }