/* ══════════════════════════════════════════════════════════════
   FASE 11 — Report & Run + Bitácora
   Hero premium editable desde MASTER, filtros, tarjetas tonales
   (sin box-shadow, según Design System v1.3 sección 3.4)
   ══════════════════════════════════════════════════════════════ */

/* ── Hero compartido (misma estructura para ambos módulos) ── */
.rr-hero, .bit-hero, .vt-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  padding: 34px 26px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: #0C2D48 var(--rr-hero, none) center/cover no-repeat;
}
.bit-hero { background-image: var(--bit-hero, none); }
.vt-hero { background-image: var(--vt-hero, none); }
.rr-hero::before, .bit-hero::before, .vt-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(12,45,72,.92) 0%, rgba(14,116,144,.82) 100%);
}
.rr-hero-inner, .bit-hero-inner { position: relative; z-index: 1; max-width: 560px; }
.rr-hero-eyebrow, .bit-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.14); color: #E8F1F8;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 99px; margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,.2);
}
.rr-hero-eyebrow svg, .bit-hero-eyebrow svg { width: 12px; height: 12px; }
.rr-hero h1, .bit-hero h1 { font-size: 24px; font-weight: 800; color: #fff; margin: 0 0 6px; letter-spacing: -.01em; }
.rr-hero p, .bit-hero p { font-size: 13px; color: #C7D9E8; margin: 0; line-height: 1.5; font-weight: 600; }
.rr-hero-cta, .bit-hero-cta { position: relative; z-index: 1; flex: none; }

/* ── Filtros premium tipo pill (reemplaza los <select> planos "de web vieja") ── */
.m11-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.m11-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface1); border: 1.5px solid var(--border); border-radius: 99px;
  padding: 10px 16px; flex: 1; min-width: 200px;
}
.m11-search svg { width: 16px; height: 16px; color: var(--text-2); flex: none; }
.m11-search input { border: none; background: none; outline: none; flex: 1; font-size: 13px; font-weight: 600; color: var(--text); font-family: var(--font); }
.m11-pill-select { position: relative; }
.m11-pill-select select {
  appearance: none; -webkit-appearance: none;
  background: var(--surface1); border: 1.5px solid var(--border); border-radius: 99px;
  padding: 10px 30px 10px 16px; font-size: 12.5px; font-weight: 700; color: var(--text);
  font-family: var(--font); cursor: pointer;
}
.m11-pill-select::after {
  content: ''; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px;
  border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.m11-date {
  background: var(--surface1); border: 1.5px solid var(--border); border-radius: 99px;
  padding: 9px 14px; font-size: 12.5px; font-weight: 700; color: var(--text); font-family: var(--font);
}
.m11-tag {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 99px;
  font-size: 10.5px; font-weight: 800; background: var(--accent-soft, #CFFAFE); color: var(--accent); margin-right: 6px;
}
.m11-tag-zona { background: #EDE9FE; color: #7C3AED; }

/* ── Modal premium multi-step (Report&Run item, Visita Técnica, Bitácora) ── */
.m11-wizard { min-width: 0; }
.m11-wizard-steps { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.m11-wizard-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background .15s, transform .15s; }
.m11-wizard-dot.active { background: var(--accent); transform: scale(1.25); }
.m11-wizard-step h2 { font-size: 16px; font-weight: 800; color: var(--text); margin: 0 0 16px; }
.m11-wizard-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.m11-wizard-nav .btn-primary { flex: 1 1 100%; order: -1; }
.m11-wizard-nav .btn-ghost { flex: 1; visibility: visible; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m11-wizard-summary { display: flex; flex-direction: column; gap: 10px; }
.m11-summary-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
  font-size: 12.5px; color: var(--text-2);
}
.m11-summary-row strong { color: var(--text); font-size: 13px; }

/* ── Grid de tarjetas Report & Run — mismo patrón que .proj-grid-v2/.pj-card
   de Proyectos (módulo de referencia sin rayado) ── */
.rr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}
.rr-card {
  background: var(--surface1); border: 1px solid var(--border); border-radius: 14px; padding: 16px;
  isolation: isolate; width: 100%; box-sizing: border-box;
}
.rr-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rr-card-count { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--text-2); }
.rr-card-count svg { width: 13px; height: 13px; }
.rr-card-title { font-size: 14.5px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.rr-card-sub { font-size: 12px; color: var(--text-2); margin-bottom: 12px; }
.rr-card-actions { display: flex; gap: 6px; }

/* ── Ítems dentro del editor ── */
.rr-item { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; }
.rr-item-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.rr-item-thumb-empty { display: flex; align-items: center; justify-content: center; background: var(--surface2); color: var(--text-2); }
.rr-item-thumb-empty svg { width: 18px; height: 18px; }

/* ══ BITÁCORA ══ */
.bit-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.bit-stat-card { background: var(--surface1); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.bit-stat-lbl { font-size: 10.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.bit-stat-val { font-size: 19px; font-weight: 800; color: var(--text); }
.bit-stat-sub { font-size: 10.5px; color: var(--text-2); margin-top: 2px; }

.bit-list { display: flex; flex-direction: column; gap: 10px; }
.bit-row { background: var(--surface1); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bit-row-main { flex: 1; min-width: 180px; }
.bit-row-name { font-size: 14px; font-weight: 800; color: var(--text); }
.bit-row-meta { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.bit-row-value { font-size: 15px; font-weight: 800; color: var(--text); }
.bit-row-actions { display: flex; gap: 6px; align-items: center; }
.bit-paid-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 99px; font-size: 11px; font-weight: 800; cursor: pointer; border: 1.5px solid transparent;
}
.bit-paid-toggle.is-paid { background: #DCFCE7; color: #166534; }
.bit-paid-toggle.is-pending { background: #FEF9C3; color: #854D0E; }

@media (max-width: 640px) {
  .rr-hero, .bit-hero { flex-direction: column; align-items: flex-start; padding: 24px 18px; }
  .rr-hero-cta, .bit-hero-cta { width: 100%; justify-content: center; display: flex; }
  /* Antes: grid-template-columns:1fr (seguía siendo CSS Grid). Se cambia a
     flexbox — mismo resultado visual (una columna), motor de layout/pintado
     distinto. Todas las listas del app que nunca han tenido rayado
     (Propuestas, Clientes, Pagos) usan flex en móvil, no grid. */
  .rr-grid { display: flex; flex-direction: column; }
}

/* ── Overlay de anotación a mano alzada sobre fotos (Report & Run) ── */
.m11-annot-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(12,45,72,.72);
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
}
.m11-annot-box {
  background: var(--surface1); border-radius: 16px; padding: 10px;
  max-width: 480px; width: 100%; max-height: 98vh; overflow-y: auto;
  text-align: center; display: flex; flex-direction: column;
}
#anCanvas { display: block; margin: 6px auto; flex: 1; min-height: 0; object-fit: contain; }
@media (max-width: 480px) {
  .m11-annot-overlay { padding: 0; }
  .m11-annot-box { max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: 8px; }
}
.m11-annot-tools { margin-bottom: 6px; }
.m11-annot-toolrow, .m11-annot-colorrow { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 6px; }
.m11-annot-tool {
  width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface2);
  color: var(--text-2); cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent;
}
.m11-annot-tool:focus { outline: none; }
.m11-annot-tool svg { width: 15px; height: 15px; }
.m11-annot-tool.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.m11-annot-tool.m11-annot-tool-wide { width: auto; min-width: 76px; padding: 0 12px; gap: 6px; }
.m11-annot-tool-wide span { font-size: 11px; font-weight: 700; white-space: nowrap; color: inherit; }
.m11-annot-sep { width: 1px; height: 22px; background: var(--border); flex: none; }
.m11-annot-actionrow { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.m11-annot-action {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface2);
  color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
}
.m11-annot-action svg { width: 15px; height: 15px; flex: none; }
.m11-annot-action:active { background: var(--surface1); }
.m11-annot-color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; flex: none; }
.m11-annot-color.active { border-color: var(--text); transform: scale(1.15); }
@media (max-width: 400px) {
  .m11-annot-toolrow { flex-wrap: wrap; justify-content: center; }
}


.m11-item-form {
  background: var(--surface2); border: 1.5px solid var(--border); border-radius: 14px; padding: 14px;
}
.m11-icon-purple { color: #7C3AED !important; }
.m11-week-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 4px 6px; display: flex; align-items: center; }
.m11-week-card.m11-week-card-mobile { width: 100%; justify-content: center; padding: 6px 10px; margin-bottom: 10px; }
.m11-week-nav { display: flex; align-items: center; gap: 6px; }
.m11-week-btn {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface1);
  color: var(--text); font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.m11-week-label { font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; min-width: 90px; text-align: center; }
.m11-week-nav-mobile { justify-content: center; }
.m11-item-form-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.m11-item-form-title { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .03em; }
.m11-item-form-title svg { width: 14px; height: 14px; }
.m11-urgent-inline { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text); cursor: pointer; white-space: nowrap; }
.m11-urgent-inline input { width: 16px; height: 16px; flex: none; accent-color: #DC2626; }
.m11-thin-input { padding: 10px 12px !important; font-size: 13px !important; font-weight: 600 !important; height: auto; }
.m11-mic-btn {
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none;
  border-radius: 50%; border: 1.5px solid var(--border); background: var(--surface1); color: var(--text-2);
  cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent;
}
.m11-mic-btn svg { width: 13px; height: 13px; }
.m11-mic-btn.m11-mic-active { background: #DC2626; border-color: #DC2626; color: #fff; animation: pulse 1s ease-in-out infinite; }

/* Tarjetas de foto con comentario individual (antes solo miniatura suelta) */
.m11-photo-gallery { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.m11-photo-card-wrap { position: relative; display: flex; gap: 10px; align-items: center; background: var(--surface1); border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
.m11-photo-card-img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex: none; }
.m11-photo-card-body { flex: 1; display: flex; gap: 6px; align-items: center; min-width: 0; }
.m11-photo-card-body input { flex: 1; min-width: 0; }
.m11-photo-thumb-del {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: #DC2626; color: #fff; border: 2px solid var(--surface1); display: grid; place-items: center;
  cursor: pointer; padding: 0; font-size: 12px; line-height: 1;
}
.m11-photo-thumb-del svg { width: 10px; height: 10px; }

/* Fila de acciones del ítem: SIEMPRE 2 filas fijas (foto/galería arriba, agregar/cancelar abajo)
   — nunca depende de si el ancho alcanza, así nunca se desborda en desktop ni en móvil. */
.m11-item-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.m11-item-actions #rrItAdd,
.m11-item-actions #rrItCancelEdit { grid-column: 1 / -1; justify-content: center; }
#rrItAdd { background: var(--surface2); color: var(--text-2); border: 1.5px solid var(--border); cursor: not-allowed; opacity: .7; }
#rrItAdd.m11-btn-ready { background: #DCFCE7; color: #166534; border-color: #86EFAC; cursor: pointer; opacity: 1; }
#rrItAdd.m11-btn-editing.m11-btn-ready { background: #0E7490; color: #fff; border-color: #0E7490; }

/* Miniaturas de fotos en la tarjeta del ítem (varias, con "+N") */
.rr-item-thumbs { display: flex; flex: none; }
.rr-item-thumbs .rr-item-thumb { width: 40px; height: 48px; margin-left: -14px; border: 2px solid var(--surface1); }
.rr-item-thumbs .rr-item-thumb:first-child { margin-left: 0; }
.rr-item-thumb-more {
  width: 40px; height: 48px; margin-left: -14px; border-radius: 8px; border: 2px solid var(--surface1);
  background: var(--surface2); color: var(--text-2); font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex: none;
}

/* ── Ítem urgente: tarjeta roja transparente ── */
.rr-item-urgent { background: rgba(220,38,38,.07); border-color: rgba(220,38,38,.35); }

/* ── Preview con fotos reales (no lista plana) ── */
.m11-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.m11-preview-card { background: var(--surface1); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.m11-preview-card img { width: 100%; height: 110px; object-fit: cover; display: block; }
.m11-preview-noimg { width: 100%; height: 110px; display: flex; align-items: center; justify-content: center; background: var(--surface2); color: var(--text-2); }
.m11-preview-noimg svg { width: 24px; height: 24px; }
.m11-preview-body { padding: 8px 10px; }

/* Los modales wizard de estos 3 módulos quedan centrados también en móvil
   (el resto del app usa bottom-sheet a propósito; esto es una excepción
   pedida explícitamente solo para estos wizard). */
@media (max-width: 480px) {
  .modal-backdrop:has(.m11-wizard) { align-items: center !important; padding: 12px !important; }
  .modal-backdrop:has(.m11-wizard) .modal { border-radius: 16px !important; max-height: 92dvh !important; }
}

/* ── Paginador de Report & Run — una sola pastilla tonal centrada, NO usa
   .btn-ghost (mobile.css le agranda el padding a 11px/18px a TODOS los
   .btn-ghost y se ve pesado/tosco). Compacto, centrado, sin espacios
   vacíos flotando. ── */
.rr-pager {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px 14px;
  background: var(--surface2); border-radius: 12px;
  padding: 10px 16px; margin-top: 10px;
}
.rr-pager-count { font-size: 12px; color: var(--text-2); font-weight: 600; }
.rr-pager-nav { display: flex; align-items: center; gap: 4px; flex: none; }
.rr-pager-btn {
  background: none; border: none; padding: 6px 8px; margin: 0;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--accent); cursor: pointer; border-radius: 8px;
}
.rr-pager-btn:disabled { color: var(--text-2); opacity: .4; cursor: default; }
.rr-pager-sep { color: var(--border); font-size: 12px; }

/* ── Fila buscador + botón de fecha, en móvil ──
   Se usa una clase dedicada (en vez de estilo inline) porque .show-mobile
   trae display:block!important en el CSS global — un estilo inline nunca
   puede ganarle a un !important externo. Con dos clases (.show-mobile
   .rr-search-row) la especificidad sí gana. */
@media (max-width: 980px) {
  .show-mobile.rr-search-row { display: flex !important; gap: 8px; align-items: center; margin-top: 8px; margin-bottom: 12px; }
}

/* ── Botón "Fecha" — mismo alto que el buscador, icono + texto ── */
.rr-date-btn {
  display: flex; align-items: center; gap: 6px; flex: none;
  height: 48px; padding: 0 14px; border-radius: 12px;
  background: var(--surface1); border: 1px solid var(--border);
  color: var(--text-2); font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.rr-date-btn svg { width: 15px; height: 15px; flex: none; }
.rr-date-btn.active { color: var(--accent); border-color: var(--accent); background: var(--info-soft); }
@media (min-width: 981px) { .rr-date-btn { height: 38px; } }

/* ── Calendario propio (selector de día) — reemplaza cualquier <input
   type="date"> o <select> nativo, que se ven como picker del sistema
   operativo y no como parte del app. ── */
@keyframes rrCalFade { from { opacity: 0; } to { opacity: 1; } }
.rr-cal-menu { padding: 16px; width: 280px; max-width: 100%; box-sizing: border-box; animation: rrCalFade .12s ease; }
.rr-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 14px; font-weight: 800; color: var(--text); }
.rr-cal-nav { background: var(--surface2); border: none; width: 30px; height: 30px; border-radius: 8px; font-size: 16px; color: var(--text-2); cursor: pointer; flex: none; }
.rr-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 8px; }
.rr-cal-dow span { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-2); }
.rr-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 3px; }
.rr-cal-day { background: none; border: none; height: 34px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; font-family: inherit; }
.rr-cal-day:hover { background: var(--surface2); }
.rr-cal-day.active { background: var(--accent); color: #fff; font-weight: 800; }
.rr-cal-day.empty { cursor: default; }
.rr-cal-clear { width: 100%; margin-top: 16px; padding: 11px; border-radius: 10px; background: var(--surface2); border: none; color: var(--accent); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }

/* ══════════════════════════════════════════════════════════════
   VISITA TÉCNICA
   El hub (hero/resumen/secciones) se mueve a estilos inline dentro
   de visita_tecnica.js — más abajo solo queda lo que sí necesita
   vivir en CSS global: el toggle activo y el reset del badge-botón.
   ══════════════════════════════════════════════════════════════ */
/* ── Toggle activo genérico para botones de estado en wizards (permiso de programar) ── */
.btn-ghost.active {
  background: linear-gradient(150deg, var(--accent-hover), var(--accent)) !important;
  color: #fff !important; border-color: transparent !important;
}

/* Badge de cobro convertido en botón (permite corregir el estado después,
   no solo al crear la visita) — reset mínimo para que no se vea a botón nativo. */
button.badge { font-family: inherit; cursor: pointer; }

/* ── Tarjetas de sección del hub de Visita Técnica (tono suave, sin borde
   de color) — valores fijos idénticos a los que ya usan los badges reales
   de la app (.badge-premium, .badge-success, etc.), en vez de las variables
   --premium-soft/--success-soft/etc., porque esas variables no se estaban
   resolviendo bien en dark en este ambiente (la tarjeta se veía lavanda
   brillante en vez del tono oscuro esperado). ── */
.vt-sec-card.tone-purple{background:#EDE9FE}
.vt-sec-card.tone-amber{background:#FEF9C3}
.vt-sec-card.tone-green{background:#DCFCE7}
.vt-sec-card.tone-accent{background:#CFFAFE}
.vt-sec-card.tone-slate{background:#E2E8F0}
.tone-purple-ic{color:#7C3AED}
.tone-amber-ic{color:#CA8A04}
.tone-green-ic{color:#16A34A}
.tone-accent-ic{color:var(--accent)}
.tone-slate-ic{color:#475569}

[data-theme="dark"] .vt-sec-card.tone-purple{background:#37405F}
[data-theme="dark"] .vt-sec-card.tone-amber{background:#414340}
[data-theme="dark"] .vt-sec-card.tone-green{background:#25494B}
[data-theme="dark"] .vt-sec-card.tone-accent{background:#274A57}
[data-theme="dark"] .vt-sec-card.tone-slate{background:#38475A}
[data-theme="dark"] .tone-purple-ic{color:#C4B5FD}
[data-theme="dark"] .tone-amber-ic{color:#FCD34D}
[data-theme="dark"] .tone-green-ic{color:#4ADE80}
[data-theme="dark"] .tone-accent-ic{color:var(--accent)}
[data-theme="dark"] .tone-slate-ic{color:#94A3B8}

/* v2: 2 tonos nuevos para completar las 6 tarjetas de sección del hub
   de VT (Clientes, Ganancias) — mismo patrón fijo por selector de tema
   que los 5 anteriores, nunca dependen de una variable -soft. */
.vt-sec-card.tone-rose{background:#FCE7F0}
.vt-sec-card.tone-blue{background:#DBEAFE}
.tone-rose-ic{color:#BE185D}
.tone-blue-ic{color:#0369A1}
[data-theme="dark"] .vt-sec-card.tone-rose{background:#4A2A3A}
[data-theme="dark"] .vt-sec-card.tone-blue{background:#1E3A54}
[data-theme="dark"] .tone-rose-ic{color:#FBCFE8}
[data-theme="dark"] .tone-blue-ic{color:#7DD3FC}

/* v2: tarjeta de sección del hub VT — reemplaza los <div> pastel con
   hex fijo (se veían blancos/lavados en dark) por el sistema tone-*
   de arriba, que sí tiene su propio valor por tema. También agrega el
   CTA "Ingresar ›" que faltaba y evita que la grilla se estire de más
   en pantallas anchas. */
#vtSecGrid{max-width:640px}
.vt-sec-card-v2{
  text-align:left;font-family:inherit;cursor:pointer;border:none;border-radius:14px;
  padding:14px;display:flex;flex-direction:column;gap:8px;min-height:96px;
}
.vt-sec-card-v2 .vt-sec-card-v2-ic{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center}
[data-theme="dark"] .vt-sec-card-v2 .vt-sec-card-v2-ic{background:rgba(0,0,0,.18)}
.vt-sec-card-v2 .vt-sec-card-v2-title{font-size:13.5px;font-weight:800}
.vt-sec-card-v2 .vt-sec-card-v2-cta{font-size:11.5px;font-weight:700;margin-top:auto;color:var(--text-2);opacity:.85}
@media (hover:hover){ .vt-sec-card-v2:hover{filter:brightness(0.97)} }

/* FIX real: las reglas de color de arriba (.vt-sec-card.tone-X) usan la
   clase "vt-sec-card", pero el markup de VT usa "vt-sec-card-v2" — por
   eso las 6 tarjetas de sección salían todas del mismo gris genérico
   tanto en light como en dark (el navegador nunca encontraba selector
   que calzara). Estas reglas SÍ apuntan a la clase real. No se tocan
   las de arriba por si algún otro módulo ya depende de "vt-sec-card". */
.vt-sec-card-v2.tone-green{background:#DCFCE7}
.vt-sec-card-v2.tone-amber{background:#FEF9C3}
.vt-sec-card-v2.tone-rose{background:#FCE7F0}
.vt-sec-card-v2.tone-purple{background:#EDE9FE}
.vt-sec-card-v2.tone-blue{background:#DBEAFE}
.vt-sec-card-v2.tone-slate{background:#E2E8F0}
[data-theme="dark"] .vt-sec-card-v2.tone-green{background:#25494B}
[data-theme="dark"] .vt-sec-card-v2.tone-amber{background:#414340}
[data-theme="dark"] .vt-sec-card-v2.tone-rose{background:#4A2A3A}
[data-theme="dark"] .vt-sec-card-v2.tone-purple{background:#37405F}
[data-theme="dark"] .vt-sec-card-v2.tone-blue{background:#1E3A54}
[data-theme="dark"] .vt-sec-card-v2.tone-slate{background:#38475A}

/* ── Mismo criterio anterior: clases con valores fijos en vez de las
   variables "-soft" (no se resuelven bien en dark en este ambiente) para
   los demás elementos tipo CTA del módulo (cobro pagado/abono, indicador
   de grabación por voz, resumen de valor). ── */
.vt-soft-success{background:#DCFCE7;color:#16A34A;border-color:#16A34A}
.vt-soft-warning{background:#FEF9C3;color:#CA8A04;border-color:#CA8A04}
.vt-soft-danger{background:#FEE2E2;color:#DC2626;border-color:#DC2626}
[data-theme="dark"] .vt-soft-success{background:#25494B;color:#4ADE80;border-color:#4ADE80}
[data-theme="dark"] .vt-soft-warning{background:#40433D;color:#FCD34D;border-color:#FCD34D}
[data-theme="dark"] .vt-soft-danger{background:#3F3343;color:#F87171;border-color:#F87171}

/* ── Estilos del hub/lista de Visita Técnica — movidos aquí desde un
   <style> que se inyectaba por JS en cada render() (anomalía única de
   este módulo: ningún otro módulo de la app re-inyecta su propio CSS en
   cada render; todos lo cargan una sola vez desde archivo, como aquí). ── */
.vt-sec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.vt-hero-title{font-size:18px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.vt-amount-input{border:none;background:transparent;outline:none;font-size:34px !important;font-weight:800 !important;color:var(--success) !important;font-family:inherit;width:150px;-moz-appearance:textfield}
.vt-amount-input::-webkit-inner-spin-button,.vt-amount-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
@media (max-width:760px){
  .vt-sec-grid{grid-template-columns:repeat(2,1fr)}
  .vt-sec-card{padding:12px !important}
  .vt-sec-ic{width:26px !important;height:26px !important;font-size:12px !important}
  .vt-sec-title{font-size:12px !important}
  .vt-sec-sub{display:none !important}
  .vt-hero-box{padding:18px 16px !important}
  .vt-hero-title{font-size:15.5px !important;line-height:1.32 !important}
}
.vt-list-grid{display:grid;grid-template-columns:1fr;gap:12px}

/* ── Mitigación específica de Chrome/Android: forzar una capa de
   composición GPU propia y aislada en cada tarjeta, en vez de dejar que
   Chrome decida automáticamente cuándo promoverlas — esta ambigüedad es
   la causa documentada del "tearing"/rayado en el compositor de Chrome
   para Android con elementos de bordes redondeados. No afecta a otros
   navegadores (Firefox, Safari) porque ellos no tienen este bug. ── */
.vt-sec-card,
.vt-hero-box,
.vt-list-grid > div {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Segunda capa de mitigación, distinta a la anterior: contención de
   repintado a nivel de CONTENEDOR (no solo por tarjeta individual). El
   rayado seguía apareciendo justo en el borde entre el grid de
   estadísticas y la lista de tarjetas — exactamente donde el navegador
   tiene que recalcular los límites de una zona compuesta al hacer scroll.
   contain:paint aísla cada contenedor como su propio límite de pintado,
   así Chrome no necesita repintar/recomponer zonas vecinas al hacer
   scroll dentro de uno de ellos. */
#vtStats, #vtRepStats,
.vt-list-grid {
  contain: paint;
}
#vtNextVisit .vt-marquee-mask {
  contain: paint;
}

/* ── Marquee del widget "Próxima visita" — v3: vuelve a moverse
   horizontalmente (se había quitado en v2 por precaución, pero el
   negocio prefiere el movimiento real). Es la misma técnica ya
   validada como segura en este código: solo el <div> de texto plano
   se desplaza vía transform, la tarjeta redondeada que lo contiene
   NUNCA anima — evita el patrón que causó "rayado" en Android en
   otros lugares (ese patrón sí combinaba overflow:hidden+border-radius
   con transform en el MISMO elemento). ── */
@keyframes vtMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── v2: tarjetas pastel de acceso a submódulos del hub — hover sutil
   solo en dispositivos con mouse real (nunca en touch, donde no aplica
   ":hover" de forma consistente y puede quedar "pegado"). ── */
@media (hover:hover) {
  .vt-pastel-card:hover { filter: brightness(0.97); }
  .vt-tab-pill:hover { opacity: .85; }
  .vt-colab-card [data-toggle-open]:hover { opacity: .85; }
}
.vt-pastel-card, .vt-tab-pill { -webkit-tap-highlight-color: transparent; }
.vt-marquee-track{transform:translateZ(0);backface-visibility:hidden;will-change:transform}
#vtAjustesBody, .vt-colab-card, #vtZonasList{contain:paint;transform:translateZ(0);backface-visibility:hidden}
#vtRepResultBody, #vtRepMenu, .vt-rep-group, .vt-rep-fav-wrap{contain:paint;transform:translateZ(0);backface-visibility:hidden}
.vt-money-input.vt-money-green{color:var(--success);font-weight:800}
.vt-money-input.vt-money-red{color:var(--danger);font-weight:800}
@media (max-width:760px){
  .docs-chips{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%)}
  .docs-chips::-webkit-scrollbar{display:none}
}
.docs-mob-chips{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent 100%)}
#vtList, #vtRepList, #vtNetFigures{transition:opacity .15s ease}
.vt-rep-menu-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:900px){
  .vt-rep-menu-grid{grid-template-columns:repeat(3,1fr);align-items:start}
  .vt-rep-fav-wrap{max-width:420px}
}
@media (max-width:480px){
  .vt-rep-line-date, .vt-rep-line-badge{display:none}
  .vt-rep-line-pay{flex:0 0 76px !important;font-size:10px !important}
  .vt-rep-line-value{flex:0 0 58px !important;font-size:12px !important}
  #vtNetFigures{gap:20px !important;max-width:100%;flex-wrap:wrap}
}
.content-sub{font-size:12.5px;color:var(--text-2);margin:2px 0 0}
.vt-input-lg{font-size:15.5px !important;font-weight:700 !important}
textarea.vt-input-lg{line-height:1.4}
.vt-switch { -webkit-tap-highlight-color: transparent; }


/* Filas "sub-tarjeta" para el modal de filtros de Reportes en móvil —
   mismo alto/padding que los botones de fecha, para que todo el set de
   filtros se vea como una sola familia visual consistente. */
.vt-filter-row{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:10px;padding:0 12px;height:44px;background:var(--surface1)}
.vt-filter-row svg,.vt-filter-row .vt-filter-row-ic{flex:none;color:var(--text-2);width:16px;height:16px}
.vt-filter-row span{font-size:13px;font-weight:600;color:var(--text)}

/* Opciones del acordeón — reemplaza al <select> nativo (que no respeta
   el tema oscuro en su lista de opciones, esa parte la pinta el sistema
   operativo, no el CSS del app). Estático, sin transform ni animación:
   solo se muestra/oculta con display, así que no aplica ningún riesgo
   de composición de GPU. */
.vt-filter-options{border:1px solid var(--border);border-top:none;border-radius:0 0 10px 10px;margin-top:-8px;padding-top:8px;overflow:hidden;background:var(--surface1)}
.vt-filter-option{padding:10px 14px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;border-top:1px solid var(--border)}
.vt-filter-option.active{color:var(--accent);background:var(--surface2)}

/* Toggle "Mis visitas / Mías" — clase propia, a propósito distinta de
   .btn-ghost.active: esa clase pinta un degradado sólido igual al botón
   primario ("+ Nueva"), y al lado uno del otro se veían como dos
   botones principales compitiendo. Este es un filtro, no una acción
   principal, así que usa el mismo criterio visual que ya usan los chips
   de filtro activos (fondo suave + texto en acento), no un botón lleno. */
.vt-mine-btn{background:var(--surface1);border:1px solid var(--border);color:var(--text)}
.vt-mine-btn.active{background:#CFFAFE;border-color:var(--accent);color:var(--accent)}
[data-theme="dark"] .vt-mine-btn.active{background:#274A57}

/* El estado vacío ("Aún no hay visitas") quedaba pegado a la izquierda
   en desktop porque .vt-list-grid es un grid de columnas de ancho fijo
   (auto-fill, minmax 340px) — con un solo hijo (el estado vacío), el
   grid lo coloca en la primera columna en vez de centrarlo en todo el
   ancho disponible. Esto lo hace ocupar todas las columnas y centrarse
   de verdad. */
.vt-list-grid > .empty-state{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center}

/* ── Selector de densidad de fotos (Report & Run — paso previo a publicar) ──
   5 opciones visuales: 1/2/3/4/6 fotos por página/pantalla. Mismo criterio
   de "chip activo" que .vt-mine-btn.active: fondo suave + borde acento,
   nunca box-shadow (profundidad tonal + borde, sección 3.4 del documento). */
.m11-layout-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin:14px 0 4px}
.m11-layout-opt{border:1.5px solid var(--border);background:var(--surface1);border-radius:12px;padding:10px 8px 9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;transition:none}
.m11-layout-opt.active{border-color:var(--accent);background:#CFFAFE}
[data-theme="dark"] .m11-layout-opt.active{background:#274A57}
.m11-layout-thumb{width:100%;aspect-ratio:4/3;display:grid;gap:2px;background:var(--border);border-radius:6px;overflow:hidden}
.m11-layout-thumb span{background:var(--surface2)}
.m11-layout-opt.active .m11-layout-thumb span{background:var(--accent)}
.m11-layout-label{font-size:11px;font-weight:800;color:var(--text-2)}
.m11-layout-opt.active .m11-layout-label{color:var(--accent)}

/* ══════════════════════════════════════════════════════════════
   Paso "Plantilla de fotos" — plantilla general + overrides por ítem
   ══════════════════════════════════════════════════════════════ */
.m11-tpl-section-label{font-size:11px;font-weight:800;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em;margin:4px 0 2px}
.m11-tpl-subrow{font-size:12.5px;font-weight:700;color:var(--text);margin:10px 0 8px}

/* ── Picker de posición del texto (debajo / al lado) — mismas 2 opciones
   con un mini-diagrama ilustrativo, mismo criterio visual que el picker
   de densidad (.m11-layout-opt). ── */
.m11-position-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m11-position-opt{border:1.5px solid var(--border);background:var(--surface1);border-radius:12px;padding:10px 8px 9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px}
.m11-position-opt.active{border-color:var(--accent);background:#CFFAFE}
[data-theme="dark"] .m11-position-opt.active{background:#274A57}
.m11-position-diagram{width:100%;aspect-ratio:4/3;background:var(--border);border-radius:6px;padding:6px;display:flex;gap:4px}
.m11-position-diagram-below{flex-direction:column}
.m11-position-diagram-lateral{flex-direction:row}
.m11-pd-text{background:var(--surface2);border-radius:3px}
.m11-pd-photo{background:var(--surface1);border-radius:3px;flex:1}
.m11-position-diagram-below .m11-pd-text{height:28%}
.m11-position-diagram-below .m11-pd-photo{flex:1}
.m11-position-diagram-lateral .m11-pd-text{width:36%;flex:none}
.m11-position-diagram-lateral .m11-pd-photo{flex:1}
.m11-position-opt.active .m11-pd-photo{background:var(--accent);opacity:.25}

/* ── Lista de ítems con su plantilla resuelta ── */
.m11-item-tpl-row{border:1px solid var(--border);border-radius:12px;margin-bottom:8px;overflow:hidden;background:var(--surface1)}
.m11-item-tpl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;cursor:pointer}
.m11-item-tpl-name{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m11-item-tpl-body{padding:4px 14px 16px;border-top:1px solid var(--border)}
.m11-layout-grid-sm{grid-template-columns:repeat(auto-fit,minmax(74px,1fr))}
.m11-layout-grid-sm .m11-layout-opt{padding:7px 6px 6px}

/* ══════════════════════════════════════════════════════════════
   Paso "Preview & publish" — pestañas Web / PDF
   ══════════════════════════════════════════════════════════════ */
.m11-preview-tabs{display:flex;gap:4px;background:var(--surface2);border-radius:10px;padding:3px;margin-bottom:14px}
.m11-preview-tab{flex:1;border:none;background:transparent;padding:9px 10px;border-radius:8px;font-size:12.5px;font-weight:700;color:var(--text-2);cursor:pointer;font-family:inherit}
.m11-preview-tab.active{background:var(--surface1);color:var(--accent);border:1px solid var(--border)}
.m11-pdf-preview-frame{width:100%;height:60vh;min-height:420px;border:1px solid var(--border);border-radius:12px;background:#fff}

/* ══════════════════════════════════════════════════════════════
   Réplica exacta del visor público (reportrun.php) para la pestaña
   "Vista Web" — mismas clases .rr-pub-*, escopadas bajo
   .rr-pub-preview-scope para no chocar con nada del panel interno.
   Los valores deben mantenerse EN SINCRONÍA con los del <style> de
   reportrun.php si se ajustan ahí — es la misma plantilla, dos lugares.
   ══════════════════════════════════════════════════════════════ */
.rr-pub-preview-scope{background:var(--bg,#F4F6FA);border-radius:14px;padding:20px 16px;border:1px solid var(--border)}
.rr-pub-preview-scope .rr-pub-title{font-size:22px;font-weight:800;margin:0 0 10px;color:var(--text);word-break:break-word}
.rr-pub-preview-scope .rr-pub-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:16px}
.rr-pub-preview-scope .rr-pub-meta-item{font-size:12.5px;color:var(--text-2)}
.rr-pub-preview-scope .rr-pub-meta-item strong{color:var(--text);font-weight:700}
.rr-pub-preview-scope .rr-pub-desc{font-size:13.5px;color:var(--text-2);line-height:1.6;margin-bottom:18px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.rr-pub-preview-scope .rr-pub-item{background:var(--surface1);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:12px}
.rr-pub-preview-scope .rr-pub-item.urgent{background:rgba(220,38,38,.06);border-color:rgba(220,38,38,.3)}
.rr-pub-preview-scope .rr-pub-urgent-badge{display:inline-block;background:#FEE2E2;color:#DC2626;font-size:9.5px;font-weight:800;padding:3px 9px;border-radius:99px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.03em}
.rr-pub-preview-scope .rr-pub-item-group{display:inline-flex;align-items:center;gap:6px;background:#EDE9FE;color:#7C3AED;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:5px 12px;border-radius:99px;margin-bottom:8px}
.rr-pub-preview-scope .rr-pub-item-group svg{width:13px;height:13px;flex:none}
.rr-pub-preview-scope .rr-pub-item-title{font-size:17px;font-weight:800;margin-bottom:5px;color:var(--text)}
.rr-pub-preview-scope .rr-pub-item-note{font-size:13.5px;color:var(--text-2);line-height:1.55;white-space:pre-wrap}
.rr-pub-preview-scope .rr-pub-item-body{display:flex;flex-direction:column;gap:12px}
.rr-pub-preview-scope .rr-pub-item[data-position="lateral"] .rr-pub-item-body{flex-direction:row;align-items:flex-start;gap:16px}
.rr-pub-preview-scope .rr-pub-item[data-position="lateral"] .rr-pub-item-text{flex:0 0 36%;min-width:0}
.rr-pub-preview-scope .rr-pub-item[data-position="lateral"] .rr-pub-item-photos-wrap{flex:1;min-width:0}
.rr-pub-preview-scope .rr-pub-photos{display:grid;gap:8px}
.rr-pub-preview-scope .rr-pub-photos[data-layout="1"]{grid-template-columns:1fr}
.rr-pub-preview-scope .rr-pub-photos[data-layout="2"]{grid-template-columns:repeat(2,1fr)}
.rr-pub-preview-scope .rr-pub-photos[data-layout="3"]{grid-template-columns:repeat(3,1fr)}
.rr-pub-preview-scope .rr-pub-photos[data-layout="4"]{grid-template-columns:repeat(2,1fr)}
.rr-pub-preview-scope .rr-pub-photos[data-layout="6"]{grid-template-columns:repeat(3,1fr)}
.rr-pub-preview-scope .rr-pub-photo-card{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface2)}
.rr-pub-preview-scope .rr-pub-photo-card img{width:100%;max-height:260px;object-fit:contain;display:block;background:var(--surface2)}
.rr-pub-preview-scope .rr-pub-photo-caption{font-size:11px;color:var(--text-2);padding:6px 9px;line-height:1.4}

/* ══════════════════════════════════════════════════════════════
   Galería unificada de plantillas (densidad + posición juntas en
   UNA tarjeta) + modo de paginación + personalizar por ítem
   ══════════════════════════════════════════════════════════════ */
.m11-ipp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.m11-ipp-opt{border:1.5px solid var(--border);background:var(--surface1);border-radius:10px;padding:10px 0;font-size:14px;font-weight:800;color:var(--text-2);cursor:pointer}
.m11-ipp-opt.active{border-color:var(--accent);background:#CFFAFE;color:var(--accent)}
[data-theme="dark"] .m11-ipp-opt.active{background:#274A57}

.m11-tpl-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.m11-tpl-gallery-sm{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}
.m11-tpl-card{border:1.5px solid var(--border);background:var(--surface1);border-radius:12px;padding:10px 9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px}
.m11-tpl-card.active{border-color:var(--accent);background:#CFFAFE}
[data-theme="dark"] .m11-tpl-card.active{background:#274A57}
.m11-tpl-card-diagram{width:100%;aspect-ratio:4/3;background:var(--border);border-radius:6px;padding:5px;display:flex;flex-direction:column;gap:3px}
.m11-tpl-card-diagram.m11-tpl-card-lateral{flex-direction:row}
.m11-tpl-card-text{background:var(--surface2);border-radius:3px;flex:none}
.m11-tpl-card-diagram:not(.m11-tpl-card-lateral) .m11-tpl-card-text{height:22%}
.m11-tpl-card-diagram.m11-tpl-card-lateral .m11-tpl-card-text{width:32%}
.m11-tpl-card-thumb{flex:1;background:transparent;gap:2px}
.m11-tpl-card-thumb span{background:var(--surface1)}
.m11-tpl-card.active .m11-tpl-card-thumb span{background:var(--accent)}
.m11-tpl-card .m11-layout-label{font-size:10.5px;text-align:center;line-height:1.3}

.m11-item-tpl-livepreview{margin-top:6px}
.m11-preview-open-row{display:flex;gap:10px;margin-top:6px}

/* Botón secundario (ya debería existir btn-secondary en el design
   system global; si no, este fallback mantiene el mismo lenguaje
   visual — capa tonal + borde, sin sombra). */
.btn-secondary{background:var(--surface2);border:1.5px solid var(--border);color:var(--text)}

/* ══════════════════════════════════════════════════════════════
   RONDA 4 — tarjetas de plantilla compactas (antes muy grandes),
   diagrama con líneas de texto reales (foto + su leyenda, no la
   grilla completa), fix de desborde de los botones de vista previa,
   y estilos por-foto (debajo/al lado) para la vista previa escopada.
   ══════════════════════════════════════════════════════════════ */
.m11-preview-open-row{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.m11-preview-open-row .btn{width:100%}

/* Tarjetas de plantilla — mucho más compactas */
.m11-tpl-gallery{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.m11-tpl-gallery-sm{grid-template-columns:repeat(auto-fit,minmax(84px,1fr))}
.m11-tpl-card{padding:8px 7px;gap:6px}
.m11-tpl-card-diagram{width:100%;aspect-ratio:5/3;background:var(--surface2);border-radius:6px;padding:6px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;justify-content:flex-start}
.m11-tpl-card-diagram.m11-tpl-card-lateral{flex-direction:row;align-items:center}
.m11-tpl-card-photo{background:var(--border);border-radius:4px;flex:none}
.m11-tpl-card-diagram:not(.m11-tpl-card-lateral) .m11-tpl-card-photo{width:70%;height:52%}
.m11-tpl-card-diagram.m11-tpl-card-lateral .m11-tpl-card-photo{width:44%;height:80%}
.m11-tpl-card-lines{display:flex;flex-direction:column;gap:3px;width:100%}
.m11-tpl-card-diagram.m11-tpl-card-lateral .m11-tpl-card-lines{flex:1;padding-left:6px}
.m11-tpl-line{height:4px;border-radius:2px;background:var(--text-2);opacity:.35}
.m11-tpl-card.active .m11-tpl-card-photo{background:var(--accent)}
.m11-tpl-card.active .m11-tpl-line{background:var(--accent);opacity:.7}
.m11-tpl-card .m11-layout-label{font-size:9.5px;line-height:1.25}

/* Vista previa escopada (.rr-pub-preview-scope) — mismas reglas de
   .rr-pub-photo-card[data-cap-pos] que reportrun.php, para que la
   miniatura en vivo del panel "Personalizar por ítem" coincida. */
.rr-pub-preview-scope .rr-pub-photo-card{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface2)}
.rr-pub-preview-scope .rr-pub-photo-card[data-cap-pos="below"]{display:flex;flex-direction:column}
.rr-pub-preview-scope .rr-pub-photo-card[data-cap-pos="lateral"]{display:flex;flex-direction:row;align-items:center}
.rr-pub-preview-scope .rr-pub-photo-card img{display:block;object-fit:contain;background:var(--surface2)}
.rr-pub-preview-scope .rr-pub-photo-card[data-cap-pos="below"] img{width:100%;max-height:180px}
.rr-pub-preview-scope .rr-pub-photo-card[data-cap-pos="lateral"] img{width:55%;max-height:140px;flex:none}
.rr-pub-preview-scope .rr-pub-photo-caption{font-size:11px;font-weight:700;color:var(--text-2);line-height:1.4;padding:8px 10px}

/* ══════════════════════════════════════════════════════════════
   RONDA 5 — tarjetas de plantilla: SOLO visual (sin texto), grilla
   real de N unidades foto+leyenda en las mismas columnas que
   producción. Estas reglas van al final a propósito para pisar las
   versiones anteriores del mismo componente.
   ══════════════════════════════════════════════════════════════ */
.m11-tpl-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px}
.m11-tpl-gallery-sm{grid-template-columns:repeat(auto-fit,minmax(68px,1fr))}
.m11-tpl-card{border:1.5px solid var(--border);background:var(--surface1);border-radius:10px;padding:7px;cursor:pointer;display:block}
.m11-tpl-card.active{border-color:var(--accent);background:#CFFAFE}
[data-theme="dark"] .m11-tpl-card.active{background:#274A57}
.m11-tpl-card-grid{display:grid;gap:4px;width:100%;aspect-ratio:1/1}
.m11-tpl-unit{background:var(--surface2);border-radius:4px;padding:3px;display:flex;flex-direction:column;gap:2px;justify-content:center;overflow:hidden}
.m11-tpl-unit.m11-tpl-unit-lateral{flex-direction:row;align-items:center}
.m11-tpl-card-photo{background:var(--border);border-radius:2px;flex:none}
.m11-tpl-unit:not(.m11-tpl-unit-lateral) .m11-tpl-card-photo{width:100%;height:60%}
.m11-tpl-unit.m11-tpl-unit-lateral .m11-tpl-card-photo{width:50%;height:100%}
.m11-tpl-card-lines{display:flex;flex-direction:column;gap:2px;width:100%}
.m11-tpl-unit.m11-tpl-unit-lateral .m11-tpl-card-lines{flex:1;padding-left:3px}
.m11-tpl-line{height:3px;border-radius:1.5px;background:var(--text-2);opacity:.4}
.m11-tpl-card.active .m11-tpl-card-photo{background:var(--accent)}
.m11-tpl-card.active .m11-tpl-line{background:var(--accent);opacity:.75}

/* Ronda 5: quitar la caja anidada también en la miniatura en vivo del
   panel "Personalizar por ítem" (mismas reglas que el visor público). */
.rr-pub-preview-scope .rr-pub-photo-card{border:none;background:transparent;border-radius:0}
.rr-pub-preview-scope .rr-pub-photo-card[data-cap-pos="lateral"]{gap:6px}

/* Ronda 6: en la miniatura en vivo, "al lado" también debe apilar en 1
   columna (nunca repartir en columnas) — mismo criterio que producción. */
.rr-pub-preview-scope .rr-pub-photos[data-position="lateral"]{grid-template-columns:1fr!important}
.rr-pub-preview-scope .rr-pub-photo-card[data-cap-pos="lateral"] img{max-width:46%;flex:0 0 auto}

/* Ronda 8: mismo cambio a CSS grid en la miniatura en vivo (gana por
   ir al final del archivo, pisa las reglas de flexbox anteriores). */
.rr-pub-preview-scope .rr-pub-photo-card[data-cap-pos="lateral"]{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;gap:0}
.rr-pub-preview-scope .rr-pub-photo-card[data-cap-pos="lateral"] img{grid-column:1;max-width:150px;max-height:120px;width:auto;flex:none}