/* =============================================================================
   Modulo Tienda Online — hoja de estilos de las pantallas de administracion.

   Vive aca y no en archivos *.razor.css porque en este proyecto el CSS aislado de
   Blazor NO llega al navegador: index.html nunca enlaza Web.styles.css, asi que
   todo *.razor.css se compila y se descarta. Se comprobo el 27/08/2026.

   Por eso CADA regla esta acotada al contenedor de su pantalla. Al pasar de una
   hoja aislada a una global, un selector suelto como .error o .primary deja de
   afectar a una pantalla y le cambia el aspecto a media aplicacion.
   ============================================================================= */


/* --- Marco de administracion de tienda (.store-shell) --- */
.store-shell {max-width:1400px;margin:0 auto;padding:24px}
.store-shell__header {display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:24px;background:#fff;border:1px solid #e2e8f0;border-radius:18px}
.store-shell__header p {margin:8px 0 2px;color:#64748b}
.store-shell__header h1 {margin:0;color:#0f172a;font-size:clamp(1.7rem,3vw,2.35rem)}
.store-shell__back {color:var(--primary-dark);text-decoration:none;font-weight:700}
.store-shell__meta {display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;color:#475569}
.store-shell__meta span {padding:5px 10px;background:#f1f5f9;border-radius:999px}
.store-shell .store-status {background:#fff7ed!important;color:#9a3412!important}
.store-shell__selector {display:grid;gap:6px;color:#475569;font-size:.86rem;font-weight:700}
.store-shell__selector select {min-height:44px;min-width:240px;border:1px solid #cbd5e1;border-radius:10px;padding:0 12px;background:#fff}
.store-shell__body {display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;margin-top:20px}
.store-shell__nav {display:flex;flex-direction:column;gap:5px;align-self:start;padding:10px;background:#fff;border:1px solid #e2e8f0;border-radius:16px}
.store-shell__nav a, .store-shell__nav span {display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px;padding:9px 12px;border-radius:10px;text-decoration:none;color:#334155;font-weight:650}
.store-shell__nav .active {background:var(--primary-bg);color:var(--primary-dark)}
.store-shell__nav .disabled {color:#94a3b8;cursor:not-allowed}
.store-shell__nav small {font-size:.64rem;font-weight:600}
.store-shell__content {min-width:0}
.store-shell a:focus-visible, .store-shell select:focus-visible {outline:3px solid var(--primary-dark);outline-offset:2px;border-radius:8px}
.store-shell__selector select:focus {border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg)}
/* Hasta 900px el menu lateral deja de tener sentido: con 230px de barra, a un
   tablet de 820 le quedan 570 para el contenido y las filas del checklist —texto
   largo mas un boton que no se parte— se desbordaban. */
@media(max-width:900px) {
  .store-shell {padding:14px}
  .store-shell__header {align-items:stretch;flex-direction:column}
  .store-shell__selector select {width:100%;min-width:0}
  .store-shell__body {grid-template-columns:1fr}
  .store-shell__nav {overflow-x:auto;flex-direction:row}
  .store-shell__nav a, .store-shell__nav span {flex:0 0 auto}
  .store-shell__nav small {display:none}
}

/* --- Mis tiendas (.stores-page) --- */
.stores-page {max-width:1280px;margin:0 auto;padding:28px}
.stores-page .stores-hero {display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.stores-page .eyebrow {color:var(--primary-dark);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.stores-page .stores-hero h1 {font-size:clamp(2rem,4vw,3rem);margin:5px 0;color:#0f172a}
.stores-page .stores-hero p {margin:0;color:#64748b}
.stores-page .primary, .stores-page .state button, .stores-page .actions button {min-height:44px;border:1px solid #cbd5e1;border-radius:10px;padding:0 16px;background:#fff;color:#334155;font-weight:750;cursor:pointer}
.stores-page .primary {background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}
.stores-page .primary:hover:not(:disabled) {background:var(--primary-dark)!important;border-color:var(--primary-dark)!important}
.stores-page button:focus-visible {outline:3px solid var(--primary-dark);outline-offset:2px}
.stores-page .tenant-block {margin-top:26px}
.stores-page .tenant-title {display:flex;justify-content:space-between;align-items:end;margin-bottom:12px;color:#64748b}
.stores-page .tenant-title span {font-size:.8rem}
.stores-page .tenant-title h2 {margin:2px 0;color:#1e293b;font-size:1.15rem}
.stores-page .stores-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.stores-page .store-card {display:grid;grid-template-columns:54px 1fr;gap:14px;padding:18px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 8px 25px rgba(15,23,42,.04)}
.stores-page .store-logo {display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:var(--primary-bg);color:var(--primary-dark);font-weight:850}
.stores-page .store-top {display:flex;justify-content:space-between;gap:8px}
.stores-page .store-main h3 {margin:2px 0;color:#0f172a}
.stores-page .store-main p {margin:5px 0;color:#64748b}
.stores-page .store-main small {color:#475569}
.stores-page .status {height:max-content;padding:4px 8px;border-radius:999px;background:#fff7ed;color:#9a3412;font-size:.72rem;font-weight:800}
.stores-page .actions {grid-column:1/-1;display:flex;gap:8px;border-top:1px solid #f1f5f9;padding-top:14px}
.stores-page .actions button:disabled {cursor:not-allowed;color:#94a3b8;background:#f8fafc}
.stores-page .state {display:grid;justify-items:center;text-align:center;padding:64px 24px;background:#fff;border:1px dashed #cbd5e1;border-radius:18px}
.stores-page .state h2 {margin:5px}
.stores-page .state p {color:#64748b}
.stores-page .empty-icon {font-size:2.5rem}
.stores-page .skeleton-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stores-page .skeleton-grid span {height:190px;border-radius:16px;background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9);background-size:200%;animation:pulse 1.3s infinite}
@keyframes pulse{to{background-position:-200%}}
@media(prefers-reduced-motion:reduce) {
  .stores-page .skeleton-grid span {animation:none}
}
@media(max-width:700px) {
  .stores-page {padding:18px}
  .stores-page .stores-hero {align-items:stretch;flex-direction:column}
  .stores-page .stores-grid, .stores-page .skeleton-grid {grid-template-columns:1fr}
  .stores-page .store-card {grid-template-columns:48px 1fr}
  .stores-page .actions button {flex:1}
}

/* --- Alta de tienda (.create-page) --- */
.create-page {max-width:980px;margin:0 auto;padding:28px}
.create-page .back {color:var(--primary-dark);text-decoration:none;font-weight:700}
.create-page header {margin:22px 0}
.create-page .eyebrow {color:var(--primary-dark);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.create-page h1 {font-size:clamp(2rem,4vw,3rem);margin:6px 0;color:#0f172a}
.create-page header p {max-width:720px;color:#64748b;line-height:1.6}
.create-page .steps {display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:0;margin:24px 0;list-style:none}
.create-page .steps li {display:flex;align-items:center;gap:8px;color:#94a3b8;font-size:.78rem}
.create-page .steps b {display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#e2e8f0}
.create-page .steps .active {color:var(--primary-dark);font-weight:800}
.create-page .steps .active b {background:var(--primary);color:#fff}
.create-page .panel {padding:24px;background:#fff;border:1px solid #e2e8f0;border-radius:18px}
.create-page .mode-switch {display:flex;gap:6px;width:max-content;max-width:100%;padding:5px;margin-bottom:14px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc}
.create-page .mode-switch button {min-height:42px;border:0;border-radius:8px;padding:0 14px;background:transparent;color:#64748b;font-weight:750;cursor:pointer}
.create-page .mode-switch .active {background:#fff;color:var(--primary-dark);box-shadow:0 2px 9px rgba(15,23,42,.08)}
.create-page fieldset {border:0;padding:0;margin:0 0 26px}
.create-page legend {width:100%;padding-bottom:10px;margin-bottom:16px;border-bottom:1px solid #e2e8f0;color:#0f172a;font-size:1.1rem;font-weight:800}
.create-page .field-grid {display:grid;grid-template-columns:1fr 1fr;gap:18px}
.create-page .field-grid label {display:grid;gap:7px;color:#334155;font-size:.86rem;font-weight:700}
.create-page .field-grid input, .create-page .field-grid select {width:100%;min-height:46px;border:1px solid #cbd5e1;border-radius:10px;padding:0 12px;font:inherit;background:#fff}
.create-page .field-grid input:focus, .create-page .field-grid select:focus {outline:3px solid var(--primary-dark);outline-offset:1px;border-color:var(--primary)}
.create-page button:focus-visible, .create-page a:focus-visible {outline:3px solid var(--primary-dark);outline-offset:2px;border-radius:8px}
.create-page .field-grid small, .create-page .domain-preview {color:#64748b;font-size:.75rem;font-weight:500;overflow-wrap:anywhere}
.create-page .validation-message, .create-page .validation-errors {color:#b91c1c;font-size:.78rem}
.create-page .error {padding:12px;margin:8px 0 16px;border-radius:10px;background:#fef2f2;color:#991b1b}
.create-page .form-actions {display:flex;justify-content:flex-end;gap:10px}
.create-page .form-actions button, .create-page .state button {min-height:44px;border:1px solid #cbd5e1;border-radius:10px;padding:0 18px;background:#fff;font-weight:750;cursor:pointer}
.create-page .form-actions .primary, .create-page .state .primary {background:var(--primary);border-color:var(--primary);color:#fff}
.create-page .form-actions .primary:hover:not(:disabled), .create-page .state .primary:hover:not(:disabled) {background:var(--primary-dark);border-color:var(--primary-dark)}
.create-page .form-actions button:disabled {cursor:wait;opacity:.6}
.create-page .state {text-align:center}
.create-page .state p {color:#64748b}
.create-page .state .form-actions {justify-content:center;margin-top:16px}
@media(max-width:720px) {
  .create-page {padding:18px}
  .create-page .steps {grid-template-columns:1fr}
  .create-page .steps li:not(.active) {display:none}
  .create-page .field-grid {grid-template-columns:1fr}
  .create-page .mode-switch {display:grid;width:100%}
  .create-page .form-actions {flex-direction:column-reverse}
  .create-page .form-actions button {width:100%}
}

/* --- Resumen de tienda (.tienda-resumen) --- */
.tienda-resumen .summary-card {padding:22px;background:#fff;border:1px solid #e2e8f0;border-radius:16px}
.tienda-resumen .hero {margin-bottom:16px;background:linear-gradient(135deg,#fff,var(--primary-bg))}
.tienda-resumen .eyebrow {color:var(--primary-dark);font-size:.75rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.tienda-resumen .hero h2 {margin:6px 0;color:#0f172a;font-size:1.55rem}
.tienda-resumen .hero p, .tienda-resumen .summary-card p {color:#64748b;line-height:1.55}
.tienda-resumen .summary-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tienda-resumen .summary-card h3 {margin:0 0 12px;color:#334155;font-size:.95rem}
.tienda-resumen .summary-card strong {display:block;color:#0f172a;font-size:1.35rem}
.tienda-resumen .permissions ul {display:grid;gap:7px;padding:0;margin:0;list-style:none}
.tienda-resumen .permissions li {padding:7px 10px;border-radius:8px;background:#f8fafc;color:#334155}
.tienda-resumen .next {margin-top:16px}
.tienda-resumen .next div {display:flex;flex-wrap:wrap;gap:8px}
.tienda-resumen .next span {padding:7px 10px;border-radius:999px;background:#f1f5f9;color:#64748b;font-size:.8rem}
.tienda-resumen .summary-state {max-width:720px;margin:70px auto;padding:36px;text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:18px}
.tienda-resumen .summary-state p {color:#64748b}
.tienda-resumen .summary-state button {min-height:44px;border:0;border-radius:10px;padding:0 18px;background:var(--primary);color:#fff;font-weight:750;cursor:pointer}
.tienda-resumen .summary-state button:hover {background:var(--primary-dark)}
.tienda-resumen .summary-state button:focus-visible {outline:3px solid var(--primary-dark);outline-offset:2px}
@media(max-width:900px) {
  .tienda-resumen .summary-grid {grid-template-columns:1fr}
}

/* =============================================================================
   Pantallas del constructor. Cada bloque esta acotado a su contenedor raiz:
   .ds diseñador · .tpl plantillas · .dom dominio · .mkt marketing
   ============================================================================= */

/* --- Piezas compartidas por las cuatro pantallas --- */
.ds, .tpl, .dom, .mkt { max-width: 1400px; margin: 0 auto; padding: 24px; }
.ds h1, .tpl h1, .dom h1, .mkt h1 { margin: 4px 0 6px; color: #0f172a; font-size: 1.9rem; }
.ds .sub, .tpl .sub, .dom .sub, .mkt .sub { margin: 0 0 20px; color: #64748b; line-height: 1.6; }
.ds .volver, .tpl .volver, .dom .volver, .mkt .volver {
  color: var(--primary-dark); text-decoration: none; font-weight: 700; }
.ds .tarjeta, .tpl .tarjeta, .dom .tarjeta, .mkt .tarjeta {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px; }
.ds .aviso, .tpl .aviso, .dom .aviso, .mkt .aviso {
  margin: 12px 0; padding: 12px 14px; border-radius: 10px; line-height: 1.5;
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.ds .aviso.malo, .tpl .aviso.malo, .dom .aviso.malo, .mkt .aviso.malo {
  background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.ds .aviso.bueno, .tpl .aviso.bueno, .dom .aviso.bueno, .mkt .aviso.bueno {
  background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.ds .btn, .tpl .btn, .dom .btn, .mkt .btn {
  min-height: 42px; padding: 0 16px; border-radius: 10px; border: 1px solid #cbd5e1;
  background: #fff; color: #334155; font-weight: 700; cursor: pointer; }
.ds .btn:hover, .tpl .btn:hover, .dom .btn:hover, .mkt .btn:hover { background: #f8fafc; }
.ds .btn.principal, .tpl .btn.principal, .dom .btn.principal, .mkt .btn.principal {
  background: var(--primary); border-color: var(--primary); color: #fff; }
.ds .btn.peligro, .mkt .btn.peligro, .dom .btn.peligro { color: #b91c1c; border-color: #fecaca; }
.ds .btn:disabled, .tpl .btn:disabled, .dom .btn:disabled, .mkt .btn:disabled {
  opacity: .55; cursor: not-allowed; }
.ds .campo, .tpl .campo, .dom .campo, .mkt .campo { display: block; margin-bottom: 14px; }
.ds .campo > span, .tpl .campo > span, .dom .campo > span, .mkt .campo > span {
  display: block; margin-bottom: 5px; font-size: .82rem; font-weight: 700; color: #334155; }
.ds .campo input, .ds .campo select, .ds .campo textarea,
.dom .campo input, .mkt .campo input, .mkt .campo select, .mkt .campo textarea {
  width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid #cbd5e1;
  border-radius: 10px; font: inherit; color: #0f172a; background: #fff; }
.ds .campo textarea, .mkt .campo textarea { min-height: 92px; resize: vertical; }
.ds .ayuda, .tpl .ayuda, .dom .ayuda, .mkt .ayuda {
  margin: 4px 0 0; font-size: .78rem; color: #64748b; line-height: 1.5; }
.ds .vacio, .tpl .vacio, .dom .vacio, .mkt .vacio {
  padding: 34px 20px; text-align: center; color: #64748b; }

/* --- Diseñador: dos columnas, editor y vista previa --- */
.ds .barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ds .barra .acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ds .estado { font-size: .82rem; color: #64748b; }
.ds .estado.pendiente { color: #b45309; font-weight: 700; }
.ds .cuerpo { display: grid; grid-template-columns: 380px 1fr; gap: 18px; margin-top: 18px; align-items: start; }
.ds .panel { position: sticky; top: 16px; max-height: calc(100vh - 40px); overflow: auto; }
.ds .pestanas { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.ds .pestanas button {
  padding: 7px 12px; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff;
  color: #475569; font-weight: 700; font-size: .82rem; cursor: pointer; }
.ds .pestanas button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.ds .paginas { list-style: none; margin: 0 0 12px; padding: 0; }
.ds .paginas li {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; }
.ds .paginas li.on { background: var(--primary-bg); }
.ds .paginas button.nombre {
  flex: 1; text-align: left; border: 0; background: none; font: inherit; font-weight: 700;
  color: #0f172a; cursor: pointer; padding: 0; }
.ds .paginas small { color: #94a3b8; font-size: .74rem; }
.ds .bloques { list-style: none; margin: 0; padding: 0; }
.ds .bloques li {
  display: flex; align-items: center; gap: 8px; padding: 10px;
  border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 8px; background: #fff; }
.ds .bloques li.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-bg); }
/* --- PASO 7: arrastrar y soltar --- */
.ds .bloques li[draggable] { cursor: grab; }
.ds .bloques li.arrastrando { opacity: .45; cursor: grabbing; }
.ds .agarre { color: #94a3b8; font-size: 15px; cursor: grab; user-select: none; letter-spacing: -2px; }
/* La zona de soltar vive entre dos bloques y solo se agranda cuando se arrastra
   algo encima: si estuviera siempre visible, la lista se leeria peor. */
.ds .bloques li.zona {
  height: 6px; margin: 0; padding: 0; border: 0; background: transparent;
  border-radius: 999px; transition: height .12s ease, background .12s ease; }
.ds .bloques li.zona.activa { height: 26px; background: var(--primary-bg);
  border: 2px dashed var(--primary); }
/* --- Paneles de aspecto y dispositivos --- */
.ds .sf-estilo { border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; margin-top: 12px; }
.ds .sf-estilo > summary { cursor: pointer; font-weight: 700; font-size: .86rem; color: #334155;
  list-style: none; display: flex; justify-content: space-between; align-items: center; }
.ds .sf-estilo > summary::-webkit-details-marker { display: none; }
.ds .sf-estilo > summary::after { content: "▾"; color: #94a3b8; }
.ds .sf-estilo[open] > summary::after { content: "▴"; }
.ds .sf-estilo__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; }
.ds .sf-estilo .color { display: flex; align-items: center; gap: 8px; }
.ds .sf-estilo .color input[type=color] { width: 42px; height: 32px; padding: 0; border: 1px solid #cbd5e1;
  border-radius: 8px; background: #fff; cursor: pointer; }
.ds .sf-estilo .color span { font-size: .8rem; font-weight: 600; color: #334155; }
.ds .sf-link { border: 0; background: none; color: var(--primary-dark); text-decoration: underline;
  font-size: .78rem; cursor: pointer; padding: 4px 0; font-family: inherit; }

.ds .bloques .icono { font-size: 1.15rem; }
.ds .bloques .titulo { flex: 1; font-weight: 700; color: #0f172a; font-size: .88rem; }
.ds .bloques .oculto { color: #94a3b8; font-weight: 500; }
.ds .bloques .mover { border: 0; background: none; cursor: pointer; color: #64748b; font-size: 1rem; padding: 2px 4px; }
.ds .paleta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ds .paleta button {
  text-align: left; padding: 10px; border: 1px solid #e2e8f0; border-radius: 12px;
  background: #fff; cursor: pointer; }
.ds .paleta button:hover { border-color: var(--primary); }
.ds .paleta b { display: block; color: #0f172a; font-size: .84rem; }
.ds .paleta small { color: #64748b; font-size: .74rem; line-height: 1.35; }
.ds .previa { border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; background: #fff; }
.ds .previa .encabezado {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.ds .previa .dispositivos { display: flex; gap: 6px; }
.ds .previa .dispositivos button {
  padding: 5px 12px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff;
  cursor: pointer; font-size: .8rem; font-weight: 700; color: #475569; }
.ds .previa .dispositivos button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.ds .previa .marco { display: flex; justify-content: center; background: #eef2f7; padding: 16px; }
.ds .previa iframe {
  width: 100%; height: 74vh; border: 0; background: #fff; border-radius: 10px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .12); transition: width .18s ease; }
.ds .previa iframe.tablet { width: 820px; max-width: 100%; }
.ds .previa iframe.movil { width: 400px; max-width: 100%; }
.ds .repetibles { list-style: none; margin: 0; padding: 0; }
.ds .repetibles li { border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.ds .repetibles .fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ds .elegidos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ds .elegidos span {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: #f1f5f9; font-size: .78rem; color: #334155; }
.ds .elegidos button { border: 0; background: none; cursor: pointer; color: #64748b; }
.ds .resultados { list-style: none; margin: 8px 0 0; padding: 0; max-height: 260px; overflow: auto; }
.ds .resultados li { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 8px; }
.ds .resultados li:hover { background: #f8fafc; }
.ds .resultados img { width: 38px; height: 38px; object-fit: cover; border-radius: 8px; }
.ds .resultados .datos { flex: 1; min-width: 0; }
.ds .resultados .datos b { display: block; font-size: .82rem; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds .resultados .datos small { color: #64748b; font-size: .74rem; }
.ds .historial { list-style: none; margin: 0; padding: 0; }
.ds .historial li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid #f1f5f9; }

/* --- Plantillas --- */
.tpl .grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tpl .tema { border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; background: #fff; }
.tpl .tema.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); }
.tpl .muestra { height: 132px; display: grid; grid-template-rows: 26px 1fr; }
.tpl .muestra .cinta { display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: .68rem; }
.tpl .muestra .cuerpo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; }
.tpl .muestra .caja { border-radius: 6px; }
.tpl .tema .datos { padding: 14px; }
.tpl .tema h3 { margin: 0 0 3px; font-size: 1rem; color: #0f172a; }
.tpl .tema .rubro { font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--primary-dark); }
.tpl .tema p { margin: 6px 0 12px; color: #64748b; font-size: .82rem; line-height: 1.5; }
.tpl .personalizar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.tpl .color { display: flex; align-items: center; gap: 10px; }
.tpl .color input[type=color] { width: 44px; height: 34px; padding: 0; border: 1px solid #cbd5e1;
  border-radius: 8px; background: #fff; cursor: pointer; }
.tpl .color span { font-size: .82rem; font-weight: 700; color: #334155; }
.tpl select, .tpl input[type=number] {
  width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid #cbd5e1;
  border-radius: 10px; font: inherit; background: #fff; }

/* --- Dominio --- */
.dom .grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.dom .direccion { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dom .direccion code {
  padding: 6px 10px; background: #f1f5f9; border-radius: 8px; font-size: .88rem; color: #0f172a; }
.dom .lista { list-style: none; margin: 0; padding: 0; }
.dom .lista li { border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.dom .lista .fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dom .lista b { color: #0f172a; }
.dom .marca {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.dom .marca.verified { background: #dcfce7; color: #166534; }
.dom .marca.pending { background: #fef3c7; color: #92400e; }
.dom .marca.error { background: #fee2e2; color: #991b1b; }
.dom .pasos { margin: 10px 0 0; padding-left: 20px; color: #475569; line-height: 1.7; font-size: .86rem; }
.dom .pasos code { background: #f1f5f9; padding: 2px 6px; border-radius: 6px; }

/* --- Marketing --- */
.mkt .pestanas { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.mkt .pestanas button {
  padding: 8px 16px; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff;
  color: #475569; font-weight: 700; cursor: pointer; }
.mkt .pestanas button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.mkt table { width: 100%; border-collapse: collapse; }
.mkt th { text-align: left; padding: 10px; font-size: .76rem; text-transform: uppercase;
  letter-spacing: .05em; color: #64748b; border-bottom: 1px solid #e2e8f0; }
.mkt td { padding: 12px 10px; border-bottom: 1px solid #f1f5f9; color: #334155; vertical-align: middle; }
.mkt td b { color: #0f172a; }
.mkt .marca {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.mkt .marca.activa { background: #dcfce7; color: #166534; }
.mkt .marca.programada { background: #dbeafe; color: #1e40af; }
.mkt .marca.finalizada, .mkt .marca.vencido { background: #f1f5f9; color: #64748b; }
.mkt .marca.pausada, .mkt .marca.pausado { background: #fef3c7; color: #92400e; }
.mkt .marca.agotado { background: #fee2e2; color: #991b1b; }
.mkt .marca.activo { background: #dcfce7; color: #166534; }
.mkt .formulario { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 16px; }
.mkt .escalones { list-style: none; margin: 0; padding: 0; }
.mkt .escalones li { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mkt .escalones input { width: 96px; }
.mkt .cupon { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; }
.mkt .componentes { list-style: none; margin: 8px 0 0; padding: 0; }
.mkt .componentes li {
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: #f8fafc;
  margin-bottom: 6px; }
.mkt .resumen-pack { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.mkt .resumen-pack div b { display: block; font-size: 1.15rem; color: #0f172a; }
.mkt .resumen-pack div span { font-size: .76rem; color: #64748b; }

/* --- Pantallas chicas --- */
@media (max-width: 1100px) {
  .ds .cuerpo { grid-template-columns: 1fr; }
  .ds .panel { position: static; max-height: none; }
  .dom .grilla { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ds, .tpl, .dom, .mkt { padding: 14px; }
  .ds .paleta { grid-template-columns: 1fr; }
  .mkt .formulario { grid-template-columns: 1fr; }
  .mkt table, .mkt thead, .mkt tbody, .mkt tr, .mkt td { display: block; width: 100%; }
  .mkt thead { display: none; }
  .mkt tr { border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px; margin-bottom: 10px; }
  .mkt td { border: 0; padding: 5px 0; }
}

/* --- Marketing y medición (PASO 8) ---------------------------------------- */
.an .cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.an .cab select { padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; }

/* Los números primero y grandes: es lo que el comercio viene a mirar. */
.an .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; }
.an .kpi { border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; background: #fff; }
.an .kpi span { display: block; color: #64748b; font-size: .8rem; margin-bottom: 6px; }
.an .kpi b { font-size: 1.5rem; color: #0f172a; line-height: 1.2; }
.an .kpi.destacado { background: #f0f9ff; border-color: #bae6fd; }
.an .kpi.destacado b { color: #0369a1; }

.an .check { display: flex; align-items: center; gap: 9px; margin: 12px 0 4px; cursor: pointer; }
.an .campo > span small { font-weight: 400; color: #64748b; margin-left: 6px; }
.an .acciones { margin: 22px 0 40px; }
.an .tabla { width: 100%; border-collapse: collapse; margin-top: 10px; }
.an .tabla th, .an .tabla td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #e2e8f0; }
.an .tabla th { color: #64748b; font-size: .8rem; font-weight: 600; }

/* --- Centro de Integraciones (PASO 9) ------------------------------------- */
.intg .filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.intg .chip {
  border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 999px;
  padding: 7px 14px; font-size: .86rem; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
.intg .chip:hover { background: #f8fafc; }
.intg .chip.activo { background: #0f172a; border-color: #0f172a; color: #fff; }
.intg .chip .cuenta { background: rgba(148,163,184,.25); border-radius: 999px; padding: 1px 7px; font-size: .78rem; }
.intg .chip.activo .cuenta { background: rgba(255,255,255,.22); }

.intg .tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.intg .app {
  border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
/* Una línea de color al costado: se ve el estado de las doce tarjetas de un
   vistazo, sin tener que leer cada etiqueta. */
.intg .app.ok { border-left: 4px solid #16a34a; }
.intg .app.mal { border-left: 4px solid #dc2626; }
.intg .app.atencion { border-left: 4px solid #d97706; }

.intg .app header { display: flex; align-items: flex-start; gap: 11px; }
.intg .app .icono { font-size: 1.7rem; line-height: 1; }
.intg .app h2 { margin: 0; font-size: 1.02rem; color: #0f172a; }
.intg .app .cat { margin: 2px 0 0; font-size: .78rem; color: #64748b; text-transform: capitalize; }
.intg .app .estado {
  margin-left: auto; font-size: .74rem; font-weight: 600; white-space: nowrap;
  background: #f1f5f9; color: #475569; border-radius: 999px; padding: 4px 10px;
}
.intg .app.ok .estado { background: #dcfce7; color: #166534; }
.intg .app.mal .estado { background: #fee2e2; color: #991b1b; }
.intg .app.atencion .estado { background: #fef3c7; color: #92400e; }

.intg .app .desc { margin: 0; color: #475569; font-size: .89rem; line-height: 1.5; }
.intg .app .cuenta-conectada { margin: 0; font-size: .85rem; color: #0f172a; word-break: break-word; }
.intg .app .meta { margin: 0; font-size: .78rem; color: #64748b; }
.intg .app .error { margin: 0; font-size: .82rem; color: #b91c1c; }
.intg .app .detalle { margin: 0; font-size: .82rem; color: #475569; }
.intg .app .acciones { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.intg .app .btn { padding: 7px 13px; font-size: .85rem; }

.intg .config { margin-top: 20px; }
.intg .faltantes { margin: 6px 0 10px; padding-left: 20px; color: #b45309; font-size: .86rem; line-height: 1.7; }

/* --- Menú por áreas (PASO 10) --------------------------------------------- */
/* Lo avanzado del área, indentado bajo ella: se ve que pertenece, y no compite
   con las siete entradas principales. */
.store-shell__sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 12px;
  padding-left: 10px; border-left: 2px solid #e2e8f0; }
.store-shell__sub a { min-height: 36px; padding: 6px 10px; font-size: .88rem; font-weight: 550; color: #64748b; }
.store-shell__sub a:hover { background: #f8fafc; color: #334155; }
.store-shell__sub a.active { background: var(--primary-bg); color: var(--primary-dark); font-weight: 650; }

/* --- Panel de inicio de la tienda (PASO 10) -------------------------------- */
.inicio .estado { margin-bottom: 16px; }
.inicio .estado.ok { border-color: #bbf7d0; background: #f0fdf4; }
.inicio .estado__barra { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.inicio .estado h1 { margin: 0 0 4px; font-size: 1.3rem; }
.inicio .estado .sub { margin: 0 0 12px; }

/* El aro es el porcentaje: se lee de un vistazo y sale de comprobaciones
   reales, no de cuántas pantallas se abrieron. */
.inicio .aro { --pct: 0; position: relative; width: 104px; height: 104px; flex: 0 0 104px;
  border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#16a34a calc(var(--pct) * 1%), #e2e8f0 0); }
.inicio .aro::after { content: ""; position: absolute; inset: 9px; background: #fff; border-radius: 50%; }
.inicio .estado.ok .aro::after { background: #f0fdf4; }
.inicio .aro span { position: relative; z-index: 1; font-size: 1.6rem; font-weight: 700; color: #0f172a; }
.inicio .aro small { font-size: .85rem; font-weight: 600; color: #64748b; }

.inicio .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.inicio .kpi { border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; background: #fff; }
.inicio .kpi span { display: block; color: #64748b; font-size: .8rem; margin-bottom: 6px; }
.inicio .kpi b { font-size: 1.5rem; color: #0f172a; line-height: 1.2; }
.inicio .kpi.destacado { background: #f0f9ff; border-color: #bae6fd; }
.inicio .kpi.destacado b { color: #0369a1; }

.inicio .check, .inicio .diag { list-style: none; margin: 10px 0 0; padding: 0; }
.inicio .check li, .inicio .diag li { display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-top: 1px solid #f1f5f9; }
.inicio .check li:first-child, .inicio .diag li:first-child { border-top: 0; }
.inicio .check b, .inicio .diag b { color: #0f172a; }
.inicio .check p, .inicio .diag p { margin: 3px 0 0; color: #64748b; font-size: .87rem; line-height: 1.5; }
.inicio .check .btn, .inicio .diag .btn { margin-left: auto; white-space: nowrap; padding: 7px 13px; font-size: .85rem; }
.inicio .check .pista { margin-left: auto; color: #64748b; font-size: .82rem; }

.inicio .check .marca { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  background: #f1f5f9; color: #94a3b8; }
.inicio .check li.listo .marca { background: #dcfce7; color: #166534; }
.inicio .check li.error .marca { background: #fee2e2; color: #991b1b; }
.inicio .check li.pendiente .marca { background: #fef3c7; color: #92400e; }
.inicio .check .etq { margin-left: 7px; font-size: .72rem; color: #64748b;
  background: #f1f5f9; border-radius: 999px; padding: 2px 8px; }

.inicio .diag li.alto b { color: #b91c1c; }
.inicio .diag li.medio b { color: #b45309; }

.inicio .rapidos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.inicio .rapidos a { border: 1px solid #e2e8f0; border-radius: 10px; padding: 9px 14px;
  text-decoration: none; color: #334155; font-size: .88rem; font-weight: 600; background: #fff; }
.inicio .rapidos a:hover { background: #f8fafc; }

/* --- Propuesta de la IA en el editor -------------------------------------- */
.ds .propuesta { border-color: #c7d2fe; background: #f5f3ff; }
.ds .propuesta h2 { margin-top: 0; }

/* --- El panel de inicio en pantallas chicas ------------------------------- */
/* `min-width:0` es lo que permite que un texto largo se achique dentro de un
   flex en vez de empujar la fila y desbordar la pagina. */
.inicio .check li > div, .inicio .diag li > div { min-width: 0; }
.inicio .check b, .inicio .diag b { overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .inicio .check li, .inicio .diag li { flex-wrap: wrap; }
  .inicio .check .btn, .inicio .diag .btn,
  .inicio .check .pista { margin-left: 38px; white-space: normal; }
  .inicio .estado__barra { gap: 14px; }
  .inicio .aro { width: 84px; height: 84px; flex-basis: 84px; }
  .inicio .aro span { font-size: 1.3rem; }
}

/* =============================================================================
   TIENDA ONLINE · cáscara del módulo (rediseño 2026-09-09)

   Mismo concepto que Mensajería: barra lateral oscura con el logo arriba y las
   secciones debajo, y todo el trabajo sobre blanco. El prefijo `tol-` es del
   layout; el resto de las pantallas usa `tt-` (tienda). Vive acá y no en un
   *.razor.css porque el CSS aislado de Blazor no está enlazado en este proyecto.
   ============================================================================= */

.tol-app { display: flex; min-height: 100vh; background: #f7f8fc; color: #1e2130;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }

/* ---------- barra lateral ---------- */
.tol-side { width: 250px; min-width: 250px; background: #0f1222; color: #e5e7eb;
  display: flex; flex-direction: column; padding: 1.1rem .8rem 1rem; position: sticky; top: 0; height: 100vh; }
.tol-logo { display: flex; align-items: center; gap: .7rem; padding: .2rem .5rem 1.3rem;
  text-decoration: none; color: #fff; }
.tol-logo-ic svg { width: 38px; height: 38px; display: block; }
.tol-logo-tx { display: flex; flex-direction: column; line-height: 1.1; }
.tol-logo-tx b { font-size: 1.05rem; letter-spacing: -.01em; }
.tol-logo-tx small { color: #a5b4fc; font-size: .72rem; font-weight: 700; letter-spacing: .08em; }

.tol-nav { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.tol-item { display: flex; align-items: center; gap: .8rem; padding: .62rem .75rem; border-radius: 11px;
  text-decoration: none; color: #cbd5e1; font-size: .93rem; font-weight: 500; }
.tol-item:hover { background: #1c2138; color: #fff; }
.tol-item.on { background: #7c3aed; color: #fff; font-weight: 600; }
.tol-ico { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tol-ico svg { width: 19px; height: 19px; }
.tol-lbl { flex: 1; min-width: 0; }
.tol-badge { background: #f43f5e; color: #fff; border-radius: 9px; padding: .1rem .45rem;
  font-size: .72rem; font-weight: 700; min-width: 22px; text-align: center; }
.tol-volver { color: #94a3b8; font-size: .82rem; text-decoration: none; padding: .6rem .75rem; }
.tol-volver:hover { color: #fff; }

/* ---------- barra superior ---------- */
.tol-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tol-top { display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: #fff;
  border-bottom: 1px solid #e9ecf5; min-height: 60px; }
.tol-tienda { font-weight: 650; color: #0f172a; }
.tol-switch select { border: 1px solid #dfe3ee; border-radius: 10px; padding: 7px 12px;
  background: #fff; font-weight: 600; color: #0f172a; max-width: 260px; }
.tol-top__acc { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.tol-vertienda { color: #7c3aed; font-weight: 600; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.tol-vertienda:hover { text-decoration: underline; }
.tol-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.tol-main { flex: 1; min-width: 0; padding: 26px 24px 40px; }

@media (max-width: 900px) {
  .tol-app { flex-direction: column; }
  .tol-side { width: 100%; height: auto; position: static; flex-direction: row; align-items: center;
    overflow-x: auto; padding: .6rem .8rem; gap: .4rem; }
  .tol-logo { padding: 0 .6rem 0 .2rem; }
  .tol-logo-tx { display: none; }
  .tol-nav { flex-direction: row; }
  .tol-item { white-space: nowrap; }
  .tol-volver { display: none; }
  .tol-top { padding: 10px 14px; }
  .tol-main { padding: 16px 14px 32px; }
}

/* =============================================================================
   TIENDA ONLINE · sistema de pantallas (prefijo `tt-`)
   Tarjetas blancas sobre fondo #f7f8fc, radios de 16, acento violeta #7c3aed.
   ============================================================================= */

.tt { max-width: 1160px; }
.tt-head { margin-bottom: 20px; }
.tt-head h1 { margin: 0 0 4px; font-size: 1.65rem; font-weight: 700; color: #0f172a; letter-spacing: -.02em; }
.tt-head p { margin: 0; color: #64748b; font-size: .95rem; }

.tt-card { background: #fff; border: 1px solid #e9ecf5; border-radius: 16px; padding: 20px;
  margin-bottom: 16px; }
.tt-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.tt-card__head h2 { margin: 0; font-size: 1.02rem; font-weight: 650; color: #0f172a; }
.tt-link { color: #7c3aed; font-weight: 600; font-size: .88rem; text-decoration: none; }
.tt-link:hover { text-decoration: underline; }
.tt-nota { margin: -6px 0 18px; color: #94a3b8; font-size: .8rem; }

/* ---------- botones ---------- */
.tt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid #dfe3ee; background: #fff; color: #334155; border-radius: 11px;
  padding: 10px 18px; font-size: .92rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.tt-btn:hover { background: #f8fafc; }
.tt-btn:disabled { opacity: .55; cursor: not-allowed; }
.tt-btn--prim { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.tt-btn--prim:hover { background: #6d28d9; }
.tt-btn--peligro { color: #b91c1c; border-color: #fecaca; }
.tt-btn--peligro:hover { background: #fef2f2; }

/* ---------- tarjeta de estado general ---------- */
.tt-hero { display: flex; gap: 18px; align-items: flex-start; }
.tt-hero--ok { border-color: #bbf7d0; background: #f6fefa; }
.tt-hero__ic { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 14px; display: grid; place-items: center;
  background: #ede9fe; color: #7c3aed; }
.tt-hero--ok .tt-hero__ic { background: #dcfce7; color: #16a34a; }
.tt-hero__ic svg { width: 26px; height: 26px; }
.tt-hero__tx { flex: 1; min-width: 0; }
.tt-hero h2 { margin: 0 0 4px; font-size: 1.12rem; font-weight: 700; color: #0f172a; }
.tt-hero p { margin: 0 0 14px; color: #64748b; font-size: .92rem; }
.tt-hero__acts { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }

.tt-prog { display: flex; align-items: center; gap: 12px; }
.tt-prog__bar { flex: 1; height: 8px; border-radius: 999px; background: #ece9f6; overflow: hidden; }
.tt-prog__bar span { display: block; height: 100%; border-radius: 999px; background: #7c3aed; transition: width .3s; }
.tt-prog small { color: #64748b; font-size: .82rem; white-space: nowrap; font-weight: 600; }
.tt-hero--ok .tt-prog__bar span { background: #16a34a; }

/* ---------- números ---------- */
.tt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 16px; }
.tt-kpi { background: #fff; border: 1px solid #e9ecf5; border-radius: 16px; padding: 16px;
  display: flex; align-items: center; gap: 13px; }
.tt-kpi__ic { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: grid; place-items: center; }
.tt-kpi__ic svg { width: 21px; height: 21px; }
.tt-kpi__ic--azul { background: #e0f2fe; color: #0284c7; }
.tt-kpi__ic--naranja { background: #ffedd5; color: #ea580c; }
.tt-kpi__ic--violeta { background: #ede9fe; color: #7c3aed; }
.tt-kpi__ic--verde { background: #dcfce7; color: #16a34a; }
.tt-kpi__tx { min-width: 0; }
.tt-kpi__lbl { display: block; color: #64748b; font-size: .82rem; margin-bottom: 2px; }
.tt-kpi__val { font-size: 1.4rem; font-weight: 700; color: #0f172a; line-height: 1.15; display: block; }
.tt-kpi__var { font-size: .78rem; font-weight: 700; }
.tt-kpi__var.sube { color: #16a34a; }
.tt-kpi__var.baja { color: #dc2626; }

/* ---------- lista de tareas ---------- */
.tt-tareas { list-style: none; margin: 10px 0 0; padding: 0; }
.tt-tarea { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid #f1f3f9; }
.tt-tarea:first-child { border-top: 0; }
.tt-tarea__ic { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; border: 2px solid #cbd5e1;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: #fff; }
.tt-tarea--alerta .tt-tarea__ic { border-color: #dc2626; background: #dc2626; }
.tt-tarea div { flex: 1; min-width: 0; }
.tt-tarea b { display: block; color: #0f172a; font-size: .93rem; font-weight: 600; }
.tt-tarea small { display: block; color: #64748b; font-size: .84rem; margin-top: 2px; }
.tt-chev { color: #94a3b8; font-size: 1.5rem; line-height: 1; text-decoration: none; padding: 0 4px; }
.tt-chev:hover { color: #7c3aed; }

/* ---------- vacíos y carga ---------- */
.tt-vacio { text-align: center; padding: 28px 16px; }
.tt-vacio h2 { margin: 0 0 6px; font-size: 1.05rem; color: #0f172a; }
.tt-vacio p { margin: 0 0 14px; color: #64748b; }
.tt-vacio--chico { padding: 18px 8px; display: flex; align-items: center; gap: 10px; justify-content: center; }
.tt-vacio--chico span { width: 26px; height: 26px; border-radius: 50%; background: #dcfce7; color: #16a34a;
  display: grid; place-items: center; font-weight: 700; }
.tt-vacio--chico p { margin: 0; }

@keyframes tt-lat { 0% { background-position: -420px 0 } 100% { background-position: 420px 0 } }
.tt-skel { border-radius: 16px; background: linear-gradient(90deg, #f1f3f9 25%, #e7eaf3 50%, #f1f3f9 75%);
  background-size: 840px 100%; animation: tt-lat 1.3s linear infinite; margin-bottom: 16px; }
.tt-skel--hero { height: 168px; }
.tt-skel--kpi { height: 76px; margin: 0; }

@media (max-width: 640px) {
  .tt-head h1 { font-size: 1.4rem; }
  .tt-hero { flex-direction: column; }
  .tt-hero__acts .tt-btn { width: 100%; }
}

/* ---------- Checklist ---------- */
.tt-prog--suelta { margin-bottom: 18px; }
.tt-pasos { list-style: none; margin: 0; padding: 0; }
.tt-paso { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e9ecf5;
  border-radius: 16px; padding: 16px 18px; margin-bottom: 10px; }
.tt-paso__n { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: .88rem; background: #eef1f8; color: #64748b; }
.tt-paso.listo { border-color: #cdf3dd; }
.tt-paso.listo .tt-paso__n { background: #16a34a; color: #fff; }
.tt-paso.error { border-color: #fecaca; }
.tt-paso.error .tt-paso__n { background: #dc2626; color: #fff; }
/* Todos los pasos que faltan van en violeta: es lo que el comercio tiene que
   hacer. Los opcionales quedan en gris con un punto, porque no bloquean nada. */
.tt-paso.pendiente { border-color: #ddd6fe; }
.tt-paso.pendiente .tt-paso__n { background: #7c3aed; color: #fff; }
.tt-paso.opcional .tt-paso__n { background: #f1f5f9; color: #94a3b8; }
.tt-paso__tx { flex: 1; min-width: 0; }
.tt-paso b { display: block; color: #0f172a; font-size: .96rem; font-weight: 650; }
.tt-paso small { display: block; color: #64748b; font-size: .86rem; margin-top: 3px; line-height: 1.45; }
.tt-etq { margin-left: 8px; font-size: .7rem; font-weight: 600; color: #64748b;
  background: #f1f5f9; border-radius: 999px; padding: 2px 8px; vertical-align: middle; }
.tt-skel--paso { height: 74px; }

/* ---------- Mis tiendas ---------- */
.tt-lista { padding: 26px 24px 40px; max-width: 1160px; margin: 0 auto; }
.tt-head--fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tt-vacio__ic { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 12px;
  border-radius: 16px; background: #f1f3f9; font-size: 1.5rem; }
.tt-empresa { margin-bottom: 26px; }
.tt-empresa__cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.tt-empresa__cab span { color: #94a3b8; font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.tt-empresa__cab h2 { margin: 0; font-size: 1.05rem; font-weight: 650; color: #0f172a; }
.tt-empresa__cab small { margin-left: auto; color: #64748b; font-size: .84rem; }

.tt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.tt-tienda { background: #fff; border: 1px solid #e9ecf5; border-radius: 16px; padding: 18px;
  display: flex; flex-direction: column; gap: 10px; }
.tt-tienda__cab { display: flex; align-items: flex-start; gap: 12px; }
.tt-tienda__logo { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: grid; place-items: center;
  background: #ede9fe; color: #7c3aed; font-weight: 700; }
.tt-tienda__cab h3 { margin: 0; font-size: 1rem; font-weight: 650; color: #0f172a; }
.tt-tienda__cab p { margin: 2px 0 0; color: #64748b; font-size: .84rem; }
.tt-tienda__rol { color: #94a3b8; font-size: .82rem; }
.tt-tienda__acts { margin-top: auto; padding-top: 8px; display: flex; gap: 8px; }
.tt-tienda__acts .tt-btn { flex: 1; padding: 9px 12px; font-size: .88rem; }
.tt-skel--tienda { height: 156px; }

/* ---------- chips de estado, comunes a todo el módulo ---------- */
.tt-chip { margin-left: auto; font-size: .74rem; font-weight: 650; border-radius: 999px; padding: 4px 10px;
  white-space: nowrap; background: #f1f5f9; color: #475569; }
.tt-chip--ok { background: #dcfce7; color: #166534; }
.tt-chip--aviso { background: #fef3c7; color: #92400e; }
.tt-chip--mal { background: #fee2e2; color: #991b1b; }
.tt-chip--gris { background: #f1f5f9; color: #475569; }

.tol-sinTienda { color: #64748b; font-size: .84rem; padding: .5rem .75rem; line-height: 1.5; margin: 0; }
.tt-lista { padding: 0; max-width: 1160px; }

/* ---------- filtros, tablas y modal (Pedidos y Promociones) ---------- */
.tt-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tt-chip-f { border: 1px solid #e3e7f2; background: #fff; color: #475569; border-radius: 999px;
  padding: 8px 16px; font-size: .88rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; }
.tt-chip-f:hover { background: #f8fafc; }
.tt-chip-f.on { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.tt-chip-f span { background: rgba(148,163,184,.22); border-radius: 999px; padding: 1px 7px; font-size: .76rem; }
.tt-chip-f.on span { background: rgba(255,255,255,.24); }
.tt-buscar { margin-left: auto; min-width: 240px; border: 1px solid #e3e7f2; border-radius: 11px;
  padding: 9px 14px; font-size: .9rem; background: #fff; }
.tt-buscar:focus { outline: 2px solid #ddd6fe; border-color: #a78bfa; }

.tt-card--tabla { padding: 0; overflow: hidden; }
/* La tabla se desplaza DENTRO de su tarjeta: en un celular la página no se corre
   de costado por culpa de una columna ancha. */
.tt-tabla { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; white-space: nowrap; }
.tt-tabla thead th { text-align: left; padding: 13px 18px; font-size: .76rem; font-weight: 700;
  color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid #eef1f8; }
.tt-tabla td { padding: 13px 18px; border-bottom: 1px solid #f4f6fb; vertical-align: middle; }
.tt-tabla tbody tr:last-child td { border-bottom: 0; }
.tt-tabla tbody tr:hover { background: #fafbff; }
.tt-tabla b { display: block; color: #0f172a; font-size: .92rem; font-weight: 600; }
.tt-tabla small { display: block; color: #94a3b8; font-size: .8rem; margin-top: 2px; }
.tt-tabla .der { text-align: right; }
.tt-tabla__pie { margin: 0; padding: 13px 18px; color: #94a3b8; font-size: .82rem; border-top: 1px solid #f4f6fb; }
.tt-link--btn { background: none; border: 0; cursor: pointer; padding: 0; font: inherit; color: #7c3aed; font-weight: 600; }
.tt-skel--tabla { height: 300px; }

.tt-aviso { border-radius: 12px; padding: 11px 15px; font-size: .9rem; margin: 0 0 14px; }
.tt-aviso.ok { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.tt-aviso.mal { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ---------- modal ---------- */
.tt-modal { position: fixed; inset: 0; background: rgba(15,18,34,.5); z-index: 80;
  display: grid; place-items: center; padding: 20px; }
.tt-modal__caja { background: #fff; border-radius: 18px; width: min(720px, 100%); max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden; }
.tt-modal__cab { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid #eef1f8; }
.tt-modal__cab h2 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #0f172a; }
.tt-modal__cab p { margin: 2px 0 0; color: #94a3b8; font-size: .84rem; }
.tt-cerrar { background: none; border: 0; font-size: 1.7rem; line-height: 1; color: #94a3b8; cursor: pointer; padding: 0 4px; }
.tt-cerrar:hover { color: #0f172a; }
.tt-modal__cuerpo { padding: 18px 20px; overflow-y: auto; }
.tt-modal__pie { display: flex; gap: 8px; justify-content: flex-end; padding: 15px 20px;
  border-top: 1px solid #eef1f8; background: #fafbff; flex-wrap: wrap; }
.tt-dato { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f4f6fb; }
.tt-dato span { color: #64748b; font-size: .86rem; min-width: 90px; }
.tt-dato b { color: #0f172a; font-size: .89rem; font-weight: 600; }
.tt-tabla--items { margin-top: 16px; white-space: normal; }
.tt-totales { margin-top: 14px; border-top: 1px solid #eef1f8; padding-top: 12px; }
.tt-totales div { display: flex; justify-content: space-between; padding: 5px 0; font-size: .9rem; color: #475569; }
.tt-totales .total { border-top: 1px solid #eef1f8; margin-top: 6px; padding-top: 10px; font-size: 1.05rem; }
.tt-totales .total b { color: #0f172a; font-weight: 700; }

@media (max-width: 640px) {
  .tt-buscar { margin-left: 0; width: 100%; }
  .tt-modal { padding: 0; }
  .tt-modal__caja { max-height: 100vh; border-radius: 0; height: 100vh; }
}

/* ---------- filas de configuración (Marketing, Integraciones) ---------- */
.tt-card--filas { padding: 20px 0 6px; }
.tt-card--filas .tt-card__head { padding: 0 20px 8px; }
.tt-fila { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  background: none; border: 0; border-top: 1px solid #f1f3f9; padding: 15px 20px; cursor: pointer; font: inherit; }
.tt-fila:hover { background: #fafbff; }
.tt-fila__ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; display: grid; place-items: center; }
.tt-fila__ic svg { width: 20px; height: 20px; }
.tt-fila__ic--azul { background: #e0f2fe; color: #0284c7; }
.tt-fila__ic--violeta { background: #ede9fe; color: #7c3aed; }
.tt-fila__ic--naranja { background: #ffedd5; color: #ea580c; }
.tt-fila__ic--verde { background: #dcfce7; color: #16a34a; }
.tt-fila > div { flex: 1; min-width: 0; }
.tt-fila b { display: block; color: #0f172a; font-size: .94rem; font-weight: 600; }
.tt-fila small { display: block; color: #64748b; font-size: .84rem; margin-top: 2px; }
.tt-fila .tt-chev { font-size: 1.4rem; color: #cbd5e1; }

.tt-periodo select { border: 1px solid #e3e7f2; border-radius: 11px; padding: 9px 14px;
  background: #fff; font-weight: 600; color: #0f172a; }

/* ---------- formularios ---------- */
.tt-campo { display: block; margin-bottom: 14px; }
.tt-campo > span { display: block; font-size: .86rem; font-weight: 600; color: #334155; margin-bottom: 6px; }
.tt-campo input, .tt-campo select, .tt-campo textarea { width: 100%; border: 1px solid #e3e7f2;
  border-radius: 11px; padding: 10px 14px; font-size: .92rem; background: #fff; color: #0f172a; }
.tt-campo input:focus, .tt-campo select:focus, .tt-campo textarea:focus {
  outline: 2px solid #ddd6fe; border-color: #a78bfa; }
.tt-ayuda { margin: -8px 0 16px; color: #64748b; font-size: .84rem; line-height: 1.5; }
.tt-check { display: flex; align-items: center; gap: 9px; margin: 14px 0 6px; cursor: pointer; font-size: .92rem; color: #0f172a; }

/* ---------- pestañas de Diseño ---------- */
.tt-tabs { display: inline-flex; gap: 4px; background: #eef1f8; border-radius: 12px; padding: 4px; margin-bottom: 18px; }
.tt-tab { padding: 8px 18px; border-radius: 9px; text-decoration: none; color: #475569;
  font-size: .9rem; font-weight: 600; }
.tt-tab:hover { color: #0f172a; }
.tt-tab.on { background: #fff; color: #7c3aed; box-shadow: 0 1px 3px rgba(15,23,42,.08); }

/* ---------- galería de plantillas ---------- */
.tt-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.tt-tema { background: #fff; border: 2px solid #e9ecf5; border-radius: 16px; overflow: hidden;
  cursor: pointer; transition: border-color .15s, transform .15s; }
.tt-tema:hover { border-color: #c4b5fd; transform: translateY(-2px); }
.tt-tema:focus-visible { outline: 3px solid #ddd6fe; outline-offset: 2px; }
.tt-tema.on { border-color: #7c3aed; }
.tt-tema__muestra { position: relative; height: 190px; padding: 0; overflow: hidden; }
.tt-tema__barra { display: flex; align-items: center; gap: 7px; padding: 9px 12px; font-size: .74rem; }
.tt-tema__barra b { font-size: .9rem; }
.tt-tema__barra span { opacity: .65; }
.tt-tema__cuerpo { padding: 14px 12px; display: flex; flex-direction: column; gap: 7px; }
.tt-tema__tit { display: block; height: 9px; width: 72%; border-radius: 3px; opacity: .85; }
.tt-tema__tx { display: block; height: 6px; width: 52%; border-radius: 3px; opacity: .5; }
.tt-tema__btn { display: block; height: 17px; width: 62px; margin-top: 3px; }
.tt-tema__cajas { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 8px; }
.tt-tema__cajas i { display: block; height: 34px; }
.tt-tema__tic { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%;
  background: #7c3aed; color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 700; }
.tt-tema__pie { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid #f1f3f9; }
.tt-tema__pie b { display: block; color: #0f172a; font-size: .93rem; font-weight: 650; }
.tt-tema__pie small { display: block; color: #94a3b8; font-size: .78rem; margin-top: 1px; }
.tt-tema__pie .tt-chip { margin-left: auto; }

.tt-detalle { margin-top: 24px; background: #fff; border: 1px solid #e9ecf5; border-radius: 16px; padding: 16px 20px; }
.tt-detalle > summary { cursor: pointer; font-weight: 650; color: #0f172a; font-size: .96rem; }
.tt-detalle[open] > summary { margin-bottom: 10px; }

/* ---------- promociones ---------- */
.tt-promos { display: flex; flex-direction: column; gap: 12px; }
.tt-promo { background: #fff; border: 1px solid #e9ecf5; border-radius: 16px; padding: 16px 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tt-promo__badge { background: #fee2e2; color: #b91c1c; font-weight: 700; font-size: .82rem;
  border-radius: 9px; padding: 6px 12px; white-space: nowrap; }
.tt-promo__tx { flex: 1; min-width: 180px; }
.tt-promo__tx b { display: block; color: #0f172a; font-size: .98rem; font-weight: 650; }
.tt-promo__tx small { display: block; color: #64748b; font-size: .84rem; margin-top: 2px; }
.tt-promo__fechas { margin: 4px 0 0; color: #94a3b8; font-size: .8rem; }
.tt-promo__acts { display: flex; gap: 8px; }
.tt-promo__acts .tt-btn { padding: 8px 14px; font-size: .86rem; }

@media (max-width: 640px) {
  .tt-promo { align-items: flex-start; }
  .tt-promo__acts { width: 100%; }
  .tt-promo__acts .tt-btn { flex: 1; }
}

/* ---------- alta de tienda (/tiendas/nueva) ---------- */
.tt-nueva { max-width: 780px; }
.tt-volver { display: inline-block; margin-bottom: 14px; color: #7c3aed; font-size: .88rem;
  font-weight: 600; text-decoration: none; }
.tt-volver:hover { text-decoration: underline; }
.tt-nueva__tit { margin: 4px 0 14px; font-size: .8rem; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .05em; }
.tt-nueva__tit + .tt-nueva__grid { margin-bottom: 8px; }
.tt-nueva__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.tt-nueva__pista { display: block; margin-top: 5px; color: #94a3b8; font-size: .8rem; }
.tt-nueva__acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.tt-nueva .validation-message { display: block; margin-top: 5px; color: #dc2626; font-size: .8rem; }
.tt-nueva .tt-vacio .tt-nueva__acts { justify-content: center; }
@media (max-width: 700px) {
  .tt-nueva__grid { grid-template-columns: 1fr; }
  .tt-nueva__acts { flex-direction: column-reverse; }
  .tt-nueva__acts .tt-btn { width: 100%; }
}

/* La pantalla del Checklist. Nombre propio: `.tt-check` es la casilla de tildar y
   compartirlo hacia el contenedor de la pagina le aplicaba display:flex. */
.tt-checklist { max-width: 900px; }

/* ==========================================================================
   El acento del módulo es VIOLETA, no el verde del ERP.
   Las pantallas más viejas (editor, plantillas, dominio, promociones,
   integraciones) se escribieron con `var(--primary)`, que es verde, y quedaban
   de otro color que el resto del módulo. En vez de reescribir cada regla, se
   redefine el token DENTRO de esas pantallas: nada fuera del módulo cambia.
   ========================================================================== */
.ds, .tpl, .dom, .mkt, .intg {
  --primary: #7c3aed;
  --primary-dark: #6d28d9;
  --primary-bg: #ede9fe;
}

/* ---------- editor visual: barra superior ---------- */
.ed-barra { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; background: #fff; border: 1px solid #e9ecf5; border-radius: 14px;
  padding: 10px 12px; margin-bottom: 16px; }
.ed-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ed-acts .tt-btn { padding: 8px 14px; font-size: .88rem; }

/* Selector de dispositivo: un solo control segmentado, como en la maqueta. */
.ed-disp { display: inline-flex; gap: 3px; background: #f1f3f9; border-radius: 11px; padding: 3px; }
.ed-disp button { border: 0; background: none; border-radius: 9px; padding: 7px 14px; cursor: pointer;
  font-size: .85rem; font-weight: 600; color: #64748b; display: inline-flex; align-items: center; gap: 6px; }
.ed-disp button:hover { color: #0f172a; }
.ed-disp button.on { background: #fff; color: #7c3aed; box-shadow: 0 1px 3px rgba(15,23,42,.10); }

/* Deshacer y rehacer: cuadrados, con icono de verdad. Antes eran dos flechas de
   texto que en varias fuentes se dibujaban como un acento suelto. */
.tt-btn--ic { padding: 0; width: 38px; height: 38px; flex: 0 0 38px; }
.tt-btn--ic svg { width: 18px; height: 18px; }

.ed-estado { font-size: .82rem; color: #94a3b8; padding: 0 4px; }
.ed-estado.pendiente { color: #b45309; font-weight: 700; }

.ed-refrescar { margin-left: auto; border: 1px solid #e3e7f2; background: #fff; border-radius: 9px;
  padding: 5px 12px; font-size: .8rem; font-weight: 600; color: #475569; cursor: pointer; }
.ed-refrescar:hover { background: #f8fafc; color: #0f172a; }

@media (max-width: 900px) {
  .ed-barra { flex-direction: column; align-items: stretch; }
  .ed-acts { justify-content: flex-end; }
}

/* ---------- editor visual: panel y vista previa al estilo del módulo ---------- */
.ds { max-width: 1440px; padding: 0; }
.ds .cuerpo { grid-template-columns: 360px 1fr; gap: 16px; margin-top: 0; }
.ds .tarjeta { border-color: #e9ecf5; border-radius: 16px; }
.ds .panel { top: 12px; max-height: calc(100vh - 32px); }

/* Las pestañas del panel, en una sola fila que se desplaza si no entra. */
.ds .pestanas { flex-wrap: nowrap; overflow-x: auto; gap: 4px; background: #f1f3f9;
  border-radius: 11px; padding: 3px; margin-bottom: 16px; }
.ds .pestanas button { border: 0; background: none; border-radius: 9px; padding: 7px 12px;
  font-size: .84rem; font-weight: 600; color: #64748b; white-space: nowrap; }
.ds .pestanas button:hover { color: #0f172a; }
.ds .pestanas button.on { background: #fff; color: #7c3aed; box-shadow: 0 1px 3px rgba(15,23,42,.10); }

.ds .panel h3 { margin: 18px 0 10px; font-size: .78rem; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .05em; }
.ds .panel h3:first-of-type { margin-top: 4px; }

.ds .bloques li { border-radius: 12px; border-color: #e9ecf5; }
.ds .bloques li:not(.zona):hover { background: #fafbff; }
.ds .paginas li { border-radius: 10px; padding-inline: 10px; }
.ds .paleta button { border-radius: 12px; border-color: #e9ecf5; }

.ds .previa { border-color: #e9ecf5; }
.ds .previa .encabezado { background: #fff; border-bottom-color: #eef1f8; padding: 12px 16px;
  justify-content: flex-start; gap: 10px; }
.ds .previa .encabezado strong { font-size: .92rem; color: #0f172a; }
.ds .previa .encabezado small { color: #94a3b8; font-size: .8rem; }
.ds .previa .marco { background: #f4f6fb; padding: 18px; }
.ds .previa iframe { height: calc(100vh - 260px); min-height: 460px; border-radius: 12px; }

@media (max-width: 1100px) {
  .ds .cuerpo { grid-template-columns: 1fr; }
  .ds .panel { position: static; max-height: none; }
  .ds .previa iframe { height: 70vh; }
}

/* ---------- Centro de integraciones al estilo del módulo ---------- */
/* Los filtros son los mismos que en Pedidos y Promociones, no una variante negra. */
.intg .filtros { gap: 8px; margin: 4px 0 20px; }
.intg .chip { border: 1px solid #e3e7f2; background: #fff; color: #475569; border-radius: 999px;
  padding: 7px 15px; font-size: .86rem; font-weight: 600; }
.intg .chip.activo { background: #ede9fe; border-color: #ddd6fe; color: #6d28d9; }
.intg .chip .cuenta { background: #f1f3f9; color: #64748b; }
.intg .chip.activo .cuenta { background: #fff; color: #6d28d9; }

.intg .tarjetas { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }

/* Tarjeta pareja: mismo borde y mismo radio que el resto del módulo. El estado lo
   dice la etiqueta, no una barra de color al costado. */
.intg .app { border: 1px solid #e9ecf5; border-radius: 16px; padding: 18px; gap: 10px; }
.intg .app.ok, .intg .app.mal, .intg .app.atencion { border-left-width: 1px; border-left-style: solid; }
.intg .app.ok { border-left-color: #e9ecf5; }
.intg .app.mal { border-left-color: #e9ecf5; }
.intg .app.atencion { border-left-color: #e9ecf5; }
.intg .app:hover { border-color: #ddd6fe; }

/* El icono, en un recuadro fijo: así la grilla no se desalinea porque un emoji
   sea más alto que otro. */
.intg .app .icono { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px;
  background: #f4f6fb; display: grid; place-items: center; font-size: 1.3rem; }
.intg .app header { align-items: center; gap: 12px; }
.intg .app header > div { flex: 1; min-width: 0; }
.intg .app h2 { font-size: .98rem; font-weight: 650; }
.intg .app .cat { font-size: .77rem; color: #94a3b8; }

.intg .app .estado { align-self: flex-start; border-radius: 999px; padding: 4px 11px;
  font-size: .74rem; font-weight: 700; background: #f1f3f9; color: #64748b; white-space: nowrap; }

.intg .app .acciones { padding-top: 14px; border-top: 1px solid #f4f6fb; }
.intg .app .btn { border-radius: 10px; }

/* ---------- cobros (/tiendas/{id}/pagos) ---------- */
.tt-pagos { max-width: 860px; }
.tt-medio { padding: 20px; }
.tt-medio__cab { display: flex; align-items: flex-start; gap: 14px; }
.tt-medio__cab > div { flex: 1; min-width: 0; }
.tt-medio__cab h2 { margin: 0 0 3px; font-size: 1.02rem; font-weight: 650; color: #0f172a; }
.tt-medio__cab p { margin: 0; color: #64748b; font-size: .87rem; line-height: 1.5; }
.tt-medio__ic { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; display: grid;
  place-items: center; font-size: 1.25rem; background: #ede9fe; }
.tt-medio__ic--verde { background: #dcfce7; }
.tt-medio__ic--azul { background: #e0f2fe; }
.tt-medio__cuerpo { margin-top: 18px; padding-top: 18px; border-top: 1px solid #f1f3f9; }
.tt-medio__cuerpo code { background: #f4f6fb; border-radius: 6px; padding: 2px 7px;
  font-size: .8rem; word-break: break-all; }

/* Interruptor de texto: dice en palabras si el medio está activo, que es lo que el
   comercio necesita leer de un vistazo. */
.tt-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: .85rem; font-weight: 600; color: #475569; white-space: nowrap; }
.tt-switch input { width: 17px; height: 17px; accent-color: #7c3aed; cursor: pointer; }
.tt-switch input:disabled { cursor: not-allowed; }
.tt-switch input:disabled + span { color: #cbd5e1; }

.tt-pagos__acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.tt-aviso--ok { background: #dcfce7; border-color: #bbf7d0; color: #166534; }

@media (max-width: 700px) {
  .tt-medio__cab { flex-wrap: wrap; }
  .tt-pagos__acts { flex-direction: column-reverse; }
  .tt-pagos__acts .tt-btn { width: 100%; }
}

/* `.tt-aviso` sin modificador no tenía fondo: era texto suelto, invisible como aviso.
   El caso base es una advertencia; el verde queda para «salió bien». */
.tt-aviso { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.tt-aviso--ok { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.tt-aviso code { background: rgba(255,255,255,.65); }

/* `.ed-acts .tt-btn` (dos clases) le ganaba en especificidad a `.tt-btn--ic` y le
   devolvia el padding de un boton de texto: el icono quedaba aplastado dentro de
   un cuadrado de 38 px. Se repite la regla con el mismo peso. */
.ed-acts .tt-btn--ic { padding: 0; width: 38px; height: 38px; flex: 0 0 38px;
  box-sizing: border-box; }
.ed-acts .tt-btn--ic svg { width: 18px; height: 18px; }

/* Cinco pestañas no entraban en el panel y «Versiones» quedaba cortada a la mitad. */
.ds .pestanas button { padding: 7px 10px; font-size: .82rem; }

/* `.tt-nota` nace con margen superior NEGATIVO porque abajo de una cabecera se pega
   al título. Dentro de una tarjeta de cobro eso la montaba encima del texto. */
.tt-medio .tt-nota { margin: 14px 0 0; }
.tt-medio__cuerpo .tt-nota { margin-top: 12px; }
.tt-medio__cuerpo .tt-aviso:last-child { margin-bottom: 0; }

/* Enlace al listado de tiendas desde la barra de arriba. Con una sola tienda el
   listado deja de estar en el camino, así que esta es la puerta para volver. */
.tol-mistiendas { color: #64748b; font-size: .88rem; font-weight: 600; text-decoration: none; }
.tol-mistiendas:hover { color: #0f172a; }

/* Secciones del menú cuando todavía no hay ninguna tienda: se ven, pero apagadas
   y sin enlace. Son `span`, así que no hay nada que clickear ni que falle. */
.tol-item--off { color: #5b6078; cursor: default; opacity: .55; }
.tol-item--off:hover { background: none; color: #5b6078; }
.tol-item--off .tol-ico { opacity: .8; }
.tol-nav .tol-sinTienda { margin: 14px 12px 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }

/* ==========================================================================
   PESTAÑA INICIO — las 8 pantallas de la maqueta (prefijo ti-)
   ========================================================================== */
.tt-inicio { max-width: 1160px; }

/* Tarjetas de número: enlace, variación con signo y gráfico chico */
.tt-kpi--link { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.tt-kpi--link:hover { border-color: #ddd6fe; box-shadow: 0 4px 14px rgba(124,58,237,.08); }
.tt-kpi--serie { flex-wrap: wrap; align-items: flex-start; }
.tt-spark { display: block; flex-basis: 100%; width: 100%; height: 34px; margin-top: 8px; overflow: visible; }
.tt-kpi__var { display: block; margin-top: 3px; }

/* Botón a lo ancho y progreso verde */
.ti-full { width: 100%; }
.tt-prog--verde .tt-prog__bar span { background: #16a34a; }

/* ---- 1 · Inicio ---- */
.ti-hero { display: flex; gap: 16px; align-items: flex-start; }
.ti-hero__ic { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 15px; background: #dcfce7; color: #16a34a;
  display: grid; place-items: center; }
.ti-hero__ic svg { width: 28px; height: 28px; }
.ti-hero__tx { flex: 1; min-width: 0; }
.ti-hero h2 { margin: 2px 0 4px; font-size: 1.12rem; font-weight: 700; color: #0f172a; }
.ti-hero p { margin: 0 0 16px; color: #64748b; font-size: .92rem; }
.ti-hero .tt-prog { margin-bottom: 16px; }
.ti-prog-link { color: #64748b; font-size: .82rem; font-weight: 600; white-space: nowrap; text-decoration: none; }
.ti-prog-link:hover { color: #7c3aed; text-decoration: underline; }

.ti-lista { list-style: none; margin: 8px 0 0; padding: 0; }
.ti-lista li + li { border-top: 1px solid #f1f3f9; }
.ti-fila { display: flex; align-items: center; gap: 12px; padding: 12px 2px; text-decoration: none; color: #0f172a; }
a.ti-fila:hover { color: #7c3aed; }
.ti-circ { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; border: 2px solid #cbd5e1; }
.ti-fila__tx { flex: 1; min-width: 0; font-size: .93rem; }
.ti-chev { color: #94a3b8; flex: 0 0 auto; display: grid; place-items: center; }
.ti-chev svg { width: 18px; height: 18px; }

.ti-mas { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin: 6px 0 4px; }

/* ---- pestañas de filtro (Tareas, Métricas, Actividad) ---- */
.ti-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.ti-tab { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e3e7f2; background: #fff;
  color: #475569; border-radius: 10px; padding: 8px 14px; font-size: .88rem; font-weight: 600; cursor: pointer; }
.ti-tab:hover { border-color: #ddd6fe; color: #0f172a; }
.ti-tab.on { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.ti-tab__n { font-size: .78rem; font-weight: 700; color: #94a3b8; }
.ti-tab.on .ti-tab__n { color: #ede9fe; }

/* ---- 2 · Tareas pendientes ---- */
.ti-tareas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ti-tarea { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e9ecf5;
  border-radius: 14px; padding: 14px 16px; text-decoration: none; color: inherit; }
a.ti-tarea:hover { border-color: #ddd6fe; box-shadow: 0 4px 14px rgba(124,58,237,.07); }
.ti-ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; background: #ede9fe; color: #7c3aed;
  display: grid; place-items: center; }
.ti-ic svg { width: 20px; height: 20px; }
.ti-tarea__tx { flex: 1; min-width: 0; }
.ti-tarea__tx b { display: block; font-size: .94rem; font-weight: 650; color: #0f172a; }
.ti-tarea__tx small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: #64748b; font-size: .83rem; margin-top: 2px; line-height: 1.4; }
.ti-tarea__est { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.ti-prio { font-size: .72rem; font-weight: 700; border-radius: 7px; padding: 3px 9px; }
.ti-prio--alta { background: #fee2e2; color: #dc2626; }
.ti-prio--media { background: #ffedd5; color: #ea580c; }
.ti-prio--baja { background: #fef9c3; color: #a16207; }
.ti-estado { font-size: .76rem; font-weight: 600; }
.ti-estado--pendiente { color: #ea580c; }
.ti-estado--error { color: #dc2626; }
.ti-estado--completada { color: #16a34a; }
.ti-tarea--hecha .ti-ic { background: #dcfce7; color: #16a34a; }
.ti-tarea--hecha .ti-tarea__tx b { color: #475569; }

/* ---- 3 · Continuar configuración ---- */
.ti-paso { display: flex; align-items: center; justify-content: space-between; font-size: .9rem; font-weight: 650;
  color: #0f172a; margin-bottom: 10px; }
.ti-paso small { color: #64748b; font-weight: 700; }
.ti-rec { text-align: center; padding: 28px 24px; }
.ti-rec__ic { width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 20px; background: #ede9fe; color: #7c3aed;
  display: grid; place-items: center; }
.ti-rec__ic svg { width: 38px; height: 38px; }
.ti-rec__chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #ddd6fe; background: #f5f3ff;
  color: #6d28d9; border-radius: 999px; padding: 4px 12px; font-size: .78rem; font-weight: 650; margin-bottom: 10px; }
.ti-rec__chip svg { width: 14px; height: 14px; }
.ti-rec h2 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 700; color: #0f172a; }
.ti-rec p { margin: 0 auto 20px; max-width: 520px; color: #64748b; font-size: .92rem; line-height: 1.55; }
.ti-rec .tt-btn svg { width: 17px; height: 17px; }
.ti-otras h3 { margin: 0 0 6px; font-size: .92rem; font-weight: 650; color: #0f172a; }
.ti-otra { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid #f1f3f9; }
.ti-otra:first-of-type { border-top: 0; }
.ti-otra__tx { flex: 1; min-width: 0; }
.ti-otra__tx b { display: block; font-size: .92rem; font-weight: 650; color: #0f172a; }
.ti-otra__tx small { display: block; color: #64748b; font-size: .82rem; margin-top: 2px; }
.ti-otra .tt-btn { padding: 8px 14px; font-size: .85rem; color: #6d28d9; border-color: #ddd6fe; flex: 0 0 auto; }

/* ---- 4 · Estado de publicación ---- */
.ti-general { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ti-general b { font-size: .95rem; color: #0f172a; }
.ti-general small { color: #64748b; font-size: .85rem; font-weight: 600; }
.ti-checks { list-style: none; margin: 6px 0 0; padding: 0; }
.ti-check { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #f1f3f9;
  text-decoration: none; color: #0f172a; }
.ti-checks li:first-child .ti-check { border-top: 0; }
a.ti-check:hover .ti-check__tx { color: #7c3aed; }
.ti-check__ic { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: grid; place-items: center; }
.ti-check__ic svg { width: 15px; height: 15px; }
.ti-check__ic--ok { background: #16a34a; color: #fff; }
.ti-check__ic--pend { background: #ffedd5; color: #ea580c; }
.ti-check__ic--err { background: #fee2e2; color: #dc2626; }
.ti-check__ic--opc { background: #f1f5f9; color: #94a3b8; }
.ti-check__tx { flex: 1; min-width: 0; font-size: .93rem; }
.ti-est { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 700;
  border-radius: 999px; padding: 4px 10px; flex: 0 0 auto; }
.ti-est::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ti-est--ok { background: #dcfce7; color: #16a34a; }
.ti-est--pend { background: #ffedd5; color: #ea580c; }
.ti-est--err { background: #fee2e2; color: #dc2626; }
.ti-est--opc { background: #f1f5f9; color: #64748b; }
.ti-hint { display: flex; align-items: center; gap: 12px; background: #f5f3ff; border: 1px solid #ede9fe;
  border-radius: 14px; padding: 14px 16px; color: #5b21b6; font-size: .88rem; line-height: 1.45; }
.ti-hint svg { width: 22px; height: 22px; flex: 0 0 22px; color: #7c3aed; }

/* ---- 5 · Métricas ---- */
.ti-kpis2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-bottom: 16px; }
.ti-resumen { width: 100%; border-collapse: collapse; }
.ti-resumen td { padding: 12px 4px; border-top: 1px solid #f1f3f9; font-size: .92rem; color: #334155; }
.ti-resumen tr:first-child td { border-top: 0; }
.ti-resumen .v { text-align: right; font-weight: 700; color: #0f172a; white-space: nowrap; }
.ti-resumen .d { text-align: right; width: 90px; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.ti-resumen .d.sube { color: #16a34a; }
.ti-resumen .d.baja { color: #dc2626; }

/* ---- 6 · Actividad ---- */
.ti-acts { list-style: none; margin: 0; padding: 0; }
.ti-act { display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-top: 1px solid #f1f3f9;
  text-decoration: none; color: inherit; }
.ti-acts li:first-child .ti-act { border-top: 0; }
a.ti-act:hover .ti-act__tx b { color: #7c3aed; }
.ti-act__tx { flex: 1; min-width: 0; }
.ti-act__tx b { display: block; font-size: .93rem; font-weight: 650; color: #0f172a; }
.ti-act__tx small { display: block; color: #64748b; font-size: .82rem; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-act__t { color: #94a3b8; font-size: .8rem; white-space: nowrap; flex: 0 0 auto; }
.ti-ic--pedido, .ti-ic--cobro, .ti-ic--publicacion { background: #dcfce7; color: #16a34a; }
.ti-ic--promocion, .ti-ic--cupon { background: #fee2e2; color: #e11d48; }
.ti-ic--integracion { background: #e0f2fe; color: #0284c7; }
.ti-ic--diseno, .ti-ic--dominio, .ti-ic--tienda { background: #ede9fe; color: #7c3aed; }

/* ---- 7 · Tienda nueva ---- */
.ti-nueva { text-align: center; padding: 30px 24px 26px; }
.ti-ilus { width: 180px; height: 150px; margin: 0 auto 10px; display: block; }
.ti-nueva h2 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 700; color: #0f172a; }
.ti-nueva > p { margin: 0 auto 20px; max-width: 460px; color: #64748b; font-size: .93rem; line-height: 1.55; }
.ti-nueva .tt-prog { max-width: 520px; margin: 0 auto 18px; }
.ti-nueva .tt-btn { max-width: 520px; }

/* ---- 8 · Tienda lista ---- */
.ti-ok { display: flex; gap: 16px; align-items: flex-start; background: #f0fdf4; border-color: #bbf7d0; }
.ti-ok__ic { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; background: #16a34a; color: #fff;
  display: grid; place-items: center; }
.ti-ok__ic svg { width: 26px; height: 26px; }
.ti-ok__tx { flex: 1; min-width: 0; }
.ti-ok__tx b { display: block; font-size: 1.05rem; color: #0f172a; margin-bottom: 3px; }
.ti-ok__tx p { margin: 0; color: #475569; font-size: .9rem; }
.ti-ok .tt-btn { align-self: flex-end; padding: 8px 14px; font-size: .86rem; }
.ti-ok .tt-btn svg { width: 15px; height: 15px; }
.ti-seccion { margin: 6px 0 12px; font-size: .98rem; font-weight: 650; color: #0f172a; }
.ti-accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 16px; }
.ti-acceso { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  background: #fff; border: 1px solid #e9ecf5; border-radius: 14px; padding: 18px 14px; text-decoration: none; color: inherit; }
.ti-acceso:hover { border-color: #ddd6fe; box-shadow: 0 4px 14px rgba(124,58,237,.08); }
.ti-acceso b { font-size: .92rem; color: #0f172a; }
.ti-acceso small { color: #64748b; font-size: .8rem; line-height: 1.4; }
.ti-ic--azul { background: #e0f2fe; color: #0284c7; }
.ti-ic--rojo { background: #fee2e2; color: #e11d48; }
.ti-exito { display: flex; align-items: center; gap: 12px; background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: 14px; padding: 14px 16px; color: #166534; font-size: .88rem; line-height: 1.45; margin-bottom: 16px; }
.ti-exito svg { width: 22px; height: 22px; flex: 0 0 22px; color: #16a34a; }

@media (max-width: 700px) {
  .ti-tarea { flex-wrap: wrap; }
  .ti-tarea__est { flex-direction: row; order: 3; width: 100%; justify-content: flex-start; padding-left: 54px; }
  .ti-ok { flex-wrap: wrap; }
  .ti-ok .tt-btn { align-self: auto; }
  .ti-otra { flex-wrap: wrap; }
}

/* Filas con título y bajada (Siguientes pasos) */
.ti-fila__tx b { display: block; font-size: .93rem; font-weight: 650; color: #0f172a; }
.ti-fila__tx small { display: block; color: #64748b; font-size: .82rem; margin-top: 2px; line-height: 1.4; }
a.ti-fila:hover .ti-fila__tx b { color: #7c3aed; }
.ti-hint .tt-btn { margin-left: auto; flex: 0 0 auto; padding: 8px 14px; font-size: .85rem; }
.ti-tab:disabled { opacity: .6; cursor: wait; }
.ti-resumen .d:empty::after { content: ""; }

/* =============================================================================
   CHECKLIST (prefijo `ck-`) · el asistente paso a paso: vista general, Datos,
   Diseño, Pagos, Integraciones y Publicar. Solo presentación: los estados salen
   del Paso 10.
   ============================================================================= */
.ck { max-width: 1160px; }
.ck-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.ck-lado { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ck-lado > .tt-card { margin-bottom: 0; }
.ck-full { width: 100%; }
.ck-full svg { width: 16px; height: 16px; }
.ck-btn-chico { padding: 7px 14px; font-size: .85rem; flex: 0 0 auto; }

/* ---------- vista general: pasos ---------- */
.ck-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ck-paso { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e9ecf5;
  border-radius: 14px; padding: 14px 16px; text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s; }
a.ck-paso:hover { border-color: #c4b5fd; box-shadow: 0 2px 10px rgba(124,58,237,.08); }
.ck-paso__n { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: .9rem; background: #eef1f8; color: #64748b; }
.ck-paso__n svg { width: 18px; height: 18px; stroke-width: 2.6; }
.ck-paso--listo .ck-paso__n { background: #16a34a; color: #fff; }
.ck-paso--error { border-color: #fecaca; }
.ck-paso--error .ck-paso__n { background: #fee2e2; color: #dc2626; }
.ck-paso--actual { border-color: #7c3aed; background: #faf8ff; box-shadow: 0 0 0 3px rgba(124,58,237,.08); }
.ck-paso--actual .ck-paso__n { background: #7c3aed; color: #fff; }
.ck-paso__tx { flex: 1; min-width: 0; }
.ck-paso__tx b { display: block; color: #0f172a; font-size: .95rem; font-weight: 650; }
.ck-paso__tx small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: #64748b; font-size: .84rem; margin-top: 2px; line-height: 1.45; }

/* ---------- vista general: avance y consejo ---------- */
.ck-avance { text-align: center; }
.ck-dona { position: relative; width: 132px; height: 132px; margin: 4px auto 16px; }
.ck-dona svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ck-dona circle { fill: none; stroke-width: 11; }
.ck-dona__fondo { stroke: #ece9f6; }
.ck-dona__arco { stroke: #7c3aed; stroke-linecap: round; transition: stroke-dasharray .4s; }
.ck-dona > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ck-dona b { font-size: 1.7rem; font-weight: 800; color: #0f172a; line-height: 1; }
.ck-dona small { color: #64748b; font-size: .8rem; margin-top: 3px; }
.ck-avance__tx { margin: 12px 0 16px; color: #64748b; font-size: .88rem; line-height: 1.5; text-align: left; }
.ck-tip { display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; align-items: start; }
.ck-tip__ic { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; background: #f5f3ff; color: #7c3aed;
  display: grid; place-items: center; }
.ck-tip__ic svg { width: 21px; height: 21px; }
.ck-tip b { color: #0f172a; font-size: .95rem; }
.ck-tip p { margin: 0; color: #64748b; font-size: .85rem; line-height: 1.5; }

/* ---------- Datos de la tienda ---------- */
.ck-form { padding: 22px; margin-bottom: 0; }
.ck-form .tt-campo textarea { resize: vertical; min-height: 96px; }
.ck-cont { display: block; text-align: right; color: #94a3b8; font-size: .76rem; margin-top: 4px; }
.ck-wa { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.ck-logo { display: flex; align-items: center; gap: 16px; }
.ck-logo__img { width: 84px; height: 84px; flex: 0 0 84px; border: 1px solid #e9ecf5; border-radius: 14px;
  background: #f8fafc; display: grid; place-items: center; overflow: hidden; color: #94a3b8; }
.ck-logo__img { position: relative; }
.ck-logo__img img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; background: #f8fafc; }
.ck-logo__img svg { width: 34px; height: 34px; }
.ck-logo__tx { flex: 1; min-width: 0; }
.ck-form__pie { display: flex; justify-content: flex-end; margin-top: 6px; }

/* ---------- checklist chico del costado ---------- */
.ck-mini h2 { margin: 0 0 8px; font-size: 1rem; font-weight: 650; color: #0f172a; }
.ck-mini ul { list-style: none; margin: 0; padding: 0; }
.ck-mini__f { display: flex; align-items: center; gap: 11px; padding: 7px 6px; border-radius: 10px;
  text-decoration: none; color: inherit; }
.ck-mini__f:hover { background: #f8fafc; }
.ck-mini__f.on { background: #f5f3ff; }
.ck-mini__ic { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: .76rem; font-weight: 700; background: #eef1f8; color: #64748b; }
.ck-mini__ic svg { width: 14px; height: 14px; stroke-width: 2.6; }
.ck-mini__ic--ok { background: #16a34a; color: #fff; }
.ck-mini__ic--err { background: #fee2e2; color: #dc2626; }
.ck-mini__tx { min-width: 0; }
.ck-mini__tx b { display: block; font-size: .86rem; font-weight: 600; color: #0f172a; }
.ck-mini__tx small, .ck-rev__tx small { display: block; font-size: .76rem; margin-top: 1px; }
.ck-mini__est--ok { color: #16a34a; }
.ck-mini__est--pend, .ck-mini__est--opc { color: #94a3b8; }
.ck-mini__est--err { color: #dc2626; }

/* ---------- avisos ---------- */
.ck-aviso { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 14px 16px;
  background: #fffbeb; border: 1px solid #fde68a; }
.ck-aviso--ok { background: #f0fdf4; border-color: #bbf7d0; }
.ck-aviso__ic { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: grid; place-items: center;
  background: #f59e0b; color: #fff; }
.ck-aviso--ok .ck-aviso__ic { background: #16a34a; }
.ck-aviso__ic svg { width: 17px; height: 17px; stroke-width: 2.4; }
.ck-aviso b { display: block; color: #0f172a; font-size: .92rem; }
.ck-aviso--ok b { color: #166534; }
.ck-aviso small { display: block; color: #64748b; font-size: .82rem; margin-top: 2px; line-height: 1.4; }

.ck-nota { display: flex; align-items: center; gap: 14px; border-radius: 14px; padding: 16px 18px;
  background: #f5f7ff; border: 1px solid #e3e8fb; margin-top: 16px; }
.ck-nota__ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; display: grid; place-items: center;
  background: #4f46e5; color: #fff; font-weight: 800; font-size: 1.05rem; }
.ck-nota__ic svg { width: 20px; height: 20px; }
.ck-nota b { display: block; color: #3730a3; font-size: .93rem; }
.ck-nota p { margin: 2px 0 0; color: #64748b; font-size: .85rem; line-height: 1.5; }
.ck-nota--violeta { background: #f5f3ff; border-color: #ede9fe; margin-top: 0; align-items: flex-start; }
.ck-nota--violeta .ck-nota__ic { background: transparent; color: #7c3aed; width: 24px; height: 24px; flex-basis: 24px; }
.ck-nota--violeta p { margin: 0; color: #6d28d9; }

/* ---------- Pagos ---------- */
.ck-medios { display: flex; flex-direction: column; gap: 14px; }
.ck-medios .tt-card { margin-bottom: 0; }
.ck-medio__cab { display: flex; align-items: center; gap: 16px; }
.ck-medio__logo { width: 64px; height: 48px; flex: 0 0 64px; display: grid; place-items: center; }
.ck-medio__logo svg { width: 100%; height: 100%; }
.ck-medio__tx { flex: 1; min-width: 0; }
.ck-medio__tit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ck-medio__tit h2 { margin: 0; font-size: 1.02rem; font-weight: 650; color: #0f172a; }
.ck-medio__tx p { margin: 4px 0 0; color: #64748b; font-size: .86rem; line-height: 1.5; }
.ck-medio__tx p.ck-medio__falta { color: #c2410c; font-weight: 600; }
.ck-medio__tx p.ck-medio__cuenta { color: #0f172a; font-weight: 500; }
.ck-medio__acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ---------- Integraciones ---------- */
.ck-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.ck-app { background: #fff; border: 1px solid #e9ecf5; border-radius: 16px; padding: 18px;
  display: flex; flex-direction: column; gap: 8px; }
.ck-app__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ck-app__logo { width: 52px; height: 42px; display: grid; place-items: center; font-size: 1.8rem; line-height: 1; }
.ck-app__logo svg { width: 100%; height: 100%; }
.ck-app h2 { margin: 4px 0 0; font-size: 1rem; font-weight: 650; color: #0f172a; }
.ck-app .ti-est { align-self: flex-start; }
.ck-app p { margin: 0; color: #64748b; font-size: .84rem; line-height: 1.5; }
.ck-app p.ck-app__err { color: #b91c1c; }
.ck-app__btn { margin-top: auto; width: 100%; padding: 8px 12px; font-size: .86rem; color: #7c3aed; border-color: #ddd6fe; }
.ck-menu { position: relative; }
.ck-menu summary { list-style: none; cursor: pointer; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; color: #64748b; font-size: 1.2rem; line-height: 1; }
.ck-menu summary::-webkit-details-marker { display: none; }
.ck-menu summary:hover { background: #f1f5f9; }
.ck-menu > div { position: absolute; right: 0; top: 34px; z-index: 5; background: #fff; border: 1px solid #e9ecf5;
  border-radius: 12px; box-shadow: 0 10px 30px rgba(15,23,42,.12); padding: 6px; min-width: 180px;
  display: flex; flex-direction: column; }
.ck-menu button { border: 0; background: none; text-align: left; padding: 9px 12px; border-radius: 8px;
  font-size: .87rem; color: #334155; cursor: pointer; }
.ck-menu button:hover { background: #f8fafc; }
.ck-menu button.peligro { color: #b91c1c; }

/* ---------- Diseño ---------- */
.ck-pdis__ic { width: 44px; height: 44px; border-radius: 12px; background: #f5f3ff; color: #7c3aed;
  display: grid; place-items: center; margin-bottom: 10px; }
.ck-pdis__ic svg { width: 22px; height: 22px; }
.ck-pdis h2 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: #0f172a; }
.ck-pdis > p { margin: 0 0 12px; color: #64748b; font-size: .85rem; line-height: 1.5; }
.ck-subs { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid #f1f3f9;
  display: flex; flex-direction: column; gap: 10px; }
.ck-subs li { display: flex; align-items: center; gap: 10px; font-size: .86rem; color: #475569; }
.ck-subs a { color: inherit; text-decoration: none; }
.ck-subs a:hover { color: #7c3aed; text-decoration: underline; }
.ck-subs small { color: #94a3b8; }
.ck-sub__ic { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; border: 2px solid #cbd5e1;
  display: grid; place-items: center; color: transparent; }
.ck-sub__ic svg { width: 12px; height: 12px; stroke-width: 3; }
.ck-subs li.on .ck-sub__ic { background: #16a34a; border-color: #16a34a; color: #fff; }

/* ---------- Publicar ---------- */
.ck-rev { margin-bottom: 0; }
.ck-rev ul { list-style: none; margin: 0; padding: 0; }
.ck-rev__f { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-top: 1px solid #f1f3f9; }
.ck-rev__f:first-child { border-top: 0; }
.ck-rev__ic { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: grid; place-items: center; }
.ck-rev__ic svg { width: 17px; height: 17px; stroke-width: 2.4; }
.ck-rev__ic--ok { background: #16a34a; color: #fff; }
.ck-rev__ic--pend { background: #ffedd5; color: #ea580c; }
.ck-rev__ic--err { background: #fee2e2; color: #dc2626; }
.ck-rev__ic--opc { background: #f1f5f9; color: #94a3b8; }
.ck-rev__tx { flex: 1; min-width: 0; }
.ck-rev__tx b { display: block; font-size: .93rem; font-weight: 600; color: #0f172a; }
.ck-listo { background: linear-gradient(160deg, #ecfdf5, #f0fdf4); border: 1px solid #bbf7d0; border-radius: 16px;
  padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.ck-listo--falta { background: #fffbeb; border-color: #fde68a; }
.ck-listo__ic { width: 44px; height: 44px; border-radius: 12px; background: #16a34a; color: #fff; display: grid; place-items: center; }
.ck-listo--falta .ck-listo__ic { background: #f59e0b; }
.ck-listo__ic svg { width: 22px; height: 22px; }
.ck-listo h2 { margin: 4px 0 0; font-size: 1.08rem; font-weight: 700; color: #0f172a; }
.ck-listo p { margin: 0 0 6px; color: #475569; font-size: .87rem; line-height: 1.5; }
.ck-dom h3 { margin: 0 0 10px; font-size: .95rem; font-weight: 650; color: #0f172a; }
.ck-dom__f { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: .87rem; color: #334155; min-width: 0; }
.ck-dom__f svg { width: 17px; height: 17px; flex: 0 0 17px; color: #64748b; }
.ck-dom__f > span:first-of-type { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ck-ssl { display: flex; gap: 14px; align-items: flex-start; }
.ck-ssl > div { flex: 1; min-width: 0; }
.ck-ssl__ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: #dcfce7; color: #16a34a;
  display: grid; place-items: center; }
.ck-ssl__ic svg { width: 21px; height: 21px; }
.ck-ssl__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ck-ssl__cab b { color: #0f172a; font-size: .92rem; }
.ck-ssl p { margin: 4px 0 0; color: #64748b; font-size: .83rem; line-height: 1.45; }
.ck-final { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 18px 20px; border-radius: 16px;
  background: #f5f3ff; border: 1px solid #ede9fe; }
.ck-final__ic { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: #fff; color: #7c3aed;
  display: grid; place-items: center; }
.ck-final__ic svg { width: 22px; height: 22px; }
.ck-final b { display: block; color: #4c1d95; font-size: .98rem; }
.ck-final p { margin: 3px 0 0; color: #6b7280; font-size: .86rem; line-height: 1.5; }

@media (max-width: 980px) {
  .ck-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ck-medio__cab { flex-wrap: wrap; }
  .ck-medio__cab > .tt-btn { width: 100%; }
  .ck-wa { grid-template-columns: 96px minmax(0, 1fr); }
  .ck-logo { align-items: flex-start; }
  .ck-final { align-items: flex-start; }
}

/* =============================================================================
   DISEÑO (prefijo `dz-`) · las 8 pantallas: plantillas, vista previa, editor,
   configuración de sección, colores, menú, páginas y dispositivos.
   ============================================================================= */
.dz.ds, .dz.tpl { padding: 0; margin: 0; max-width: 1160px; }
.dz.dz-ancho { max-width: 1400px; }
.dz .tt-head h1 { font-size: 1.65rem; margin: 0 0 4px; }
.dz-tabs { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.dz-tabs::-webkit-scrollbar { display: none; }
.dz-tabs .tt-tab { white-space: nowrap; }
a.tt-tema { display: block; text-decoration: none; color: inherit; }
a.tt-tema:hover { border-color: #c4b5fd; }
.dz-h2 { margin: 0 0 8px; font-size: 1rem; font-weight: 650; color: #0f172a; }
.dz-h3 { margin: 20px 0 10px; font-size: .92rem; font-weight: 650; color: #0f172a; }
.dz-txt { margin: 0 0 12px; color: #64748b; font-size: .88rem; line-height: 1.5; }
.dz-nota { margin: 8px 0 0; color: #94a3b8; font-size: .8rem; line-height: 1.45; }
.dz-vacio { margin: 0; padding: 40px 16px; text-align: center; color: #64748b; font-size: .9rem; }
.dz-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.dz-acciones--fila { flex-direction: row; flex-wrap: wrap; margin-top: 12px; }
.dz-btn-sec { border: 1px solid #ddd6fe; background: #fff; color: #7c3aed; border-radius: 9px; padding: 7px 12px;
  font-size: .84rem; font-weight: 600; cursor: pointer; }
.dz-btn-sec:hover { background: #f5f3ff; }
.dz-btn-sec:disabled { opacity: .5; cursor: not-allowed; }
.dz-btn-sec--quitar { color: #b91c1c; border-color: #fecaca; }
.dz-btn-sec--quitar:hover { background: #fef2f2; }
.ck-menu > div a { display: block; padding: 9px 12px; border-radius: 8px; font-size: .87rem; color: #334155; text-decoration: none; }
.ck-menu > div a:hover { background: #f8fafc; }
.ck-menu button:disabled { opacity: .45; cursor: not-allowed; }
.dz-mas { border: 0; background: none; cursor: pointer; width: 30px; height: 30px; border-radius: 8px;
  color: #64748b; font-size: 1.2rem; line-height: 1; display: grid; place-items: center; }
.dz-mas:hover { background: #f1f5f9; }
.ed-acts .dz-mas.tt-btn--ic { border: 1px solid #dfe3ee; background: #fff; }

/* ---------- interruptor ---------- */
.dz-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0;
  font-size: .88rem; color: #334155; cursor: pointer; }
.dz-toggle input { appearance: none; -webkit-appearance: none; flex: 0 0 38px; width: 38px; height: 22px; margin: 0;
  border-radius: 999px; background: #cbd5e1; position: relative; cursor: pointer; transition: background .15s; }
.dz-toggle input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.2); transition: transform .15s; }
.dz-toggle input:checked { background: #7c3aed; }
.dz-toggle input:checked::before { transform: translateX(16px); }
.dz-toggle input:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 2px; }
.dz-vis { border: 1px solid #eef0f6; border-radius: 12px; padding: 4px 12px; margin: 4px 0 12px; }

/* ---------- imagen de un bloque ---------- */
.dz-img__fila { display: flex; gap: 12px; align-items: flex-start; }
.dz-img__muestra { position: relative; width: 96px; height: 72px; flex: 0 0 96px; border-radius: 10px; overflow: hidden;
  background: #f1f5f9; border: 1px solid #e9ecf5; display: grid; place-items: center; color: #94a3b8; }
.dz-img__muestra svg { width: 26px; height: 26px; }
.dz-img__muestra img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dz-img__acts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.dz-img__acts small { color: #94a3b8; font-size: .76rem; }

/* ---------- alineación ---------- */
.dz-alinear { display: inline-flex; gap: 3px; background: #f1f3f9; border-radius: 10px; padding: 3px; }
.dz-alinear button { border: 0; background: none; width: 38px; height: 32px; border-radius: 8px; color: #64748b;
  cursor: pointer; display: grid; place-items: center; }
.dz-alinear button svg { width: 18px; height: 18px; }
.dz-alinear button.on { background: #fff; color: #7c3aed; box-shadow: 0 1px 3px rgba(15,23,42,.1); }

/* ---------- 2 · vista previa de plantilla ---------- */
.dz-previa { padding: 18px; margin-bottom: 0; }
.dz-previa__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.dz-previa__cab b { font-size: 1.05rem; color: #0f172a; margin-right: 8px; }
.dz-previa__cab small { color: #94a3b8; font-size: .8rem; }
.dz-previa__marco { background: #eef2f7; border-radius: 12px; padding: 12px; }
.dz-previa__marco iframe { display: block; width: 100%; height: 62vh; min-height: 420px; border: 0; background: #fff;
  border-radius: 8px; box-shadow: 0 2px 10px rgba(15,23,42,.1); }
.dz-paginas { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.dz-paginas__l { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; padding: 2px; }
.dz-pag { flex: 0 0 auto; border: 1px solid #e3e7f2; background: #fff; color: #475569; border-radius: 10px;
  padding: 8px 14px; font-size: .84rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.dz-pag.on { border-color: #7c3aed; color: #7c3aed; background: #f5f3ff; }
.dz-flecha { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #e3e7f2; background: #fff;
  color: #475569; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.dz-flecha:disabled { opacity: .4; cursor: not-allowed; }
.dz-acciones .tt-btn { width: 100%; }
.dz-acciones--fila .tt-btn { width: auto; }

/* ---------- 3 y 4 · editor ---------- */
.dz-disp-ic { display: grid; place-items: center; width: 40px; height: 34px; padding: 0 !important; }
.dz-disp-ic svg { width: 19px; height: 19px; }
.dz .tt-aviso { margin-top: 12px; }
.dz-ia { margin-top: 14px; }
.dz-cuerpo { margin-top: 14px; }
.ds .dz-panel { padding: 16px; }
.dz-panel__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.dz-panel__cab .dz-h2 { margin: 0; }
.dz-selpag { max-width: 60%; border: 1px solid #e3e7f2; border-radius: 9px; padding: 6px 8px; font: inherit; font-size: .84rem; background: #fff; }
.dz-volver { border: 0; background: none; color: #7c3aed; font-weight: 600; font-size: .86rem; cursor: pointer; padding: 0; margin-bottom: 12px; }
.dz-volver:hover { text-decoration: underline; }
.dz-tipo { margin: -4px 0 12px; color: #64748b; font-size: .84rem; }
.dz-guardar { width: 100%; margin-top: 14px; }
.dz-secciones { list-style: none; margin: 0; padding: 0; }
.dz-zona { height: 6px; border-radius: 6px; transition: height .12s, background .12s; }
.dz-zona.activa { height: 22px; background: #ede9fe; border: 1px dashed #a78bfa; }
.dz-sec { display: flex; align-items: center; gap: 6px; border: 1px solid #e9ecf5; border-radius: 12px; padding: 6px 6px 6px 8px;
  background: #fff; }
.dz-sec:hover { border-color: #ddd6fe; }
.dz-sec.arrastrando { opacity: .45; }
.dz-sec--oculta .dz-sec__tx b, .dz-sec--oculta .dz-sec__ic { opacity: .5; }
.dz-agarre { color: #cbd5e1; cursor: grab; user-select: none; letter-spacing: -2px; font-size: 14px; }
.dz-sec__tx { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none;
  text-align: left; cursor: pointer; padding: 4px 0; }
.dz-sec__ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; background: #f5f3ff; display: grid;
  place-items: center; font-size: 1.05rem; overflow: hidden; white-space: nowrap; letter-spacing: -3px; line-height: 1; }
.dz-sec__tx b { display: block; font-size: .88rem; font-weight: 650; color: #0f172a; }
.dz-sec__tx small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .76rem; color: #94a3b8; line-height: 1.35; }
.dz-agregar { width: 100%; margin: 12px 0 4px; border: 1px dashed #c4b5fd; background: #faf8ff; color: #7c3aed;
  border-radius: 12px; padding: 11px; font-weight: 650; font-size: .88rem; cursor: pointer; }
.dz-agregar:hover { background: #f5f3ff; }
.dz-guardar-sec { border: 1px solid #e9ecf5; border-radius: 12px; padding: 12px; margin-top: 10px; }

/* ---------- 5 · colores y tipografía ---------- */
.dz-form { margin-bottom: 0; }
.dz-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.dz-color__fila { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; }
.dz-color__fila input[type=color] { width: 46px; height: 42px; padding: 3px; border: 1px solid #e3e7f2; border-radius: 10px;
  background: #fff; cursor: pointer; }
.dz-color__fila input[type=text] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: lowercase; }
.dz-muestra { margin-bottom: 0; }
.dz-muestra__lienzo { border-radius: 12px; overflow: hidden; border: 1px solid #e9ecf5; }
.dz-muestra__barra { padding: 9px 14px; font-size: .8rem; font-weight: 700; }
.dz-muestra__cuerpo { padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.dz-muestra__cuerpo b { font-size: 1.15rem; }
.dz-muestra__cuerpo p { margin: 0; }
.dz-muestra__btn { display: block; width: 100%; padding: 9px 12px; font-size: .86rem; font-weight: 650; }
.dz-muestra__tarjeta { width: 100%; padding: 14px; font-size: .8rem; }
.dz-muestra__pie { padding: 9px 14px; font-size: .76rem; }

/* ---------- 6 · menú ---------- */
.dz-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dz-item { border: 1px solid #e9ecf5; border-radius: 12px; background: #fff; }
.dz-item.arrastrando { opacity: .45; }
.dz-item.destino { border-color: #a78bfa; box-shadow: 0 0 0 2px #ede9fe; }
.dz-item__fila { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.dz-item__ic { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; background: #f5f3ff; color: #7c3aed;
  display: grid; place-items: center; }
.dz-item__ic svg { width: 17px; height: 17px; }
.dz-item__tx { flex: 1; min-width: 0; border: 0; background: none; text-align: left; cursor: pointer; padding: 0; }
.dz-item__tx b { display: block; font-size: .9rem; font-weight: 600; color: #0f172a; }
.dz-item__tx small { display: block; font-size: .76rem; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-chev { border: 0; background: none; width: 30px; height: 30px; border-radius: 8px; color: #94a3b8; cursor: pointer;
  display: grid; place-items: center; }
.dz-chev svg { width: 18px; height: 18px; transition: transform .15s; }
.dz-chev.on svg { transform: rotate(90deg); color: #7c3aed; }
.dz-item__edit { border-top: 1px solid #f1f3f9; padding: 14px 12px 12px; }
.dz-item__acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 10px; }
.dz-sub { border: 1px solid #f1f3f9; border-radius: 10px; padding: 10px; margin-bottom: 4px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.dz-sub__t { font-size: .84rem; font-weight: 600; color: #334155; }
.dz-sub__t small { font-weight: 400; color: #94a3b8; margin-left: 4px; }
.dz-sub__f { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; width: 100%; }
.dz-sub__f input { width: 100%; border: 1px solid #e3e7f2; border-radius: 9px; padding: 8px 10px; font: inherit; font-size: .86rem; }
.dz-menu-previa { display: flex; flex-wrap: wrap; gap: 4px 14px; border: 1px solid #e9ecf5; border-radius: 10px; padding: 12px 14px; font-size: .84rem; color: #475569; }
.dz-menu-previa span.on { color: #7c3aed; font-weight: 650; text-decoration: underline; text-underline-offset: 5px; }
.dz-menu-previa--pie { background: #0f172a; color: #cbd5e1; border-color: #0f172a; }

/* ---------- 7 · páginas ---------- */
.dz-paglista ul { list-style: none; margin: 0; padding: 0; }
.dz-pagf { border-top: 1px solid #f1f3f9; }
.dz-pagf:first-child { border-top: 0; }
.dz-pagf__fila { display: flex; align-items: center; gap: 12px; padding: 12px 2px; }
.dz-pagf__ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; background: #f1f5f9; color: #475569;
  display: grid; place-items: center; }
.dz-pagf__ic svg { width: 19px; height: 19px; }
.dz-pagf__tx { flex: 1; min-width: 0; }
.dz-pagf__tx b { display: block; font-size: .92rem; font-weight: 600; color: #0f172a; }
.dz-pagf__tx small { display: block; font-size: .78rem; color: #94a3b8; }
.dz-pagf__edit { padding: 4px 2px 16px 50px; }

/* ---------- 8 · dispositivos ---------- */
.dz-disp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; max-width: 520px; }
.dz-disp__b { border: 1px solid #e3e7f2; background: #fff; border-radius: 12px; padding: 10px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .84rem; font-weight: 600; color: #475569; }
.dz-disp__b svg { width: 22px; height: 22px; }
.dz-disp__b.on { border-color: #7c3aed; color: #7c3aed; background: #f5f3ff; }
.dz-marco-card { padding: 14px; }
.dz-marco-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: #64748b; }
.dz-marco { background: #eef2f7; border-radius: 12px; padding: 14px; display: flex; justify-content: center; }
.dz-marco iframe { display: block; width: 100%; height: 70vh; min-height: 460px; border: 0; background: #fff; border-radius: 10px;
  box-shadow: 0 2px 10px rgba(15,23,42,.12); transition: width .18s ease; }
.dz-marco iframe.dz-marco--tablet { width: 820px; max-width: 100%; }
.dz-marco iframe.dz-marco--movil { width: 400px; max-width: 100%; }
.dz-probar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dz-probar .dz-txt { margin: 0; max-width: 620px; }
.dz-probar__acts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* ---------- checklist · datos: contacto completo ---------- */
.dz-mas-datos { border: 1px solid #e9ecf5; border-radius: 12px; padding: 10px 14px; margin: 4px 0 14px; }
.dz-mas-datos > summary { cursor: pointer; font-weight: 600; font-size: .88rem; color: #334155; }
.dz-mas-datos[open] > summary { margin-bottom: 12px; }

@media (max-width: 980px) {
  .dz-cuerpo { grid-template-columns: minmax(0, 1fr) !important; }
  .ds .dz-panel { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .dz-probar__acts { align-items: stretch; width: 100%; }
  .dz-sub__f { grid-template-columns: minmax(0, 1fr); }
  .dz-pagf__edit { padding-left: 2px; }
  .dz-pagf__fila { flex-wrap: wrap; }
  .dz-previa__marco iframe, .dz-marco iframe { min-height: 360px; }
  .ed-barra { flex-wrap: wrap; }
}

/* =============================================================================
   PROMOCIONES (prefijo `pm-`) · lista, nueva, productos, configurar, cupones,
   combos, descuento por cantidad y detalle.
   ============================================================================= */
.pm.ds, .pm.dz { padding: 0; margin: 0; max-width: 1160px; }
.pm .tt-head h1 { font-size: 1.65rem; margin: 0 0 4px; }
.pm .campo > span, .pm .tt-campo > span { display: block; font-size: .86rem; font-weight: 600; color: #334155; margin-bottom: 6px; }
.pm-volver { display: inline-block; margin-bottom: 10px; color: #7c3aed; font-size: .86rem; font-weight: 600; text-decoration: none; }
.pm-volver:hover { text-decoration: underline; }
.pm-h2 { margin-top: 22px; }
.ti-est--prog { background: #e0f2fe; color: #0369a1; }
.ti-est--fin { background: #f1f5f9; color: #64748b; }

/* ---------- 1 · lista ---------- */
.pm-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pm-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pm-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.pm-card { position: relative; display: flex; gap: 12px; background: #fff; border: 1px solid #e9ecf5; border-radius: 16px; padding: 16px; }
.pm-card:hover { border-color: #ddd6fe; }
.pm-card__link { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; color: inherit; }
.pm-card__link b { font-size: .98rem; font-weight: 650; color: #0f172a; margin-top: 6px; }
.pm-card__link small { color: #64748b; font-size: .84rem; }
.pm-card__fecha { display: inline-flex; align-items: center; gap: 6px; color: #94a3b8; font-size: .8rem; margin-top: 4px; }
.pm-card__fecha svg { width: 14px; height: 14px; }
.pm-card__lado { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; padding-right: 22px; }
.pm-card__ic { position: relative; width: 64px; height: 64px; border-radius: 12px; background: #f5f3ff; color: #a78bfa; display: grid; place-items: center; overflow: hidden; }
.pm-card__ic svg { width: 28px; height: 28px; }
.pm-card__ic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.pm-card__mas { position: absolute; top: 10px; right: 6px; }
.pm-insignia { display: inline-block; border-radius: 8px; padding: 4px 10px; font-weight: 800; font-size: .86rem; letter-spacing: .01em;
  background: #fee2e2; color: #dc2626; }
.pm-insignia--cupon { background: #ede9fe; color: #6d28d9; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pm-insignia--combo { background: #ffedd5; color: #c2410c; }
.pm-insignia--cantidad { background: #fee2e2; color: #dc2626; font-size: .72rem; }

/* ---------- 2 · nueva ---------- */
.pm-tipos { display: flex; flex-direction: column; gap: 8px; }
.pm-tipo { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid #e9ecf5; background: #fff;
  border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.pm-tipo:hover { border-color: #c4b5fd; }
.pm-tipo.on { border-color: #7c3aed; background: #faf8ff; box-shadow: 0 0 0 3px rgba(124,58,237,.08); }
.pm-tipo__ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; background: #f5f3ff; color: #7c3aed; display: grid; place-items: center; }
.pm-tipo__ic svg { width: 20px; height: 20px; }
.pm-tipo__tx { flex: 1; min-width: 0; }
.pm-tipo__tx b { display: block; font-size: .9rem; font-weight: 650; color: #0f172a; }
.pm-tipo__tx small { display: block; font-size: .8rem; color: #64748b; margin-top: 1px; }
.pm-tipo__marca { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #94a3b8; font-size: 1.1rem; }
.pm-tipo.on .pm-tipo__marca { background: #7c3aed; color: #fff; font-size: .78rem; }
.pm-alcances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pm-alcance { display: flex; align-items: center; gap: 8px; border: 1px solid #e9ecf5; background: #fff; border-radius: 12px; padding: 12px;
  cursor: pointer; font-size: .86rem; font-weight: 600; color: #334155; text-align: left; }
.pm-alcance svg { width: 18px; height: 18px; flex: 0 0 18px; color: #7c3aed; }
.pm-alcance.on { border-color: #7c3aed; background: #faf8ff; color: #6d28d9; }
.pm-pie { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.pm-previa-tipo { display: flex; flex-direction: column; gap: 8px; }
.pm-previa-tipo__ic { width: 56px; height: 56px; border-radius: 14px; background: #f5f3ff; color: #7c3aed; display: grid; place-items: center; }
.pm-previa-tipo__ic svg { width: 28px; height: 28px; }
.pm-previa-tipo b { font-size: .95rem; color: #0f172a; }
.pm-previa-tipo p { margin: 0; color: #64748b; font-size: .85rem; line-height: 1.5; }
.pm-checks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pm-checks li { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: #475569; }
.pm-checks li span { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; }
.pm-checks li span svg { width: 11px; height: 11px; stroke-width: 3; }

/* ---------- 3 · productos ---------- */
.pm-sel__filtros { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 10px; margin-bottom: 14px; }
.pm-sel__filtros select { border: 1px solid #e3e7f2; border-radius: 10px; padding: 9px 10px; font: inherit; font-size: .88rem; background: #fff; }
.pm-busca { display: flex; align-items: center; gap: 8px; border: 1px solid #e3e7f2; border-radius: 10px; padding: 0 10px; background: #fff; }
.pm-busca svg { width: 16px; height: 16px; color: #94a3b8; flex: 0 0 16px; }
.pm-busca input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 9px 0; font: inherit; font-size: .88rem; background: none; }
.pm-tabla-wrap { overflow-x: auto; max-height: 60vh; border: 1px solid #f1f3f9; border-radius: 12px; }
.pm-tabla { width: 100%; border-collapse: collapse; font-size: .86rem; }
.pm-tabla th { position: sticky; top: 0; background: #f8fafc; text-align: left; padding: 10px 12px; font-size: .74rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.pm-tabla td { padding: 8px 12px; border-top: 1px solid #f1f3f9; color: #334155; vertical-align: middle; }
.pm-tabla tr { cursor: pointer; }
.pm-tabla tbody tr:hover { background: #fafbff; }
.pm-tabla tr.on { background: #f5f3ff; }
.pm-tabla .der { text-align: right; white-space: nowrap; }
.pm-col-chk { width: 36px; }
.pm-col-chk input { width: 17px; height: 17px; accent-color: #7c3aed; cursor: pointer; }
.pm-prod { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.pm-prod b { display: block; font-weight: 600; color: #0f172a; }
.pm-prod small { display: block; color: #94a3b8; font-size: .76rem; }
.pm-prod__img { position: relative; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 9px; background: #f1f5f9; color: #cbd5e1;
  display: grid; place-items: center; overflow: hidden; }
.pm-prod__img svg { width: 18px; height: 18px; }
.pm-prod__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.pm-sel__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; color: #64748b; font-size: .88rem; }

/* ---------- 4 · configurar ---------- */
.pm-form { margin-bottom: 0; }
/* `.tt-campo > span` es el rótulo del campo (bloque): el contenedor del valor también es un
   span hijo directo, así que se le devuelve el flex y se le saca el formato de rótulo. */
.pm .tt-campo > span.pm-valor { display: flex; margin-bottom: 0; font-weight: 400; color: inherit; font-size: inherit; }
.pm-valor { display: flex; align-items: stretch; border: 1px solid #e3e7f2; border-radius: 10px; overflow: hidden; background: #fff; }
.pm-valor input { flex: 1; min-width: 0; border: 0 !important; border-radius: 0 !important; outline: 0; padding: 10px 12px; font: inherit; }
.pm-valor i { font-style: normal; display: grid; place-items: center; padding: 0 12px; background: #f8fafc; color: #64748b; font-weight: 600; }
.pm-valor--chico { width: 92px; }
.pm-valor--chico input { padding: 7px 8px; width: 50px; }
.pm-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.pm-thumb { position: relative; width: 48px; height: 48px; border-radius: 10px; background: #f1f5f9; color: #cbd5e1; display: grid; place-items: center; overflow: hidden; }
.pm-thumb svg { width: 20px; height: 20px; }
.pm-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.pm-thumb--mas { color: #64748b; font-weight: 700; font-size: .84rem; }
.pm-thumbs__pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; color: #94a3b8; }
.pm-guardar { margin-top: 12px; }
.pm-muestra { display: flex; flex-direction: column; gap: 6px; }
.pm-muestra__img { position: relative; height: 170px; border-radius: 12px; background: #f5f3ff; color: #c4b5fd; display: grid; place-items: center; overflow: hidden; }
.pm-muestra__img svg { width: 42px; height: 42px; }
.pm-muestra__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pm-muestra .pm-insignia { align-self: flex-start; }
.pm-muestra__nombre { font-size: .95rem; color: #0f172a; }
.pm-muestra__desc { margin: 0; color: #64748b; font-size: .84rem; line-height: 1.45; }
.pm-muestra__antes { color: #94a3b8; font-size: .86rem; }
.pm-muestra__precio { font-size: 1.35rem; font-weight: 800; color: #0f172a; }
.pm-muestra__nota { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 0; color: #94a3b8; font-size: .78rem; line-height: 1.4; }
.pm-muestra__nota svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 1px; }

/* ---------- 5 · cupones ---------- */
.pm-cupones ul { list-style: none; margin: 0; padding: 0; }
.pm-cupon-f { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid #f1f3f9; }
.pm-cupon-f:first-child { border-top: 0; }
.pm-cupon-f.on { background: #faf8ff; border-radius: 10px; }
.pm-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; font-size: .82rem; color: #b91c1c;
  background: #fef2f2; border: 1px dashed #fca5a5; border-radius: 7px; padding: 3px 8px; }
.pm-cupon-f__tx { flex: 1; min-width: 0; font-size: .86rem; color: #334155; }
.pm-cupon-f__tx small { display: block; color: #94a3b8; font-size: .76rem; }
.pm-cupon-form { margin-top: 16px; }
.pm-ticket { border: 2px dashed #fca5a5; background: #fff7f7; border-radius: 14px; padding: 18px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.pm-ticket b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.3rem; color: #dc2626; letter-spacing: .04em; }
.pm-ticket span { font-weight: 700; color: #0f172a; font-size: .9rem; }
.pm-ticket small { color: #94a3b8; }
.pm-hechos { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pm-hechos li { display: flex; align-items: center; gap: 8px; color: #475569; font-size: .84rem; }
.pm-hechos svg { width: 16px; height: 16px; flex: 0 0 16px; color: #7c3aed; }

/* ---------- 6 · combos ---------- */
.pm-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pm-item { display: flex; align-items: center; gap: 10px; border: 1px solid #e9ecf5; border-radius: 12px; padding: 8px 10px; }
.pm-item__n { width: 20px; color: #94a3b8; font-weight: 700; font-size: .84rem; text-align: center; }
.pm-item__tx { flex: 1; min-width: 0; }
.pm-item__tx b { display: block; font-size: .86rem; font-weight: 600; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-item__tx small { display: block; color: #94a3b8; font-size: .75rem; }
.pm-item__precio { font-size: .86rem; color: #334155; white-space: nowrap; }
.pm-stepper { display: inline-flex; align-items: center; border: 1px solid #e3e7f2; border-radius: 9px; overflow: hidden; }
.pm-stepper button { border: 0; background: #f8fafc; width: 28px; height: 28px; cursor: pointer; font-size: 1rem; color: #475569; }
.pm-stepper button:disabled { opacity: .4; cursor: not-allowed; }
.pm-stepper b { min-width: 28px; text-align: center; font-size: .86rem; }
.pm-item__quitar { border: 0; background: none; width: 30px; height: 30px; border-radius: 8px; color: #94a3b8; cursor: pointer; display: grid; place-items: center; }
.pm-item__quitar:hover { background: #fef2f2; color: #dc2626; }
.pm-item__quitar:disabled { opacity: .35; cursor: not-allowed; }
.pm-item__quitar svg { width: 16px; height: 16px; }
.pm-busca-panel { border: 1px solid #e9ecf5; border-radius: 12px; padding: 10px; margin-top: 8px; }
.pm-resultados { list-style: none; margin: 8px 0 0; padding: 0; max-height: 260px; overflow: auto; }
.pm-resultados li { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-top: 1px solid #f1f3f9; }
.pm-resultados li:first-child { border-top: 0; }
.pm-totales { border: 1px solid #e9ecf5; border-radius: 12px; padding: 12px 14px; margin: 4px 0 14px; display: flex; flex-direction: column; gap: 10px; }
.pm-totales > div, .pm-totales > label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .88rem; color: #475569; }
.pm-totales .pm-valor { width: 160px; }
.pm-totales__ahorro { color: #16a34a !important; font-weight: 700; }

/* ---------- 7 · cantidad ---------- */
.pm-reglas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pm-regla { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .86rem; color: #475569; }
.pm-regla > input { width: 70px; border: 1px solid #e3e7f2; border-radius: 9px; padding: 7px 8px; font: inherit; }
.pm-escalones { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pm-escalones li { display: flex; justify-content: space-between; align-items: center; border: 1px solid #f1f3f9; border-radius: 10px; padding: 8px 12px; font-size: .88rem; color: #334155; }
.pm-escalones b { background: #fee2e2; color: #dc2626; border-radius: 7px; padding: 2px 8px; font-size: .8rem; }

/* ---------- 8 · detalle ---------- */
.pm-cabecera { display: flex; align-items: center; gap: 16px; }
.pm-cabecera__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pm-cabecera__tx h2 { margin: 6px 0 0; font-size: 1.15rem; color: #0f172a; }
.pm-cabecera__tx p { margin: 0; color: #64748b; font-size: .88rem; }
.pm-cabecera__img { position: relative; width: 120px; height: 96px; flex: 0 0 120px; border-radius: 14px; background: #f5f3ff; color: #a78bfa; display: grid; place-items: center; overflow: hidden; }
.pm-cabecera__img svg { width: 36px; height: 36px; }
.pm-cabecera__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.pm-info { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px 16px; margin: 0; font-size: .88rem; }
.pm-info dt { color: #64748b; }
.pm-info dd { margin: 0; color: #0f172a; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pm-rend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pm-rend > div { border: 1px solid #e9ecf5; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.pm-rend b { font-size: 1.3rem; color: #0f172a; }
.pm-rend small { color: #64748b; font-size: .78rem; }
.pm-rend__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.pm-rend__ic svg { width: 18px; height: 18px; }
.pm-rend__ic--rojo { background: #fee2e2; color: #dc2626; }
.pm-rend__ic--azul { background: #e0f2fe; color: #0284c7; }
.pm-rend__ic--violeta { background: #ede9fe; color: #7c3aed; }
.pm-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.pm-acciones .tt-btn svg { width: 16px; height: 16px; }
.pm-acciones__editar { color: #7c3aed; border-color: #ddd6fe; }

@media (max-width: 640px) {
  .pm-lista { grid-template-columns: minmax(0, 1fr); }
  .pm-alcances { grid-template-columns: minmax(0, 1fr); }
  .pm-sel__filtros { grid-template-columns: minmax(0, 1fr); }
  .pm-rend { grid-template-columns: minmax(0, 1fr); }
  .pm-info { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pm-info dd { margin-bottom: 8px; }
  .pm-cabecera { flex-direction: column-reverse; align-items: flex-start; }
  .pm-item { flex-wrap: wrap; }
  .pm-totales .pm-valor { width: 130px; }
}

/* =============================================================================
   PEDIDOS (prefijo `pd-`) · listado, detalle, seguimiento, cliente, pago,
   gestionar y estado vacío.
   ============================================================================= */
.pd .tt-head h1 { font-size: 1.65rem; margin: 0 0 4px; }
.pd-pills { margin-bottom: 14px; }
.pd-barra { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.pd-barra .pm-busca { flex: 1; min-width: 220px; }
.pd-filtrar { gap: 6px; }
.pd-filtrar svg { width: 16px; height: 16px; }
.pd-filtrar.on { border-color: #7c3aed; color: #7c3aed; }
.pd-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.pd-activos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pd-activos > span { display: inline-flex; align-items: center; gap: 6px; background: #f1f5f9; color: #334155; border-radius: 999px; padding: 4px 6px 4px 12px; font-size: .8rem; }
.pd-activos > span button { border: 0; background: #e2e8f0; color: #475569; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; line-height: 1; }
.pd-tabla td { white-space: nowrap; }
.pd-num { color: #7c3aed; font-weight: 700; text-decoration: none; }
.pd-num:hover { text-decoration: underline; }
.pd-tabla .ck-menu { display: inline-block; }
.pd-tabla .ck-menu > div { text-align: left; }
.ck-menu > div a.peligro { color: #b91c1c; }
.pd-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid #f4f6fb; color: #94a3b8; font-size: .82rem; }
.pd-paginas { display: flex; gap: 4px; }
.pd-paginas button { min-width: 30px; height: 30px; border: 1px solid #e3e7f2; background: #fff; border-radius: 8px; cursor: pointer; color: #475569; font-size: .84rem; }
.pd-paginas button.on { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.pd-paginas button:disabled { opacity: .4; cursor: not-allowed; }
.pd-vacio { text-align: center; padding: 48px 20px; }
.pd-vacio__ic { width: 96px; height: 96px; margin: 0 auto 16px; border-radius: 50%; background: #f5f3ff; color: #7c3aed; display: grid; place-items: center; }
.pd-vacio__ic svg { width: 44px; height: 44px; }
.pd-vacio h2 { margin: 0 0 6px; font-size: 1.1rem; color: #0f172a; }
.pd-vacio p { margin: 0 auto 18px; color: #64748b; max-width: 420px; line-height: 1.5; }
.pd-vacio__acts { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pd-vacio__acts .tt-btn { min-width: 220px; }

/* ---------- detalle ---------- */
.pd-bloque { margin-bottom: 14px; }
.pd-bloque__cab { display: flex; align-items: center; gap: 14px; }
.pd-bloque__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pd-bloque__tx small { color: #94a3b8; font-size: .76rem; font-weight: 600; }
.pd-bloque__tx b { color: #0f172a; font-size: .95rem; }
.pd-bloque__tx span, .pd-bloque__tx a { color: #64748b; font-size: .85rem; text-decoration: none; overflow-wrap: anywhere; }
.pd-bloque__tx a:hover { color: #7c3aed; }
.pd-ic { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; background: #f5f3ff; color: #7c3aed; display: grid; place-items: center; }
.pd-ic svg { width: 20px; height: 20px; }
.pd-logo { width: 56px; height: 42px; flex: 0 0 56px; display: grid; place-items: center; }
.pd-logo svg { width: 100%; height: 100%; }
.pd-btn-sec { color: #7c3aed; border-color: #ddd6fe; }
.pd-items { list-style: none; margin: 0 0 14px; padding: 0; }
.pd-items li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #f1f3f9; }
.pd-items li:first-child { border-top: 0; }
.pd-items__tx { flex: 1; min-width: 0; }
.pd-items__tx b { display: block; font-size: .88rem; font-weight: 600; color: #0f172a; }
.pd-items__tx small { display: block; color: #94a3b8; font-size: .76rem; }
.pd-items__precio { color: #475569; font-size: .86rem; white-space: nowrap; text-align: right; }
.pd-items__precio s { display: block; color: #94a3b8; font-size: .76rem; }
.pd-items__cant { min-width: 32px; text-align: center; border: 1px solid #e3e7f2; border-radius: 8px; padding: 3px 6px; font-size: .84rem; color: #334155; }
.pd-items__total { min-width: 90px; text-align: right; font-size: .9rem; color: #0f172a; }
.pd-envio { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid #f1f3f9; }
.pd-envio__costo { white-space: nowrap; }
.pd-totales { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #f1f3f9; font-size: .88rem; color: #475569; }
.pd-totales dd { margin: 0; text-align: right; }
.pd-totales__total { font-size: 1.05rem; font-weight: 800; color: #0f172a !important; padding-top: 6px; }
.pd-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pd-acciones--col { flex-direction: column; }
.pd-acciones--col .tt-btn { width: 100%; }
.pd-acciones--fin { justify-content: flex-end; }

/* ---------- seguimiento ---------- */
.pd-linea { list-style: none; margin: 0; padding: 0; }
.pd-linea__paso { position: relative; display: flex; gap: 14px; padding: 0 0 22px; }
.pd-linea__paso:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: #e9ecf5; }
.pd-linea__paso--hecho:not(:last-child)::before { background: #a78bfa; }
.pd-linea__marca { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .86rem; }
.pd-linea__marca svg { width: 15px; height: 15px; stroke-width: 2.8; }
.pd-linea__paso--hecho .pd-linea__marca { background: #7c3aed; color: #fff; }
.pd-linea__paso--actual .pd-linea__marca { background: #fff; border: 3px solid #7c3aed; }
.pd-linea__paso--actual .pd-linea__marca i { width: 8px; height: 8px; border-radius: 50%; background: #7c3aed; }
.pd-linea__paso--error .pd-linea__marca { background: #fee2e2; color: #dc2626; }
.pd-linea__paso--actual > div { background: #faf8ff; border-radius: 10px; padding: 8px 12px; margin: -8px 0 0; flex: 1; }
.pd-linea__paso b { display: block; font-size: .92rem; color: #0f172a; }
.pd-linea__paso--actual b { color: #6d28d9; }
.pd-linea__paso small { display: block; color: #94a3b8; font-size: .78rem; margin-top: 1px; }
.pd-linea__paso p { margin: 3px 0 0; color: #64748b; font-size: .84rem; line-height: 1.45; }
.pd-info { display: flex; align-items: flex-start; gap: 8px; background: #f5f7ff; border: 1px solid #e3e8fb; border-radius: 12px; padding: 10px 12px; color: #475569; font-size: .85rem; line-height: 1.45; margin: 0 0 14px; }
.pd-info svg { width: 18px; height: 18px; flex: 0 0 18px; color: #4f46e5; }

/* ---------- cliente ---------- */
.pd-secciones { display: flex; flex-direction: column; }
.pd-seccion { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid #f1f3f9; }
.pd-seccion:first-child { border-top: 0; padding-top: 0; }
.pd-seccion .dz-h2 { margin-bottom: 4px; }
.pd-nota { margin: 0; background: #f8fafc; border-radius: 10px; padding: 10px 12px; color: #475569; font-size: .86rem; line-height: 1.5; white-space: pre-wrap; }

/* ---------- pago ---------- */
.pd-alerta { display: flex; align-items: flex-start; gap: 8px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 10px 12px; color: #92400e; font-size: .86rem; margin: 0 0 14px; }
.pd-alerta svg { width: 18px; height: 18px; flex: 0 0 18px; }
.pd-datos { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 16px; margin: 6px 0 0; font-size: .88rem; }
.pd-datos dt { color: #64748b; }
.pd-datos dd { margin: 0; color: #0f172a; overflow-wrap: anywhere; }

/* ---------- gestionar ---------- */
.pd-opciones { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pd-opcion { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #e9ecf5; border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.pd-opcion input { margin-top: 3px; accent-color: #7c3aed; width: 16px; height: 16px; }
.pd-opcion b { display: block; font-size: .9rem; color: #0f172a; }
.pd-opcion small { display: block; color: #64748b; font-size: .8rem; margin-top: 1px; }
.pd-opcion:has(input:checked) { border-color: #7c3aed; background: #faf8ff; }
.pd-peligro { display: flex; gap: 14px; background: #fff7f7; border-color: #fecaca; }
.pd-peligro__ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: #fee2e2; color: #dc2626; display: grid; place-items: center; }
.pd-peligro__ic svg { width: 20px; height: 20px; }
.pd-peligro .dz-h2 { color: #b91c1c; }
.pd-peligro p { margin: 0 0 12px; color: #7f1d1d; font-size: .86rem; line-height: 1.5; }
.pd-peligro__cuerpo { flex: 1; min-width: 0; }
.pd-peligro__cuerpo .pd-acciones { margin-top: 0; }

/* ---------- comprobantes de transferencia ---------- */
.pd-grow { flex: 1; margin: 0; }
.pd-subir { position: relative; overflow: hidden; }
.pd-comprobantes { list-style: none; margin: 10px 0 0; padding: 0; }
.pd-comprobantes li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #f1f3f9; }
.pd-comprobantes li:first-child { border-top: 0; }
.pd-comprobantes__tx { flex: 1; min-width: 0; }
.pd-comprobantes__tx b { display: block; font-size: .88rem; font-weight: 600; color: #0f172a; overflow-wrap: anywhere; }
.pd-comprobantes__tx small { display: block; color: #94a3b8; font-size: .76rem; }

@media (max-width: 640px) {
  .pd-bloque__cab, .pd-envio { flex-wrap: wrap; }
  .pd-items li, .pd-comprobantes li { flex-wrap: wrap; }
  .pd-items__tx { flex-basis: calc(100% - 52px); }
  .pd-datos { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pd-datos dd { margin-bottom: 8px; }
  .pd-acciones .tt-btn { flex: 1 1 100%; }
}

/* =============================================================================
   MARKETING (prefijo `mk-`) · vista general, Google Analytics, Meta Pixel,
   Tag Manager, cookies, SEO, eventos y embudo. Reutiliza tarjetas, campos,
   opciones y avisos de las demás pestañas.
   ============================================================================= */
.mk-titulo { margin: 6px 0 12px; font-size: 1rem; font-weight: 650; color: #0f172a; }
.mk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.mk-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: #fff; border: 1px solid #e9ecf5; border-radius: 16px; padding: 18px 12px; text-decoration: none; color: #0f172a; transition: border-color .15s, box-shadow .15s; }
.mk-tile:hover { border-color: #ddd6fe; box-shadow: 0 6px 18px rgba(124,58,237,.08); }
.mk-tile b { font-size: .92rem; font-weight: 600; }
.mk-tile .tt-chip { margin-left: 0; }
.mk-ic { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; display: grid; place-items: center; background: #f5f3ff; color: #7c3aed; }
.mk-ic svg { width: 22px; height: 22px; }
.mk-ic--ga4 { background: #fff7ed; color: #ea580c; }
.mk-ic--meta { background: #eff6ff; color: #2563eb; }
.mk-ic--gtm { background: #e0f2fe; color: #0284c7; }
.mk-ic--cookies { background: #fef3c7; color: #b45309; }
.mk-ic--seo { background: #dcfce7; color: #16a34a; }
.mk-ic--chico { width: 28px; height: 28px; flex-basis: 28px; border-radius: 8px; }
.mk-ic--chico svg { width: 15px; height: 15px; }
.mk-banner { display: flex; align-items: center; gap: 14px; background: linear-gradient(120deg, #7c3aed, #6d28d9); color: #fff; border-radius: 16px; padding: 18px 20px; margin-bottom: 16px; text-decoration: none; }
.mk-banner:hover { background: linear-gradient(120deg, #6d28d9, #5b21b6); }
.mk-banner__ic { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; background: rgba(255,255,255,.16); display: grid; place-items: center; }
.mk-banner__ic svg, .mk-banner__chev svg { width: 20px; height: 20px; display: block; }
.mk-banner__tx { flex: 1; min-width: 0; }
.mk-banner__tx b { display: block; font-size: 1rem; }
.mk-banner__tx small { display: block; color: #ede9fe; font-size: .84rem; margin-top: 2px; }
.mk-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.mk-cab .dz-h2 { margin: 0; }
.mk .tt-card--tabla > .mk-cab { padding: 18px 18px 8px; }
.mk .tt-card--tabla > .mk-vacio { padding: 4px 18px 18px; }
.mk-top { list-style: none; counter-reset: mk; margin: 6px 0 0; padding: 0; }
.mk-top li { counter-increment: mk; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; padding: 10px 0; border-top: 1px solid #f1f3f9; }
.mk-top li:first-child { border-top: 0; }
.mk-top li::before { content: counter(mk); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: #f5f3ff; color: #7c3aed; font-weight: 700; font-size: .8rem; display: grid; place-items: center; }
.mk-top b { font-size: .9rem; color: #0f172a; font-weight: 600; overflow-wrap: anywhere; }
.mk-top small { color: #64748b; font-size: .8rem; }
.mk-vacio { margin: 0; padding: 6px 0; color: #64748b; font-size: .88rem; }
.mk-apagada { align-items: center; flex-wrap: wrap; }
.mk-apagada > span { flex: 1; min-width: 200px; }
.mk-info { margin: 12px 0 0; }
.mk .pd-info a, .mk .pd-alerta a { color: #6d28d9; font-weight: 600; }
.mk-nota { margin: 10px 0 0; }
.mk-ayuda { margin-top: 6px; }
.mk .tt-btn svg { width: 15px; height: 15px; }
.mk .tt-tabla { width: 100%; }
/* `display:block` le gana a `hidden`: sin esto una imagen que no carga deja el ícono roto. */
.mk-share__img img[hidden] { display: none; }
.mk .dz-img__acts { max-width: 320px; }
.mk .dz-toggle b { display: block; font-weight: 600; color: #0f172a; }
.mk .dz-toggle small { display: block; color: #64748b; font-size: .8rem; font-weight: 400; margin-top: 2px; }

/* ---------- herramienta ---------- */
.mk-estado { display: flex; align-items: center; gap: 14px; }
.mk-estado__tx { flex: 1; min-width: 0; }
.mk-estado__tx b { display: block; font-size: .96rem; color: #0f172a; }
.mk-estado__tx small { display: block; color: #64748b; font-size: .85rem; margin-top: 2px; overflow-wrap: anywhere; }
.mk-estado .tt-chip { margin-left: 0; }
.mk-tabla-wrap { overflow-x: auto; }
.mk-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; background: #f5f3ff; color: #5b21b6; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.mk-no { color: #cbd5e1; }
.mk-pers { display: block; color: #94a3b8; font-size: .72rem; margin-top: 3px; }
.mk-eventos td { vertical-align: top; }
.mk-eventos td > small:not(.mk-pers) { display: block; color: #94a3b8; font-size: .76rem; margin-top: 2px; white-space: normal; }
.mk-eventos td b { font-weight: 600; }
.mk-fila--conv td { background: #faf8ff; }

/* ---------- cookies ---------- */
.mk-reco { font-style: normal; margin-left: 6px; background: #dcfce7; color: #166534; border-radius: 999px; padding: 1px 8px; font-size: .72rem; font-weight: 650; vertical-align: middle; }
.mk-lienzo { background: repeating-linear-gradient(45deg, #f8fafc 0 10px, #f1f5f9 10px 20px); border-radius: 12px; padding: 60px 16px 16px; }
.mk-cartel { background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(15,23,42,.14); padding: 14px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mk-cartel p { flex: 1; min-width: 200px; margin: 0; font-size: .88rem; color: #334155; line-height: 1.5; overflow-wrap: anywhere; }
.mk-cartel u { color: #0f172a; }
.mk-cartel__btns { display: flex; gap: 8px; }
.mk-cartel__btn { background: #0f172a; color: #fff; border-radius: 10px; padding: 8px 16px; font-size: .85rem; font-weight: 600; }
.mk-cartel__btn--ghost { background: #fff; color: #0f172a; border: 1px solid #cbd5e1; }

/* ---------- SEO ---------- */
.mk-google { border: 1px solid #eef0f6; border-radius: 12px; padding: 14px 16px; font-family: Arial, sans-serif; }
.mk-google small { display: block; color: #4d5156; font-size: .8rem; overflow-wrap: anywhere; }
.mk-google b { display: block; color: #1a0dab; font-size: 1.1rem; font-weight: 400; margin: 3px 0; overflow-wrap: anywhere; }
.mk-google p { margin: 0; color: #4d5156; font-size: .86rem; line-height: 1.5; }
.mk-google p.mk-google__falta { font-style: italic; color: #94a3b8; }
.mk-google.off { opacity: .55; }
.mk-enlaces { display: flex; gap: 8px 18px; flex-wrap: wrap; margin-top: 12px; }
.mk-share { display: flex; border: 1px solid #e9ecf5; border-radius: 12px; overflow: hidden; max-width: 520px; margin-bottom: 14px; }
.mk-share__img { width: 150px; flex: 0 0 150px; min-height: 100px; background: #f1f5f9; }
.mk-share__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-share__tx { padding: 10px 14px; min-width: 0; background: #f8fafc; flex: 1; }
.mk-share__tx small { display: block; color: #64748b; font-size: .74rem; text-transform: uppercase; overflow-wrap: anywhere; }
.mk-share__tx b { display: block; color: #0f172a; font-size: .92rem; margin: 2px 0; overflow-wrap: anywhere; }
.mk-share__tx span { display: block; color: #64748b; font-size: .8rem; }
.mk-archivo { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #f1f3f9; }
.mk-archivo:first-of-type { border-top: 0; }
.mk-archivo__tx { flex: 1; min-width: 0; }
.mk-archivo__tx b { display: block; font-size: .9rem; color: #0f172a; }
.mk-archivo__tx small { display: block; color: #64748b; font-size: .82rem; margin-top: 1px; }
.mk-archivo .tt-chip { margin-left: 0; }

/* ---------- eventos ---------- */
.mk-herr { display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap; }
.mk-herr__t { color: #64748b; font-size: .86rem; }
.mk-herr__i { display: inline-flex; align-items: center; gap: 8px; color: #0f172a; font-size: .88rem; font-weight: 600; text-decoration: none; }
.mk-herr__i .tt-chip { margin-left: 0; }
.mk-conv { display: flex; align-items: center; gap: 14px; border-color: #ddd6fe; background: #faf8ff; }
.mk-conv__tx { flex: 1; min-width: 0; }
.mk-conv__tx b { display: block; color: #0f172a; font-size: .96rem; }
.mk-conv__tx small { display: block; color: #64748b; font-size: .84rem; line-height: 1.45; margin-top: 2px; }
.mk-conv__n { text-align: right; }
.mk-conv__n b { display: block; font-size: 1.5rem; color: #6d28d9; }
.mk-conv__n small { color: #94a3b8; font-size: .76rem; }

/* ---------- embudo ---------- */
.mk-embudo { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mk-embudo__cab { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; color: #334155; }
.mk-embudo__cab b { font-weight: 600; }
.mk-embudo__cab span { font-weight: 700; color: #0f172a; }
.mk-embudo__barra { height: 12px; background: #f1f3f9; border-radius: 999px; margin: 5px 0 3px; overflow: hidden; }
.mk-embudo__barra i { display: block; height: 100%; min-width: 2px; border-radius: 999px; background: linear-gradient(90deg, #a78bfa, #7c3aed); }
.mk-embudo small { color: #94a3b8; font-size: .76rem; }
.mk-grafico { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 170px auto; column-gap: 8px; margin-top: 8px; }
.mk-grafico__y { display: flex; flex-direction: column; justify-content: space-between; color: #94a3b8; font-size: .72rem; text-align: right; }
.mk-grafico svg { width: 100%; height: 100%; border-bottom: 1px solid #e9ecf5; overflow: visible; }
.mk-grafico__area { fill: rgba(124,58,237,.1); }
.mk-grafico__linea { fill: none; stroke: #7c3aed; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mk-grafico__x { grid-column: 2; display: flex; justify-content: space-between; color: #94a3b8; font-size: .72rem; margin-top: 4px; }

@media (max-width: 640px) {
  .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-share { flex-direction: column; }
  .mk-share__img { width: 100%; flex: 0 0 140px; }
  .mk-conv { flex-wrap: wrap; }
  .mk-conv__n { text-align: left; }
  .mk-estado { flex-wrap: wrap; }
}

/* =============================================================================
   INTEGRACIONES (prefijo `ig-`) · lista, conectar, configurar, integración activa,
   Google, Meta, otras e historial. Reutiliza tarjetas, estados (`ti-est`),
   datos (`pd-datos`) y avisos de las demás pestañas.
   ============================================================================= */
.ig-resumen { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; margin-bottom: 12px; font-size: .9rem; color: #475569; }
.ig-resumen b { color: #0f172a; }
.ig-resumen__mal { color: #b91c1c; font-weight: 600; text-decoration: none; }
.ig-resumen__mal b { color: #b91c1c; }
.ig-resumen .tt-link { margin-left: auto; }
.ig-lista { padding-top: 6px; padding-bottom: 6px; }
.ig-fila { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-top: 1px solid #f1f3f9; text-decoration: none; color: inherit; }
.ig-fila:first-child { border-top: 0; }
.ig-fila:hover .ig-fila__tx b { color: #6d28d9; }
.ig-fila .ti-est { white-space: nowrap; }
.ig-logo { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; background: #f8fafc; border: 1px solid #eef0f6; display: grid; place-items: center; font-size: 1.3rem; overflow: hidden; }
.ig-logo svg { width: 28px; height: 28px; }
.ig-logo--ic { color: #7c3aed; background: #f5f3ff; }
.ig-logo--ic svg { width: 22px; height: 22px; }
.ig-fila__tx { flex: 1; min-width: 0; }
.ig-fila__tx b { display: block; font-size: .93rem; color: #0f172a; font-weight: 600; }
.ig-fila__tx small { display: block; color: #64748b; font-size: .82rem; margin-top: 1px; }
.ig-chev { color: #cbd5e1; font-size: 1.4rem; }
.ig-grupos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.ig-grupo { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e9ecf5; border-radius: 16px; padding: 14px 16px; text-decoration: none; color: #0f172a; }
.ig-grupo:hover { border-color: #ddd6fe; box-shadow: 0 6px 18px rgba(124,58,237,.08); }
.ig-grupo b { display: block; font-size: .92rem; }
.ig-grupo small { display: block; color: #64748b; font-size: .8rem; }
.ig-nota { margin: 12px 0 0; }
.ig .pd-info a, .ig .pd-alerta a { color: #6d28d9; font-weight: 600; }
.ig-ayuda { margin: 0 0 12px; }
.ig .tt-btn svg { width: 15px; height: 15px; }
/* `.tt-nota` trae margen superior negativo: debajo de botones se montaba sobre ellos. */
.ig .pd-acciones + .tt-nota { margin-top: 12px; }
.ig .ig-nota + .tt-campo { margin-top: 12px; }

/* ---------- conectar ---------- */
.ig-conectar { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.ig-conectar__logo { align-self: center; width: 96px; height: 96px; display: grid; place-items: center; font-size: 3rem; }
.ig-conectar__logo svg { width: 88px; height: 88px; }
.ig-pasos { list-style: none; counter-reset: ig; margin: 4px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ig-pasos li { counter-increment: ig; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; }
.ig-pasos li::before { content: counter(ig); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: #7c3aed; color: #fff; font-weight: 700; font-size: .82rem; display: grid; place-items: center; }
.ig-pasos b { font-size: .9rem; color: #0f172a; }
.ig-pasos small { color: #64748b; font-size: .82rem; line-height: 1.45; }
.ig-seguro { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0 0; text-align: center; color: #94a3b8; font-size: .78rem; }
.ig-seguro svg { width: 14px; height: 14px; flex: 0 0 14px; }

/* ---------- integración activa ---------- */
.ig-hero { display: flex; align-items: center; gap: 16px; }
.ig-hero .ig-logo { width: 64px; height: 64px; flex-basis: 64px; border-radius: 16px; font-size: 2rem; }
.ig-hero .ig-logo svg { width: 44px; height: 44px; }
.ig-hero > div { flex: 1; min-width: 0; }
.ig-hero h1 { margin: 0 0 2px; font-size: 1.4rem; color: #0f172a; }
.ig-hero p { margin: 0; color: #64748b; font-size: .9rem; }
.ig-acciones { padding-top: 4px; padding-bottom: 4px; }
.ig-accion { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 0; border: 0; border-top: 1px solid #f1f3f9; background: none; color: #0f172a; font: inherit; font-size: .92rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.ig-accion:first-child { border-top: 0; }
.ig-accion svg { width: 18px; height: 18px; flex: 0 0 18px; color: #7c3aed; }
.ig-accion span { flex: 1; }
.ig-accion::after { content: "›"; color: #cbd5e1; font-size: 1.3rem; }
.ig-accion:hover span { color: #6d28d9; }
.ig-accion:disabled { opacity: .6; cursor: wait; }
.ig-accion--peligro, .ig-accion--peligro svg, .ig-accion--peligro:hover span { color: #b91c1c; }

/* ---------- configurar ---------- */
.ig-capac { list-style: none; margin: 0; padding: 0; }
.ig-capac li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid #f1f3f9; font-size: .9rem; color: #334155; }
.ig-capac li:first-child { border-top: 0; }
.ig-capac .tt-chip { margin-left: 0; }
.ig-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 12px; }
.ig-numeros div { background: #f8fafc; border-radius: 12px; padding: 10px 12px; }
.ig-numeros b { display: block; font-size: 1.2rem; color: #0f172a; }
.ig-numeros small { color: #64748b; font-size: .78rem; }
.ig-feed { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #f8fafc; border-radius: 10px; padding: 8px 12px; font-size: .84rem; color: #475569; }
.ig-feed code { flex: 1; min-width: 0; overflow-wrap: anywhere; color: #5b21b6; }

/* ---------- Google y Meta ---------- */
.ig-marca { display: grid; place-items: center; margin: 0 0 14px; }
.ig-marca svg { width: 64px; height: 64px; }
.ig-bloque__cab { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ig-bloque__cab > div { flex: 1; min-width: 0; }
.ig-bloque__cab b { display: block; font-size: .96rem; color: #0f172a; }
.ig-bloque__cab small { display: block; color: #64748b; font-size: .84rem; }
.ig-bloque__acts { margin-top: 12px; }
.ig-linea { display: flex; gap: 10px; margin: 6px 0 0; font-size: .86rem; color: #64748b; }
.ig-linea span { min-width: 70px; }
.ig-linea b { color: #0f172a; font-weight: 600; overflow-wrap: anywhere; }
.ig-cat { margin: 18px 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; font-weight: 700; }

/* ---------- historial ---------- */
.ig-hecho { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #f1f3f9; }
.ig-hecho:first-child { border-top: 0; }
.ig-hecho__tx { flex: 1; min-width: 0; }
.ig-hecho__tx b { display: block; font-size: .9rem; color: #0f172a; }
.ig-hecho__tx small { display: block; color: #64748b; font-size: .8rem; overflow-wrap: anywhere; }
.ig-hecho__marca { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800; }
.ig-hecho--sync .ig-hecho__marca, .ig-hecho--conexion .ig-hecho__marca { background: #dcfce7; color: #16a34a; }
.ig-hecho--error .ig-hecho__marca { background: #fee2e2; color: #dc2626; }
.ig-filtro { display: inline-flex; align-items: center; gap: 6px; background: #f1f5f9; border-radius: 999px; padding: 4px 6px 4px 12px; font-size: .8rem; color: #334155; margin: 0 0 10px; }
.ig-filtro a { text-decoration: none; background: #e2e8f0; color: #475569; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; }

@media (max-width: 640px) {
  .ig-grupos { grid-template-columns: minmax(0, 1fr); }
  .ig-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-hero { flex-wrap: wrap; }
  .ig-fila__tx small { display: none; }
  .ig-resumen .tt-link { margin-left: 0; }
}

/* =============================================================================
   DOMINIO Y PUBLICACIÓN (prefijo `dm-`) · resumen, configurar dominio, DNS, SSL,
   vista previa, configuración de publicación y tienda publicada. Reutiliza tarjetas,
   estados (`ti-est`), opciones (`pd-opcion`), datos (`pd-datos`) y acciones (`ig-accion`).
   ============================================================================= */
.dm .tt-btn svg { width: 15px; height: 15px; }
.dm .pd-info a, .dm .pd-alerta a { color: #6d28d9; font-weight: 600; }
.dm-nota { margin: 12px 0 0; }
.dm-ayuda { margin: 4px 0 8px; }
.dm-ancho { width: 100%; }
.dm-estado { display: flex; gap: 16px; align-items: flex-start; }
.dm-estado__ic { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 14px; background: #eff6ff; color: #2563eb; display: grid; place-items: center; }
.dm-estado__ic svg { width: 28px; height: 28px; }
.dm-estado .dz-h2 { margin: 0 0 6px; }
.dm-estado p { margin: 8px 0 0; color: #64748b; font-size: .88rem; }
.dm-filas { padding-top: 4px; padding-bottom: 4px; }
.dm-fila { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-top: 1px solid #f1f3f9; text-decoration: none; color: inherit; }
.dm-fila:first-child { border-top: 0; }
.dm-fila:hover b { color: #6d28d9; }
.dm-fila .ti-est { white-space: nowrap; }
.dm-ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; background: #f5f3ff; color: #7c3aed; display: grid; place-items: center; }
.dm-ic svg { width: 20px; height: 20px; }
.dm-fila__tx { flex: 1; min-width: 0; }
.dm-fila__tx b { display: block; font-size: .93rem; color: #0f172a; font-weight: 600; }
.dm-fila__tx small { display: block; color: #64748b; font-size: .82rem; margin-top: 1px; overflow-wrap: anywhere; }
.dm-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ---------- configurar ---------- */
.dm-slug { display: flex; align-items: stretch; border: 1px solid #e3e7f2; border-radius: 10px; overflow: hidden; background: #fff; }
.tt-campo .dm-slug input { border: 0; border-radius: 0; flex: 1; min-width: 0; }
.dm-slug em { font-style: normal; padding: 0 12px; color: #64748b; font-size: .86rem; white-space: nowrap; background: #f8fafc; display: flex; align-items: center; border-left: 1px solid #e3e7f2; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.dm-dir { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #f1f3f9; flex-wrap: wrap; }
.dm-dir:first-of-type { border-top: 0; }
.dm-dir__tx { flex: 1; min-width: 180px; }
.dm-dir__tx b { display: block; font-size: .92rem; color: #0f172a; font-weight: 600; overflow-wrap: anywhere; }
.dm-dir__tx small { display: block; color: #64748b; font-size: .82rem; margin-top: 1px; }
.dm-dir .ti-est { white-space: nowrap; }
.dm-dir__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.dm-dir__acts .tt-btn { padding: 6px 12px; font-size: .82rem; }
.dm-principal { margin-left: 6px; vertical-align: middle; }

/* ---------- DNS ---------- */
.dm-registro { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; margin: 10px 0 8px; }
.dm-registro dt { color: #64748b; font-size: .86rem; }
.dm-registro dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem; background: #f8fafc; border: 1px solid #eef0f6; border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; color: #0f172a; }
.dm-copiar { border: 1px solid #e3e7f2; background: #fff; border-radius: 8px; width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; color: #7c3aed; cursor: pointer; }
.dm-copiar:hover { background: #f5f3ff; }
.dm-copiar svg { width: 16px; height: 16px; }

/* ---------- SSL ---------- */
.dm-ssl { display: flex; align-items: center; gap: 14px; }
.dm-ssl--ok { background: #f0fdf4; border-color: #bbf7d0; }
.dm-ssl--pend { background: #fffbeb; border-color: #fde68a; }
.dm-ssl__ic { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 14px; background: #16a34a; color: #fff; display: grid; place-items: center; }
.dm-ssl--pend .dm-ssl__ic { background: #f59e0b; }
.dm-ssl--err { background: #fef2f2; border-color: #fecaca; }
.dm-ssl--err .dm-ssl__ic { background: #dc2626; }
.dm-ssl__ic svg { width: 26px; height: 26px; }
.dm-ssl b { display: block; font-size: 1.02rem; color: #0f172a; }
.dm-ssl small { display: block; color: #475569; font-size: .86rem; margin-top: 2px; overflow-wrap: anywhere; }
.dm-beneficios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dm-beneficios li { display: flex; gap: 10px; align-items: center; font-size: .9rem; color: #334155; }
.dm-beneficios svg { width: 18px; height: 18px; color: #16a34a; flex: 0 0 18px; }
.dm-detalles summary { cursor: pointer; font-weight: 600; color: #6d28d9; list-style: none; }
.dm-detalles summary::-webkit-details-marker { display: none; }
.dm-detalles[open] summary { margin-bottom: 12px; }
.dm-detalles h3 { margin: 14px 0 6px; font-size: .9rem; color: #0f172a; overflow-wrap: anywhere; }

/* ---------- vista previa ---------- */
.dm-navegador { background: #fff; border: 1px solid #e3e7f2; border-radius: 14px; overflow: hidden; margin: 0 auto; box-shadow: 0 10px 30px rgba(15,23,42,.08); }
.dm-navegador--celular { max-width: 400px; }
.dm-navegador__barra { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #f8fafc; border-bottom: 1px solid #eef0f6; }
.dm-navegador__barra i { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: #e2e8f0; }
.dm-navegador__barra i:nth-child(1) { background: #f87171; }
.dm-navegador__barra i:nth-child(2) { background: #fbbf24; }
.dm-navegador__barra i:nth-child(3) { background: #34d399; }
.dm-navegador__barra span { flex: 1; min-width: 0; margin-left: 8px; display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #eef0f6; border-radius: 999px; padding: 4px 12px; font-size: .8rem; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-navegador__barra svg { width: 13px; height: 13px; flex: 0 0 13px; color: #16a34a; }
.dm-navegador iframe { display: block; width: 100%; height: 640px; border: 0; background: #fff; }
.dm-navegador--celular iframe { height: 700px; }

/* ---------- configuración de publicación ---------- */
.dm-opciones { padding-top: 6px; padding-bottom: 10px; }
.dz-toggle.dm-toggle, a.dm-toggle { display: flex; align-items: center; gap: 12px; padding: 12px 0; margin: 0; border-top: 1px solid #f1f3f9; text-decoration: none; color: inherit; }
.dm-opciones > .dm-toggle:first-child { border-top: 0; }
.dm-toggle > span:nth-child(2) { flex: 1; min-width: 0; }
.dm-toggle b { display: block; font-weight: 600; color: #0f172a; font-size: .92rem; }
.dm-toggle small { display: block; color: #64748b; font-size: .8rem; font-weight: 400; margin-top: 2px; }
.dm-toggle__ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: #f5f3ff; color: #7c3aed; display: grid; place-items: center; }
.dm-toggle__ic svg { width: 17px; height: 17px; }
a.dm-link:hover b { color: #6d28d9; }
.dm-versiones { list-style: none; margin: 6px 0 0; padding: 0; }
.dm-versiones li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #f1f3f9; font-size: .88rem; color: #475569; }
.dm-versiones li:first-child { border-top: 0; }
.dm-versiones li > span:first-child { flex: 1; min-width: 0; }
.dm-versiones b { color: #0f172a; font-weight: 600; }

/* ---------- tienda publicada ---------- */
.dm-publicada { text-align: center; padding: 28px 20px; }
.dm-publicada__ic { width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 50%; background: #f5f3ff; color: #7c3aed; display: grid; place-items: center; }
.dm-publicada__ic svg { width: 36px; height: 36px; }
.dm-publicada h2 { margin: 0 0 4px; font-size: 1.2rem; color: #166534; }
.dm-publicada p { margin: 0 0 14px; color: #64748b; font-size: .9rem; }
.dm-url { display: flex; align-items: center; gap: 10px; max-width: 540px; margin: 0 auto; border: 1px solid #e3e7f2; border-radius: 12px; padding: 6px 6px 6px 14px; background: #f8fafc; }
.dm-url > svg { width: 16px; height: 16px; flex: 0 0 16px; color: #16a34a; }
.dm-url code { flex: 1; min-width: 0; text-align: left; overflow-wrap: anywhere; color: #0f172a; font-size: .9rem; }
.dm .pd-info > svg { width: 18px; height: 18px; flex: 0 0 18px; }

@media (max-width: 640px) {
  .dm-estado { flex-wrap: wrap; }
  .dm-registro { grid-template-columns: minmax(0, 1fr) auto; }
  .dm-registro dt { grid-column: 1 / -1; margin-top: 4px; }
  .dm-navegador iframe { height: 520px; }
  .dm-fila__tx small { display: none; }
  .dm-dir__acts { width: 100%; }
}

/* Subir imagen (logo, banners, bloques) --------------------------------------- */
.sub-img { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.sub-img.is-subiendo { opacity: .6; cursor: progress; }
.sub-img__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.sub-img__input:disabled { cursor: progress; }
.sub-img__link { align-self: flex-start; border: 0; background: none; padding: 0; color: #7c3aed; font-size: .8rem; cursor: pointer; text-decoration: underline; }
.sub-img__error { color: #b91c1c !important; font-size: .78rem; }
.ck-logo__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.ck-logo__tx .sub-img__link { display: block; margin-bottom: 4px; }

/* Solo lectura: un <fieldset disabled> alrededor de un formulario viejo deshabilita
   todos sus campos de una vez. `display: contents` lo saca del dibujo, así la grilla
   o el flex del contenedor siguen viendo a los campos como hijos directos. */
fieldset.tt-lectura { display: contents; border: 0; padding: 0; margin: 0; min-width: 0; }

/* Pedidos · avisos por correo al cliente */
.pd-avisos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.pd-avisos li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid #eef0f6; }
.pd-avisos li:first-child { border-top: 0; }
.pd-avisos b { display: block; font-size: .92rem; color: #0f172a; }
.pd-avisos small { display: block; color: #64748b; font-size: .8rem; overflow-wrap: anywhere; }
.dm-sub { margin-top: 18px; }

/* =====================================================================
   Productos (catálogo propio de la tienda) · prefijo prd-
   ===================================================================== */
.prd .tt-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.prd .tt-head h1 { font-size: 1.65rem; margin: 0 0 4px; }
.prd .tt-card { margin-bottom: 16px; }
.prd-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.prd-acts--centro { justify-content: center; }
.prd-pills { margin-bottom: 14px; }
.prd-barra { align-items: stretch; }
.prd-select { border: 1px solid #e3e7f2; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: .88rem; background: #fff; color: #334155; max-width: 100%; }
.prd-cargando { opacity: .6; transition: opacity .15s; }

/* Listado */
.prd-tabla td { white-space: nowrap; }
.prd-prod { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 240px; }
.prd-prod__tx { min-width: 0; white-space: normal; }
.prd-prod__tx b { max-width: 380px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.prd-prod__tx small { display: flex !important; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.prd-mini { position: relative; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; background: #f1f3f9; color: #cbd5e1; display: grid; place-items: center; overflow: hidden; }
.prd-mini svg { width: 20px; height: 20px; }
.prd-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.prd-ml { background: #fef9c3; color: #854d0e; border-radius: 999px; padding: 1px 8px; font-size: .72rem; font-weight: 700; }
.prd-sin { color: #dc2626; font-weight: 700; font-size: .84rem; }
.prd-puntos { display: inline-grid; place-items: center; min-width: 20px; color: #94a3b8; }
.prd-tabla .ck-menu > div { min-width: 190px; }

/* Formulario */
.prd-col { min-width: 0; }
.prd-form .tt-card { margin-bottom: 16px; }
.prd-form .ck-lado > .tt-card { margin-bottom: 0; }
.prd .tt-campo > span.pm-valor { display: flex; margin-bottom: 0; font-weight: 400; color: inherit; font-size: inherit; }
.prd-pista { margin: 0 0 12px; color: #64748b; font-size: .85rem; }
.prd-pista--caja { margin: 0; padding: 10px 12px; border: 1px dashed #e3e7f2; border-radius: 10px; background: #f8fafc; }
.prd-guardar { display: flex; flex-direction: column; gap: 8px; }

.prd-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.prd-foto { position: relative; aspect-ratio: 1 / 1; border: 1px solid #e9ecf5; border-radius: 12px; overflow: hidden; background: #f8fafc; }
.prd-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prd-foto--principal { border: 2px solid #7c3aed; }
.prd-foto__tag { position: absolute; top: 6px; left: 6px; background: #7c3aed; color: #fff; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.prd-foto__acts { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 4px; padding: 6px; background: linear-gradient(transparent, rgba(15,23,42,.55)); }
.prd-foto__acts button { width: 28px; height: 28px; border: 0; border-radius: 8px; background: rgba(255,255,255,.92); color: #334155; cursor: pointer; font-size: .85rem; }
.prd-foto__acts button:disabled { opacity: .4; cursor: not-allowed; }
.prd-foto__acts button.peligro { color: #b91c1c; }
.prd-foto--subir { display: grid; place-items: center; border-style: dashed; background: #fff; }
.prd-subir { width: calc(100% - 16px); height: calc(100% - 16px); border-style: dashed; }

.prd-opciones { margin: 8px 0 14px; }
.prd-opcion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 0 12px; align-items: end; }
.prd-opcion__quitar { margin-bottom: 14px; height: 40px; }
.prd-fila-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.prd-scroll { overflow-x: auto; border: 1px solid #e9ecf5; border-radius: 12px; margin-bottom: 6px; }
.prd-var { width: 100%; min-width: 560px; border-collapse: collapse; }
.prd-var th { text-align: left; padding: 9px 10px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; background: #fafbff; border-bottom: 1px solid #eef0f6; }
.prd-var td { padding: 6px 8px; border-bottom: 1px solid #f4f6fb; }
.prd-var tr:last-child td { border-bottom: 0; }
.prd-var input, .prd-ficha input { width: 100%; min-width: 0; border: 1px solid #e3e7f2; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: .88rem; background: #fff; }
.prd-var td:nth-child(4) input { max-width: 110px; }
.prd-quitar { border: 0; background: none; color: #b91c1c; cursor: pointer; width: 30px; height: 30px; border-radius: 8px; }
.prd-quitar:hover { background: #fef2f2; }
.prd-mas { margin-top: 8px; }
.prd-ficha { display: grid; gap: 8px; }
.prd-ficha__fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 30px; gap: 8px; align-items: center; }

/* Importar desde Mercado Libre */
.prd-imp-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; margin-bottom: 14px; }
.prd-imp-barra .tt-check { margin: 0; }
.prd-progreso { margin: 0 0 14px; font-size: .88rem; color: #334155; }
.prd-progreso__barra { height: 8px; border-radius: 999px; background: #ede9fe; overflow: hidden; margin-top: 6px; }
.prd-progreso__barra i { display: block; height: 100%; background: #7c3aed; transition: width .3s; }
.prd-tabla--ml td:first-child { width: 36px; }
.prd-tabla--ml input[type=checkbox] { width: 17px; height: 17px; accent-color: #7c3aed; }
.prd-ya td { background: #fafafa; color: #94a3b8; }
.prd-ya__chip { background: #dcfce7; color: #166534; border-radius: 999px; padding: 1px 8px; font-size: .72rem; font-weight: 700; }
.prd-resumen ul { margin: 8px 0 0; padding-left: 18px; font-size: .86rem; color: #475569; max-height: 220px; overflow-y: auto; }
.prd-resumen__grupo { border: 1px solid #e9ecf5; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.prd-resumen__grupo > summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: #334155; }
.prd-resumen__grupo--mal { border-color: #fecaca; background: #fef2f2; }
.prd-resumen__grupo--aviso { border-color: #fde68a; background: #fffbeb; }
.prd-resumen .prd-acts { margin-top: 12px; }

@media (max-width: 700px) {
  .prd .tt-head h1 { font-size: 1.4rem; }
  .prd-acts .tt-btn { flex: 1 1 100%; }
  .prd-barra .pm-busca { min-width: 0; flex: 1 1 100%; }
  .prd-select { flex: 1 1 100%; }
  .prd-opcion { grid-template-columns: minmax(0, 1fr); }
  .prd-opcion__quitar { justify-self: start; }
  .prd-fotos { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .prd-imp-barra .tt-btn { width: 100%; }
  .prd-prod { min-width: 200px; }
}