:root {
  color-scheme: light;
  --bg: #f4f7f8;
  --surface: #ffffff;
  --surface-soft: #f7f9fa;
  --ink: #131719;
  /* #5d6970 pasa AA (4.5:1+) sobre TODOS los fondos del sistema, incluidos
     los soft (teal-soft, surface-soft); el #67737b anterior fallaba en varios */
  --muted: #5d6970;
  --line: #dce3e7;
  --teal: #076782;
  --teal-soft: #dff2f6;
  /* #8a5b00 pasa AA como texto sobre los fondos soft (5.5:1); el #a96f00
     anterior fallaba (4.0:1) en .delivery-uploading. Los bullets de spec-list
     lo usan como gráfico y siguen pasando 3:1 de sobra. */
  --amber: #8a5b00;
  --amber-soft: #fff2cf;
  --blue: #0f5f9c;
  --blue-soft: #e3f0fb;
  --green: #1f7a4d;
  --green-soft: #e1f2e9;
  --red: #a63832;
  /* mismo rojo-soft que cotizacion.html: para lead/quote rechazada en vez de
     los rgba Bootstrap ajenos a la paleta */
  --red-soft: #fbeae9;
  --shadow: 0 16px 38px rgba(13, 22, 28, 0.09);
  --radius: 8px;

  /* Tracking unificado para mayúsculas chicas (antes: 4 valores distintos o
     ausente). Las versales a 11-12px sin tracking se leen apretadas. */
  --tracking-caps: 0.05em;

  /* Escala de espaciado base-4 (Drop de diseño): reemplaza los ~16 valores
     sueltos que se acumularon. No se migra todo de una; se aplica al tocar. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  /* Escala tipográfica (Drop D2): 7 tokens reemplazan los ~32 tamaños que
     se acumularon entre la base en px y las fases nuevas en rem.
     2xs SOLO para uppercase corto (pills, chips, weekdays); xs para
     metadatos; sm para labels; md cuerpo secundario; lg títulos de sección;
     xl título principal de la vista; 2xl nombre del cliente. */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 22px;
  --fs-2xl: 24px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  /* system-ui entrega SF en iOS y Roboto en Android: los clientes mobile ya
     no caen a la sans genérica del navegador */
  font-family: "Aptos", system-ui, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  background:
    linear-gradient(90deg, rgba(7, 103, 130, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(7, 103, 130, 0.04) 1px, transparent 1px),
    var(--bg);
  background-size: 28px 28px;
  color: var(--ink);
}

body:has(#loginScreen:not([hidden])) {
  background: #17262d;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(9, 17, 22, 0.96), rgba(11, 31, 39, 0.88)),
    var(--bg);
}

.login-card {
  width: min(460px, 100%);
  display: grid;
  gap: 22px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
}

.login-brand h1 {
  margin: 0;
  font-size: 25px;
}

.login-brand .brand-logo {
  width: 132px;
  height: 56px;
}

.login-brand .eyebrow {
  color: var(--teal);
}

.login-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #eef3f5;
}

.login-tab {
  min-height: 40px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}

.login-tab.is-active {
  background: #0e1519;
  color: #fff;
}

.login-form {
  display: grid;
  gap: 14px;
}

.login-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.login-form input,
.login-form select {
  min-height: 44px;
  padding: 0 12px;
}

.login-error {
  min-height: 20px;
  margin: 0;
  color: var(--red);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.app-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px;
  background: #0e1519;
  color: #f7fbfc;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Hamburguesa y wrappers del sidebar: en desktop no existen visualmente.
   display: contents hace que los hijos sigan siendo flex items directos
   del sidebar (el margin-top:auto del footer sigue funcionando). */
.menu-button {
  display: none;
}

.sidebar-extras {
  display: contents;
}

/* Toggle del calendario: solo aparece en mobile */
.calendar-toggle {
  display: none;
}

.brand-logo {
  width: 96px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: #0b1114;
  object-fit: cover;
  object-position: center;
}

.brand h1,
.topbar h2,
.detail-panel h3,
.context-section h3,
.admin-panel h3 {
  margin: 0;
  line-height: 1.1;
}

.brand h1 {
  font-size: 21px;
}

.eyebrow {
  margin: 0 0 6px;
  color: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.sidebar .eyebrow {
  color: #9fb0b8;
}

.mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
}

.mode-button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #d7e0e4;
  font-weight: 700;
}

.mode-button.is-active {
  background: #f7fbfc;
  color: #0e1519;
}

.field-label {
  display: grid;
  gap: 8px;
  color: #d7e0e4;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.field-label.is-locked {
  opacity: 0.82;
}

.select,
input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  /* el outline lo maneja el patrón :focus-visible global (final del archivo) */
}

.select {
  min-height: 44px;
  padding: 0 12px;
}

.sidebar .select {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: #f7fbfc;
}

.sidebar .select option {
  color: var(--ink);
}

.nav-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  color: #9fb0b8;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.order-list {
  display: grid;
  gap: 8px;
}

.order-button {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  color: #f7fbfc;
  text-align: left;
}

/* Hover ≠ seleccionado: antes ambos eran blanco completo y no se distinguía
   cuál pedido estaba abierto al pasar el mouse por la lista */
.order-button:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #f7fbfc;
}

.order-button.is-active {
  background: #f7fbfc;
  color: #0e1519;
  border-left: 3px solid var(--teal);
}

.order-button strong,
.order-button span {
  min-width: 0;
}

.order-button strong {
  overflow-wrap: anywhere;
}

.order-button span {
  color: inherit;
  opacity: 0.72;
  font-size: var(--fs-xs);
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-footer p,
.sidebar-footer strong {
  margin: 0;
}

.sidebar-footer p {
  color: #9fb0b8;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
}

/* Cuando la última recarga falló: el footer avisa que se ven datos guardados */
.sidebar-footer.is-stale p,
.sidebar-footer.is-stale strong {
  color: #ffc36b;
}

.refresh-button {
  display: block;
  margin-top: 8px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: transparent;
  color: #c8d6dc;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}

.refresh-button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.refresh-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.sidebar-button {
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  color: #f7fbfc;
  font-weight: 700;
}

.workspace {
  min-width: 0;
  /* techo de ancho generoso: sin tope se desparrama en ultrawide, pero 1400px
     dejaba márgenes muertos en 1920. La lectura la protegen los 70ch de
     note-box/spec-list, no el contenedor. */
  max-width: 1680px;
  margin-inline: auto;
  padding: var(--s6);
}

.topbar,
.status-band,
.detail-panel,
.context-section,
.admin-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 22px;
}

.topbar-actions:empty {
  display: none;
}

.topbar .eyebrow,
.detail-panel .eyebrow,
.admin-panel .eyebrow {
  color: var(--teal);
}

.topbar h2 {
  /* el nombre del cliente es contexto, no contenido: baja de 30px para que
     el título del pedido (--fs-xl) recupere la jerarquía */
  font-size: var(--fs-2xl);
}

/* El título del pedido ES el contenido principal de la vista (antes quedaba
   en el default del navegador, más chico que el nombre del cliente) */
.detail-panel > .section-heading h3 {
  font-size: var(--fs-xl);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Pill de modo (admin): teal en Admin, ámbar en Vista cliente */
.mode-pill {
  margin-top: 8px;
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}

.mode-pill.is-preview {
  background: var(--amber-soft);
  color: #744605;
}

/* En vista cliente (preview) el workspace lleva una marca ámbar arriba */
body.preview-mode .workspace {
  box-shadow: inset 0 3px 0 var(--amber);
}

.icon-button,
.secondary-button,
.primary-button,
.link-button {
  min-height: 42px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  font-weight: 700;
}

.icon-button {
  width: 44px;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--teal);
  font-size: var(--fs-2xs);
}

.secondary-button {
  padding: 0 14px;
  background: var(--surface);
  color: var(--ink);
}

.primary-button,
.link-button {
  padding: 0 16px;
  border-color: transparent;
  background: var(--teal);
  color: #fff;
  text-decoration: none;
}

.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Microinteracción: antes los botones primarios/secundarios (incluido el
   "Guardar cambios" más usado del admin) no respondían al mouse */
.primary-button:hover,
.link-button:hover {
  background: #0a85a8;
}

.secondary-button:hover,
.icon-button:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.primary-button:active,
.secondary-button:active,
.link-button:active {
  transform: translateY(1px);
}

.sidebar-button:hover,
.mode-button:not(.is-active):hover {
  background: rgba(255, 255, 255, 0.14);
}

.calendar-toggle:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.status-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 18px 0;
  overflow: hidden;
  background: var(--line);
}

.calendar-panel {
  /* vive entre el topbar y las métricas; el gap inferior lo pone el margen
     superior del status-band */
  margin-top: 18px;
}

.metric {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 18px;
  background: var(--surface);
}

.metric span {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.metric strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--fs-lg);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
  gap: 18px;
  /* cada card mide su contenido: sin esto, un pedido sin preview dejaba el
     panel del detalle estirado a la altura de la columna derecha, con media
     card vacía */
  align-items: start;
}

.detail-panel,
.context-section,
.admin-panel {
  padding: 22px;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.section-heading.compact {
  margin-bottom: 14px;
}

.section-heading.compact h3 {
  font-size: var(--fs-lg);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

.status-waiting {
  background: var(--amber-soft);
  color: #744605;
}

.status-in_progress {
  background: var(--blue-soft);
  color: #16446f;
}

.status-offline {
  background: var(--teal-soft);
  color: #0c4f4b;
}

.status-completed {
  background: var(--green-soft);
  color: #145233;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 24px 0;
}

.timeline-step {
  position: relative;
  min-height: 92px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.timeline-step::before {
  content: "";
  width: 12px;
  height: 12px;
  display: block;
  margin-bottom: 9px;
  border-radius: 50%;
  /* --muted en vez de --line: el punto pendiente rendía 1.23:1 (invisible) */
  background: var(--muted);
}

.timeline-step.is-done::before {
  background: var(--green);
}

.timeline-step.is-current {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.timeline-step.is-current::before {
  background: var(--teal);
}

.timeline-step strong {
  display: block;
  font-size: var(--fs-sm);
}

.timeline-step span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.state-detail {
  display: grid;
  gap: 16px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.info-item {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.info-item span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.info-item strong,
.info-item p {
  margin: 0;
  overflow-wrap: anywhere;
}

.note-box {
  padding: 16px;
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--ink);
}

.note-box p {
  margin: 0;
  line-height: 1.55;
  /* medida de lectura cómoda (~70 caracteres) en pantallas anchas */
  max-width: 70ch;
}

.progress-wrap {
  display: grid;
  gap: 10px;
}

.progress-bar {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  /* var(--line) en vez del beige cálido #e8e0d2 (único color fuera de paleta) */
  background: var(--line);
}

.progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  /* var(--green) en vez del verde manzana #74a84d: 4.1:1 contra el track */
  background: linear-gradient(90deg, var(--teal), var(--green));
}

.context-panel {
  display: grid;
  align-content: start;
  gap: 18px;
}

.spec-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.spec-list li {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--ink);
  line-height: 1.45;
  max-width: 70ch;
}

.spec-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--amber);
}

.calendar-list,
.history-list {
  display: grid;
  gap: 10px;
}

.calendar-month {
  display: grid;
  gap: 12px;
}

.calendar-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.calendar-title strong {
  text-transform: capitalize;
}

.calendar-title span {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.calendar-weekdays span {
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-align: center;
}

.calendar-day {
  min-width: 0;
  min-height: 64px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--ink);
  text-align: left;
}

.calendar-day.is-empty {
  border-color: transparent;
  background: transparent;
}

/* Días sin pedido: bajan la affordance (sin borde ni fondo) para que los
   únicos "chips" con relieve de la grilla sean los clickeables (.has-order) */
.calendar-day:not(.has-order):not(.is-empty) {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.calendar-day strong {
  display: block;
  margin-bottom: 5px;
  font-size: var(--fs-xs);
}

.calendar-day.has-order {
  background: #fff;
}

.calendar-day.has-order.is-active {
  border-color: var(--teal);
  box-shadow: inset 0 0 0 1px var(--teal);
}

/* Cada hito es un botón clickeable: un día con pedidos de varios clientes abre
   el pedido correcto, no el primero. Reset de botón; el color lo da .hito-*. */
.calendar-event {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  border: 0;
  overflow: hidden;
  padding: 4px 5px;
  border-radius: 5px;
  /* piso tipográfico del sistema: 11px (10px/800 era ilegible) */
  font-size: var(--fs-2xs);
  font-family: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
}

.calendar-event + .calendar-event {
  margin-top: 3px;
}

.calendar-event:hover {
  box-shadow: inset 0 0 0 1px var(--teal);
}

.calendar-event.is-active {
  box-shadow: inset 0 0 0 1.5px var(--teal);
}

.history-item {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.history-item strong {
  font-size: var(--fs-md);
}

.history-item span {
  color: var(--muted);
  font-size: var(--fs-xs);
}

.admin-panel {
  margin-top: 18px;
}

.admin-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: 18px;
  /* cada label cuelga del borde superior de su fila: sin start, "Avance" (con
     range de 3 filas) estiraba a sus vecinos y descolgaba los inputs */
  align-items: start;
}

.admin-form label {
  min-width: 0;
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.admin-form .wide {
  grid-column: span 2;
}

/* Grupo de campos que se oculta como bloque sin sacar a sus hijos del grid
   padre: display:contents hace que los <label> sigan siendo items del grid
   (.admin-form) cuando está visible. Al ocultarlo, [hidden] gana con !important
   sobre display:contents. Lo usa #quoteContractFields (contrato off en prod). */
.contents-group {
  display: contents;
}
.contents-group[hidden] {
  display: none !important;
}

/* Separador de grupo del form admin (Avance de hoy / Fechas / Ficha): ordena
   los 14 campos por tarea en vez de por ficha */
.admin-form .form-section-label {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  color: var(--teal);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.admin-form .form-section-label:first-child {
  margin-top: 0;
}

.admin-form input,
.admin-form select,
.admin-form textarea {
  min-height: 42px;
  padding: 10px;
}

.admin-form textarea {
  resize: vertical;
  line-height: 1.4;
}

.range-value {
  color: var(--ink);
  font-size: var(--fs-sm);
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  max-width: min(360px, calc(100vw - 40px));
  padding: 14px 16px;
  border-radius: var(--radius);
  background: #211f1c;
  color: #fff9ee;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  /* visible = clickeable (un tap lo cierra) */
  pointer-events: auto;
  cursor: pointer;
}

/* Errores: se distinguen de un éxito y duran 6 s (lo maneja showToast) */
.toast.is-error {
  background: #3a1714;
  border-left: 4px solid #e08a84;
}

@media (max-width: 1120px) {
  .app-shell {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .status-band,
  .content-grid {
    grid-template-columns: 1fr 1fr;
  }

  .detail-panel {
    grid-column: 1 / -1;
  }

  .context-panel {
    grid-column: 1 / -1;
    /* auto-fit se degrada de 3 a 2 a 1 columna sin el salto violento que daba
       repeat(3) entre 821 y 1120px */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .admin-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .app-shell {
    display: block;
  }

  /* --- Sidebar → header compacto: marca + hamburguesa + chips de pedidos --- */
  .sidebar {
    position: static;
    height: auto;
    gap: 12px;
    padding: 12px 16px 10px;
  }

  .brand {
    gap: 10px;
  }

  .brand-logo {
    width: 64px;
    height: 28px;
  }

  .brand h1 {
    font-size: 16px;
  }

  .brand .eyebrow {
    margin-bottom: 2px;
    font-size: var(--fs-2xs);
  }

  .menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius);
    background: transparent;
    color: #f7fbfc;
    font-size: 19px;
  }

  /* Si la última recarga falló, la hamburguesa hereda el aviso ámbar
     aunque el menú (donde vive el footer de sync) esté cerrado */
  .sidebar:has(.sidebar-footer.is-stale) .menu-button {
    border-color: #ffc36b;
    color: #ffc36b;
  }

  /* Todo lo que no es marca ni pedidos vive detrás de la hamburguesa */
  .sidebar-extras {
    display: none;
  }

  .sidebar.menu-open .sidebar-extras {
    display: contents;
  }

  .sidebar.menu-open .sidebar-footer {
    margin-top: 0;
  }

  /* --- Pedidos como chips horizontales con scroll --- */
  .nav-heading {
    margin-bottom: 8px;
  }

  .order-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    /* snap suave: el chip seleccionado no queda cortado al re-seleccionar */
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
  }

  .order-button {
    flex: 0 0 auto;
    width: auto;
    min-width: 150px;
    max-width: 230px;
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 10px 12px;
    scroll-snap-align: start;
  }

  .order-button strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* La fecha de hito no cabe en el chip; el detalle la muestra igual */
  .order-button span:last-of-type {
    display: none;
  }

  /* --- Workspace: el contenido del pedido queda a un scroll corto.
         En mobile el calendario vuelve DESPUÉS del detalle (flex order):
         si fuera primero, el pedido entero quedaría bajo el fold (ALTA-8) --- */
  .workspace {
    padding: 16px;
    display: flex;
    flex-direction: column;
  }

  .calendar-panel {
    order: 1;
    margin-top: 0;
    margin-bottom: 18px;
  }

  .admin-panel {
    order: 2;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }

  /* el nombre del cliente baja a 22px ya en este rango: en columna y con el
     fold crítico, 24px consumía altura de más (a 560px baja a 20px) */
  .topbar h2 {
    font-size: var(--fs-xl);
  }

  .topbar-actions {
    width: 100%;
  }

  .secondary-button,
  .primary-button {
    flex: 1;
  }

  /* Métricas en 2×2 compactas en vez de 4 apiladas */
  .status-band {
    grid-template-columns: 1fr 1fr;
  }

  .metric {
    padding: 14px;
  }

  .timeline,
  .info-grid,
  .context-panel,
  .admin-form,
  .content-grid {
    grid-template-columns: 1fr;
  }

  .admin-form .wide {
    grid-column: auto;
  }

  /* --- Agenda de hitos: máximo 3 en pantalla chica (la grilla del mes
         cubre el resto detrás de "Ver mes completo") --- */
  .calendar-agenda .agenda-item:nth-of-type(n + 4) {
    display: none;
  }

  /* --- Calendario colapsado por defecto (ocupa mucho en pantalla chica) --- */
  .calendar-toggle {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 700;
  }

  .calendar-panel:not(.is-expanded) .calendar-list {
    display: none;
  }

  /* --- iOS hace zoom forzado al enfocar inputs con menos de 16px --- */
  input,
  select,
  textarea,
  .select {
    font-size: 16px;
  }

  /* --- Touch targets cómodos (~44px) --- */
  .delivery-tab,
  .filter-chip,
  .activity-tab,
  .mode-button {
    min-height: 44px;
  }

  .calendar-nav-btn {
    width: 44px;
    height: 44px;
  }

  .timecode-chip {
    padding: 8px 12px;
  }
}

/* Sistema de 3 breakpoints: 1120 / 820 / 560 (antes había uno extra a 520) */
@media (max-width: 560px) {
  .workspace {
    padding: 12px;
  }

  .topbar h2 {
    font-size: 20px;
  }

  .detail-panel > .section-heading h3 {
    font-size: 19px;
  }

  .metric {
    padding: 12px;
  }

  .detail-panel,
  .context-section,
  .admin-panel {
    padding: 16px;
  }

  .modal-card {
    padding: 18px 16px;
  }

  .order-button {
    min-width: 132px;
  }
}

/* ============================================================
   Auth screens (Fase 2)
   Estilos adicionales para login híbrido, forgot password
   y set new password. Usan las variables ya definidas arriba.
   ============================================================ */
.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 4px 0;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.auth-divider span {
  padding: 0 12px;
}

.auth-heading {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}

.auth-subheading {
  font-size: var(--fs-md);
  color: var(--muted);
  margin: 0 0 4px 0;
  line-height: 1.45;
}

.auth-footer {
  text-align: center;
  margin: 4px 0 0 0;
}

/* Link de texto (auth, cerrar modales, volver). Antes esta regla se llamaba
   .link-button y COLISIONABA con el .link-button botón de arriba: los CTA de
   entrega quedaban como texto subrayado. Ahora cada clase tiene un solo rol. */
.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* área táctil cómoda para el ✕ de los modales */
  background: none;
  border: none;
  color: var(--teal);
  cursor: pointer;
  font-size: var(--fs-md);
  text-decoration: underline;
  padding: 4px;
  font-family: inherit;
}
.text-link:hover {
  color: var(--blue);
}

.login-info {
  color: var(--green);
  background: var(--green-soft);
  border-radius: var(--radius);
  font-size: var(--fs-md);
  margin: 0;
  padding: 10px 12px;
  min-height: 0;
}
.login-info:empty {
  display: none;
  padding: 0;
}

/* ============================================================
   Admin actions: botón eliminar pedido y crear nuevo
   ============================================================ */
.admin-actions {
  /* Barra sticky al pie del panel: Guardar siempre a la vista aunque el
     form mida 4 viewports en mobile (Drop D3) */
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 8px;
  align-items: center;
  /* Eliminar (destructivo) a la izquierda, Guardar (zona caliente) a la
     derecha: ya no quedan pegados (BAJA-23) */
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 10px 0;
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--line);
}

/* Cambios sin guardar: el botón lo dice con un halo ámbar */
#saveOrder.is-dirty {
  box-shadow: 0 0 0 3px var(--amber-soft), 0 0 0 4px var(--amber);
}

.primary-button:disabled,
.secondary-button:disabled {
  opacity: 0.55;
  cursor: progress;
}

.danger-button {
  /* misma altura (42px) que primary/secondary: antes medía ~36px y desalineaba
     la fila de Guardar/Eliminar */
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  padding: 0 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.danger-button:hover {
  background: var(--red);
  color: white;
}
.danger-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.new-order-button {
  display: block;
  width: 100%;
  background: var(--teal);
  color: white;
  border: none;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin: 8px 0;
  transition: opacity 0.15s;
}
.new-order-button:hover {
  opacity: 0.92;
}

/* ============================================================
   Modal: crear nuevo pedido
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 22, 28, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal-overlay[hidden] {
  display: none;
}

.modal-card {
  background: var(--surface);
  border-radius: 12px;
  padding: 28px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.modal-card h2 {
  margin: 0 0 16px 0;
  /* mismo nivel jerárquico que el título del pedido */
  font-size: var(--fs-xl);
  color: var(--ink);
}

.modal-form {
  margin: 0;
  /* .admin-form trae 4 columnas pensadas para el workspace ancho; dentro de
     un modal de 600-800px asfixian los campos. 2 columnas (los .wide ocupan
     la fila completa) respiran en cualquier modal. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* En pantalla chica el modal vuelve a una columna (esta regla vive DESPUÉS
   del media de 820 del admin-form, así que necesita su propio override) */
@media (max-width: 560px) {
  .modal-form {
    grid-template-columns: 1fr;
  }

  .modal-form .wide {
    grid-column: auto;
  }

  /* Modales anchos = hoja completa con UN solo scroll: antes el modal y la
     lista interna scrolleaban a la vez y en touch el dedo no sabía cuál movía */
  .modal-card-wide {
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .activity-list,
  .comments-thread,
  .lead-message,
  .quote-timeline-section .history-list {
    max-height: none;
  }
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}

/* Toggle "Mostrar archivados" en sidebar admin */
.toggle-archived {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  /* vive sobre el sidebar oscuro: --muted ahí rinde ~3.8:1, este gris pasa AA */
  color: #b8c6cd;
  margin-top: 10px;
  padding: 4px 0;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  line-height: 1.2;
}
.toggle-archived input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Cliente archivado en dropdown */
.client-archived {
  color: var(--muted);
  font-style: italic;
}

/* La nota interna se distingue de la visible para el cliente (riesgo alto de
   escribir costos/quejas en el campo equivocado) */
#formInternalNote {
  background: var(--amber-soft);
  border-style: dashed;
}

/* ============================================================
   Delivery blocks (Fase 3): toggle upload / URL externa
   ============================================================ */
.delivery-block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-soft);
}

.delivery-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--muted);
  margin: 0 0 8px 0;
}

.delivery-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.delivery-tab {
  background: none;
  border: none;
  padding: 6px 12px;
  font-size: var(--fs-sm);
  cursor: pointer;
  color: var(--muted);
  font-family: inherit;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.delivery-tab:hover {
  color: var(--ink);
}

.delivery-tab.is-active {
  color: var(--teal);
  border-bottom-color: var(--teal);
}

.delivery-pane[hidden] {
  display: none;
}

.delivery-pane input[type="file"] {
  display: block;
  width: 100%;
  font-size: var(--fs-sm);
  padding: 6px 0;
}

.delivery-pane input[type="url"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-md);
  font-family: inherit;
}

.delivery-current {
  font-size: var(--fs-sm);
  color: var(--teal);
  margin: 6px 0 0 0;
  word-break: break-all;
}
.delivery-current:empty {
  display: none;
}

.delivery-hint {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin: 6px 0 0 0;
}
/* Nombre de la versión que se está por subir (opcional) */
.delivery-version-label {
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-md);
}
/* Selector de pieza (reel) destino de la subida */
.delivery-piece-row {
  display: block;
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.delivery-piece-row select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-md);
  background: var(--surface);
  color: var(--ink);
}

.delivery-uploading {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--amber);
  margin-left: 8px;
}

/* ============================================================
   LEADS — botón en sidebar + modal
   ============================================================ */
.leads-control {
  margin: 0;
  padding: 0;
}

.leads-badge {
  background: var(--teal);
  color: #fff;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  min-width: 22px;
  text-align: center;
}

/* Badge de cotizaciones aprobadas (= plata esperando conversión): verde para
   distinguirlo del teal de "leads nuevos por revisar" */
.leads-badge--money {
  background: var(--green);
}

.modal-card-wide {
  max-width: 800px;
  width: calc(100vw - 40px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.leads-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.filter-chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all 0.18s ease;
}

.filter-chip:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.filter-chip.is-active {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

.leads-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.leads-empty {
  color: var(--muted);
  text-align: center;
  padding: 28px 12px;
  font-size: var(--fs-md);
}

.lead-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: rgba(7, 103, 130, 0.03);
  transition: border-color 0.2s ease;
}

/* el hover de borde teal lo hereda solo la card clickeable (quote-card); la
   lead-card no es clickeable (solo sus botones) y antes invitaba a un click
   que no hacía nada */
.quote-card:hover {
  border-color: var(--teal);
  box-shadow: 0 2px 10px rgba(7, 103, 130, 0.1);
}

.lead-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.lead-name {
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--ink);
  margin: 0;
}

.lead-meta {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 4px 0 0 0;
}

.lead-meta a {
  color: var(--teal);
  text-decoration: none;
}

.lead-meta a:hover {
  text-decoration: underline;
}

.lead-status-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  white-space: nowrap;
}

.lead-status-new {
  /* mismo par ámbar que "En espera" de pedidos: 7:1 (el anterior rendía 3:1) */
  background: var(--amber-soft);
  color: #744605;
}

.lead-status-contacted {
  background: rgba(7, 103, 130, 0.12);
  color: var(--teal);
}

.lead-status-approved {
  /* mismo par verde que status-completed / quote-aprobada: 7.8:1 */
  background: var(--green-soft);
  color: #145233;
}

.lead-status-rejected {
  /* tokens de paleta en vez de rojo Bootstrap ajeno */
  background: var(--red-soft);
  color: var(--red);
}

.lead-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.lead-tag {
  background: rgba(0, 0, 0, 0.05);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: var(--fs-2xs);
  color: var(--muted);
}

.lead-message {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  margin: 10px 0;
  max-height: 180px;
  overflow-y: auto;
}

.lead-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 12px;
}

.lead-actions button {
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.lead-actions button:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.lead-actions .lead-approve {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

.lead-actions .lead-approve:hover {
  background: #086080;
  color: #fff;
}

.lead-actions .lead-reject {
  color: var(--red);
  border-color: rgba(166, 56, 50, 0.3);
}

.lead-actions .lead-reject:hover {
  background: var(--red-soft);
  color: var(--red);
}

.hint-small {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--muted);
  margin-top: 4px;
}

/* ============================================================
   Activity / Audit modal (Fase 6)
   ============================================================ */

.activity-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  background: rgba(7, 103, 130, 0.08);
  border-radius: 999px;
  width: fit-content;
}

.activity-tab {
  padding: 8px 16px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all 0.18s ease;
}

.activity-tab:hover {
  color: var(--teal);
}

.activity-tab.is-active {
  background: var(--teal);
  color: #fff;
}

.activity-filters {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.activity-select {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: var(--fs-md);
  font-family: inherit;
  cursor: pointer;
  min-width: 180px;
}

.activity-select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(7, 103, 130, 0.15);
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 60vh;
  overflow-y: auto;
}

.activity-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 6px;
  border-bottom: 1px solid rgba(220, 227, 231, 0.5);
  transition: background 0.15s ease;
}

.activity-item:hover {
  background: rgba(7, 103, 130, 0.04);
}

.activity-item:last-child {
  border-bottom: 0;
}

.activity-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 103, 130, 0.08);
  border-radius: 50%;
  font-size: var(--fs-lg);
}

.activity-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.activity-title {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-md);
  line-height: 1.35;
  font-weight: 500;
}

.activity-detail {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.activity-when {
  margin: 4px 0 0 0;
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 500;
  cursor: help;
}

/* Tinte por tipo (ícono coloreado). Familias de la paleta: teal, --green
   (31,122,77), --amber (138,91,0) y --red (166,56,50); sin verdes/naranjas
   Bootstrap sueltos */
.activity-login .activity-icon { background: rgba(31, 122, 77, 0.12); }
.activity-order_opened .activity-icon { background: rgba(7, 103, 130, 0.12); }
.activity-order_updated .activity-icon { background: rgba(138, 91, 0, 0.14); }
.activity-order_deleted .activity-icon { background: rgba(166, 56, 50, 0.15); }
.activity-preview_clicked .activity-icon { background: rgba(7, 103, 130, 0.15); }
.activity-final_clicked .activity-icon { background: rgba(7, 103, 130, 0.20); }
.activity-email_sent .activity-icon { background: rgba(75, 0, 130, 0.10); }
.activity-lead_received .activity-icon { background: rgba(31, 122, 77, 0.12); }
.activity-lead_approved .activity-icon { background: rgba(31, 122, 77, 0.18); }
.activity-lead_rejected .activity-icon { background: rgba(166, 56, 50, 0.12); }
.activity-comment_added .activity-icon { background: rgba(7, 103, 130, 0.12); }

/* ============================================================
   Preview embebido + comentarios (feedback directo en portal)
   ============================================================ */

.preview-embed {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #0d161c;
}

.preview-embed video,
.preview-embed img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  background: #0d161c;
}

.preview-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.preview-embed-loading {
  margin: 0;
  padding: 18px;
  color: #b8c6cd;
  font-size: var(--fs-md);
}

/* Controles finos del player (velocidad lenta + paso por frame) — viven dentro
   de la caja oscura del preview, como barra de herramientas del reproductor. */
.preview-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  background: #11202a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.preview-controls .pc-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.preview-controls .pc-label {
  font-size: var(--fs-xs);
  color: #9fb2bd;
}
.preview-controls .pc-btn {
  font: inherit;
  font-size: var(--fs-xs);
  line-height: 1;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #e7eef2;
  cursor: pointer;
}
.preview-controls .pc-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
.preview-controls .pc-btn.is-active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* Cabecera del bloque de comentarios: título + botón Exportar (solo staff) */
.comments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.comments-head .comments-title {
  margin: 0;
  margin-right: auto; /* empuja piezas/versión/export a la derecha */
}

/* Skeleton de carga: evita el salto brusco de layout cuando llega el contenido
   real (comentarios, actividad, historial, preview) */
.skeleton-row {
  min-height: 56px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, #e8eef1 25%, #f4f7f8 50%, #e8eef1 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}

.skeleton-row + .skeleton-row {
  margin-top: 8px;
}

.skeleton-embed {
  aspect-ratio: 16 / 9;
  background: linear-gradient(90deg, #0d161c 25%, #16242d 50%, #0d161c 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-row,
  .skeleton-embed {
    animation: none;
  }
}

/* Player + comentarios. Por defecto apilados (mobile); en PC lado a lado
   (media query abajo). */
.preview-layout {
  display: grid;
  gap: 16px;
}

.comments-section {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

/* PC: el hilo de comentarios va AL LADO del video, a su misma altura, para
   comentar sin dejar de verlo. El video se lleva ~2/3 del ancho del panel. */
@media (min-width: 1024px) {
  .preview-layout {
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    align-items: stretch;
  }

  .preview-layout .preview-embed video,
  .preview-layout .preview-embed img {
    /* puede crecer junto a la columna de comentarios (el tope general
       de 420px queda para cuando va solo) */
    max-height: 560px;
  }

  /* Al costado deja de ser una sección "debajo": sin borde ni margen
     superior, y en columna para que el form quede al pie del hilo */
  .preview-layout .comments-section {
    margin-top: 14px;
    border-top: 0;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* El hilo llena el alto disponible junto al video y scrollea adentro */
  .preview-layout .comments-thread {
    flex: 1;
    max-height: 420px;
  }

  .preview-layout .comment-form {
    margin-top: auto;
  }
}

.comments-title {
  margin: 0 0 10px 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
}

.comments-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.comments-empty {
  margin: 4px 0;
  color: var(--muted);
  font-size: var(--fs-md);
}

.comment-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  padding: 10px 12px;
}

.comment-item.is-staff {
  background: var(--teal-soft);
  border-color: rgba(7, 103, 130, 0.25);
}

.comment-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: 4px;
}

.comment-meta strong {
  color: var(--ink);
  font-size: var(--fs-sm);
}

.comment-body {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Acciones por comentario (borrar / resolver) + estado resuelto */
.comment-meta .cm-who {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.comment-actions {
  display: inline-flex;
  gap: 6px;
  flex: 0 0 auto;
}
.comment-action {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  cursor: pointer;
}
.comment-action:hover { color: var(--ink); border-color: var(--teal); }
.comment-action.delete:hover { color: #c0392b; border-color: #c0392b; }
.comment-action:disabled { opacity: 0.5; cursor: default; }
.comment-item.is-resolved { opacity: 0.62; }
.comment-item.is-resolved .comment-body { text-decoration: line-through; }
.comment-resolved-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #2e7d4f;
  background: rgba(46, 125, 79, 0.12);
  border-radius: 999px;
  padding: 1px 7px;
}
.comment-version-tag {
  font-size: 10px;
  letter-spacing: 0.3px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 6px;
}
.review-side .comment-version-tag { color: #9fb2bd; border-color: #2c343b; }

/* Selector de versión de preview (V1/V2…) en el header de comentarios */
.version-select,
.piece-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.version-select select,
.piece-select select {
  font: inherit;
  font-size: var(--fs-xs);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  max-width: 160px;
}
.version-select.dark,
.piece-select.dark { color: #9fb2bd; }
.version-select.dark select,
.piece-select.dark select {
  background: #0c0f12;
  color: #e8edf1;
  border-color: #2c343b;
}
/* El slot del visor no debe ser el flex-item: que lo sea el propio selector. */
#reviewVersionSlot { display: contents; }

/* Botón borrar versión / reel (staff) */
.version-del,
.piece-del {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  cursor: pointer;
}
.version-del:hover,
.piece-del:hover { color: #c0392b; border-color: #c0392b; }
.review-side .version-del,
.review-side .piece-del { background: #0c0f12; border-color: #2c343b; color: #9fb2bd; }
.review-side .version-del:hover,
.review-side .piece-del:hover { color: #e06b6b; border-color: #e06b6b; }

/* Tarjeta de uso de R2 (panel admin) */
.r2-usage {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.r2-usage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.r2-usage-body { font-size: var(--fs-sm); color: var(--muted); }
.r2-total { margin: 6px 0; }
.r2-total strong { color: var(--ink); font-size: var(--fs-md); }
.r2-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-soft);
  overflow: hidden;
  margin: 8px 0;
}
.r2-bar-fill { height: 100%; background: var(--teal); border-radius: 999px; }
.r2-top { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.r2-top li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--fs-xs);
}
.r2-top li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r2-top li span:last-child { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.timecode-chip {
  border: 0;
  border-radius: 999px;
  background: var(--teal);
  color: #ffffff;
  font-size: var(--fs-2xs);
  font-weight: 600;
  padding: 2px 9px;
  margin-right: 8px;
  vertical-align: middle;
}

.timecode-chip:hover {
  /* hover = más oscuro (antes aclaraba y bajaba el contraste del texto a 4.3:1) */
  background: #066176;
}

.comment-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  resize: vertical;
  background: var(--surface);
  color: var(--ink);
}

.comment-form textarea:focus {
  outline: 2px solid rgba(7, 103, 130, 0.35);
  outline-offset: 1px;
}

.comment-form-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.comment-timecode {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--muted);
  cursor: pointer;
  margin-right: auto;
}

.comment-send {
  padding: 8px 18px;
  font-size: var(--fs-md);
}

/* ============================================================
   Cotizaciones (COT-2/3/5)
   Reusa el lenguaje de leads (lead-card, filter-chip,
   lead-status-pill) y suma: stats, pills por estado, editor de
   items, totales en vivo y el modal de conversión.
   ============================================================ */

.quotes-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quotes-header-actions .primary-button {
  min-height: 36px;
  padding: 0 14px;
  font-size: var(--fs-sm);
}

.quotes-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.quote-stat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  padding: 10px 12px;
  display: grid;
  gap: 2px;
}

.quote-stat strong {
  font-size: var(--fs-lg);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.quote-stat span {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--muted);
}

/* Cards de la lista (heredan lead-card) */
.quote-card {
  cursor: pointer;
}

/* Pills por estado del pipeline */
.quote-status-borrador {
  background: rgba(0, 0, 0, 0.07);
  color: #4a545b;
}
.quote-status-enviada {
  background: var(--blue-soft);
  color: #16446f;
}
.quote-status-seguimiento {
  background: var(--amber-soft);
  color: #744605;
}
.quote-status-aprobada {
  background: var(--green-soft);
  color: #145233;
}
.quote-status-rechazada {
  background: var(--red-soft);
  color: var(--red);
}
.quote-status-cerrada {
  background: var(--teal-soft);
  color: #0c4f4b;
}

/* Detalle drill-in */
.quote-detail-top {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.quote-back {
  min-height: 36px;
  padding: 0 12px;
}

.quote-detail-id {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quote-detail-id strong {
  font-size: var(--fs-lg);
  color: var(--ink);
}

/* Editor de items */
.quote-items-block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  padding: 14px;
}

.quote-items-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

/* ============================================================
   Pagos (PAY-1/PAY-2)
   ============================================================ */

/* Línea de estado de pago en la sección Cotizaciones del cliente */
.payment-line {
  display: block;
  font-size: var(--fs-sm, 13px);
  color: var(--muted);
}

.payment-line.payment-ok {
  color: #145233;
}

/* Botones de pago (portal): reutilizan .link-button en fila */
.pay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

/* Candado de entrega final */
.payment-lock {
  border-color: var(--amber, #b07908);
}

/* Toggle "requiere pago para entregar" en el form de pedido */
.payment-gate-toggle {
  flex-direction: row !important;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.payment-gate-toggle input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin-top: 3px;
  accent-color: var(--teal, #076782);
}

.payment-gate-toggle .hint-small {
  display: block;
  margin-top: 2px;
}

/* Form de registro manual dentro del detalle de cotización */
.payment-register {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

/* Aportes del cliente al pedido: material (links) + notas para el equipo */
.input-add-form {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}

.input-add-form input,
.input-add-form textarea {
  width: 100%;
}

.source-link {
  overflow-wrap: anywhere;
}

.client-note-body {
  margin: 0 0 2px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Boletas / facturas adjuntas a la cotización (PAY-5) */
.quote-docs-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.quote-doc-upload {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}

.doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quote-items-head .delivery-label {
  margin: 0;
}

.quote-add-item {
  min-height: 34px;
  padding: 0 12px;
  font-size: var(--fs-sm);
}

.quote-items-editor {
  display: grid;
  gap: 8px;
}

.quote-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px 130px 38px;
  gap: 8px;
  align-items: center;
}

.quote-item-row input {
  min-height: 40px;
  padding: 8px 10px;
}

.quote-item-remove {
  width: 38px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-sm);
}

.quote-item-remove:hover {
  border-color: var(--red);
  color: var(--red);
}

/* Totales en vivo */
.quote-totals {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  display: grid;
  gap: 4px;
  justify-items: end;
}

.quote-totals p {
  margin: 0;
  display: flex;
  gap: 14px;
  align-items: baseline;
  color: var(--muted);
  font-size: var(--fs-md);
}

.quote-totals strong {
  color: var(--ink);
  min-width: 110px;
  text-align: right;
}

.quote-totals .quote-total-final {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.quote-totals .quote-total-final strong {
  color: var(--teal);
  font-size: 1.15rem;
}

/* Barra de acciones del detalle */
.quote-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.quote-actions .primary-button,
.quote-actions .secondary-button,
.quote-actions .danger-button {
  font-size: var(--fs-sm);
}

.quote-timeline-section {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.quote-timeline-section .history-list {
  max-height: 260px;
  overflow-y: auto;
}

/* Modal de conversión: rows item -> pedido */
.convert-orders {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.convert-order-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.convert-order-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--teal);
}

.convert-order-row input[type="text"] {
  min-height: 40px;
  padding: 8px 10px;
}

/* Si el checkbox está desmarcado, el título se ve apagado */
.convert-order-row:has(input[type="checkbox"]:not(:checked)) input[type="text"] {
  opacity: 0.45;
}

.convert-existing {
  grid-column: 1 / -1;
  margin: 0 0 4px 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--teal-soft);
  color: #0c4f4b;
  font-size: var(--fs-md);
  line-height: 1.45;
}

.convert-new-fields {
  display: grid;
  gap: 14px;
}

/* Botón "Ver COT-X" en la card del lead */
.lead-actions .lead-quote-link {
  border-color: rgba(7, 103, 130, 0.35);
  color: var(--teal);
}

/* Link de la cotización en la sección del cliente */
.quote-client-link {
  color: var(--teal);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.quote-client-link:hover {
  text-decoration: underline;
}

/* Tinte de iconos en Actividad */
.activity-quote_created .activity-icon { background: rgba(7, 103, 130, 0.10); }
.activity-quote_status_changed .activity-icon { background: rgba(7, 103, 130, 0.14); }
.activity-quote_viewed .activity-icon { background: rgba(15, 95, 156, 0.12); }
.activity-quote_accepted .activity-icon { background: rgba(31, 122, 77, 0.16); }
.activity-quote_converted .activity-icon { background: rgba(31, 122, 77, 0.20); }
.activity-quote_deleted .activity-icon { background: rgba(166, 56, 50, 0.12); }
.activity-quote_sent_from_panel .activity-icon { background: rgba(7, 103, 130, 0.12); }

/* ============================================================
   Calendario rediseñado: agenda de hitos + grilla con navegación
   ============================================================ */

.calendar-agenda {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.calendar-agenda-title {
  margin: 0 0 2px 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.agenda-item {
  display: grid;
  grid-template-columns: 96px auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.agenda-item:hover,
.agenda-item.is-active {
  border-color: var(--teal);
}

.agenda-item.is-active {
  background: var(--teal-soft);
}

.agenda-date {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.agenda-kind {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  white-space: nowrap;
}

.agenda-title {
  font-size: var(--fs-sm);
  /* es el nombre del pedido (contenido, no metadato): va en tinta */
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Colores por tipo de hito (agenda y grilla comparten clases) */
.hito-solicitud {
  background: rgba(0, 0, 0, 0.06);
  color: #4a545b;
}
.hito-inicio {
  background: var(--blue-soft);
  color: #16446f;
}
.hito-entrega_estimada {
  background: var(--amber-soft);
  color: #744605;
}
.hito-entrega {
  background: var(--green-soft);
  color: #145233;
}

/* Navegación de meses */
.calendar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-nav-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--teal);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.calendar-nav-btn:hover {
  border-color: var(--teal);
}

/* Hoy: marca sutil */
.calendar-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--teal);
}

@media (max-width: 560px) {
  .agenda-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .agenda-date {
    grid-column: 1;
  }

  .agenda-kind {
    grid-column: 2;
    justify-self: start;
  }

  .agenda-title {
    grid-column: 1 / -1;
    white-space: normal;
  }
}

/* Mobile: el editor de items se reacomoda y las acciones van full-width */
@media (max-width: 820px) {
  .quotes-stats {
    grid-template-columns: 1fr 1fr;
  }

  .quote-stat:last-child {
    grid-column: 1 / -1;
  }

  .quote-item-row {
    /* 3 columnas: el precio unitario antes caía en la columna de 38px del
       botón eliminar — un campo donde se escribe "450000" era inusable */
    grid-template-columns: 78px minmax(0, 1fr) 38px;
    grid-template-areas:
      "desc desc remove"
      "qty  unit unit";
  }

  .quote-item-row [data-quote-item="description"] { grid-area: desc; }
  .quote-item-row [data-quote-item="quantity"] { grid-area: qty; }
  .quote-item-row [data-quote-item="unitPrice"] { grid-area: unit; }
  .quote-item-row .quote-item-remove { grid-area: remove; }

  .quote-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .quote-actions button {
    width: 100%;
  }
}

/* ============================================================
   Foco de teclado (Drop D1 de la revision de diseno)
   :focus-visible no aparece al clickear con mouse, asi que el
   look actual no cambia; con Tab el anillo siempre se ve.
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Contextos oscuros: el teal corporativo no se ve sobre el sidebar */
.sidebar :focus-visible,
.login-screen :focus-visible {
  outline-color: #7fd0e6;
}

/* Campos de texto: anillo suave en vez de outline (patron que ya usaba
   .activity-select:focus) */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.select:focus-visible {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(7, 103, 130, 0.15);
}

/* Targets táctiles cómodos en CUALQUIER ancho con puntero grueso (tablets y
   teléfonos apaisados que superan el breakpoint de 820) */
@media (pointer: coarse) {
  .filter-chip,
  .delivery-tab,
  .activity-tab {
    min-height: 44px;
  }
}

/* ============================================================================
   Visor de revisión (Fase 1, estilo frame.io)
   ============================================================================ */
.preview-bar { margin: 0 0 12px; }
.review-open-btn { display: inline-flex; align-items: center; gap: 6px; }

body.review-open { overflow: hidden; }

#reviewOverlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: #0c0f12;
  color: #e8edf1;
}
#reviewOverlay[hidden] { display: none; }

.review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid #20262c;
  flex: 0 0 auto;
}
.review-head-title strong { font-size: 1rem; }
.review-close {
  background: #1b2228;
  color: #e8edf1;
  border: 1px solid #2c343b;
  border-radius: 8px;
  padding: 8px 14px;
  font: inherit;
  cursor: pointer;
}
.review-close:hover { background: #242c33; }

.review-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 360px;
  /* Fila de alto DEFINIDO: sin esto, un video vertical hace crecer la fila con
     su alto intrínseco y empuja los controles fuera de pantalla. */
  grid-template-rows: minmax(0, 1fr);
}

.review-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #000;
  padding: 16px;
  gap: 12px;
}
.review-media {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.review-media video,
.review-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.review-media iframe { width: 100%; height: 100%; border: 0; }
.review-msg { color: #9aa6ad; text-align: center; padding: 24px; }

.review-controls {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* Transporte: frame ◀|  ·  play  ·  frame |▶  (play al centro) */
.review-transport {
  order: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* En teléfono: transporte+velocidad+time+full arriba; la barra, fila propia.
   Uso #reviewScrubber (ID) para ganarle en prioridad a la regla .review-scrubber
   de más abajo, que si no deja la barra inline. */
#reviewRate { order: 1; }
.review-time { order: 2; margin-left: auto; }
.review-full { order: 3; }
#reviewScrubber { order: 4; flex: 1 1 100%; }
@media (min-width: 680px) {
  .review-time { margin-left: 0; order: 3; }
  #reviewScrubber { order: 2; flex: 1 1 auto; }
  .review-full { order: 4; }
}
/* Botón de velocidad (cicla 0.25→0.5→1→1.5→2) y pasos por frame */
.rev-step-btn,
.review-rate-btn {
  background: #1b2228;
  color: #cdd9df;
  border: 1px solid #2c343b;
  border-radius: 6px;
  height: 36px;
  padding: 0 10px;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.rev-step-btn { min-width: 38px; padding: 0 8px; }
.review-rate-btn { min-width: 46px; }
.rev-step-btn:hover,
.review-rate-btn:hover { background: #242c33; }
.review-side .comments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
  /* El panel es angosto (360px): sin wrap, "Versión + 🗑 + Exportar" no entran
     junto al título y "Exportar" quedaba cortado. Con wrap, los controles bajan
     a su propia línea (el título ocupa la primera). */
  flex-wrap: wrap;
}
/* Título a ancho completo ⇒ los controles caen limpios a la línea de abajo. */
.review-side .comments-head .comments-title { flex: 1 1 100%; }
.review-side .comments-export { color: #7fd4e0; white-space: nowrap; }
.review-play,
.review-full {
  background: #1b2228;
  color: #e8edf1;
  border: 1px solid #2c343b;
  border-radius: 8px;
  min-width: 40px;
  height: 36px;
  font-size: 0.95rem;
  cursor: pointer;
}
.review-play:hover,
.review-full:hover { background: #242c33; }
.review-time {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: #aeb8bf;
  white-space: nowrap;
}

.review-scrubber {
  position: relative;
  flex: 1 1 auto;
  height: 22px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.review-scrubber::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 3px;
  background: #2c343b;
}
.review-progress {
  position: absolute;
  left: 0;
  height: 5px;
  border-radius: 3px;
  background: #2bb3c0;
  width: 0;
  pointer-events: none;
}
.review-markers {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
}
.review-marker {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 2px solid #0c0f12;
  cursor: pointer;
  padding: 0;
  pointer-events: auto;
}
.review-marker.is-client { background: #f2a33c; }
.review-marker.is-staff { background: #2bb3c0; }
.review-marker:hover { transform: translateY(-50%) scale(1.3); }
.review-marker.has-annot { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }

/* ── Anotación sobre el frame + barra de dibujo (Fase 2) ── */
.review-media { position: relative; }
.review-annot-svg {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none; /* modo cursor: el click va al video */
  touch-action: none;
}
.review-annot-svg.is-drawing {
  pointer-events: auto;
  cursor: crosshair;
}
.review-annot-tools {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: #cdd9df;
}
.review-annot-tools .rat-label { color: #9aa6ad; }
.review-annot-tools .rat-btn {
  font: inherit;
  font-size: var(--fs-xs);
  line-height: 1;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #e7eef2;
  cursor: pointer;
}
.review-annot-tools .rat-btn:hover { background: rgba(255, 255, 255, 0.14); }
.review-annot-tools .rat-btn.is-active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.review-annot-tools .rat-colors { display: inline-flex; align-items: center; gap: 5px; }
.review-annot-tools .rat-swatch {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
}
.review-annot-tools .rat-swatch.is-active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}
.review-annot-tools .rat-hint { color: #8a969d; }
.timecode-chip.has-annot { font-weight: 600; }

.review-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid #20262c;
  background: #11161a;
  padding: 14px;
  gap: 10px;
}
.review-side .comments-title { margin: 0; margin-right: auto; color: #aeb8bf; font-size: 0.85rem; }
/* El thread del visor llena la columna (sin el max-height de .comments-thread);
   así la lista crece y el form de comentar queda pegado abajo, sin hueco. */
.review-thread { flex: 1 1 auto; min-height: 0; max-height: none; margin-bottom: 0; overflow-y: auto; }
.review-side .comment-item { background: #1b2228; border-color: #2c343b; }
.review-side .comment-body,
.review-side .comment-meta strong { color: #e8edf1; }
.review-side .comment-action {
  background: #0c0f12;
  border-color: #2c343b;
  color: #9fb2bd;
}
.review-side .comment-action:hover { color: #e8edf1; }
.review-side .comment-input {
  background: #0c0f12;
  color: #e8edf1;
  border-color: #2c343b;
}
.review-comment-form .comment-tc-wrap { white-space: nowrap; }

.comment-flash { animation: commentFlash 1.2s ease; }
@keyframes commentFlash {
  0% { box-shadow: 0 0 0 2px #2bb3c0; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (max-width: 860px) {
  .review-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .review-side { border-left: 0; border-top: 1px solid #20262c; max-height: 45vh; }
  /* Más video, menos margen: el stage aprovecha el ancho del teléfono. */
  .review-stage { padding: 8px; gap: 8px; }
}

/* ============================================================================
   Gestor del carrusel de la landing (admin)
   ============================================================================ */
.cv-hint { margin: 0 0 14px; font-size: 13px; color: #5d6970; }
.cv-manager { display: grid; gap: 22px; }
.cv-section-title { margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.cv-count { font-size: 12px; background: #eef3f6; color: #5d6970; border-radius: 999px; padding: 1px 8px; }
.cv-rows { display: grid; gap: 10px; }
.cv-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid #dce3e7;
  border-radius: 8px;
  background: #fff;
}
.cv-row.is-off { opacity: 0.55; }
.cv-prev { width: 120px; height: 70px; border-radius: 6px; background: #000; object-fit: cover; }
.cv-fields { display: grid; gap: 6px; min-width: 0; }
.cv-f { padding: 8px 10px; border: 1px solid #dce3e7; border-radius: 6px; font: inherit; font-size: 14px; }
.cv-src { margin: 0; font-size: 12px; color: #8a949b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.cv-btn {
  min-width: 32px;
  height: 30px;
  border: 1px solid #dce3e7;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.cv-btn:hover:not(:disabled) { border-color: #076782; }
.cv-btn:disabled { opacity: 0.4; cursor: default; }
.cv-del { color: #a63832; }
.cv-toggle { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #131719; white-space: nowrap; }
.cv-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cv-add input {
  padding: 8px 10px;
  border: 1px solid #dce3e7;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  flex: 1 1 140px;
  min-width: 120px;
}

@media (max-width: 620px) {
  .cv-row { grid-template-columns: 1fr; }
  .cv-prev { width: 100%; height: 160px; }
  .cv-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* ============================================================================
   Navegación admin con submenús + vistas in-page (dashboard, incremento 1)
   ============================================================================ */
.admin-nav { display: grid; gap: 2px; }
.nav-group { display: grid; gap: 2px; }
.nav-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8595a0;
  cursor: pointer;
  border-radius: 6px;
}
.nav-group-head:hover { background: rgba(255, 255, 255, 0.05); color: #aebbc2; }
.nav-chev { font-size: 11px; transition: transform 0.15s; }
.nav-group.is-collapsed .nav-chev { transform: rotate(-90deg); display: inline-block; }
.nav-group.is-collapsed .nav-group-items { display: none; }
.nav-group-items { display: grid; gap: 2px; padding-left: 4px; }
.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  background: none;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  color: #cdd9de;
  cursor: pointer;
  text-align: left;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.06); }
.nav-item.is-active { background: rgba(7, 103, 130, 0.42); color: #8fd4e8; font-weight: 600; }

.ws-view { display: grid; gap: 12px; align-content: start; }
.ws-view[hidden] { display: none; }
/* Modal reusado como vista (cotizaciones): que fluya en el workspace, sin el
   scroll interno ni la sombra de un modal flotante. */
.ws-view .modal-card {
  max-height: none;
  overflow: visible;
  box-shadow: none;
  margin: 0;
}
/* Al abrir una vista de sección, se oculta TODO el contenido de "pedidos"
   (topbar, calendario, métricas, detalle, panel de edición) en bloque: cualquier
   hijo directo del workspace que NO sea una vista de sección (.ws-view). */
.workspace.viewing-section > :not(.ws-view) {
  display: none !important;
}

/* ============================================================================
   Carátulas (portadas) — carrusel del cliente + uploader/miniaturas del admin
   ============================================================================ */
.covers-block { margin-top: var(--s4); min-width: 0; max-width: 100%; }
.covers-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--muted);
  margin: 0 0 var(--s2);
}
.cover-carousel { position: relative; min-width: 0; max-width: 100%; }
/* Track como GRID (no flex): grid-auto-columns:100% se resuelve contra el ancho
   DEFINIDO del contenedor, evitando el bug de flex-basis:100% que en algunos
   motores móviles (Samsung Internet/Chrome) se resolvía contra el ancho
   intrínseco de la imagen y desbordaba la página con la carátula recortada. */
.cover-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--s3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  min-width: 0;
  max-width: 100%;
}
.cover-track::-webkit-scrollbar { height: 6px; }
.cover-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.cover-slide {
  position: relative;
  min-width: 0;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0c0f12;
  overflow: hidden;
}
.cover-img {
  width: 100%;
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
}
.cover-dl {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  border: none;
  border-radius: var(--radius);
  background: rgba(7, 103, 130, 0.92);
  color: #fff;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 7px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cover-dl:hover { background: var(--teal); }
.cover-dl:disabled { opacity: 0.6; cursor: default; }
.cover-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}
.cover-nav.prev { left: 8px; }
.cover-nav.next { right: 8px; }
.cover-nav:hover { background: #fff; }
.cover-carousel:not(.is-multi) .cover-nav { display: none; }
.cover-counter {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  background: rgba(12, 15, 18, 0.72);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}

/* Lightbox (ver la carátula grande) */
.cover-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 9, 11, 0.92);
  padding: 24px;
}
.cover-lightbox.open { display: flex; }
.cover-lightbox img {
  max-width: 96vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: var(--radius);
}
.cover-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #2c343b;
  background: #1b2228;
  color: #e8edf1;
  font-size: 20px;
  cursor: pointer;
}
.cover-lightbox-close:hover { background: #242c33; }

/* Admin: sub-sección de carátulas dentro del bloque de preview */
.delivery-sublabel {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--muted);
  margin: var(--s4) 0 var(--s1);
}
.covers-admin { margin-top: var(--s1); }
.covers-thumbs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.covers-thumbs:empty { display: none; }
.cover-thumb {
  position: relative;
  width: 72px;
  height: 96px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-soft);
}
.cover-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-thumb-del {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: rgba(166, 56, 50, 0.92);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover-thumb-del:hover { background: var(--red); }