/* =====================================================================
   Estilos propios del CRM (encima de Tabler).
   Lo mínimo: Tabler pone casi todo; aquí van las zonas de color y
   pequeños retoques.
   ===================================================================== */

/* Marca del menú lateral */
/* Selector reforzado para ganar a la regla de Tabler .navbar-vertical .navbar-brand */
.navbar-vertical .navbar-brand.crm-marca { flex-direction: column; align-items: flex-start; padding: .9rem 1.25rem; }
@media (max-width: 991.98px) { .navbar-vertical .navbar-brand.crm-marca { padding: .5rem .75rem; } }
.crm-marca a { display: flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; font-size: 1.25rem; }
.crm-empresa { font-size: .75rem; font-weight: 400; opacity: .7; margin-top: .15rem; }
.crm-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: .5rem;
  background: var(--tblr-primary); color: #fff; font-size: 1.15rem;
}
.crm-logo-grande { width: 3.25rem; height: 3.25rem; font-size: 1.8rem; border-radius: .9rem; display: flex; }
.crm-menu-titulo {
  padding: 1rem 1rem .25rem; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; opacity: .55;
}
/* Globo de "pendientes" del menú: en línea, a la derecha (Tabler lo pone flotando) */
aside.navbar-vertical .navbar-nav .nav-link > .badge { position: static !important; margin-left: auto !important; transform: none; }
/* .crm-fondo-acceso: ver el bloque «PANTALLAS DE ACCESO» al final. */
.crm-barra { min-height: 3.5rem; }

/* ---------- ZONAS ---------- */
.zona-badge { font-weight: 600; letter-spacing: .01em; padding: .35em .65em; border-radius: 999px; }
.zona-inactiva { opacity: .55; text-decoration: line-through; }
.zona-punto {
  display: inline-block; width: .75rem; height: .75rem; border-radius: 50%;
  margin-right: .5rem; vertical-align: -.05em; box-shadow: 0 0 0 2px rgba(255,255,255,.8);
}
.zona-dropdown { max-height: 22rem; overflow-y: auto; }

/* Tarjetas de zona: franja superior con su color */
.zona-tarjeta { border-top: 6px solid var(--zona-color, #206bc4); transition: box-shadow .15s; height: 100%; }
.zona-tarjeta:hover { box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.08); }
.zona-tarjeta.zona-desactivada { opacity: .6; border-top-style: dashed; }
.zona-cifra { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.zona-tarjeta .text-secondary.small { white-space: nowrap; font-size: .72rem; }

.border-dashed { border: 2px dashed var(--tblr-border-color); background: transparent; }

/* Selector de color con muestras clicables */
.paleta { display: flex; flex-wrap: wrap; gap: .4rem; }
.paleta button {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15); cursor: pointer; padding: 0;
}
.paleta button.elegido { box-shadow: 0 0 0 3px var(--tblr-primary); }
input[type="color"].form-control-color { width: 3.5rem; height: 2.4rem; padding: .2rem; }

/* Casillas de zonas de un comprador: cada una con su color */
.zona-check { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem;
  border: 1px solid var(--tblr-border-color); border-radius: 999px; cursor: pointer; margin: 0 .35rem .45rem 0; user-select: none; }
.zona-check input { margin: 0; }
.zona-check:has(input:checked) { border-color: var(--zona-color); background: color-mix(in srgb, var(--zona-color) 12%, transparent); }

/* Tablas cómodas en móvil */
.table-responsive { -webkit-overflow-scrolling: touch; }
.celda-acciones { white-space: nowrap; text-align: right; }

/* En el móvil, los botones de la cabecera de página bajan de línea en vez de salirse. */
@media (max-width: 575.98px) {
  .page-header .col-auto { width: 100%; }
  .page-header .col-auto > .d-flex { flex-wrap: wrap; }
}

/* ---------- TABLERO por etapas ----------
   En pantalla grande, columnas en fila; en el móvil se deslizan de lado
   (una columna casi a pantalla completa, con "imán" al soltar). */
.crm-tablero { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .75rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.crm-columna { flex: 1 0 15rem; max-width: 22rem; background: var(--tblr-bg-surface-secondary, #f1f5f9); border-radius: .5rem; padding: .6rem; scroll-snap-align: start; }
.crm-columna-cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.crm-tarjeta-tablero { margin-bottom: .5rem; }
@media (max-width: 767.98px) { .crm-columna { flex-basis: 85%; } }

/* ---------- FOTOS ---------- */
.crm-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .4rem; display: block; }
.crm-foto-portada img { outline: 3px solid var(--tblr-primary); }
.crm-miniatura { width: 3.25rem; height: 2.5rem; object-fit: cover; border-radius: .3rem; flex-shrink: 0; }
.crm-miniatura-vacia { display: inline-flex; align-items: center; justify-content: center; background: var(--tblr-bg-surface-secondary, #f1f5f9); color: #9aa5b4; }
.crm-foto a[data-visor] { display: block; cursor: zoom-in; border-radius: .4rem; }
/* Miniatura del listado de viviendas: abre el visor con todas las fotos de esa vivienda. */
.crm-miniatura-enlace { position: relative; display: inline-flex; flex-shrink: 0; cursor: zoom-in; border-radius: .3rem; }
.crm-miniatura-enlace:focus-visible { outline: 3px solid var(--tblr-primary); outline-offset: 2px; }
.crm-miniatura-num { position: absolute; right: .15rem; bottom: .15rem; background: rgba(0, 0, 0, .65); color: #fff; font-size: .65rem; line-height: 1; padding: .12rem .25rem; border-radius: .25rem; }
.crm-foto a[data-visor]:focus-visible { outline: 3px solid var(--tblr-primary); outline-offset: 2px; }
/* Campo «Elegir archivos»: ocupa lo que haya y en el móvil no se sale de la pantalla. */
.crm-subir-fotos { flex: 1 1 12rem; min-width: 0; width: auto; }
/* «Portada» (etiqueta) y «Usar como portada» (botón): en pantallas estrechas el texto baja de línea. */
.crm-foto-etiqueta, .crm-foto-boton { white-space: normal; line-height: 1.2; min-height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; }

/* Visor de fotos (crm.js): la foto encima de la página, con el fondo oscurecido. */
.crm-visor { position: fixed; inset: 0; z-index: 2000; background: rgba(10, 14, 22, .9); display: flex; align-items: center; justify-content: center; }
.crm-visor[hidden], .crm-visor [hidden] { display: none !important; }
body.crm-visor-abierto { overflow: hidden; }
.crm-visor-marco { margin: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; padding: 3.5rem 4.5rem 1rem; box-sizing: border-box; }
.crm-visor-img { max-width: 100%; max-height: calc(100vh - 8rem); object-fit: contain; border-radius: .3rem; box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .5); background: #222; }
.crm-visor-pie { color: #e8ecf2; margin-top: .75rem; font-size: .95rem; text-align: center; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; justify-content: center; }
.crm-visor-contador { background: rgba(255, 255, 255, .15); border-radius: 1rem; padding: .1rem .65rem; font-variant-numeric: tabular-nums; }
.crm-visor-boton { position: absolute; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .15); color: #fff; font-size: 1.6rem; cursor: pointer; }
.crm-visor-boton:hover { background: rgba(255, 255, 255, .3); }
.crm-visor-boton:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.crm-visor-cerrar { top: .75rem; right: .75rem; }
.crm-visor-anterior { left: .75rem; top: 50%; transform: translateY(-50%); }
.crm-visor-siguiente { right: .75rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 767.98px) {
  /* En el móvil las flechas van abajo, para no tapar la foto; también se puede deslizar el dedo. */
  .crm-visor-marco { padding: 3.75rem .5rem 5rem; }
  .crm-visor-img { max-height: calc(100vh - 11rem); }
  .crm-visor-anterior, .crm-visor-siguiente { top: auto; bottom: 1rem; transform: none; }
  .crm-visor-anterior { left: calc(50% - 4rem); }
  .crm-visor-siguiente { right: calc(50% - 4rem); }
}

/* ---------- COMUNICACIONES (textos de correos y mensajes) ---------- */
.crm-comunicacion-texto { flex: 1 1 18rem; min-width: 0; }

/* ---------- HISTORIAL y vistas previas ---------- */
.crm-historial .avatar { flex-shrink: 0; }
.crm-vista-previa p { margin-bottom: .6rem; }
.crm-interruptor { cursor: pointer; }
.crm-dias-alerta { color: var(--tblr-red); font-weight: 700; }

/* Interruptor de servicio */
.control-estado { font-size: 1.1rem; }
.btn-xl { padding: .9rem 1.6rem; font-size: 1.1rem; }

/* ---------- MAPA DE ZONAS (versión premium) ----------
   Alturas pensadas para el móvil: el mapa ocupa buena parte de la pantalla
   pero siempre deja ver algo por debajo para poder seguir bajando. */
.crm-mapa { width: 100%; z-index: 0; background: #e9eef3; }
.crm-mapa-grande { height: 70vh; min-height: 22rem; border-radius: var(--tblr-card-border-radius, .5rem); }
.crm-mapa-editor { height: 72vh; min-height: 22rem; border-radius: var(--tblr-card-border-radius, .5rem); }
.crm-mapa-vivienda { height: 18rem; }
@media (max-width: 991.98px) {
  .crm-mapa-grande, .crm-mapa-editor { height: 58vh; min-height: 18rem; }
}
@media (min-width: 992px) {
  /* En el editor, el mapa acompaña al bajar por el formulario. */
  .crm-mapa-fijo { position: sticky; top: 1rem; }
}
.crm-leyenda .form-check { margin-bottom: .4rem; }
.crm-popup { min-width: 11rem; font-size: .875rem; }
.crm-popup a.btn { color: inherit; }
.leaflet-container { font-family: inherit; }
/* Botones de Geoman algo más grandes para el dedo. */
.leaflet-pm-toolbar .button-container a.leaflet-buttons-control-button { width: 34px; height: 34px; }
/* Chincheta dibujada con CSS (una gota con la punta abajo). */
.crm-chincheta { background: transparent; border: 0; }
.crm-chincheta-gota {
  position: absolute; left: 2px; top: 1px; width: 22px; height: 22px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.crm-chincheta-gota::after {
  content: ''; position: absolute; left: 6px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: #fff;
}

/* ---------- DOCUMENTOS DE RGPD (para imprimir o guardar como PDF) ----------
   Fondo blanco y letra algo mayor: es un documento que se entrega a una
   persona, no una pantalla del CRM. Al imprimir no salen los botones. */
.crm-documento { background: #fff; color: #1d273b; font-size: .95rem; }
.crm-documento h1 { font-size: 1.6rem; }
.crm-documento h2 { font-size: 1.2rem; margin-top: 1.5rem; border-bottom: 1px solid #dce1e7; padding-bottom: .25rem; }
.crm-documento h3 { font-size: 1.05rem; margin-top: 1.25rem; }
.crm-documento table { page-break-inside: auto; }
.crm-documento tr { page-break-inside: avoid; }
.crm-documento .crm-borrador { border: 2px solid #d63939; color: #d63939; padding: .5rem .75rem; font-weight: 700; }
@media print { .crm-documento { font-size: 10.5pt; } .crm-documento .container { max-width: none; } }
/* ---------- AGENDA: VISTA MES (calendario) ----------
   Como el calendario de la pared: 7 columnas de lunes a domingo. Colores:
   azul visita, morado tarea, verde hecha, rojo vencida, gris cancelada.
   En el móvil los textos se cambian por puntos de color y el detalle del
   día elegido queda debajo del calendario. */
.crm-calendario { --cal-borde: var(--tblr-border-color, #e6e7e9); }
.crm-cal-cabecera, .crm-cal-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.crm-cal-cabecera div { padding: .4rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; color: var(--tblr-secondary, #667382); text-align: center; border-bottom: 1px solid var(--cal-borde); }
.crm-cal-dia { display: flex; flex-direction: column; gap: 2px; min-height: 7.2rem; padding: .3rem .35rem; border-right: 1px solid var(--cal-borde); border-bottom: 1px solid var(--cal-borde); color: inherit; text-decoration: none; overflow: hidden; }
.crm-cal-dia:nth-child(7n) { border-right: 0; }
.crm-cal-dia:hover { background: var(--tblr-bg-surface-secondary, #f6f8fb); text-decoration: none; }
.crm-cal-dia.fuera-de-mes { background: #fafbfc; }
.crm-cal-dia.fuera-de-mes .crm-cal-num { color: #b0b8c4; }
.crm-cal-dia.elegido { box-shadow: inset 0 0 0 2px var(--tblr-primary, #206bc4); }
.crm-cal-num { font-size: .8rem; font-weight: 600; align-self: flex-start; line-height: 1.6rem; min-width: 1.6rem; text-align: center; border-radius: 50%; }
.crm-cal-dia.es-hoy .crm-cal-num { background: var(--tblr-primary, #206bc4); color: #fff; }
.crm-cal-item { display: block; font-size: .72rem; line-height: 1.25; padding: 1px 4px; border-radius: 3px; border-left: 3px solid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-cal-item.visita    { background: #e8f1fb; border-color: #206bc4; }
.crm-cal-item.tarea     { background: #f5ebfa; border-color: #ae3ec9; }
.crm-cal-item.hecha     { background: #e8f6ec; border-color: #2fb344; color: #4b6b55; }
.crm-cal-item.vencida   { background: #fdeceb; border-color: #d63939; color: #a51d1d; font-weight: 600; }
.crm-cal-item.cancelada { background: #f1f3f5; border-color: #adb5bd; color: #868e96; text-decoration: line-through; }
.crm-cal-mas { font-size: .72rem; font-weight: 600; color: var(--tblr-primary, #206bc4); padding-left: 4px; }
.crm-cal-puntos { display: none; }
.punto { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; }
.punto.visita { background: #206bc4; } .punto.tarea { background: #ae3ec9; } .punto.hecha { background: #2fb344; }
.punto.vencida { background: #d63939; } .punto.cancelada { background: #adb5bd; }
.crm-cal-leyenda { display: flex; flex-wrap: wrap; gap: .4rem 1rem; color: var(--tblr-secondary, #667382); }
.crm-cal-leyenda .punto { margin-right: .3rem; }
@media (max-width: 767.98px) {
  .crm-cal-dia { min-height: 3.4rem; padding: .2rem; align-items: center; }
  .crm-cal-num { align-self: center; }
  .crm-cal-item, .crm-cal-mas { display: none; }
  .crm-cal-puntos { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
  .crm-cal-puntos .punto { width: .42rem; height: .42rem; }
  .crm-cal-puntos .mas { font-size: .6rem; line-height: .42rem; color: var(--tblr-secondary, #667382); }
  .crm-cal-cabecera div { font-size: .65rem; padding: .3rem 0; }
}

/* ---------- DOCUMENTOS DE RGPD DENTRO DEL CRM (Protección de datos → Documentos) ----------
   Arriba la explicación; debajo, los huecos (campos) y el "papel" con el
   documento. El papel es lo ÚNICO que se imprime: al imprimir desaparecen el
   menú, la barra, la explicación, los campos, los botones y los avisos.
   Los huecos se marcan en amarillo (rellenos) o rojo (vacíos) solo en pantalla. */
@media (min-width: 992px) {
  .crm-doc-panel { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
}
.crm-doc-texto h2 { font-size: 1.05rem; margin-top: 1rem; }
.crm-doc-texto h2:first-child { margin-top: 0; }
.crm-doc-papel {
  background: #fff; color: #1d273b; border: 1px solid #dce1e7; border-radius: .5rem;
  padding: 2rem 2.25rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; overflow-x: auto;
}
.crm-doc-papel h1 { font-size: 1.5rem; margin-bottom: 1rem; }
.crm-doc-papel h2 { font-size: 1.15rem; margin-top: 1.5rem; border-bottom: 1px solid #dce1e7; padding-bottom: .25rem; }
.crm-doc-papel h3 { font-size: 1rem; margin-top: 1.25rem; }
.crm-doc-papel table { width: 100%; margin-bottom: 1rem; }
.crm-doc-papel tr { page-break-inside: avoid; }
.crm-doc-papel .crm-borrador { border: 2px solid #d63939; color: #d63939; padding: .5rem .75rem; font-weight: 700; }
.crm-doc-papel.crm-doc-editando { outline: 2px dashed #206bc4; outline-offset: 4px; }
.crm-hueco { background: #fff3bf; border-radius: .2rem; padding: 0 .15rem; }
.crm-hueco-vacio { background: #ffe3e3; color: #c92a2a; }
@media (max-width: 575.98px) {
  .crm-doc-papel { padding: 1rem; font-size: .9rem; }
}
@media print {
  body:has(.crm-doc-papel) .navbar-vertical,
  body:has(.crm-doc-papel) .crm-barra,
  body:has(.crm-doc-papel) .page-header,
  body:has(.crm-doc-papel) .page-body .alert,
  body:has(.crm-doc-papel) .crm-doc-explicacion,
  body:has(.crm-doc-papel) .crm-doc-panel,
  body:has(.crm-doc-papel) .footer { display: none !important; }
  body:has(.crm-doc-papel) .page-wrapper { margin: 0 !important; padding: 0 !important; }
  body:has(.crm-doc-papel) .page-body .row > .col-lg-8 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
  .crm-doc-papel { border: 0; box-shadow: none; padding: 0; font-size: 10.5pt; overflow: visible; }
  .crm-doc-papel.crm-doc-editando { outline: 0; }
  .crm-hueco, .crm-hueco-vacio { background: none !important; color: inherit !important; padding: 0; }
}
/* ---------- «GUARDAR COMO…» de los documentos de RGPD ----------
   Menú desplegable hecho con <details> (funciona sin más JavaScript que el
   que envía el archivo): cada opción explica en una línea para qué sirve. */
.crm-guardar-como { position: relative; display: inline-block; }
.crm-guardar-como > summary { list-style: none; cursor: pointer; }
.crm-guardar-como > summary::-webkit-details-marker { display: none; }
.crm-guardar-menu {
  position: absolute; z-index: 30; top: calc(100% + .25rem); left: 0; width: 20rem; max-width: calc(100vw - 2rem);
  background: #fff; border: 1px solid #dce1e7; border-radius: .5rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12); padding: .35rem;
}
.crm-guardar-opcion {
  display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: .35rem;
  padding: .5rem .65rem; color: inherit; line-height: 1.3;
}
.crm-guardar-opcion:hover, .crm-guardar-opcion:focus-visible { background: #f1f5f9; outline: none; }
.crm-guardar-opcion small { display: block; color: #667382; margin-top: .1rem; }
.crm-guardar-nota { font-size: .8rem; color: #667382; border-top: 1px solid #eef1f4; margin-top: .25rem; padding: .45rem .65rem .2rem; }

/* ---------- INFORME AL PROPIETARIO (usa el mismo «papel» de los documentos) ---------- */
.crm-informe .crm-informe-datos { color: #49566c; line-height: 1.6; }
.crm-informe table th, .crm-informe table td { padding: .35rem .5rem; vertical-align: top; }
/* Las columnas de cifras ocupan solo lo justo; la de la vivienda se lleva el resto. */
.crm-informe table td:nth-child(n+3), .crm-informe table th:nth-child(n+3) { text-align: center; width: 1%; white-space: nowrap; }
.crm-informe table td:nth-child(2), .crm-informe table th:nth-child(2) { width: 1%; white-space: nowrap; }
.crm-informe h3 { margin-top: 1.1rem; }
.crm-informe ul { padding-left: 1.2rem; }
.crm-informe li { margin-bottom: .3rem; }
@media (max-width: 575.98px) {
  .crm-informe table { font-size: .8rem; }
  .crm-informe table th, .crm-informe table td { padding: .25rem .3rem; }
  .crm-informe table td:nth-child(2), .crm-informe table th:nth-child(2) { white-space: normal; }
}
/* Cuadro de texto temporal para «Copiar el texto» en navegadores antiguos. */
.crm-copiar-oculto { position: fixed; top: -1000px; left: -1000px; opacity: 0; }

/* Requisitos de la contraseña (lista_requisitos_contrasena() + crm.js):
   gris antes de escribir, verde si se cumple y rojo si no. */
.crm-requisitos { margin: -.25rem 0 1rem; padding: .6rem .75rem; border-radius: 4px; background: var(--tblr-bg-surface-secondary, #f6f8fb); font-size: .85rem; }
.crm-requisitos-titulo { font-weight: 600; margin-bottom: .25rem; }
.crm-requisitos ul { list-style: none; margin: 0; padding: 0; }
.crm-requisitos li { display: flex; gap: .4rem; align-items: flex-start; color: var(--tblr-secondary, #667382); margin-bottom: .15rem; }
.crm-requisitos li i { flex: 0 0 auto; margin-top: .15rem; }
.crm-requisitos li.crm-requisito-ok { color: var(--tblr-success, #2fb344); }
.crm-requisitos li.crm-requisito-mal { color: var(--tblr-danger, #d63939); }

/* Botón «Generar una al azar» dentro de la caja de requisitos. */
.crm-requisitos-generar { margin-bottom: .5rem; }
.crm-requisitos-generada { margin-top: .4rem; padding: .35rem .5rem; border-radius: 4px; background: var(--tblr-bg-surface, #fff); border: 1px dashed var(--tblr-primary, #206bc4); font-weight: 600; word-break: break-all; }

/* Contraseña provisional recién creada o restablecida: grande y bien visible. */
.crm-clave-nueva { border: 2px solid var(--tblr-success, #2fb344); background: var(--tblr-success-lt, #eaf7ec); }
.crm-clave-nueva-titulo { font-size: 1.05rem; font-weight: 700; color: var(--tblr-success, #2fb344); margin-bottom: .35rem; }
.crm-clave-nueva-fila { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: .6rem; }
.crm-clave-nueva-valor { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 1.6rem; font-weight: 700; letter-spacing: .08em; color: #1a2234; background: #fff; border: 2px dashed var(--tblr-success, #2fb344); border-radius: 6px; padding: .35rem .8rem; user-select: all; word-break: break-all; }
.crm-clave-nueva-aviso { color: #8a4b00; font-size: .9rem; }
@media (max-width: 575.98px) {
  .crm-clave-nueva-valor { font-size: 1.25rem; }
}
/* ---------- Mensajes de las fichas sin correo de la inmobiliaria ----------
   El papel de «Guardar como…» (enviar.php) no se ve en pantalla (ya están el
   asunto y el texto): solo se imprime, y al imprimir se ve SOLO él. */
.crm-envio-papel { display: none; }
@media print {
  body:has(.crm-envio-papel) .navbar-vertical,
  body:has(.crm-envio-papel) .crm-barra,
  body:has(.crm-envio-papel) .page-header,
  body:has(.crm-envio-papel) .page-body .row-cards,
  body:has(.crm-envio-papel) .page-body .alert,
  body:has(.crm-envio-papel) .footer { display: none !important; }
  body:has(.crm-envio-papel) .page-wrapper { margin: 0 !important; padding: 0 !important; }
  .crm-envio-papel { display: block !important; font-size: 11pt; line-height: 1.5; color: #000; }
  .crm-envio-papel h2 { font-size: 13pt; margin-bottom: 1rem; }
}

/* ---------- Doble factor por app (vincular_app.php, verificar_codigo.php) ---------- */
.crm-qr { display: inline-block; background: #fff; padding: .75rem; border: 1px solid #dce1e7; border-radius: .5rem; line-height: 0; }
.crm-qr svg { width: 220px; height: 220px; max-width: 100%; }
.crm-clave-app { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 1.05rem; font-weight: 700; letter-spacing: .05em; word-break: normal; overflow-wrap: anywhere; user-select: all; background: var(--tblr-bg-surface-secondary, #f6f8fb); border-radius: 4px; padding: .35rem .6rem; display: inline-block; }
.crm-codigos-recuperacion { list-style: none; margin: 0 0 1rem; padding: .75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1rem; font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 1.1rem; font-weight: 700; letter-spacing: .06em; background: #fff; border: 2px dashed var(--tblr-primary, #206bc4); border-radius: 6px; user-select: all; }
@media (max-width: 359.98px) {
  .crm-codigos-recuperacion { grid-template-columns: 1fr; }
}
/* =====================================================================
   PANTALLAS DE ACCESO (login, código del doble factor, vincular la app,
   códigos de recuperación, cambio obligatorio de contraseña, «Servicio no
   disponible» y páginas de error). Plantillas: app/plantillas/acceso_cabecera.php
   y acceso_pie.php (y servicio_no_disponible.php y pagina_simple.php).
   - Fondo a pantalla completa: un degradado de color y, encima, un dibujo propio en
     SVG muy tenue (assets/img/). Se eligen en app/config.php → acceso (dibujo y
     color); clases_fondo_acceso() (app/funciones.php) pone en el <body> las clases
     crm-dibujo-… y crm-color-…. Sin fotos ni nada de fuera.
   - En el centro, una tarjeta blanca con la marca (logo o icono, nombre y, en el
     login, una frase) y el formulario. Las páginas siguen pintando su .card: dentro
     de la tarjeta se aplana (sin borde ni sombra), así no hay que tocarlas.
   - Modo oscuro si el sistema lo pide: las mismas variables que usa Tabler para su
     tema oscuro (copiadas de tabler.min.css), sin JavaScript y sin parpadeo.
   ===================================================================== */
/* Fondo (igual en claro y en oscuro: solo cambia la tarjeta). Cinco capas, de arriba
   abajo: dos del dibujo, dos brillos y el degradado. Cada clase solo cambia variables;
   el navegador descarga únicamente el dibujo que se usa. */
.crm-fondo-acceso {
  --dibujo-1: none; --dibujo-1-pos: center bottom; --dibujo-1-tam: auto; --dibujo-1-rep: no-repeat;
  --dibujo-2: none; --dibujo-2-pos: center bottom; --dibujo-2-tam: auto; --dibujo-2-rep: no-repeat;
  --brillo: none; --brillo-2: none;
  --degradado: linear-gradient(135deg, #2f84dc 0%, #206bc4 22%, #164d92 48%, #0f2d5c 72%, #0b1a33 100%);
  min-height: 100vh;
  background-color: #0b1a33;
  background-image: var(--dibujo-1), var(--dibujo-2), var(--brillo), var(--brillo-2), var(--degradado);
  background-repeat: var(--dibujo-1-rep), var(--dibujo-2-rep), no-repeat, no-repeat, no-repeat;
  background-position: var(--dibujo-1-pos), var(--dibujo-2-pos), center, center, center;
  background-size: var(--dibujo-1-tam), var(--dibujo-2-tam), cover, cover, cover;
}
/* --- Dibujos (config.php → acceso.dibujo) --- */
/* 'plano': plano de un barrio de costa (manzanas, avenidas, rotonda, parque y el mar). */
.crm-dibujo-plano { --dibujo-1: url("../img/acceso_plano.svg"); --dibujo-1-pos: center; --dibujo-1-tam: cover; }
/* 'casitas': fila de tejados al pie. */
.crm-dibujo-casitas, .crm-dibujo-colinas, .crm-dibujo-puntos { --dibujo-1: url("../img/acceso_casas.svg"); --dibujo-1-tam: max(100%, 1100px) auto; }
/* 'colinas': las casitas con colinas suaves detrás. */
.crm-dibujo-colinas { --dibujo-2: url("../img/acceso_colinas.svg"); --dibujo-2-tam: max(100%, 1100px) auto; }
/* 'puntos': las casitas con una textura de puntos muy fina. */
.crm-dibujo-puntos { --dibujo-2: radial-gradient(rgba(255, 255, 255, .11) 1px, transparent 1.6px); --dibujo-2-pos: 0 0; --dibujo-2-tam: 22px 22px; --dibujo-2-rep: repeat; }
/* --- Colores (config.php → acceso.color) --- */
/* 'diagonal': del azul del CRM (arriba a la izquierda) al azul marino casi negro, con un brillo azul detrás de la tarjeta. */
.crm-color-diagonal {
  --brillo: radial-gradient(ellipse 50% 42% at 50% 46%, rgba(110, 175, 245, .38) 0%, rgba(110, 175, 245, .12) 45%, rgba(110, 175, 245, 0) 75%);
}
/* 'amanecer': más luminoso, con un brillo celeste arriba a la izquierda y un halo blanco suave. */
.crm-color-amanecer {
  --brillo: radial-gradient(ellipse 48% 40% at 50% 46%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 50%, rgba(255, 255, 255, 0) 75%);
  --brillo-2: radial-gradient(circle at 8% 6%, rgba(125, 211, 252, .45) 0%, rgba(125, 211, 252, 0) 38%);
  --degradado: linear-gradient(135deg, #3b8fe6 0%, #206bc4 30%, #133f7c 65%, #081426 100%);
  background-color: #081426;
}
/* 'noche': más profundo, con un halo azul marcado detrás de la tarjeta. */
.crm-color-noche {
  --brillo: radial-gradient(ellipse 46% 44% at 50% 47%, rgba(66, 153, 225, .55) 0%, rgba(66, 153, 225, .18) 42%, rgba(66, 153, 225, 0) 72%);
  --degradado: linear-gradient(150deg, #2470c8 0%, #15427f 38%, #0a1f3f 70%, #050c18 100%);
  background-color: #050c18;
}
/* --- Fondo sencillo (plan estándar con 'automatico', o fondo 'sencillo'): el de antes,
   gris claro liso con un degradado muy suave y sin dibujo; gris oscuro en modo oscuro.
   La tarjeta, igual, con una sombra más ligera (sobre gris claro la otra pesa). --- */
.crm-fondo-sencillo {
  --degradado: linear-gradient(160deg, #f1f5f9 0%, #e2e8f0 100%);
  background-color: #e2e8f0;
}
.crm-fondo-sencillo .crm-acceso-tarjeta {
  box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .06);
  border: 1px solid #dce1e7;
}
@media (prefers-color-scheme: dark) {
  .crm-fondo-sencillo {
    --degradado: linear-gradient(160deg, #1f2937 0%, #111827 100%);
    background-color: #111827;
  }
  .crm-fondo-sencillo .crm-acceso-tarjeta { box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .35); border-color: rgba(255, 255, 255, .08); }
}
/* En el móvil, del plano se enseña la esquina de la costa (el parque y el mar), no el centro. */
@media (max-width: 575.98px) {
  .crm-dibujo-plano { --dibujo-1-pos: 88% 100%; }
}
.crm-acceso {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem .75rem 4.5rem;
}
.crm-acceso-tarjeta {
  width: 100%; max-width: 27rem;
  background: var(--tblr-bg-surface, #fff); color: var(--tblr-body-color, #1d273b);
  border-radius: 1rem; padding: 2rem 1.75rem 1.5rem;
  box-shadow: 0 1.25rem 3rem rgba(4, 14, 30, .45), 0 .25rem .75rem rgba(4, 14, 30, .25);
}
.crm-acceso-ancha { max-width: 31rem; }  /* vincular la app: QR, clave e instrucciones */
.crm-acceso-marca { text-align: center; margin-bottom: 1.5rem; }
.crm-acceso-marca .crm-logo { margin: 0 auto .6rem; }
.crm-acceso-logo-imagen { display: block; max-width: 11rem; max-height: 4.5rem; margin: 0 auto .6rem; object-fit: contain; }
.crm-acceso-nombre { font-size: 1.6rem; font-weight: 700; letter-spacing: .02em; margin: 0; line-height: 1.2; }
.crm-acceso-empresa { color: var(--tblr-secondary, #667382); margin-top: .15rem; }
.crm-acceso-lema { color: var(--tblr-secondary, #667382); font-size: .9rem; margin: .6rem auto 0; max-width: 21rem; line-height: 1.45; }
/* Las tarjetas de cada página, aplanadas dentro de la tarjeta blanca. */
.crm-acceso-tarjeta > .card { background: transparent; border: 0; box-shadow: none; margin: 0; }
.crm-acceso-tarjeta > .card > .card-body { padding: 0; }
.crm-acceso-tarjeta > .card .card-body.py-5 { padding-top: .25rem !important; padding-bottom: .5rem !important; }
.crm-acceso-tarjeta .h3 { font-size: 1.15rem; }
.crm-acceso-tarjeta > p:last-child, .crm-acceso-tarjeta > form:last-child { margin-bottom: 0; }
.crm-acceso-tarjeta .btn-primary { font-weight: 600; padding-top: .55rem; padding-bottom: .55rem; }
/* Foco bien visible con el teclado (también sobre los enlaces). */
.crm-acceso-tarjeta a:focus-visible, .crm-acceso-tarjeta .btn:focus-visible, .crm-acceso-tarjeta summary:focus-visible {
  outline: 3px solid #4299e1; outline-offset: 2px; border-radius: .25rem;
}
/* Iconos dentro de los campos (usuario y candado). */
.crm-acceso-tarjeta .input-icon-addon, .crm-acceso-tarjeta .input-group-text { color: var(--tblr-secondary, #667382); }
@media (max-width: 575.98px) {
  .crm-acceso { padding: 1rem .5rem 3rem; align-items: flex-start; }
  .crm-acceso-tarjeta { padding: 1.5rem 1.1rem 1.25rem; border-radius: .85rem; margin-top: 1.5rem; }
  .crm-acceso-nombre { font-size: 1.4rem; }
}
/* En la tarjeta estrecha, el texto de la contraseña generada se parte entre palabras, no por la mitad. */
.crm-acceso-tarjeta .crm-requisitos-generada { word-break: normal; overflow-wrap: anywhere; }
/* El QR siempre sobre blanco (las apps lo leen mejor), también en modo oscuro. */
.crm-acceso-tarjeta .crm-qr { background: #fff; }
@media (prefers-color-scheme: dark) {
  .crm-fondo-acceso {
    color-scheme:dark;
    --tblr-body-color:#e5e7eb;
    --tblr-body-color-rgb:229,231,235;
    --tblr-body-bg:#111827;
    --tblr-body-bg-rgb:17,24,39;
    --tblr-emphasis-color:#ffffff;
    --tblr-emphasis-color-rgb:255,255,255;
    --tblr-secondary-color:rgba(229, 231, 235, 0.75);
    --tblr-secondary-color-rgb:229,231,235;
    --tblr-secondary-bg:#1f2937;
    --tblr-secondary-bg-rgb:31,41,55;
    --tblr-tertiary-color:rgba(229, 231, 235, 0.5);
    --tblr-tertiary-color-rgb:229,231,235;
    --tblr-tertiary-bg:rgb(24, 32.5, 47);
    --tblr-tertiary-bg-rgb:24,33,47;
    --tblr-primary-text-emphasis:rgb(105.6, 168.6, 227.4);
    --tblr-secondary-text-emphasis:rgb(166.2, 170.4, 178.8);
    --tblr-success-text-emphasis:rgb(130.2, 209.4, 142.8);
    --tblr-info-text-emphasis:rgb(141.6, 193.8, 237);
    --tblr-warning-text-emphasis:rgb(249, 197.4, 102);
    --tblr-danger-text-emphasis:rgb(230.4, 136.2, 136.2);
    --tblr-light-text-emphasis:#f3f4f6;
    --tblr-dark-text-emphasis:#d1d5db;
    --tblr-primary-bg-subtle:rgb(1.2, 22.2, 41.8);
    --tblr-secondary-bg-subtle:rgb(21.4, 22.8, 25.6);
    --tblr-success-bg-subtle:rgb(9.4, 35.8, 13.6);
    --tblr-info-bg-subtle:rgb(13.2, 30.6, 45);
    --tblr-warning-bg-subtle:rgb(49, 31.8, 0);
    --tblr-danger-bg-subtle:rgb(42.8, 11.4, 11.4);
    --tblr-light-bg-subtle:#1f2937;
    --tblr-dark-bg-subtle:rgb(15.5, 20.5, 27.5);
    --tblr-primary-border-subtle:rgb(3.6, 66.6, 125.4);
    --tblr-secondary-border-subtle:rgb(64.2, 68.4, 76.8);
    --tblr-success-border-subtle:rgb(28.2, 107.4, 40.8);
    --tblr-info-border-subtle:rgb(39.6, 91.8, 135);
    --tblr-warning-border-subtle:rgb(147, 95.4, 0);
    --tblr-danger-border-subtle:rgb(128.4, 34.2, 34.2);
    --tblr-light-border-subtle:#374151;
    --tblr-dark-border-subtle:#1f2937;
    --tblr-heading-color:inherit;
    --tblr-link-color:rgb(105.6, 168.6, 227.4);
    --tblr-link-hover-color:rgb(135.48, 185.88, 232.92);
    --tblr-link-color-rgb:106,169,227;
    --tblr-link-hover-color-rgb:135,186,233;
    --tblr-code-color:var(--tblr-gray-300);
    --tblr-highlight-color:#e5e7eb;
    --tblr-highlight-bg:rgb(98, 63.6, 0);
    --tblr-border-color:rgb(45.7069767442, 60.4511627907, 81.0930232558);
    --tblr-border-color-translucent:rgba(72, 110, 149, 0.14);
    --tblr-form-valid-color:rgb(130.2, 209.4, 142.8);
    --tblr-form-valid-border-color:rgb(130.2, 209.4, 142.8);
    --tblr-form-invalid-color:rgb(230.4, 136.2, 136.2);
    --tblr-form-invalid-border-color:rgb(230.4, 136.2, 136.2);
    color-scheme:dark;
    --tblr-body-color:var(--tblr-gray-200);
    --tblr-secondary:var(--tblr-gray-400);
    --tblr-body-bg:var(--tblr-gray-900);
    --tblr-emphasis-color:#ffffff;
    --tblr-emphasis-color-rgb:255,255,255;
    --tblr-bg-forms:var(--tblr-gray-900);
    --tblr-bg-surface:var(--tblr-gray-800);
    --tblr-bg-surface-inverted:var(--tblr-gray-100);
    --tblr-bg-surface-secondary:var(--tblr-gray-900);
    --tblr-bg-surface-tertiary:var(--tblr-gray-800);
    --tblr-text-inverted:var(--tblr-gray-800);
    --tblr-link-color:var(--tblr-primary);
    --tblr-link-hover-color:color-mix(in srgb, var(--tblr-primary), black 20%);
    --tblr-active-bg:rgb(34.676744186, 45.8627906977, 61.523255814);
    --tblr-disabled-color:color-mix(in srgb, var(--tblr-body-color) 40%, transparent);
    --tblr-border-color:var(--tblr-gray-700);
    --tblr-border-color-translucent:var(--tblr-dark-mode-border-color-translucent);
    --tblr-border-dark-color:var(--tblr-dark-mode-border-dark-color);
    --tblr-border-active-color:var(--tblr-dark-mode-border-active-color);
    --tblr-btn-color:rgb(27.323255814, 36.1372093023, 48.476744186);
    
  }

  .crm-fondo-acceso .form-select { --tblr-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e5e7eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") }
  .crm-acceso-tarjeta { box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .08); }
  .crm-acceso-tarjeta .crm-codigos-recuperacion { background: var(--tblr-bg-surface-secondary); }
  .crm-acceso-tarjeta .crm-clave-app { background: var(--tblr-bg-surface-secondary); }
  .crm-acceso-tarjeta .crm-clave-nueva-valor { color: #f9fafb; background: var(--tblr-bg-surface-secondary); }
}