/* ============================================================================
   Backoffice inmobiliario — sistema visual
   ----------------------------------------------------------------------------
   El chrome es deliberadamente neutro: la plataforma es white-label y el color
   de marca llega desde SiteSettings, inyectado en --brand por el layout.
   Nada del chrome puede pelearse con un color de cliente desconocido.
   ========================================================================== */

:root {
  /* Chrome — slate frio, neutro frente a cualquier marca */
  --ink:        #16202c;
  --ink-2:      #1e2b3a;
  --ink-3:      #2b3b4e;
  --on-ink:     #c7d2de;
  --on-ink-dim: #7d8ea1;

  /* Superficies */
  --paper:   #ffffff;
  --surface: #f3f6f9;
  --line:    #dde3ea;
  --line-2:  #eef2f6;

  /* Texto */
  --text:  #1d2733;
  --muted: #65768a;
  --faint: #93a1b2;

  /* Marca — la pisa el layout con el valor del cliente */
  --brand:      #1f3864;
  --brand-soft: #eaeff7;

  /* Estados */
  --ok:   #1f7a4d;
  --warn: #a96a06;
  --err:  #bc3b2e;
  --ok-soft:   #e6f3ec;
  --warn-soft: #fdf3e2;
  --err-soft:  #fbeceb;

  --radius: 6px;
  --shell:  240px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface);
}

/* Numerales de ancho fijo: esta pantalla es precios, m2 y conteos.
   Sin esto las columnas de numeros bailan al cambiar de pagina. */
table, .num, .metric-valor, input[type="number"] {
  font-variant-numeric: tabular-nums;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* ===========================================================================
   Shell
   ========================================================================== */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--shell);
  flex: 0 0 var(--shell);
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-marca {
  padding: 18px 20px;
  border-bottom: 1px solid var(--ink-3);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 61px;
}
.sidebar-marca img { max-height: 30px; max-width: 150px; }
.sidebar-marca .nombre {
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.nav { padding: 12px 10px; flex: 1; overflow-y: auto; }

.nav-grupo {
  color: var(--on-ink-dim);
  font-size: 11px;
  font-weight: 600;
  padding: 16px 10px 6px;
  letter-spacing: 0.04em;
}
.nav-grupo:first-child { padding-top: 4px; }

.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--on-ink);
  font-size: 13.5px;
  margin-bottom: 1px;
}
.nav a:hover { background: var(--ink-2); color: #fff; text-decoration: none; }

.nav a.on {
  background: var(--ink-3);
  color: #fff;
  font-weight: 500;
  box-shadow: inset 3px 0 0 var(--brand);
}

.nav a svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .85; }

/* Contador de pendientes al costado del item */
.nav .cuenta {
  margin-left: auto;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  min-width: 19px;
  height: 19px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  padding: 0 6px;
}

.sidebar-pie {
  display: flex; align-items: center; gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--ink-3);
}
.sidebar-pie .usuario-chip { flex: 1; min-width: 0; }

/* Salir: a la derecha del chip, discreto pero siempre a la vista. */
.salir {
  flex: 0 0 auto; order: 2;
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  background: none; border: 0; border-radius: var(--radius);
  color: var(--on-ink-dim); cursor: pointer;
}
.salir:hover { background: var(--ink-2); color: #fff; }
.salir svg { width: 17px; height: 17px; }
.usuario-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius);
  color: var(--on-ink);
}
.usuario-chip:hover { background: var(--ink-2); text-decoration: none; }
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
  flex: 0 0 32px;
  object-fit: cover;
}
.usuario-chip .datos { min-width: 0; }
.usuario-chip .nom {
  color: #fff; font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.usuario-chip .rol { color: var(--on-ink-dim); font-size: 11.5px; }

/* ===========================================================================
   Área principal
   ========================================================================== */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 0 24px;
  min-height: 61px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.topbar .sub { color: var(--muted); font-size: 13px; }
.topbar .der { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.contenido { padding: 24px; flex: 1; }
.contenido > :first-child { margin-top: 0; }

/* ===========================================================================
   Avisos
   ========================================================================== */
.aviso {
  padding: 11px 14px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  border-left: 3px solid;
  font-size: 13.5px;
}
.aviso-ok   { background: var(--ok-soft);   border-color: var(--ok);   color: #10543a; }
.aviso-err  { background: var(--err-soft);  border-color: var(--err);  color: #8d241a; }
.aviso-warn { background: var(--warn-soft); border-color: var(--warn); color: #7a4c05; }

/* ===========================================================================
   Panel
   ========================================================================== */
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.panel-cab {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: 12px;
}
.panel-cab h2 { margin: 0; font-size: 15px; font-weight: 600; }
.panel-cab .der { margin-left: auto; }
.panel-cuerpo { padding: 18px; }
.panel-cuerpo.sin-pad { padding: 0; }

/* ===========================================================================
   Métricas del tablero
   Una fila de cifras con su etiqueta, separadas por linea. Sin tarjetas:
   seis cards con sombra para seis numeros es ruido, no jerarquia.
   ========================================================================== */
.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
}
.metrica {
  padding: 16px 18px;
  border-right: 1px solid var(--line-2);
}
.metrica:last-child { border-right: 0; }
.metrica-valor {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.metrica-etq { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.metrica a { color: inherit; }
.metrica.alerta .metrica-valor { color: var(--warn); }
.metrica.urgente .metrica-valor { color: var(--err); }

/* ===========================================================================
   Tablas
   ========================================================================== */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th {
  text-align: left;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tabla td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: #fafbfd; }
.tabla .der, .tabla th.der { text-align: right; }

/* Miniatura: un listado de propiedades sin foto no sirve para nada */
.mini {
  width: 56px; height: 42px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--line-2);
  display: block;
}
.mini-vacia {
  width: 56px; height: 42px;
  border-radius: 4px;
  background: var(--line-2);
  display: grid; place-items: center;
  color: var(--faint);
}

.celda-titulo { font-weight: 500; }
.celda-sub { color: var(--muted); font-size: 12.5px; }

/* Marca de que un valor no salio de datos propios: del mercado o estimado por
   IA. Ambar y no rojo porque no es un error, es una precision que el asesor
   necesita tener a la vista antes de llamar. */
.marca-ref {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  background: #fff3d6; color: #6b5416; border: 1px solid #e3c278;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.codigo {
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Estado como punto + palabra. Un pill de color por estado convierte
   la grilla en un semaforo y deja de leerse. */
.estado { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.estado::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--faint);
  flex: 0 0 7px;
}
.estado-publicada::before { background: var(--ok); }
.estado-borrador::before  { background: var(--faint); }
.estado-pausada::before   { background: var(--warn); }
.estado-reservada::before { background: #2f6fb3; }
.estado-vendida::before,
.estado-alquilada::before { background: var(--brand); }
.estado-archivada::before { background: #c3ccd7; }

/* Estados de consulta. Nueva y Asignada son las que le deben una respuesta a
   alguien, así que van en rojo y ámbar, no en gris. */
.estado-nueva::before     { background: var(--err); }
.estado-asignada::before  { background: var(--warn); }
.estado-engestion::before { background: #2f6fb3; }
.estado-cerrada::before   { background: var(--faint); }

/* ===========================================================================
   Formularios
   ========================================================================== */
label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; }
.ayuda { color: var(--muted); font-size: 12.5px; margin-top: 4px; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"],
select, textarea {
  width: 100%;
  padding: 8px 11px;
  font: inherit;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
input[readonly], input:disabled, select:disabled {
  background: var(--surface);
  color: var(--muted);
}
textarea { resize: vertical; min-height: 90px; }

.campo { margin-bottom: 16px; }
.fila { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.check { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 9px; }
.check input { width: 16px; height: 16px; margin-top: 2px; flex: 0 0 16px; accent-color: var(--brand); }
.check label { margin: 0; font-weight: 400; }

.error { color: var(--err); font-size: 12.5px; margin-top: 4px; }
.field-validation-error { color: var(--err); font-size: 12.5px; }
.input-validation-error { border-color: var(--err); }
.validation-summary-errors ul { margin: 0; padding-left: 18px; }

/* ===========================================================================
   Botones
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--paper);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 16px; height: 16px; }

.btn-primario { background: var(--brand); color: #fff; }
.btn-primario:hover { filter: brightness(1.1); }

.btn-borde { border-color: var(--line); }
.btn-borde:hover { background: var(--surface); border-color: #c8d2de; }

.btn-plano { color: var(--muted); }
.btn-plano:hover { background: var(--surface); color: var(--text); }

.btn-peligro { color: var(--err); border-color: var(--line); }
.btn-peligro:hover { background: var(--err-soft); border-color: var(--err); }

.btn-chico { padding: 5px 10px; font-size: 12.5px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-fila { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===========================================================================
   Vacío
   ========================================================================== */
.vacio { padding: 52px 24px; text-align: center; }
.vacio svg { width: 34px; height: 34px; color: var(--faint); margin-bottom: 12px; }
.vacio h3 { margin: 0 0 5px; font-size: 15px; font-weight: 600; }
.vacio p { margin: 0 0 18px; color: var(--muted); }

/* ===========================================================================
   Login — la única pantalla que no es superficie de trabajo
   ========================================================================== */
.acceso { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }

.acceso-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: var(--paper);
}
.acceso-caja { width: 100%; max-width: 348px; }
.acceso-marca { margin-bottom: 34px; }
.acceso-marca img { max-height: 46px; max-width: 200px; }
.acceso-marca .nombre {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand);
}
.acceso h1 { font-size: 23px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.02em; }
.acceso .intro { color: var(--muted); margin: 0 0 26px; }
.acceso .btn { width: 100%; justify-content: center; padding: 10px; }
.acceso-pie { margin-top: 22px; font-size: 13px; color: var(--muted); }

/* Panel derecho: lineas de plano dibujadas con CSS en el color de marca.
   Dibujado y no fotografiado para que funcione con cualquier marca de
   cliente, y porque una foto de casa de stock no dice nada. */
.acceso-plano {
  background: var(--ink);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px;
}
/* Grilla de papel milimetrado: blanca y muy tenue. En el color de marca
   sobre el slate oscuro no se ve, y la grilla tiene que leerse como papel. */
.acceso-plano::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 32px 32px;
}
.acceso-plano svg {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: block;
}
.acceso-leyenda {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 420px;
  margin: 40px auto 0;
}
.acceso-leyenda p {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 300;
  margin: 0;
  color: rgba(255,255,255,.88);
}

@media (max-width: 900px) {
  .acceso { grid-template-columns: 1fr; }
  .acceso-plano { display: none; }
}

/* ===========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .sidebar {
    position: fixed;
    left: 0; top: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .18s ease;
  }
  .sidebar.abierta { transform: none; }
  .velo { position: fixed; inset: 0; background: rgba(12,20,30,.45); z-index: 50; }
  .contenido { padding: 16px; }
  .topbar { padding: 0 16px; }
}
@media (min-width: 1001px) { .menu-btn, .velo { display: none; } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===========================================================================
   Wizard de carga
   ---------------------------------------------------------------------------
   Las nueve secciones viven todas en el DOM y se muestra una por vez. El
   guardado es por sección, así que no hay navegación de servidor entre pasos
   y nunca se pierde lo cargado al moverse.
   ========================================================================== */
.wiz { display: grid; grid-template-columns: 228px 1fr; gap: 24px; align-items: start; }

.wiz-nav {
  position: sticky; top: 85px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
}
.wiz-nav button {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  padding: 9px 11px; margin-bottom: 1px;
  background: none; border: 0; border-radius: var(--radius);
  font: inherit; font-size: 13.5px; color: var(--text);
  cursor: pointer;
}
.wiz-nav button:hover { background: var(--surface); }
.wiz-nav button[aria-current="true"] {
  background: var(--brand-soft); color: var(--brand); font-weight: 500;
}
.wiz-paso-n {
  width: 21px; height: 21px; flex: 0 0 21px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid; place-items: center;
  font-size: 11px; color: var(--muted);
}
.wiz-nav button[aria-current="true"] .wiz-paso-n { border-color: var(--brand); color: var(--brand); }
.wiz-paso-n.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.wiz-paso-n.ok::after { content: '✓'; font-size: 11px; }
.wiz-paso-n.ok span { display: none; }

.wiz-avance { padding: 12px 11px 6px; }
.wiz-barra { height: 5px; background: var(--line-2); border-radius: 3px; overflow: hidden; }
.wiz-barra i { display: block; height: 100%; background: var(--brand); transition: width .25s; }
.wiz-avance .txt { font-size: 12px; color: var(--muted); margin-top: 6px; }

.wiz-panel { display: none; }
.wiz-panel.activo { display: block; }

.wiz-cab { margin-bottom: 18px; }
.wiz-cab h2 { margin: 0 0 3px; font-size: 17px; font-weight: 600; }
.wiz-cab p { margin: 0; color: var(--muted); font-size: 13.5px; }

.wiz-pie {
  display: flex; align-items: center; gap: 10px;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line-2);
}
.wiz-pie .der { margin-left: auto; display: flex; gap: 8px; }

/* Indicador de guardado: discreto, pero visible. Si el asesor no ve que se
   guardó, va a apretar "guardar" que no existe. */
.wiz-estado { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.wiz-estado.ok   { color: var(--ok); }
.wiz-estado.err  { color: var(--err); }
.wiz-estado svg  { width: 14px; height: 14px; }

/* Combo + botón "agregar": el select se lleva todo el ancho sobrante y el
   botón queda del mismo alto, sin desalinear la grilla de campos. */
.campo-inline { display: flex; gap: 6px; align-items: stretch; }
.campo-inline select { flex: 1; min-width: 0; }
.btn-mas {
  flex: 0 0 auto; padding: 0 12px;
  font-size: 17px; line-height: 1; font-weight: 400;
}

/* Una entidad ya elegida (propietario, por ahora): se lee de un vistazo y
   tiene las acciones al costado, en vez de un combo con mil opciones. */
.elegido {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper);
}
.elegido .datos { min-width: 0; flex: 1; }
.elegido .nom { display: block; font-weight: 500; font-size: 14px; }
.elegido .sub { display: block; color: var(--muted); font-size: 12.5px; }
.elegido .sub:empty { display: none; }
.elegido.sin-dato { border-style: dashed; }
.elegido.sin-dato .nom { color: var(--muted); font-weight: 400; }

/* Resultados de búsqueda dentro de un diálogo. */
.resultados { list-style: none; margin: 0 0 16px; padding: 0; max-height: 260px; overflow-y: auto; }
.resultados:empty { display: none; }
.resultados li { border-bottom: 1px solid var(--line-2); }
.resultados li:last-child { border-bottom: 0; }
.resultados button {
  display: block; width: 100%; text-align: left;
  padding: 10px 11px; background: none; border: 0; border-radius: var(--radius);
  font: inherit; color: var(--text); cursor: pointer;
}
.resultados button:hover { background: var(--surface); }
.resultados .sub { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

details > summary {
  cursor: pointer; font-size: 13.5px; color: var(--brand);
  padding: 9px 0; border-top: 1px solid var(--line-2);
}

/* Historial de gestión: qué se hizo y cuándo, lo más nuevo arriba. */
.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li {
  position: relative;
  padding: 0 0 16px 18px;
  border-left: 2px solid var(--line-2);
}
.linea-tiempo li:last-child { padding-bottom: 0; border-left-color: transparent; }
.linea-tiempo li::before {
  content: ''; position: absolute; left: -5px; top: 5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); border: 2px solid var(--paper);
}
.linea-tiempo li:first-child::before { background: var(--brand); }
.linea-tiempo .cuando { font-size: 12px; color: var(--muted); }
.linea-tiempo .que { font-size: 13.5px; margin-top: 2px; white-space: pre-wrap; }

.mapa-wizard {
  height: 380px; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}

.grupo-caract { margin-bottom: 22px; }
.grupo-caract h3 {
  font-size: 13px; font-weight: 600; color: var(--muted);
  margin: 0 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line-2);
}
.caract-grilla { display: grid; gap: 4px 18px; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); }

/* Operaciones: una pestaña por operación activa de la propiedad */
.op-tabs { display: flex; gap: 2px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.op-tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 16px; margin-bottom: -1px;
  font: inherit; font-size: 14px; color: var(--muted); cursor: pointer;
}
.op-tabs button[aria-current="true"] { color: var(--brand); border-bottom-color: var(--brand); font-weight: 500; }
.op-panel { display: none; }
.op-panel.activo { display: block; }

/* Fotos */
.dropzone {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 34px 20px;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
  background: var(--surface);
}
.dropzone:hover, .dropzone.sobre { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.dropzone svg { width: 28px; height: 28px; margin-bottom: 8px; }

.fotos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); margin-top: 16px; }
.foto {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface); cursor: grab;
}
.foto.arrastrando { opacity: .4; }
.foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.foto-acciones {
  position: absolute; inset: auto 0 0 0;
  display: flex; gap: 4px; padding: 6px;
  background: linear-gradient(transparent, rgba(12,20,30,.72));
  opacity: 0;
}
.foto:hover .foto-acciones, .foto:focus-within .foto-acciones { opacity: 1; }
.foto-acciones button {
  flex: 1; padding: 4px; font: inherit; font-size: 11.5px;
  border: 0; border-radius: 4px; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--text);
}
.foto-acciones button:hover { background: #fff; }
.foto-portada {
  position: absolute; top: 7px; left: 7px;
  background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 500;
  padding: 2px 7px; border-radius: 3px;
}

/* Faltantes al publicar: cada uno lleva al paso donde está el campo */
.faltantes { margin: 0; padding: 0; list-style: none; }
.faltantes li {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 0; border-bottom: 1px solid var(--line-2);
}
.faltantes li:last-child { border-bottom: 0; }
.faltantes button {
  margin-left: auto; background: none; border: 0;
  color: var(--brand); font: inherit; font-size: 13px; cursor: pointer;
}

dialog {
  border: 0; border-radius: 9px; padding: 0;
  max-width: 460px; width: calc(100% - 32px);
  box-shadow: 0 18px 50px rgba(12,20,30,.28);
}
dialog::backdrop { background: rgba(12,20,30,.45); }
dialog .panel-cab { border-bottom: 1px solid var(--line-2); }
dialog .panel-cuerpo { padding: 18px; }
dialog .wiz-pie { margin: 0; padding: 14px 18px; border-top: 1px solid var(--line-2); background: var(--surface); }

@media (max-width: 900px) {
  .wiz { grid-template-columns: 1fr; }
  .wiz-nav { position: static; }
  .wiz-nav button { display: inline-flex; width: auto; }
}

/* Vista previa de un logo o imagen ya cargada, sobre damero para que se vea
   la transparencia. */
.vista-previa {
  display: flex; align-items: center; justify-content: center;
  height: 72px; margin-bottom: 8px; padding: 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background-color: var(--surface);
  background-image:
    linear-gradient(45deg, #e8edf3 25%, transparent 25%, transparent 75%, #e8edf3 75%),
    linear-gradient(45deg, #e8edf3 25%, transparent 25%, transparent 75%, #e8edf3 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}
.vista-previa img { max-height: 100%; max-width: 100%; object-fit: contain; }

/* Solapas de una pantalla con varias secciones (maestros). */
.solapas { display: flex; gap: 2px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.solapas a {
  padding: 10px 16px; border-bottom: 2px solid transparent;
  font-size: 14px; color: var(--muted); text-decoration: none;
}
.solapas a:hover { color: var(--text); text-decoration: none; }
.solapas a.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 500; }

/* Fila de tabla de un registro dado de baja. */
.tabla tr.inactiva td { opacity: .55; }

.pastilla {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 11.5px; background: var(--surface); color: var(--muted);
  border: 1px solid var(--line-2);
}

/* Módulos que todavía no existen: se ven, pero no llevan a un 404.
   Se les saca esta clase cuando el módulo se construye. */
.proximamente { opacity: .45; pointer-events: none; cursor: default; }
.nav a.proximamente::after {
  content: 'pronto';
  margin-left: auto;
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--on-ink-dim);
}

/* ===========================================================================
   Agenda semanal
   ---------------------------------------------------------------------------
   Siete columnas y una de horas. Cada visita se posiciona en absoluto dentro
   de su día, con el alto proporcional a la duración: así se ve de un vistazo
   dónde quedó un hueco y dónde dos se pisan.
   ========================================================================= */
.semana { display: grid; grid-template-columns: 56px repeat(7, 1fr); overflow-x: auto; }

.dia-cab {
  height: 46px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.dia-cab .nom { font-size: 11.5px; color: var(--muted); text-transform: capitalize; }
.dia-cab .num { font-size: 16px; font-weight: 600; }

.horas { border-right: 1px solid var(--line); }
/* Solo la columna de la izquierda. La hora de cada visita es .cuando: usar
   .hora para las dos le imponia 52px de alto al texto de adentro. */
.hora {
  height: 52px; padding-right: 7px;
  font-size: 11px; color: var(--muted); text-align: right;
  /* La etiqueta marca el comienzo de la franja, no su centro. */
  transform: translateY(-6px);
}

.dia { border-right: 1px solid var(--line-2); position: relative; min-width: 110px; }
.dia:last-child { border-right: 0; }
.dia.finde { background: #fbfcfd; }
.dia.es-hoy .dia-cab { background: var(--brand-soft); }
.dia.es-hoy .dia-cab .num { color: var(--brand); }

.franjas { position: relative; }
.franja { height: 52px; border-bottom: 1px solid var(--line-2); }

.visita {
  /* left y width los calcula la vista segun cuantas se pisan. */
  position: absolute;
  padding: 3px 6px; overflow: hidden;
  border-radius: 5px; border-left: 3px solid var(--brand);
  background: var(--brand-soft); color: var(--text);
  font-size: 11.5px; line-height: 1.3; text-decoration: none;
}
.visita:hover { text-decoration: none; filter: brightness(.97); z-index: 2; }
.visita .cuando { display: block; font-weight: 600; font-size: 11px; }
.visita .quien { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visita .donde { display: block; color: var(--muted); font-size: 10.5px; }

.visita.v-confirmada { border-left-color: var(--ok); }
.visita.v-realizada  { border-left-color: var(--faint); opacity: .7; }
.visita.v-cancelada  { border-left-color: var(--faint); opacity: .45; text-decoration: line-through; }
.visita.v-noasistio  { border-left-color: var(--err); opacity: .6; }
.visita.sin-cerrar   { border-left-color: var(--warn); background: var(--warn-soft); }

/* Marca de superposición: una visita pisada es media mañana perdida. */
.visita .choque {
  position: absolute; top: 3px; right: 4px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--err); color: #fff;
  font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}

/* Estados de visita en las tablas. */
.estado-programada::before { background: var(--warn); }
.estado-confirmada::before { background: var(--ok); }
.estado-realizada::before  { background: #2f6fb3; }
.estado-noasistio::before  { background: var(--err); }

@media (max-width: 900px) {
  .semana { grid-template-columns: 46px repeat(7, minmax(96px, 1fr)); }
}

/* ---------------------------------------------------------------------------
   Contenido del sitio: lista de portadas y zonas.
   Cada item es un <details>: el resumen muestra la miniatura y lo esencial,
   y el formulario de edicion aparece al abrirlo. Sin dialogos ni JS, que
   para una lista de cinco elementos es toda la complejidad que no hace falta.
   --------------------------------------------------------------------------- */
.item-contenido {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
  background: var(--paper);
}
.item-contenido[open] { box-shadow: 0 2px 10px rgba(10,20,34,.06); }

.item-contenido > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}
.item-contenido > summary::-webkit-details-marker { display: none; }
.item-contenido > summary:hover { background: var(--surface); }

.item-contenido .miniatura {
  width: 76px;
  height: 50px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.item-contenido .miniatura.sin-imagen { display: block; }

.item-contenido .item-txt { flex: 1 1 auto; min-width: 0; }
.item-contenido .item-txt strong {
  display: block;
  font-weight: 500;
  font-size: 14.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item-contenido .item-txt small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
}
.item-contenido .item-txt small .estado { margin-left: 6px; }

.item-contenido .item-accion {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--brand);
}
.item-contenido[open] .item-accion { visibility: hidden; }

.item-contenido > form { padding: 4px 14px 14px; }
.item-contenido > form:last-of-type {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.btn.peligro { color: var(--err); border-color: var(--err); }
.btn.peligro:hover { background: var(--err); color: #fff; }

/* ---------------------------------------------------------------------------
   Editor de placas
   Controles a la izquierda y la placa real a la derecha, dentro de un iframe
   de 1080x1350 escalado con transform. Se escala la pagina entera en vez de
   maquetar una miniatura aparte: asi lo que se ve es exactamente lo que se
   exporta, y no hay dos disenios que mantener sincronizados.
   --------------------------------------------------------------------------- */
.placa-editor {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: 20px;
  align-items: start;
}

.placa-controles .panel { margin-bottom: 14px; }

.plantillas { display: grid; gap: 8px; }
.plantilla {
  display: block;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.plantilla input { position: absolute; opacity: 0; pointer-events: none; }
.plantilla strong { display: block; font-size: 14.5px; font-weight: 500; }
.plantilla small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.plantilla:hover { background: var(--surface); }
.plantilla.elegida { border-color: var(--brand); background: var(--brand-soft); }

.datos-check { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; }

.tira-fotos { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-foto {
  position: relative;
  width: 70px;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
}
.chip-foto input { position: absolute; opacity: 0; pointer-events: none; }
.chip-foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.chip-foto:hover { border-color: var(--line); }
.chip-foto.elegida { border-color: var(--brand); }

/* La placa mide 1080 de ancho; el factor la lleva a 420, que entra comodo
   al lado de los controles sin perder legibilidad. */
.placa-marco {
  width: 420px;
  height: 525px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.placa-marco iframe {
  width: 1080px;
  height: 1350px;
  border: 0;
  transform: scale(0.38889);
  transform-origin: top left;
}

.placa-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 420px;
  margin-top: 10px;
}

@media (max-width: 1100px) {
  .placa-editor { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Bandeja de conversaciones
   Lista a la izquierda, hilo a la derecha. La altura es fija y el scroll vive
   adentro de cada panel: si scrolleara la pagina entera, el campo de
   respuesta se iria de pantalla justo cuando hace falta.
   --------------------------------------------------------------------------- */
.bandeja {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 16px;
  height: calc(100vh - 290px);
  min-height: 460px;
}

.bandeja-lista, .bandeja-hilo {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bandeja-lista { overflow-y: auto; }

.bandeja-buscar { padding: 10px; border-bottom: 1px solid var(--line); }
.bandeja-buscar input {
  width: 100%; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 7px;
  font: inherit; font-size: 14px;
}

.hilo {
  display: block;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-2);
  color: var(--text);
}
.hilo:hover { background: var(--surface); text-decoration: none; }
.hilo.abierto { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.hilo.sin-leer .hilo-cab strong { font-weight: 600; }

.hilo-cab { display: flex; align-items: center; gap: 8px; }
.hilo-cab strong {
  flex: 1 1 auto; min-width: 0;
  font-size: 14.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.globo {
  flex: 0 0 auto;
  min-width: 20px; padding: 1px 6px;
  border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 12px; text-align: center;
}
.hilo-sub {
  margin-top: 3px;
  font-size: 13px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hilo-pie { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }

.canal {
  padding: 1px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500;
  background: var(--surface); color: var(--muted);
}
.canal-whatsapp { background: #e6f3ec; color: #19603c; }

.hilo-titulo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}
.hilo-titulo h2 { font-size: 16.5px; margin: 0; }
.hilo-meta { margin-top: 3px; font-size: 13px; color: var(--muted); }

.mensajes {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px;
  display: flex; flex-direction: column; gap: 9px;
  background: var(--surface);
}
.msg { max-width: 72%; }
.msg.entrante { align-self: flex-start; }
.msg.saliente { align-self: flex-end; }

.msg-texto {
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 14.5px; line-height: 1.45;
  white-space: pre-wrap;
  background: var(--paper);
  border: 1px solid var(--line);
}
.msg.saliente .msg-texto { background: var(--brand); color: #fff; border-color: transparent; }
.msg.msg-bot .msg-texto { background: #eef2f6; color: var(--text); border-color: var(--line); }

.msg-pie { margin-top: 3px; font-size: 11.5px; color: var(--faint); }
.msg.saliente .msg-pie { text-align: right; }
.msg-pie .fallo { color: var(--err); }

.responder { padding: 12px 16px; border-top: 1px solid var(--line); }
.responder textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-size: 14.5px; resize: vertical;
}
.responder-pie {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; margin-top: 9px;
}
.responder-pie select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px;
  font: inherit; font-size: 13.5px;
}

/* ---------------------------------------------------------------------------
   Simulador del bot
   --------------------------------------------------------------------------- */
.simulador {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 18px;
  align-items: start;
}

.telefono {
  display: flex; flex-direction: column;
  height: 560px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--paper);
  overflow: hidden;
}
.telefono-cab {
  padding: 11px 16px;
  background: var(--ink); color: var(--on-ink);
  font-size: 13px;
}
.telefono-chat {
  flex: 1 1 auto; overflow-y: auto;
  padding: 16px;
  background: var(--surface);
  display: flex; flex-direction: column; gap: 8px;
}
.vacio-chat { margin: auto; color: var(--faint); font-size: 13.5px; }

.burbuja { max-width: 80%; }
.burbuja.mia  { align-self: flex-end; }
.burbuja.suya { align-self: flex-start; }
.burbuja-txt {
  padding: 8px 12px; border-radius: 12px;
  font-size: 14px; line-height: 1.45; white-space: pre-wrap;
  background: var(--paper); border: 1px solid var(--line);
}
.burbuja.mia .burbuja-txt { background: var(--brand); color: #fff; border-color: transparent; }
.burbuja-hora { margin-top: 2px; font-size: 11px; color: var(--faint); }
.burbuja.mia .burbuja-hora { text-align: right; }

.telefono-pie {
  display: flex; gap: 8px; padding: 10px;
  border-top: 1px solid var(--line);
}
.telefono-pie input {
  flex: 1 1 auto; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: 14px;
}

.lista-simple { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.65; }
.lista-simple li { margin-bottom: 6px; }

@media (max-width: 1000px) {
  .bandeja { grid-template-columns: 1fr; height: auto; }
  .bandeja-lista { max-height: 320px; }
  .mensajes { min-height: 320px; }
  .simulador { grid-template-columns: 1fr; }
}

/* ============================================================================
   IMPORTACION DE FICHAS
   La pantalla de preview es una lista larga de campos donde lo importante es
   distinguir de un vistazo lo que se leyo de lo que falta. De ahi que lo
   faltante se apague en vez de resaltarse: lo que esta cargado es lo que el
   operador tiene que verificar.
   ============================================================================ */

.chip {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  color: var(--muted);
}

.tabla-compacta th, .tabla-compacta td { padding: 6px 10px; font-size: 13.5px; }
.tabla-compacta th { font-weight: 500; color: var(--muted); background: transparent; }

.tabla tr.fila-apagada td, .tabla tr.fila-apagada th { opacity: .55; }

.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }

.ok    { color: var(--ok);  font-size: 13px; }
.falta { color: var(--err); font-size: 13px; }

.chk { display: flex; align-items: center; gap: 7px; font-size: 13.5px; cursor: pointer; }
.chk input { margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
}
.chip-check input { margin: 0; }
.chip-check:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }

/* Las candidatas llevan el check a la vista, y no escondido como en
   .chip-foto: aca el operador decide una por una y tiene que ver cual queda. */
.grilla-fotos {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  margin: 10px 0;
}
.foto-candidata {
  position: relative;
  display: block;
  border: 2px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
  background: var(--surface);
}
.foto-candidata img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.foto-candidata input {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  width: 17px;
  height: 17px;
  margin: 0;
  cursor: pointer;
}
.foto-candidata:has(input:checked) { border-color: var(--brand); }

.foto-candidata.foto-rota { border-color: var(--err); opacity: .5; cursor: not-allowed; }
.foto-candidata.foto-rota::after {
  content: "no se pudo cargar";
  position: absolute;
  inset: auto 0 0 0;
  padding: 3px 6px;
  background: var(--err);
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

.crudo {
  max-height: 420px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}