:root {
  --green: #5e8b2d;
  --green-2: #7fb34a;
  --green-soft: #eef4e2;
  --green-strip: #f6f9f0;
  --border: #e2e9d4;
  --ink: #1f2d28;
  --muted: #6b7d76;
  --muted-2: #4a5a54;
  --danger: #b5462f;
  --amber: #b9832b;
  --blue-soft: #9cc4e8;   /* importe del instalador en las barras de facturación */
  --radius: 10px;
  --shadow: 0 1px 2px rgba(31, 45, 40, .05), 0 4px 16px rgba(31, 45, 40, .04);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Helvetica Neue", -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: #f4f6ef;
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Menú lateral (rail de iconos) --- */
.side {
  position: fixed; top: 0; bottom: 0; left: 0; width: 86px; z-index: 100;
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 10px 14px; gap: 4px;
  background: #fff; border-right: 1px solid var(--border);
}
.side-logo { display: block; margin-bottom: 10px; }
.side-logo img { width: 46px; height: 46px; display: block; }
.side-nav { display: flex; flex-direction: column; gap: 4px; width: 100%; flex: 1; }
.side-bottom { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.side-logout-form { margin: 0; width: 100%; }
.side-link {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 100%; padding: 10px 2px; border: none; border-radius: 10px;
  background: transparent; color: var(--muted-2); cursor: pointer;
  font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .1px;
  text-decoration: none;
}
.side-link:hover { background: var(--green-strip); color: var(--ink); text-decoration: none; }
.side-link.active { background: var(--green-soft); color: var(--green); }
.side-logout:hover { background: #fbeae5; color: var(--danger); }

main.content { margin-left: 86px; }
.container { max-width: 1080px; margin: 0 auto; padding: 28px; }
.container.container-wide { max-width: none; }

.page-search { margin: 0; }
.page-search input {
  width: 250px; margin: 0; border: 1.5px solid #b7c79c; border-radius: 999px; padding: 8px 16px;
}
.page-search input:focus { border-color: var(--green-2); }

/* --- Headings --- */
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.back-link {
  display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px;
  font-weight: 600; margin-bottom: 10px;
}
.back-link:hover { color: var(--green); text-decoration: none; }
.back-link-icon { width: 15px; height: 15px; }
.page-head h1 { font-size: 24px; margin: 0; }
/* Los botones se reparten en varias filas si no caben (móvil): sin esto el
   último se sale de la pantalla, porque cada .btn lleva white-space: nowrap. */
.page-head-actions { display: flex; flex-wrap: wrap; gap: 10px; }
h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .6px; color: var(--green); margin: 0 0 14px; }

/* --- Buttons --- */
.btn {
  display: inline-block; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; color: var(--ink); font-weight: 500; font-size: 14px; cursor: pointer;
  line-height: 1.2; white-space: nowrap;
}
.btn:hover { border-color: #cdd8bb; text-decoration: none; }
.btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn-primary:hover { background: #547d28; border-color: #547d28; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted-2); }
.btn-sm { padding: 6px 11px; font-size: 13px; }
.btn-lg { padding: 12px 22px; font-size: 15px; }
.btn.sent { background: var(--green-soft); border-color: var(--green-soft); color: var(--green); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #96381f; border-color: #96381f; }
.btn-danger-outline { color: var(--danger); border-color: var(--danger); background: #fff; }
.btn-danger-outline:hover { background: #fbeae5; border-color: var(--danger); }

/* Botones de acción con icono (listado de facturas) */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 8px;
  border: 1px solid var(--border); background: #fff; color: var(--muted-2);
  cursor: pointer; line-height: 0;
}
.icon-btn:hover { border-color: #cdd8bb; color: var(--green); background: var(--green-strip); text-decoration: none; }
.icon-btn svg { width: 17px; height: 17px; display: block; }
.icon-btn svg[hidden] { display: none; }
.icon-btn.icon-danger:hover { color: var(--danger); background: #fbeae5; border-color: var(--danger); }
.icon-btn.sent { color: var(--green); background: var(--green-soft); border-color: var(--green-soft); }
.icon-btn.icon-ai { color: #7a4fa8; }
.icon-btn.icon-ai:hover { color: #7a4fa8; background: #f0e5fa; border-color: #cbb3e6; }

/* Botón "Generar presupuesto con IA" (violeta, cuando el contacto no tiene presu) */
.btn-ai-full {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 10px; background: #f0e5fa; color: #6a3f9a; border: 1px solid #d9c4ee;
}
.btn-ai-full:hover { background: #e7d6f6; text-decoration: none; }
.btn-ai-full svg { width: 17px; height: 17px; }
.btn-ai-label { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.contact-ia-error { margin: 12px 0 0; font-size: 13px; color: var(--danger); }
/* Aviso de "ya tenías ficha de este cliente" tras un alta manual repetida.
   Informativo, no un error: el alta ha funcionado, solo ha ido a la de antes. */
.contact-dup-aviso {
  margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius);
  background: var(--green-strip); border: 1px solid var(--green-2);
  font-size: 13px; color: var(--ink);
}

/* Mientras la IA calcula, el propio botón hace de barra de progreso: una franja
   más oscura que recorre el botón. No se sabe cuánto tardará, así que es una
   animación continua y no un porcentaje inventado. */
.btn-ai-full.working { position: relative; overflow: hidden; cursor: progress; }
.btn-ai-full.working .btn-ai-label { position: relative; z-index: 1; }
.btn-ai-full.working::before {
  content: ""; position: absolute; inset: 0; background: #d9c4ee;
  transform-origin: left; animation: ia-progress 1.4s ease-in-out infinite;
}
@keyframes ia-progress {
  0%   { transform: scaleX(0); opacity: .9; }
  60%  { transform: scaleX(1); opacity: .9; }
  100% { transform: scaleX(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-ai-full.working::before { animation: none; transform: scaleX(1); opacity: .55; }
}

/* Ventana de redacción del email */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(31, 45, 40, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.modal-overlay[hidden] { display: none; }
/* El menú lateral es fijo y se pinta por encima del overlay (z-index 100 vs
   50): sin dejarle su hueco, una ventana ancha quedaba cortada por la
   izquierda. Centrando en el área de contenido, además, la ventana encoge
   sola cuando no cabe. En móvil el menú va abajo, así que no aplica. */
@media (min-width: 761px) {
  .modal-overlay { left: 86px; }
}
/* Envío en curso: la ventana se queda bloqueada hasta que termina (genera el
   PDF y tarda unos segundos), para no cerrarla sin querer a medias. */
.modal-overlay[data-enviando="1"] { cursor: progress; }
.modal-overlay[data-enviando="1"] .modal-close,
.modal-overlay[data-enviando="1"] .modal-min { opacity: .35; cursor: not-allowed; }

/* Aviso flotante de confirmación ("Enviado"), sobre cualquier ventana. */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 300;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  background: var(--green); color: #fff; padding: 12px 22px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; box-shadow: 0 6px 24px rgba(31, 45, 40, .25);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
/* En móvil, por encima de la barra de navegación fija (64px). */
@media (max-width: 760px) {
  .toast { bottom: 78px; }
}
.modal {
  background: #fff; border-radius: var(--radius); width: 100%; max-width: 560px;
  box-shadow: var(--shadow); max-height: 90vh; display: flex; flex-direction: column;
}
.modal-head { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; background: var(--green); border-radius: var(--radius) var(--radius) 0 0; }
.modal-head h2 { margin: 0; color: #fff; }
.modal-head-actions { display: flex; align-items: center; gap: 2px; }
.modal-close, .modal-min { background: none; border: none; font-size: 24px; line-height: 1;
  color: #fff; opacity: .85; cursor: pointer; padding: 0 4px; }
.modal-close:hover, .modal-min:hover { opacity: 1; color: #fff; }

/* Pestañita del presupuesto minimizado (persiste entre páginas vía sessionStorage) */
.presu-send-tab {
  position: fixed; right: 24px; bottom: 24px; z-index: 150;
  display: flex; align-items: center; gap: 8px; background: var(--green);
  color: #fff; border: none; border-radius: 999px; padding: 12px 18px 12px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.22);
  animation: assistant-in .35s ease-out;
}
.presu-send-tab:hover { filter: brightness(1.05); }
.presu-send-tab[hidden] { display: none; }
.presu-send-tab svg { width: 18px; height: 18px; flex-shrink: 0; }
/* El <form> que envuelve cuerpo y pie es el hijo flex de .modal, así que si no
   se le da altura flexible corta la cadena y el cuerpo nunca llega a hacer
   scroll (crecía y se salía de la ventana). min-height:0 es imprescindible:
   sin él, min-height:auto de los items flex impide encoger. */
.modal > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.modal-body { padding: 18px 20px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-body label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--muted-2); }
.modal-body input, .modal-body textarea { margin-top: 5px; }
.modal-body textarea { resize: vertical; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--border); flex-shrink: 0; }
/* En móvil la barra de navegación inferior es fija (64px): sin dejarle sitio,
   el pie de la ventana (los botones) quedaba tapado debajo. */
@media (max-width: 760px) {
  .modal-overlay { padding: 12px 12px 76px; align-items: flex-end; }
  .modal { max-height: calc(100vh - 88px); }
}

/* Nombre de cliente clicable (abre el editor) */
.cli-link { color: var(--ink); text-decoration: none; cursor: pointer; }
.cli-link:hover { color: var(--green); text-decoration: underline; }

/* Calendario grande de instalaciones (página /calendario) */
.bigcal-wrap { width: 100%; overflow-x: auto; }
/* /calendario: tabla grande en escritorio, tarjetas (como instaladores) en móvil */
.cal-mobile { display: none; }
@media (max-width: 760px) {
  .cal-desktop { display: none; }
  .cal-mobile { display: block; }
}
.bigcal { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.bigcal th { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .5px; padding: 10px 6px; text-align: left; background: var(--green-strip);
  border-bottom: 1px solid var(--border); }
.bigcal td { vertical-align: top; border: 1px solid var(--border); padding: 8px;
  min-height: 120px; width: 14.28%; }
/* El hueco vacío del día abre "nueva tarea" con la fecha puesta (ver app.js);
   el cursor y el hover son la pista de que se puede clicar ahí. */
.bigcal-day { cursor: pointer; }
.bigcal-day:hover { background: var(--green-strip); }
.bigcal-empty { background: #fafcf7; }
.bigcal-num { font-size: 14px; font-weight: 700; color: var(--muted-2); margin-bottom: 6px; }
.bigcal-today { background: var(--green-strip); }
.bigcal-today .bigcal-num { color: var(--green); }
.bigcal-inst { display: block; width: 100%; text-align: left; text-decoration: none;
  background: var(--green); color: #fff; border: none; font-family: inherit; cursor: pointer;
  border-radius: 8px; padding: 8px 10px; margin-bottom: 7px; font-size: 12.5px; line-height: 1.45; }
.bigcal-inst:last-child { margin-bottom: 0; }
.bigcal-inst:hover { background: #547d28; }
/* Un color por instalador para distinguirlos de un vistazo en el calendario.
   Van por POSICIÓN en la lista de instaladores (main.py INSTALLERS), no por
   nombre: el 1º se queda con el verde por defecto, el 2º azul, el 3º amarillo
   (este con texto oscuro, que sobre amarillo el blanco no se lee) y el 4º
   granate. Así renombrar o sustituir a un instalador no deja su columna sin
   color — pero añadir uno más sí pide un color nuevo aquí. */
.bigcal-inst-2 { background: #3a6ea8; }
.bigcal-inst-2:hover { background: #2f5a8a; }
.bigcal-inst-3 { background: #e8b93b; color: #4a3708; }
.bigcal-inst-3:hover { background: #d9a922; }
.bigcal-inst-3 .bigcal-inst-amounts .bigcal-commission,
.bigcal-inst-3 .bigcal-inst-amounts .bigcal-installer { color: #4a3708; }
.bigcal-inst-4 { background: #9c4a63; }
.bigcal-inst-4:hover { background: #833a51; }
.bigcal-inst-name { font-weight: 700; font-size: 13.5px; overflow-wrap: anywhere; }
.bigcal-inst-line { opacity: .9; overflow-wrap: anywhere; margin-top: 2px; }
.bigcal-day-empty { padding: 0; }
.bigcal-add { display: block; height: 100%; min-height: 120px; padding: 8px; text-decoration: none; }
.bigcal-add:hover { background: var(--green-strip); }
.bigcal-add:hover .bigcal-num { color: var(--green); }
/* Colores del calendario de tareas por estado */
.taskcal-pendiente { background: #d9f0d9; color: #256a35; }
.taskcal-pendiente:hover { background: #c3e6c3; }
.taskcal-en_progreso { background: var(--amber); }
.taskcal-en_progreso:hover { background: #c98a1a; }
.taskcal-futuro { background: #3f7cc0; }
.taskcal-futuro:hover { background: #356aa5; }
/* Color por área de la tarea (misma paleta que sus chips del listado). El
   estado sigue mandando en las hechas, que se ven grises y tachadas. */
.taskcal-area-conversion { background: #ffe9d6; color: #a2571a; }
.taskcal-area-conversion:hover { background: #f8dbc0; }
.taskcal-area-seo { background: #efe3fb; color: #6c34a2; }
.taskcal-area-seo:hover { background: #e4d1f7; }
.taskcal-area-sem { background: #d8e8f7; color: #1f5c93; }
.taskcal-area-sem:hover { background: #c6dcf1; }
.taskcal-area-contenido { background: #ffe1ee; color: #a2366a; }
.taskcal-area-contenido:hover { background: #fbcfe2; }
.taskcal-area-tecnico { background: #ece3da; color: #6b4e31; }
.taskcal-area-tecnico:hover { background: #e0d3c6; }
.taskcal-area-negocio { background: var(--green-soft); color: var(--green); }
.taskcal-area-negocio:hover { background: #e2ecd0; }
.taskcal-area-analytics { background: var(--border); color: var(--muted-2); }
.taskcal-area-analytics:hover { background: #d5dec4; }
.bigcal-inst.taskcal-hecho { background: var(--muted); color: #fff; }
.bigcal-inst.taskcal-hecho:hover { background: #5c6d66; }
.taskcal-hecho .bigcal-inst-name { text-decoration: line-through; }
/* --- Tareas: calendario con el listado en un lateral plegable --- */
/* Todo lo que se queda pegado arriba en esta pantalla (el lateral y su
   pestañita) arranca por debajo de la barra fija: si no, se mete detrás y sus
   botones dejan de verse. Una sola variable para que no se descuadren. */
.taskcal-layout { --taskcal-sticky-top: 70px; }
.taskcal-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0 16px; align-items: start; }
/* Sin el hueco de 16px cuando está plegado: si no, el calendario queda más
   separado del menú que el resto de apartados (que no tienen ese hueco). */
.taskcal-layout.side-hidden { grid-template-columns: 0 minmax(0, 1fr); gap: 0; }
.taskcal-layout.side-hidden .taskcal-side { display: none; }
/* Columna fijada a mano: al ocultar el lateral con display:none sale de la
   rejilla y, sin esto, el calendario ocuparía la columna que deja libre. */
.taskcal-side { grid-column: 1; }
.taskcal-main { grid-column: 2; }
.taskcal-side {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; position: sticky;
  top: var(--taskcal-sticky-top);
  max-height: calc(100vh - var(--taskcal-sticky-top) - 16px);
  display: flex; flex-direction: column;
}
.taskcal-side-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--green-strip);
}
.taskcal-side-title { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); }
.taskcal-side-list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.taskcal-side-item {
  display: block; text-decoration: none; border-radius: 8px; padding: 8px 10px;
  background: var(--green-strip); color: var(--ink); border: 1px solid transparent;
}
.taskcal-side-item:hover { border-color: var(--border); }
.taskcal-side-item-title { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.taskcal-side-item-meta { display: block; font-size: 11.5px; opacity: .75; margin-top: 2px; }
@media (max-width: 900px) {
  .taskcal-layout, .taskcal-layout.side-hidden { grid-template-columns: 1fr; }
  .taskcal-side { position: static; max-height: 300px; }
}
/* En móvil, 7 columnas en 375px dejaban los días a ~50px y los títulos salían
   con una letra por línea. La rejilla mantiene un ancho mínimo legible y se
   desplaza en horizontal dentro de .bigcal-wrap, que ya tiene overflow-x. */
@media (max-width: 760px) {
  .taskcal-month .bigcal { min-width: 700px; }
  .bigcal-wrap { -webkit-overflow-scrolling: touch; }
  /* Sin min-width:0 el item del grid crece hasta el ancho de la tabla y el
     scroll se lo come la página entera en vez del contenedor. */
  .taskcal-main { min-width: 0; }
}
/* Aviso de guardado y pie de la ventana de tarea */
.taskcal-modal-foot { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.taskcal-saved { margin-right: auto; font-size: 12.5px; font-weight: 600; color: var(--green); }

/* Meses encadenados: al bajar se van cargando los siguientes */
.taskcal-month + .taskcal-month { margin-top: 26px; }
.taskcal-month-label {
  font-size: 15px; font-weight: 700; color: var(--muted-2); margin: 0 0 10px;
  text-transform: capitalize;
}
/* El primer mes ya lo nombra la barra superior: no repetirlo */
.taskcal-month:first-child .taskcal-month-label { display: none; }
.taskcal-loading { text-align: center; color: var(--muted); font-size: 13px; padding: 14px 0; }
/* Días de los meses vecinos que completan la primera/última semana: se ven
   apagados, pero con sus tareas y admitiendo que se suelten tareas encima. */
.bigcal-otro-mes { background: #fafcf7; }
.bigcal-otro-mes .bigcal-num { color: #a9b6b0; }
.js-taskcal-view[draggable] { cursor: grab; }
.js-taskcal-view.dragging, .taskcal-side-item.dragging { opacity: .35; }
.taskcal-side-item[draggable] { cursor: grab; }
/* Mientras se guarda en segundo plano (arrastre o check, sin recarga) */
.js-taskcal-view.taskcal-saving, .taskcal-item.taskcal-saving, .taskcal-side-item.taskcal-saving { opacity: .55; }
/* Check para marcar hecha, encima de la tarjeta (aparece al pasar el ratón) */
.taskcal-item { position: relative; }
/* Hueco a la derecha para que el título no pase por debajo del círculo */
/* Letra más pequeña y ajustada en las tarjetas de tarea: en una columna
   estrecha, el tamaño anterior obligaba a muchos saltos. Y break-word en vez
   de anywhere, que partía las palabras por la mitad. */
.taskcal-item .bigcal-inst { padding: 5px 24px 5px 7px; font-size: 11px; line-height: 1.3; }
.taskcal-item .bigcal-inst-name { font-size: 11px; overflow-wrap: break-word; hyphens: none; }
.taskcal-check { position: absolute; top: 4px; right: 4px; width: 17px; height: 17px; background: #fff; }
.taskcal-check svg { width: 10px; height: 10px; }
.taskcal-item:hover .taskcal-check, .taskcal-check:focus-visible { opacity: 1; }
.taskcal-check.done { opacity: 1; }
.js-taskcal-dropzone.taskcal-drop-hover { outline: 2px dashed var(--green); outline-offset: -3px; background: var(--green-strip); }
.bigcal-inst-amounts { display: flex; gap: 10px; margin-top: 5px; padding-top: 5px;
  border-top: 1px solid rgba(255,255,255,.25); font-weight: 700; font-size: 11.5px; }
.bigcal-inst-amounts .bigcal-commission { color: #fff; }
.bigcal-inst-amounts .bigcal-installer { color: #e9f2da; font-weight: 600; }
.bigcal-star { color: var(--amber); margin-left: 4px; font-size: 12px; }
.bigcal-num .bigcal-star { font-size: 13px; }

input, select, textarea {
  font: inherit; font-weight: normal; color: var(--ink); background: #fff;
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green-2); outline-offset: -1px; border-color: var(--green-2); }
textarea { resize: vertical; }

/* --- Dashboard --- */
.dashboard { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpis-3 { grid-template-columns: repeat(3, 1fr); }
.kpi { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.kpi-label { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 6px; font-weight: 700; }
.kpi-value { font-size: 22px; font-weight: 700; }
.kpi-paid .kpi-value { color: var(--green); }
.kpi-pending .kpi-value { color: var(--amber); }
.kpi-profit { border-color: var(--green); background: var(--green-soft); }
.kpi-profit .kpi-value { color: var(--green); }
.kpis-3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 22px; }

.charts { display: grid; grid-template-columns: 2.1fr 1fr; gap: 14px; }
/* Un solo gráfico (facturación mensual): ocupa todo el ancho disponible */
.charts-single { grid-template-columns: 1fr; }
.chart-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.chart-card h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0; font-weight: 700; flex-shrink: 0; }

.chart-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-shrink: 0; }
.bars-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted-2); font-weight: 500; }

.bars { display: flex; align-items: flex-end; gap: 5px; height: 120px; flex-shrink: 0; }
.bar-col { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar {
  position: relative; width: 100%; max-width: 24px; min-height: 2px; cursor: default;
}
.bar-fill {
  display: flex; flex-direction: column-reverse; width: 100%; height: 100%;
  border-radius: 3px 3px 0 0; overflow: hidden;
}
.bar-seg { width: 100%; }
.bar-seg-commission { background: var(--green); }
.bar-seg-installer { background: var(--blue-soft); }
.bar:hover .bar-seg-commission { background: #4d7526; }
.bar:hover .bar-seg-installer { background: #7fb0e0; }
.bar:hover::after {
  content: attr(data-amount); position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%); margin-bottom: 8px; background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 6px;
  white-space: nowrap; pointer-events: none; z-index: 5;
}
.bar-label { margin-top: 6px; font-size: 11px; color: var(--muted); }

.pie-wrap { display: flex; align-items: center; justify-content: center; gap: 16px; flex: 1; }
.pie { width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; }
.pie-legend { display: flex; flex-direction: column; gap: 10px; font-size: 16px; font-weight: 500; color: var(--muted-2); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }

/* --- Table --- */
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
table.grid { width: 100%; border-collapse: collapse; }
.grid thead th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--green-strip);
}
/* .grid thead th ya fija text-align:left con más especificidad que .r sola,
   así que los encabezados numéricos (Leads, Facturado...) se quedaban a la
   izquierda mientras sus datos se alineaban a la derecha. */
.grid thead th.r { text-align: right; }
.grid tbody td { padding: 13px 16px; border-bottom: 1px solid #eef1e8; vertical-align: middle; }
.grid tbody tr:last-child td { border-bottom: none; }
.grid tbody tr:hover { background: #fafcf6; }
.contact-row-unread td { background: #fdf2e7; }
.contact-row-unread:hover td { background: #fbe8d3; }
.r { text-align: right; }
.contacts-presu-cell { display: inline-flex; align-items: center; gap: 8px; }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--green); }
.strong { font-weight: 700; }
.cli { max-width: 220px; }
.cli-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cli-sub { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.inline { display: inline; margin: 0; }

.totals-row td {
  background: var(--green-strip); font-weight: 600; color: var(--muted-2);
  border-top: 2px solid var(--border); padding: 11px 16px;
}

/* --- Status chips --- */
.chip {
  display: inline-block; white-space: nowrap; border: none; border-radius: 999px;
  padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.chip-paid { background: var(--green-soft); color: var(--green); }
.chip-pending { background: #fbf1dc; color: var(--amber); }
.chip:hover { filter: brightness(.97); }

/* --- Empty --- */
.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty p { margin-bottom: 16px; }

/* --- Forms --- */
.form { display: flex; flex-direction: column; gap: 18px; }
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow); }
.card-standalone { margin-top: 18px; }
.form label { display: block; font-size: 14px; color: var(--muted-2); font-weight: 700; margin-bottom: 16px; }
.form label:last-child { margin-bottom: 0; }
.form input, .form select, .form textarea {
  margin-top: 6px; padding: 13px 15px; font-size: 16px; border-width: 1.5px; border-radius: 10px;
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* Filas de importes: el texto de ayuda va justo debajo, sin el hueco de un campo */
.amounts-row { margin-bottom: 4px; }
.amounts-row label { margin-bottom: 12px; }
.span-2 { grid-column: 1 / -1; }
.req { color: var(--danger); }
.emitter { font-weight: 500; color: var(--ink); margin: 0 0 6px; }
.hint { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.readonly { background: var(--green-strip); font-weight: 700; color: var(--green); }
/* Campo calculado con un valor imposible (p. ej. comisión mayor que el total) */
.readonly.readonly-error { background: #fbe6e0; color: var(--danger); }

/* Conceptos dinámicos de la factura (título + descripción por bloque) */
.concept-add { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.concept-add .btn { border-color: var(--green); color: var(--green); font-weight: 600; }
.concept-add .btn:hover { background: var(--green-soft); }
.concept-list { display: flex; flex-direction: column; gap: 12px; }
.concept-block { border: 1.5px solid var(--border); border-radius: 10px; padding: 14px 16px;
  background: var(--green-strip); }
.concept-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.concept-block-tag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--green); }
.concept-remove { background: none; border: none; font-size: 22px; line-height: 1; color: var(--muted);
  cursor: pointer; padding: 0 4px; }
.concept-remove:hover { color: var(--danger); }
.concept-block input, .concept-block textarea { margin-top: 0; margin-bottom: 8px; background: #fff; }
.concept-block textarea { margin-bottom: 0; }
.concept-empty-hint { margin-top: 10px; }
.concept-date { margin-top: 16px; }

.expense-row { display: flex; gap: 10px; margin-bottom: 10px; }

.expense-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 32px 20px; border: 2px dashed #b7c79c; border-radius: 12px;
  background: var(--green-strip); cursor: pointer; text-align: center; margin-bottom: 14px;
  transition: border-color .15s, background .15s;
}
.expense-dropzone:hover, .expense-dropzone.dragover { border-color: var(--green-2); background: var(--green-soft); }
.expense-dropzone-icon { color: var(--green); }
.expense-dropzone-text { font-weight: 600; color: var(--ink); font-size: 15px; }
.expense-dropzone-hint { font-size: 13px; color: var(--muted); }
/* Archivo ya elegido pero todavía sin enviar: se marca en verde sólido para
   que se vea que falta pulsar el botón de subir. */
.expense-dropzone.has-file { border-style: solid; border-color: var(--green-2); background: var(--green-soft); }

/* Desglose de IVA + justificante de un gasto (alta y edición) */
.expense-fiscal {
  margin-top: 14px; padding: 14px; border-radius: 12px;
  background: var(--green-strip); border: 1px solid #dbe6c8;
}
.expense-fiscal-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 10px;
}
.expense-fiscal-title { font-weight: 700; color: var(--ink); font-size: 14px; }
.expense-fiscal .expense-dropzone { padding: 20px; margin-bottom: 0; margin-top: 12px; }
/* Fila de adjuntos discreta: un extra opcional, no el foco de la ventana
   como sí lo es el justificante de un gasto (.expense-dropzone). */
.task-attach-row {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 11px; border-radius: 8px; border: 1px dashed var(--border);
  color: var(--muted); font-size: 13px; font-weight: 600;
  transition: border-color .15s, background .15s, color .15s;
}
.task-attach-row:hover { border-color: var(--green-2); color: var(--ink); background: var(--green-strip); }
.task-attach-row.has-file { border-style: solid; border-color: var(--green-2); color: var(--ink); background: var(--green-strip); }
.task-attach-icon { flex-shrink: 0; }
.task-attach-hint { margin-top: 5px; margin-bottom: 0; }
.task-attachments-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.task-attachment-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: 8px; background: var(--green-strip);
}
.task-attachment-item a {
  color: var(--ink); font-size: 13.5px; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-attachment-item a:hover { text-decoration: underline; }
.task-attachment-del {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border-radius: 50%; border: none;
  cursor: pointer; background: none; color: var(--muted);
}
.task-attachment-del svg { width: 13px; height: 13px; }
.task-attachment-del:hover { color: var(--danger); background: #fbeae5; }
.hint-inline { font-size: 12.5px; color: var(--muted); }
.expense-vat-help { display: flex; flex-direction: column; gap: 6px; justify-content: flex-end; }
.expense-vat-label { font-size: 12.5px; color: var(--muted); }
.expense-vat-btns { display: flex; gap: 6px; flex-wrap: wrap; }
/* Selectores con .form delante: la regla genérica ".form label" (clase +
   etiqueta) gana a una clase suelta y ponía el check en su propia línea. */
.form label.expense-replace { display: inline-flex; align-items: center; cursor: pointer; margin-bottom: 0; }
.form label.expense-remove {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 0;
  font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer;
}
.form label.expense-remove input { margin: 0; width: 15px; height: 15px; }
.expense-row { flex-wrap: wrap; align-items: center; }
.expense-current-receipt {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px;
}
.expense-current-receipt[hidden] { display: none; }
.photo-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 32px 20px; border: 2px dashed #b7c79c; border-radius: 12px;
  background: var(--green-strip); cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s; }
.photo-dropzone:hover, .photo-dropzone.dragover { border-color: var(--green-2); background: var(--green-soft); }

.check-row { display: flex; align-items: center; gap: 8px; margin-bottom: 0; cursor: pointer; }
.check-row input { width: auto; margin: 0; }
/* Importes reales de la instalación cuando la factura solo cubre la comisión */
.check-row-spaced { margin-top: 14px; }
.real-amounts { margin-top: 14px; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px; margin-bottom: 14px; }
.photo-thumb { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--border);
  aspect-ratio: 1 / 1; background: #f2f2f2; }
.photo-thumb img, .photo-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.photo-video-link { display: block; height: 100%; position: relative; }
.photo-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.photo-thumb form { position: absolute; top: 4px; right: 4px; margin: 0; }
.photo-remove { width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0,0,0,.55);
  color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.photo-remove:hover { background: var(--danger); }

.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ===== Mi calendario (vista restringida de instalador, mobile-first) ===== */
.mc-body { margin: 0; background: #f4f6ef; color: var(--ink);
  font-family: "Helvetica Neue", -apple-system, "Segoe UI", Arial, sans-serif; font-size: 15px; line-height: 1.5; }
.mc-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  background: var(--green); color: #fff; position: sticky; top: 0; z-index: 5; }
.mc-logo { width: 40px; height: 40px; border-radius: 50%; background: #fff; padding: 3px; flex-shrink: 0; }
.mc-head-text { flex: 1; min-width: 0; }
.mc-title { font-weight: 700; font-size: 17px; }
.mc-subtitle { font-size: 13px; opacity: .85; }
.mc-logout { background: rgba(255,255,255,.15); border: none; color: #fff; width: 38px; height: 38px;
  border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mc-logout:hover { background: rgba(255,255,255,.28); }

.mc-main { max-width: 640px; margin: 0 auto; padding: 16px 14px 40px; }
.mc-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 14px; }
.mc-nav-label { font-weight: 700; font-size: 16px; min-width: 140px; text-align: center; }

.mc-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 20px; }
.mc-dot-h { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; padding-bottom: 2px; }
.mc-dot-h.sun { color: #b06; }
.mc-dot-empty { height: 34px; }
.mc-dot-day { position: relative; display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--muted-2); text-decoration: none; background: #fff;
  border: 1px solid var(--border); }
.mc-dot-day.sun, .mc-dot-empty.sun { background: #eef0ec; }
.mc-dot-day.has { background: var(--green); color: #fff; border-color: var(--green); }
.mc-dot-day.today { outline: 2px solid var(--green-2); outline-offset: 1px; }
.mc-dot-day.selected { background: var(--ink); color: #fff; border-color: var(--ink); }
.mc-dot-count { position: absolute; top: -6px; right: -6px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 700;
  line-height: 15px; text-align: center; }
.mc-hint { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 16px; }

.mc-agenda { display: flex; flex-direction: column; gap: 14px; }
.mc-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; scroll-margin-top: 76px; }
.mc-card-head { margin-bottom: 8px; }
.mc-card-date { font-size: 13px; font-weight: 700; color: var(--green); text-transform: uppercase;
  letter-spacing: .3px; }
.mc-card-client { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.mc-card-phone { display: flex; gap: 8px; margin-bottom: 10px; }
.mc-phone-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px;
  border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; }
.mc-phone-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.mc-phone-call { background: var(--green-soft); color: var(--green); flex: 1; }
.mc-phone-wa { background: #25d366; color: #fff; width: 44px; justify-content: center; padding: 9px; }
.mc-card-line { font-size: 14px; color: var(--muted-2); margin-bottom: 4px; overflow-wrap: anywhere; }
.mc-card-field { margin-bottom: 10px; }
.mc-card-field-label {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--ink); margin-bottom: 2px;
}
.mc-card-field-value { display: block; font-size: 14px; color: var(--muted-2); overflow-wrap: anywhere; }
.mc-card-meas { white-space: pre-line; }
/* Un espacio por línea, para que se vea de golpe qué hay que montar */
.mc-espacio { padding: 3px 0; }
.mc-espacio + .mc-espacio { border-top: 1px dashed var(--border); }
/* Dirección como enlace al mapa */
.mc-card-map {
  display: flex; align-items: flex-start; gap: 7px; text-decoration: none;
  font-size: 14px; color: var(--green); font-weight: 600; overflow-wrap: anywhere;
}
.mc-card-map svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.mc-card-map:hover { text-decoration: underline; }
/* Importe del instalador y cómo paga el cliente */
.mc-pay-box { margin: 12px 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.mc-pay-amount {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: var(--green-soft);
}
.mc-pay-amount span { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--green); }
.mc-pay-amount strong { font-size: 21px; color: var(--ink); }
.mc-pay-how { padding: 9px 14px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.mc-pay-how-efectivo { background: #fdf3d3; color: #8a6300; }
.mc-pay-how-transferencia { background: #eef4fb; color: #2c5aa0; }
.mc-pay-how-sin { background: #fbe6e0; color: var(--danger); }
/* "Hoy no cobras": en gris, sin la llamada de atención del importe a cobrar */
.mc-pay-amount-nada { background: var(--green-strip); }
.mc-pay-amount-nada span { color: var(--muted); }
.mc-pay-amount-nada strong { color: var(--muted); }
.mc-pay-how-nada { background: #f1f3ee; color: var(--muted-2); }
.mc-card-amounts { display: flex; gap: 10px; margin: 12px 0; }
.mc-amount { flex: 1; background: var(--green-strip); border-radius: 10px; padding: 10px 12px; }
.mc-amount span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.mc-amount strong { font-size: 17px; color: var(--ink); }
.mc-card-pay { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.mc-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 12px; }
.mc-media { position: relative; padding: 0; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; aspect-ratio: 1 / 1; background: #000; cursor: pointer; }
.mc-media img, .mc-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-media-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; text-shadow: 0 1px 4px rgba(0,0,0,.6); pointer-events: none; }
.mc-empty { text-align: center; color: var(--muted); padding: 40px 20px; }

/* Notas post-instalación (las escribe el instalador) */
.mc-notes-form { margin-top: 6px; }
.mc-notes-label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: .3px; }
.mc-notes-form textarea { width: 100%; margin-bottom: 8px; }
.mc-upload-form { margin-top: 12px; }
.mc-upload-form .photo-dropzone { padding: 18px 16px; }

/* Slider a pantalla completa */
.mc-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 100;
  display: flex; align-items: center; justify-content: center; }
.mc-lightbox[hidden] { display: none; }
.mc-lb-stage { max-width: 94vw; max-height: 86vh; display: flex; align-items: center; justify-content: center; }
.mc-lb-stage img, .mc-lb-stage video { max-width: 94vw; max-height: 86vh; border-radius: 6px; }
.mc-lb-btn { position: absolute; background: rgba(255,255,255,.14); color: #fff; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mc-lb-close { top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; font-size: 26px; }
.mc-lb-prev, .mc-lb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 64px;
  border-radius: 10px; font-size: 34px; }
.mc-lb-prev { left: 10px; }
.mc-lb-next { right: 10px; }
.mc-lb-btn:hover { background: rgba(255,255,255,.28); }

@media (min-width: 641px) {
  .mc-dots { grid-template-columns: repeat(7, 44px); justify-content: center; }
}

/* --- Presupuesto: conceptos dinámicos --- */
.presu-items-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.presu-items-head h2 { margin: 0; }
.presu-items-head .hint { margin: 0; }
.presu-item {
  border: 1px solid var(--border); border-radius: 12px; background: var(--green-strip);
  padding: 14px 16px 4px; margin-bottom: 14px;
}
.presu-item-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.presu-item-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 24px; padding: 0 8px; border-radius: 999px;
  background: var(--green); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.presu-item-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer; transition: color .15s, background .15s, border-color .15s;
}
.presu-item-del:hover { color: var(--danger); background: #fbeae5; border-color: var(--danger); }
.presu-item-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
.presu-item-grid label { margin-bottom: 14px; }
.opt { color: var(--muted); font-weight: 500; }

.btn-add {
  width: 100%; justify-content: center; border-style: dashed; border-color: #b7c79c;
  color: var(--green); font-weight: 600; background: #fff;
}
.btn-add:hover { border-color: var(--green-2); background: var(--green-strip); }

.presu-subtotal {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 14px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
.presu-subtotal span { color: var(--muted-2); font-weight: 600; }
.presu-subtotal strong { font-size: 22px; color: var(--green); font-weight: 800; }

/* --- Impuestos --- */
.year-nav { display: flex; align-items: center; gap: 10px; }
.year-current { font-weight: 700; font-size: 16px; min-width: 44px; text-align: center; }
/* Desplegable de mes del calendario de tareas (sustituye a las flechas ‹ ›) */
.task-month-select {
  padding: 9px 30px 9px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7d76' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 16px;
}
.task-month-select:hover { border-color: #cdd8bb; }
.impuestos-note { margin: 0 0 18px; }
.quarters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.quarter-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px;
}
.quarter-head { display: flex; align-items: baseline; justify-content: space-between; }
.quarter-label { font-size: 20px; font-weight: 700; color: var(--green); }
.quarter-range { font-size: 12px; color: var(--muted); }
.quarter-body { display: flex; flex-direction: column; gap: 8px; }
.quarter-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; color: var(--muted-2); }
.quarter-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quarter-row strong { color: var(--ink); white-space: nowrap; flex-shrink: 0; }
.quarter-iva { padding-top: 8px; border-top: 1px dashed var(--border); }
.quarter-iva strong { color: var(--green); font-size: 16px; }
/* IVA de los gastos con justificante: resta del que hay que declarar. */
.quarter-deduct strong { color: var(--danger); }
.quarter-irpf { padding-top: 8px; border-top: 1px dashed var(--border); }
.quarter-irpf strong { color: var(--amber); font-size: 16px; }
.quarter-total-pay { padding-top: 8px; border-top: 2px solid var(--border); }
.quarter-total-pay strong { color: var(--ink); font-size: 17px; }
.quarter-subhead { padding-top: 8px; border-top: 2px solid var(--border); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.quarter-subhead strong { color: var(--amber); font-size: 15px; text-transform: none; letter-spacing: normal; }
.btn-block { display: block; text-align: center; }
.btn-download {
  color: var(--green); border-color: var(--green); background: var(--green-soft); font-weight: 600;
}
.btn-download:hover { background: var(--green); color: #fff; }

.quarter-export { display: flex; flex-direction: column; gap: 8px; }
.quarter-zip-btn { width: 100%; }
/* Botones de descarga con rueda de carga al lado del texto. El svg[hidden]
   necesita su propia regla: `display: inline-flex` en el botón anularía el
   atributo hidden del hijo si no se declara. */
.js-descarga { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.js-descarga svg[hidden] { display: none; }
.js-descarga .js-descarga-spinner { flex-shrink: 0; }
.js-descarga.descargando { pointer-events: none; opacity: .75; cursor: progress; }
.quarter-export-row { display: flex; gap: 8px; }
.quarter-export-row .btn { flex: 1; text-align: center; padding-left: 8px; padding-right: 8px; }

.quarter-recap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.quarter-months { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.quarter-months-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 8px;
}
.quarter-months-head, .quarter-months-row {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 4px; align-items: baseline;
}
.quarter-months-head { font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.quarter-months-head span:not(:first-child) { text-align: right; }
.quarter-months-row {
  font-size: 12px; color: var(--muted-2); padding: 5px 0; border-top: 1px dashed var(--border);
}
.quarter-months-row:first-of-type { border-top: none; }
.quarter-months-row span { text-align: right; }
.quarter-months-row span.quarter-month-name { text-align: left; font-weight: 600; color: var(--ink); }
.quarter-months-row strong { text-align: right; color: var(--ink); }
.recap-box {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px;
}
.recap-label { font-size: 13px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: .5px; }
.recap-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.recap-row span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.recap-row strong { font-size: 21px; font-weight: 700; white-space: nowrap; }
.recap-iva { color: var(--green); }
.recap-irpf { color: var(--amber); }

@media (max-width: 720px) {
  .row2, .row3, .row4 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .type-grid { grid-template-columns: 1fr 1fr; }
  .quarters, .quarter-recap { grid-template-columns: 1fr 1fr; }
  .container { padding: 18px; }
  .topnav { display: flex; flex-wrap: wrap; position: static; padding: 12px 16px; }
  .nav-search { order: 3; flex: 1 1 100%; max-width: none; }
  .kpis, .kpis-3 { grid-template-columns: repeat(2, 1fr); }
  .charts { grid-template-columns: 1fr; }
}

/* --- Login --- */
.login-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow); padding: 36px 34px 30px;
  text-align: center;
}
.login-logo { width: 64px; height: 64px; margin-bottom: 14px; }
.login-card h1 { font-size: 20px; margin: 0 0 6px; }
.login-sub { color: var(--muted); font-size: 14px; margin: 0 0 22px; }
.login-error {
  background: #fbeae5; color: var(--danger); border-radius: 8px;
  padding: 10px 12px; font-size: 14px; font-weight: 600; margin: 0 0 16px;
}
.login-card form { text-align: left; }
.login-card label {
  display: block; font-size: 14px; color: var(--muted-2); font-weight: 700; margin-bottom: 16px;
}
.login-card button { margin-top: 6px; width: 100%; }

.muted { color: var(--muted); }
.drive-hint { margin: -8px 0 16px; }

/* Presupuestos: botón "Aceptado" + fila aceptada */
.presu-accept-btn { border-color: var(--border); color: var(--muted); background: #fff; }
.presu-accept-btn:hover { border-color: var(--green); color: var(--green); }
.presu-accept-btn.accepted { background: var(--green); border-color: var(--green); color: #fff; }
.presu-accept-btn.accepted:hover { background: #547d28; color: #fff; }
tr.presu-accepted td { background: var(--green-soft); }

.section-h { font-size: 15px; color: var(--muted-2); margin: 26px 0 12px; }

/* --- Analítica: origen de los leads --- */
.kpi-foot { font-size: 12px; color: var(--muted); margin-top: 4px; }
/* Barra apilada con el reparto de leads por canal */
.src-bar { display: flex; height: 34px; border-radius: 8px; overflow: hidden; background: var(--green-strip); }
.src-bar-seg {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700; min-width: 2px;
}
.src-chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--muted-2); }

/* --- Móvil: el rail pasa a barra inferior --- */
@media (max-width: 760px) {
  .side {
    top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 64px;
    flex-direction: row; justify-content: flex-start; align-items: center;
    padding: 4px 10px; gap: 0;
    border-right: none; border-top: 1px solid var(--border);
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  }
  .side-logo { display: none; }
  .side-nav { flex-direction: row; justify-content: flex-start; margin: 0; width: max-content; flex: 0 0 auto; }
  .side-bottom { flex-direction: row; width: max-content; flex: 0 0 auto; }
  .side-logout-form { width: auto; }
  .side-link { width: auto; flex-shrink: 0; white-space: nowrap; padding: 6px 12px; font-size: 9.5px; gap: 3px; }
  main.content { margin-left: 0; padding-bottom: 80px; }
  .container { padding: 18px; }
  .page-head { flex-wrap: wrap; gap: 10px; }
  .page-search input { width: 100%; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .charts { grid-template-columns: 1fr; }
  .row2, .row3, .row4, .presu-item-grid { grid-template-columns: 1fr; }
  .type-grid { grid-template-columns: 1fr 1fr; }
}

/* --- Tareas --- */
.task-form-card { margin-bottom: 18px; }
.task-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.task-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.task-filter { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--muted-2);
  font-size: 14px; font-weight: 600; text-decoration: none; }
.task-filter:hover { border-color: var(--green); color: var(--green); }
.task-filter.active { background: var(--green); border-color: var(--green); color: #fff; }
.task-filter-n { font-size: 12px; opacity: .8; }
.task-filter.active .task-filter-n { opacity: 1; }

/* Cabecera "Fecha" clicable para invertir el orden */
.task-sort-link {
  display: inline-flex; align-items: center; gap: 3px; color: inherit;
  text-decoration: none; cursor: pointer;
}
.task-sort-link:hover { color: var(--green); }
.task-sort-icon { width: 12px; height: 12px; flex-shrink: 0; }

/* Celda principal arriba; el resto centrado verticalmente para alinear con los iconos */
.task-table td { vertical-align: middle; }
.task-table td.task-cell-main { vertical-align: top; }
.task-cell-main { max-width: 460px; }
.task-wrap {
  max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-title { font-weight: 600; color: var(--ink); }
.task-notes { font-size: 13px; color: var(--muted); margin-top: 3px; white-space: pre-line; }
.task-row.task-status-hecho .task-title { text-decoration: line-through; color: var(--muted); }
/* Círculo para marcar hecha: aparece al pasar el ratón por la fila (y con
   el teclado al enfocarlo, para no dejarlo inalcanzable sin ratón). */
.task-main-row { display: flex; align-items: flex-start; gap: 10px; }
.task-main-text { min-width: 0; }
.task-check {
  flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border); border-radius: 50%; background: #fff;
  color: transparent; cursor: pointer; opacity: 0; transition: opacity .12s ease;
}
.task-check svg { width: 12px; height: 12px; }
.task-row:hover .task-check, .task-check:focus-visible { opacity: 1; }
.task-check:hover { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.task-check.done { opacity: 1; border-color: var(--green); background: var(--green); color: #fff; }
.task-check.done:hover { background: var(--green-2); border-color: var(--green-2); }
.task-status-form { margin: 0; }
.task-status-select { width: auto; min-width: 140px; padding: 6px 8px; font-size: 13px; font-weight: 600; }
/* El <td> se queda como celda de tabla (para que el borde de la fila sea
   continuo); el flex va en un div interno. */
.task-actions { white-space: nowrap; text-align: right; }
.task-actions-inner { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
.task-actions-inner .inline { margin: 0; display: flex; }

/* Barra de filtros (estado / área / empleado) */
.task-filter-bar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.task-filter-bar[hidden] { display: none; }
.task-filter-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); align-self: center; margin-right: 4px; min-width: 66px; }
.task-filters { align-items: center; margin-bottom: 0; }
.task-filter { padding: 5px 12px; font-size: 13px; }

/* Chip de responsable */
.chip-emp { cursor: default; }
/* Por posición en TASK_EMPLOYEES (main.py), no por nombre: ver la nota de
   .bigcal-inst-2/3 más arriba. */
.chip-emp-1 { background: #e6eefb; color: #2c5aa0; }
.chip-emp-2 { background: #fbe6f2; color: #a63576; }
.chip-emp-3 { background: #e9e2fb; color: #6b4bb0; }

/* Chip de forma de pago (instalaciones) */
.pay-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.chip-pay { cursor: default; }
.chip-pay-efectivo { background: #fdeccb; color: #a86a0a; }
.chip-pay-transferencia { background: #dcecfb; color: #1f6ba8; }
.chip-pay-tarjeta { background: #e9e2fb; color: #6b4bb0; }
/* Cómo cobra el instalador lo suyo. Borde en vez de fondo, para que no se
   confunda con la forma de pago de la factura, que va justo al lado. */
.chip-inspay { cursor: default; background: transparent; border: 1px solid currentColor; }
.chip-inspay-efectivo { color: #a86a0a; }
.chip-inspay-transferencia { color: #1f6ba8; }

/* Chips de Contactos: canal de origen y estado del pipeline */
.chip-channel { cursor: default; font-size: 12px; }
.chip-channel-web { background: #fbf1dc; color: var(--amber); }
.chip-channel-seo { background: var(--green-soft); color: var(--green); }
.chip-channel-sem { background: #dcecfb; color: #1f6ba8; }
.chip-channel-whatsapp { background: var(--border); color: var(--muted-2); }
.chip-channel-chatgpt { background: #fbe6f2; color: #a63576; }
.chip-channel-email { background: #e9e2fb; color: #6b4bb0; }

.chip-select {
  display: inline-block; border: none; border-radius: 999px; padding: 5px 26px 5px 12px;
  font-size: 12px; font-weight: 700; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 11px;
  width: max-content; min-width: max-content; white-space: nowrap;
}
.chip-select:hover { filter: brightness(.97); }

.chip-pipeline { cursor: default; }
.chip-pipeline-nuevo { background: #fdf3d3; color: #a86a0a; }
.chip-pipeline-contactado { background: #f0e5fa; color: #7a4fa8; }
.chip-pipeline-presupuestado { background: #dcecfb; color: #2f6ca8; }
.chip-pipeline-aceptado { background: var(--green-soft); color: var(--green); }
.chip-pipeline-cerrado { background: #bcd69a; color: #3d5f22; }
.chip-pipeline-descartado { background: #fbe0db; color: #a13a24; }

/* Barra del calendario de tareas */
.task-cal-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.task-cal-bar .hint { margin: 0; }
.taskcal-view-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.taskcal-view-chips .chip { background: var(--green-soft); color: var(--green); }
.taskcal-view-notes { white-space: pre-wrap; color: var(--ink); font-size: 14px; line-height: 1.5; margin: 0; }

/* Contratos (Ajustes) */
.contract-form { margin-top: 4px; }
.contract-form-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.contract-list { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--border); }
.contract-item { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 2px; border-bottom: 1px solid var(--border); }
.contract-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contract-title { font-weight: 600; color: var(--ink); text-decoration: none; }
.contract-title:hover { color: var(--green); text-decoration: underline; }
.contract-meta { font-size: 12px; color: var(--muted); }
.contract-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.contract-actions .inline { margin: 0; }
.contract-empty { margin-top: 16px; }

/* Alta/edición: campos de una fila alineados + botones de empleado */
.task-form .task-fields label { margin-bottom: 0; }
.task-form .task-fields select, .task-form .task-fields input {
  width: 100%; height: 44px; box-sizing: border-box; margin-top: 6px;
}
.field-block { margin-bottom: 16px; }
.field-label { display: block; font-size: 14px; color: var(--muted-2); font-weight: 700; margin-bottom: 8px; }
.emp-toggle { display: inline-flex; gap: 0; border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; }
.emp-opt { position: relative; }
/* Como .emp-opt es un <label>, la regla genérica ".form label" (más específica
   por llevar además la etiqueta) le metía sus 16px de margin-bottom por
   debajo — dejaba un hueco feo bajo el botón que quedase último. Un selector
   más específico para anularlo, en vez de tocar la regla genérica. */
.emp-toggle .emp-opt { margin: 0; }
.emp-opt input { position: absolute; opacity: 0; pointer-events: none; }
.emp-opt span { display: block; padding: 9px 20px; font-size: 14px; font-weight: 600; color: var(--muted-2);
  cursor: pointer; border-left: 1.5px solid var(--border); }
.emp-opt:first-child span { border-left: none; }
.emp-opt input:checked + span { background: var(--green); color: #fff; }
.emp-opt:hover span { background: var(--green-soft); }
.emp-opt input:checked + span:hover { background: var(--green); }

/* Selector de tipo de espacio (checkboxes multi, mismo look que emp-toggle) */
.space-type-toggle { display: inline-flex; gap: 0; border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; }
.space-type-opt { position: relative; }
.space-type-toggle .space-type-opt { margin: 0; } /* ver nota en .emp-toggle .emp-opt */
.space-type-opt input { position: absolute; opacity: 0; pointer-events: none; }
.space-type-opt span { display: block; padding: 9px 20px; font-size: 14px; font-weight: 600; color: var(--muted-2);
  cursor: pointer; border-left: 1.5px solid var(--border); }
.space-type-opt:first-child span { border-left: none; }
.space-type-opt input:checked + span { background: var(--green); color: #fff; }
.space-type-opt:hover span { background: var(--green-soft); }
.space-type-opt input:checked + span:hover { background: var(--green); }

/* Selectores de espacio + cantidad (alta manual de contacto) */
.space-qty-row { display: flex; gap: 10px; flex-wrap: wrap; }
.space-qty-opt { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--border);
  border-radius: 10px; padding: 8px 12px; font-weight: 600; font-size: 13px; color: var(--muted-2); }
.space-qty-opt input { width: 52px; text-align: center; }

/* Chips de prioridad */
/* Selector de área en etiquetas visibles (sustituye al desplegable): se ven
   todas las áreas con su color, la elegida a plena intensidad y con borde. */
.area-toggle { display: flex; flex-wrap: wrap; gap: 6px; }
.area-toggle .area-opt { position: relative; margin: 0; }
.area-opt input { position: absolute; opacity: 0; pointer-events: none; }
.area-opt span {
  cursor: pointer; opacity: .45; border: 1.5px solid transparent;
  transition: opacity .12s, border-color .12s;
}
.area-opt:hover span { opacity: .8; }
.area-opt input:checked + span { opacity: 1; border-color: currentColor; }
.area-opt input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.chip-area-none { background: #fff; color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }

/* Listado de tareas en móvil: tarjetas en vez de tabla (ver .task-cards en
   tareas.html). En escritorio manda la tabla y las tarjetas no existen. */
.task-cards { display: none; }
@media (max-width: 760px) {
  .task-table-wrap { display: none; }
  .task-cards { display: flex; flex-direction: column; gap: 10px; }
  .task-card {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 10px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .task-card-body { flex: 1; min-width: 0; }
  .task-card .task-title { font-size: 14.5px; overflow-wrap: anywhere; }
  .task-card .task-notes { margin-top: 3px; }
  .task-card-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px;
  }
  .task-card-date { font-size: 12.5px; color: var(--muted); }
  .task-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
  .task-card.task-status-hecho .task-title { text-decoration: line-through; color: var(--muted); }
  /* En la tabla el check aparece al pasar el ratón; en el móvil no hay ratón,
     así que en la tarjeta se ve siempre. */
  .task-card .task-check { opacity: 1; }
}

/* Ventana de tarea a dos columnas: datos a la izquierda, calendario a la
   derecha. En móvil se apilan, con el calendario primero (es lo que más se
   toca) y sin el ancho extra. */
.modal-wide { max-width: 800px; }
.task-modal-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; align-items: start; }
.task-modal-main { min-width: 0; }
.task-modal-side { min-width: 0; }
.task-modal-main > label:last-child, .task-modal-main > .field-block:last-child { margin-bottom: 0; }
/* "Tarea"/"Descripción" heredaban de .modal-body label (13px, sin negrita) y
   quedaban más flojos que "Área"/"Responsable" (.field-label, 14px, 700) a
   su lado. Mismo tipo para los dos. */
.task-modal-main > label { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
@media (max-width: 720px) {
  .modal-wide { max-width: 560px; }
  /* Apilado, en el mismo orden de lectura: primero la tarea, luego la fecha.
     (Poner el calendario arriba dejaba el título fuera de pantalla al abrir.) */
  .task-modal-body { grid-template-columns: 1fr; gap: 16px; }
}

/* Calendario del mes siempre visible para elegir fecha (ventanas de tarea) */
.minical {
  border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 12px 12px;
  background: #fff; max-width: 320px;
}
.task-modal-side .minical { max-width: none; }
.minical-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.minical-label {
  font-weight: 700; color: var(--ink); font-size: 14px; flex: 1; text-align: center;
}
.minical-nav {
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  padding: 0; border: none; border-radius: 7px; background: none; color: var(--muted-2);
  cursor: pointer;
}
.minical-nav svg { width: 15px; height: 15px; }
.minical-nav:hover { background: var(--green-soft); color: var(--green); }
.minical-clear {
  border: 1px solid var(--border); background: #fff; color: var(--muted);
  border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.minical-clear:hover { background: var(--green-soft); color: var(--green); }
.minical-clear.activo { background: var(--green-soft); color: var(--green); border-color: var(--green-2); }
.minical-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.minical-dow {
  text-align: center; font-size: 10.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; padding-bottom: 4px;
}
.minical-dow.sun, .minical-day.sun { color: #b06a5a; }
.minical-day {
  aspect-ratio: 1; border: none; border-radius: 8px; background: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--muted-2); padding: 0;
}
.minical-day:hover { background: var(--green-soft); }
.minical-day.hoy { box-shadow: inset 0 0 0 1.5px var(--green-2); }
.minical-day.sel, .minical-day.sel:hover { background: var(--green); color: #fff; }
/* Chips de área */
.chip-area { cursor: default; font-size: 12px; }
.chip-area-conversion { background: #ffe9d6; color: #b5651d; }
.chip-area-seo { background: #efe3fb; color: #7b3fb5; }
.chip-area-sem { background: #d8e8f7; color: #1f5c93; }
.chip-area-contenido { background: #ffe1ee; color: #b53f77; }
.chip-area-tecnico { background: #ece3da; color: #7a5a3a; }
.chip-area-negocio { background: var(--green-soft); color: var(--green); }
.chip-area-analytics { background: var(--border); color: var(--muted-2); }

/* ---------- Ficha de contacto (2 columnas) ---------- */
.contact-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
/* min-width:0 es imprescindible: sin él, el track de la rejilla crece hasta el
   min-content del contenido (textos que no rompen línea) y desborda en móvil,
   donde .contact-layout pasa a una sola columna. */
.contact-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.contact-name-input {
  display: block; width: 100%; border: none; border-bottom: 1.5px solid var(--border);
  padding: 0 0 12px; margin-bottom: 16px; font-size: 21px; font-weight: 700; color: var(--ink);
  background: transparent; border-radius: 0;
}
.contact-name-input:focus { outline: none; border-bottom-color: var(--green-2); }
.contact-quick-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.contact-quick-row:last-of-type { margin-bottom: 0; }
.contact-quick-icon { width: 19px; height: 19px; flex-shrink: 0; color: var(--muted); }
.contact-quick-row input {
  flex: 1; min-width: 0; border: 1.5px solid transparent; background: var(--green-strip);
  border-radius: 8px; padding: 8px 10px; font-size: 14px; margin: 0;
}
.contact-quick-row input:focus { border-color: var(--green-2); background: #fff; outline: none; }
.contact-quick-action { flex-shrink: 0; width: 34px; height: 34px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; }
.contact-quick-action svg { width: 16px; height: 16px; }
.contact-wa:hover { color: #25d366; border-color: #25d366; background: #eafaf1; }
.contact-need-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip-need { background: var(--green-soft); color: var(--green); font-weight: 700; }
.chip-need-balcon { background: #dcecfb; color: #3a7ca5; }
.chip-need-ventana { background: var(--green-soft); color: var(--green); }
.chip-need-terraza { background: #fdeccb; color: var(--amber); }

.contact-install-highlight {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-radius: var(--radius); background: var(--green-soft); border: 1.5px solid var(--green-2);
  color: var(--green); text-decoration: none; font-weight: 700; font-size: 13px;
}
.contact-install-highlight:hover { background: var(--green-strip); text-decoration: none; }
.contact-install-icon { width: 18px; height: 18px; flex-shrink: 0; }
.contact-install-text { flex: 1; }
.contact-install-date { font-weight: 800; }

/* Tres columnas (presupuesto, factura, instalación) en una columna de 300px:
   de ahí el hueco y el relleno más justos y la letra un punto menor — con las
   medidas de dos columnas, "Presupuesto" e "Instalación" partían en dos. */
.contact-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.contact-mini {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 6px;
  border: 1.5px dashed var(--border); border-radius: var(--radius); background: #fff;
  text-align: center; color: var(--muted-2); font-weight: 600; font-size: 12px;
  transition: border-color .15s, background .15s, color .15s;
}
.contact-mini:hover { border-color: var(--green-2); background: var(--green-strip); text-decoration: none; color: var(--ink); }
.contact-mini-filled { border-style: solid; border-color: var(--green-2); background: var(--green-soft); }
.contact-mini-icon { width: 22px; height: 22px; color: var(--green); }
.contact-mini-value { font-size: 12px; color: var(--muted); }
.contact-mini-filled .contact-mini-value { color: var(--green); font-weight: 700; }
.contact-mini-badge { margin-top: 2px; font-size: 11px; }

.card-internal { background: #fdfbf3; border-color: #ece0bb; }
.card-internal-hint { text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 6px; }

.contact-presu-highlight {
  display: flex; flex-direction: column; gap: 12px; padding: 16px 18px;
  border-radius: var(--radius); background: linear-gradient(135deg, var(--green), var(--green-2));
  color: #fff; box-shadow: var(--shadow);
}
.contact-presu-top { display: flex; align-items: baseline; justify-content: space-between; }
.contact-presu-label { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; opacity: .9; font-weight: 700; }
.contact-presu-amount { font-size: 26px; font-weight: 800; }
.contact-presu-split { display: flex; gap: 10px; }
.contact-presu-split-item {
  flex: 1; background: rgba(255,255,255,.16); border-radius: 10px; padding: 10px 12px;
}
.contact-presu-split-item span { display: block; font-size: 11px; color: rgba(255,255,255,.85); font-weight: 600; margin-bottom: 2px; }
.contact-presu-split-item strong { font-size: 16px; color: #fff; font-weight: 800; }

.contact-card-seo label { margin-bottom: 0; }
.contact-seo-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; }
.contact-seo-label { color: var(--muted); font-weight: 700; min-width: 68px; flex-shrink: 0; }
.contact-seo-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-form-source { background: #e6eefb; color: #2c5aa0; }
.chip-seochan-sem { background: #dcecfb; color: #1f6ba8; }
.chip-seochan-seo { background: var(--green-soft); color: var(--green); }
.chip-seochan-ia { background: #efe3fb; color: #7b3fb5; }

.contact-actionbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.contact-actionbar-sched { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.contact-sched-date { margin: 0; font-size: 12px; color: var(--muted-2); }
.contact-sched-date span { display: block; margin-bottom: 4px; }
.contact-sched-date input { margin: 0; }
.contact-actionbar-buttons { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.contact-card-measures textarea {
  width: 100%; min-height: 230px; font-size: 14px; line-height: 1.65; resize: vertical; margin: 0;
}
.contact-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.contact-gallery-item {
  position: relative; display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); background: var(--green-strip); padding: 0; cursor: pointer;
  font: inherit;
}
.contact-gallery-item:hover { border-color: var(--green-2); }
.contact-gallery-item img, .contact-gallery-item video {
  width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
}
.contact-gallery-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; background: rgba(31, 45, 40, .25); text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.contact-gallery-broken img, .contact-gallery-broken video, .contact-gallery-broken .contact-gallery-play { display: none; }
.contact-gallery-broken::after {
  content: "Ver archivo ↗"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 11px; color: var(--muted); text-align: center; padding: 8px;
}
.contact-gallery-uploaded .contact-gallery-media {
  position: absolute; inset: 0; border: none; background: none; padding: 0; cursor: pointer; font: inherit;
}
.contact-gallery-del { position: absolute; top: 4px; right: 4px; margin: 0; z-index: 2; }
.contact-gallery-del button {
  width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(31, 45, 40, .6); color: #fff; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.contact-gallery-del button:hover { background: var(--danger); }
.contact-photo-upload { margin-top: 12px; }
.contact-photo-drop {
  display: block; text-align: center; padding: 12px; border: 1.5px dashed var(--border);
  border-radius: 10px; color: var(--muted-2); font-size: 13px; font-weight: 600; cursor: pointer; margin: 0;
}
.contact-photo-drop:hover { border-color: var(--green-2); color: var(--green); }
.contact-photo-drop input { display: none; }

.contact-lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(15, 20, 17, .92);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 40px 20px;
}
.contact-lightbox[hidden] { display: none; }
.contact-lb-stage { max-width: 90vw; max-height: 72vh; display: flex; align-items: center; justify-content: center; }
.contact-lb-stage img, .contact-lb-stage video {
  max-width: 90vw; max-height: 72vh; border-radius: 8px; box-shadow: var(--shadow); display: block;
}
.contact-lb-close {
  position: absolute; top: 18px; right: 24px; background: none; border: none; color: #fff;
  font-size: 32px; line-height: 1; cursor: pointer; opacity: .85;
}
.contact-lb-close:hover { opacity: 1; }
.contact-lb-actions { display: flex; gap: 10px; }
.contact-lb-actions .btn { background: #fff; }

/* --- Asistente (gatito) --- */
.assistant-widget {
  position: fixed; right: 24px; bottom: 24px; z-index: 150;
  display: flex; align-items: flex-end; gap: 10px; text-decoration: none;
  animation: assistant-in .35s ease-out;
}
@keyframes assistant-in {
  from { opacity: 0; transform: translateY(12px) scale(.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.assistant-avatar {
  width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 4px 14px rgba(0,0,0,.22); background: #fff;
}
.assistant-widget:hover .assistant-avatar { filter: brightness(1.04); }
.assistant-bubble {
  position: relative; max-width: 230px; background: #fff; color: var(--ink);
  font-size: 13px; font-weight: 600; line-height: 1.4; padding: 12px 26px 12px 14px;
  border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.16); margin-bottom: 10px;
}
.assistant-bubble::after {
  content: ""; position: absolute; right: -7px; bottom: 14px;
  width: 14px; height: 14px; background: #fff; transform: rotate(45deg);
  box-shadow: 2px -2px 4px rgba(0,0,0,.05);
}
.assistant-close {
  position: absolute; top: 4px; right: 6px; background: none; border: none;
  color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 4px;
}
.assistant-close:hover { color: var(--ink); }

@media (max-width: 760px) {
  .assistant-widget { right: 14px; bottom: 78px; }
  .assistant-avatar { width: 50px; height: 50px; }
  .assistant-bubble { max-width: 180px; font-size: 12px; }
}

@media (max-width: 760px) {
  .contact-layout { grid-template-columns: 1fr; }
  /* .emp-toggle no permite que sus botones (nombres de instaladores) rompan
     línea ni encojan: en pantallas estrechas el grupo entero se salía de la
     tarjeta y el último instalador quedaba invisible. min-width:0 deja que el
     flex item encoja por debajo de su min-content y overflow-x lo convierte
     en una fila deslizable, igual que el calendario grande (.bigcal-wrap). */
  .contact-actionbar { flex-direction: column; align-items: stretch; }
  .emp-toggle { min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .contact-actionbar-buttons { width: 100%; }
}

/* --- Notas flotantes (post-it) ---
   Botón abajo a la derecha, redondo y del mismo tamaño que el avatar del
   aviso "presu aceptado" (.assistant-avatar) — cuando ese aviso está
   presente (.assistant-widget existe como hermano anterior en el DOM, ver
   base.html), el botón sube justo encima para que no se solapen. Al
   pulsarlo crece hasta el post-it, que se ancla en la misma esquina
   (transform-origin abajo-derecha) para que la animación salga del botón. */
.notes-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 150;
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: #f7d774; color: #6b4f16;
  box-shadow: 0 4px 14px rgba(31,45,40,.22);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease, bottom .15s ease;
}
.notes-fab[hidden] { display: none; }
.notes-fab:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(31,45,40,.26); }
.notes-fab svg { width: 26px; height: 26px; }
/* Avatar (60px) + su margen inferior (24px) + hueco (14px). */
.assistant-widget ~ .notes-fab { bottom: 98px; }

.notes-pad {
  position: fixed; right: 24px; bottom: 24px; z-index: 160;
  width: 320px; max-height: min(560px, calc(100vh - 60px));
  display: flex; flex-direction: column;
  background: #fdf0a8; border-radius: 4px 4px 4px 18px;
  box-shadow: 0 14px 34px rgba(31,45,40,.28);
  transform-origin: bottom right; animation: notes-pop .18s ease-out;
}
.notes-pad[hidden] { display: none; }
@keyframes notes-pop {
  from { opacity: 0; transform: scale(.5) translateY(14px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
/* La esquina doblada del post-it, abajo a la izquierda. */
.notes-pad::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 18px; height: 18px;
  background: linear-gradient(45deg, #e8d478 50%, rgba(0,0,0,0) 50%);
  border-radius: 0 0 0 18px;
}
.notes-pad-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 12px 9px 16px; border-bottom: 1px solid rgba(107,79,22,.16);
}
.notes-pad-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: #6b4f16;
}
.notes-pad-close {
  background: none; border: none; cursor: pointer; padding: 0 4px;
  font-size: 20px; line-height: 1; color: #9a7a2f;
}
.notes-pad-close:hover { color: #6b4f16; }

.notes-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.notes-empty { margin: 14px 4px; font-size: 13px; color: #96793a; text-align: center; }
.note-item {
  position: relative; background: rgba(255,255,255,.55); border-radius: 8px;
  padding: 9px 30px 9px 11px;
}
/* Colapsada por defecto: solo se ve esta cabecera (la primera línea a modo
   de título). Un clic la abre y dentro cabe todo lo que se quiera añadir. */
.note-head { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.note-chevron { flex-shrink: 0; width: 11px; height: 11px; color: #b09553; transition: transform .15s ease; }
.note-item.is-open .note-chevron { transform: rotate(90deg); }
.note-title {
  min-width: 0; flex: 1; font: inherit; font-size: 14px; font-weight: 600; color: #3d3117;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* Es un <input>: independiente del cuerpo, editable sin abrir la nota. */
  border: none; background: none; padding: 2px 0; margin: 0; cursor: text;
}
.note-title:focus { outline: none; background: rgba(255,255,255,.6); border-radius: 4px; }
.note-text {
  width: 100%; border: none; background: none; overflow-y: auto; overflow-x: hidden;
  font: inherit; font-size: 14px; line-height: 1.45; color: #3d3117; padding: 0;
  margin-top: 6px; display: block; white-space: pre-wrap; word-wrap: break-word;
  /* Sin esto, al llegar al final del scroll interno el gesto de rueda/trackpad
     se lo "come" la página entera en vez de quedarse dentro de la nota. */
  overscroll-behavior: contain;
}
/* [hidden] del navegador (baja especificidad) perdía contra el display:block
   de arriba (misma especificidad pero de la hoja del autor, que siempre
   gana a la del navegador) y la nota se veía "abierta" estando colapsada. */
.note-text[hidden] { display: none; }
.note-text:focus { outline: none; }
/* Formato que puede llegar al pegar desde otra web (ver sanitizado en app.js). */
.note-text b, .note-text strong, .notes-add-text b, .notes-add-text strong { font-weight: 700; }
.note-text i, .note-text em, .notes-add-text i, .notes-add-text em { font-style: italic; }
.note-text u, .notes-add-text u { text-decoration: underline; }
.note-text ul, .note-text ol, .notes-add-text ul, .notes-add-text ol { margin: 4px 0; padding-left: 18px; }
.note-text p, .note-text div, .notes-add-text p, .notes-add-text div { margin: 0; }
.note-meta { margin-top: 4px; font-size: 10.5px; color: #96793a; letter-spacing: .2px; }
.note-del {
  position: absolute; top: 5px; right: 5px; background: none; border: none; cursor: pointer;
  padding: 3px; line-height: 0; color: #b09553; opacity: 0; transition: opacity .12s ease;
}
.note-item:hover .note-del, .note-del:focus { opacity: 1; }
.note-del:hover { color: var(--danger); }
.note-del svg { width: 13px; height: 13px; }

.notes-add {
  display: flex; align-items: flex-end; gap: 8px; margin: 0;
  padding: 10px 12px 12px 16px; border-top: 1px solid rgba(107,79,22,.16);
}
.notes-add-text {
  flex: 1; border: none; background: rgba(255,255,255,.65); border-radius: 12px;
  padding: 9px 12px; font: inherit; font-size: 14px; line-height: 1.4; color: #3d3117;
  max-height: 110px; overflow-y: auto; overscroll-behavior: contain;
  white-space: pre-wrap; word-wrap: break-word;
}
.notes-add-text:focus { outline: 2px solid rgba(107,79,22,.25); outline-offset: -1px; }
/* contenteditable no tiene placeholder nativo: se simula mientras está vacío. */
.notes-add-text:empty:before { content: attr(data-placeholder); color: #a98f52; }
.notes-add-btn {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center;
}
.notes-add-btn:hover { background: var(--green-2); }
.notes-add-btn svg { width: 17px; height: 17px; }

@media (max-width: 760px) {
  /* Sin rail lateral: el botón vuelve al borde, por encima de la barra inferior;
     mismo tamaño que el avatar del aviso en móvil (ver .assistant-avatar). */
  .notes-fab { right: 14px; bottom: 78px; width: 50px; height: 50px; }
  .assistant-widget ~ .notes-fab { bottom: 142px; }
  .notes-pad {
    left: 10px; right: 10px; bottom: 78px; width: auto;
    max-height: calc(100vh - 130px);
  }
}

/* --- Calculadora flotante --- */
.calc-widget {
  position: fixed; top: 90px; right: 90px; z-index: 160; width: 250px;
  background: var(--ink); border-radius: 16px; box-shadow: 0 10px 34px rgba(0,0,0,.35);
  padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px;
  font-family: inherit;
}
.calc-widget[hidden] { display: none; }
.calc-titlebar {
  display: flex; align-items: center; gap: 7px; height: 34px; cursor: grab; margin: 0 -14px;
  padding: 0 14px;
}
.calc-titlebar:active { cursor: grabbing; }
.calc-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; border: none; padding: 0; }
.calc-dot-1 { background: var(--danger); cursor: pointer; }
.calc-dot-1:hover { filter: brightness(1.2); }
.calc-dot-2 { background: var(--amber); }
.calc-dot-3 { background: var(--green-2); }
/* La operación en curso: puede encadenar varios importes, así que se deja
   crecer hasta tres líneas y, si aún no cabe, se puede desplazar (el JS la
   mantiene al final, en lo último tecleado). */
.calc-expr {
  text-align: right; color: #8a9a93; font-size: 13px; padding: 0 4px;
  min-height: 16px; max-height: 52px; overflow-y: auto;
  line-height: 1.35; overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
.calc-display {
  text-align: right; color: #fff; font-size: 38px; font-weight: 300; padding: 0 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.calc-btn {
  aspect-ratio: 1 / 1; border: none; border-radius: 50%; font-size: 18px; font-weight: 600;
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.calc-btn:hover { filter: brightness(1.15); }
.calc-btn:active { filter: brightness(1.35); }
.calc-btn-num { background: #46564e; }
.calc-btn-fn { background: #7f9187; color: var(--ink); }
.calc-btn-op { background: var(--green-2); font-size: 22px; }
.calc-btn-op.active { background: #fff; color: var(--green-2); }
.calc-btn-eq { background: var(--green); font-size: 22px; }
.calc-btn-wide {
  grid-column: span 2; aspect-ratio: auto; border-radius: 999px;
  justify-content: flex-start; padding-left: 22px;
}
.calc-copy {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff;
  border-radius: 10px; padding: 9px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.calc-copy:hover { background: rgba(255,255,255,.14); }
.calc-extra-row { display: flex; gap: 8px; }
.calc-iva {
  flex: 1; background: var(--green-2); border: none; color: #fff;
  border-radius: 10px; padding: 9px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.calc-iva:hover { filter: brightness(1.1); }

@media (max-width: 760px) {
  .calc-widget { right: 14px; top: 70px; width: 220px; }
  .calc-display { font-size: 30px; }
}

/* --- Hilo de email en la ficha de contacto --- */
.contact-card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.contact-email-thread {
  display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto;
  margin-bottom: 14px; padding: 20px 30px 30px 20px; border-radius: 12px;
  background: #fbfaf5 url('/static/chat-pattern.jpg') no-repeat; background-size: 100% auto;
  background-position: top center;
}
.contact-email-msg { max-width: 80%; padding: 10px 14px; border-radius: 12px; }
.contact-email-in { align-self: flex-start; background: #f2f5ec; }
.contact-email-out { align-self: flex-end; background: var(--green-soft); }
.contact-email-msg-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.contact-email-msg-from { font-size: 12px; font-weight: 700; color: var(--ink); }
.contact-email-msg-date { font-size: 11px; color: var(--muted); white-space: nowrap; }
.contact-email-msg-body { font-size: 13px; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.contact-reply-bar {
  display: flex; align-items: flex-end; gap: 8px; padding: 6px;
  background: var(--green-strip); border: 1px solid var(--border); border-radius: 24px;
}
.contact-reply-templates { position: relative; flex-shrink: 0; }
.contact-reply-plus {
  width: 40px; height: 40px; border: none; border-radius: 50%; background: #fff;
  border: 1px solid var(--border); color: var(--muted-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.contact-reply-plus:hover { border-color: var(--green); color: var(--green); }
.contact-reply-plus svg { width: 18px; height: 18px; }
.contact-reply-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 30; min-width: 200px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 6px;
  box-shadow: var(--shadow);
}
.contact-reply-menu[hidden] { display: none; }
.contact-reply-menu-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
  font-weight: 700; padding: 6px 10px 4px;
}
.contact-reply-tpl {
  display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  padding: 9px 10px; border-radius: 8px; font: inherit; font-size: 14px; color: var(--ink);
}
.contact-reply-tpl:hover { background: var(--green-soft); color: var(--green); }
.contact-reply-bar textarea {
  flex: 1; border: none; background: transparent; resize: none; margin: 0; padding: 8px 0;
  font-size: 15px; max-height: 140px; box-shadow: none;
}
.contact-reply-bar textarea:focus { outline: none; box-shadow: none; }
.contact-reply-send {
  flex-shrink: 0; width: 40px; height: 40px; border: none; border-radius: 50%;
  background: var(--green); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.contact-reply-send:hover { background: var(--green-2); }
.contact-reply-send svg { width: 18px; height: 18px; margin-right: 1px; }

/* --- Barra de herramientas del listado de contactos --- */
.contacts-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.contacts-toolbar-left { display: flex; align-items: center; gap: 8px; }
.contacts-toolbar-right { display: flex; align-items: center; gap: 10px; }
.contacts-toolbar { align-items: center; }
/* Barra de tareas siempre a la vista: el + de nueva tarea tiene que poder
   pulsarse aunque hayas bajado por el listado o por los meses del calendario.
   El fondo y el margen negativo evitan que el contenido se cuele por detrás. */
.contacts-toolbar.toolbar-sticky {
  position: sticky; top: 0; z-index: 30;
  background: #f4f6ef;
  padding: 10px 0;
  margin: -10px 0 14px;
}
.contacts-filtros-toggle, .contacts-unread-filter, .contacts-accepted-filter {
  display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: var(--muted-2);
  font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; font-family: inherit;
}
.contacts-toolbar-right .page-search input { height: 42px; padding: 0 18px; }
.contacts-filtros-toggle svg, .contacts-unread-filter svg, .contacts-accepted-filter svg { width: 16px; height: 16px; }
.contacts-filtros-toggle:hover, .contacts-unread-filter:hover,
.contacts-accepted-filter:hover { border-color: var(--green); color: var(--green); }
.contacts-filtros-toggle.active { background: var(--green-soft); border-color: var(--green-2); color: var(--green); }
.contacts-unread-filter.active, .contacts-accepted-filter.active {
  background: var(--green); border-color: var(--green); color: #fff;
}
.contacts-estado-filters { margin-bottom: 18px; }
.contacts-estado-filters[hidden] { display: none; }
.btn-round {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 50%; background: var(--green); color: #fff; text-decoration: none; flex-shrink: 0;
  border: none; cursor: pointer; font: inherit; padding: 0;
}
.btn-round svg { width: 22px; height: 22px; display: block; }
.btn-round:hover { background: var(--green-2); text-decoration: none; }
.btn-round.active { background: var(--green-2); }
.btn-round-outline { background: #fff; border: 1px solid var(--border); color: var(--muted-2); }
.btn-round-outline:hover { background: #fff; border-color: var(--green); }
.btn-round-outline.active { background: var(--green-soft); border-color: var(--green-2); }
.spinner-sm { animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-round-emoji { font-size: 22px; line-height: 1; }

/* Calendario de tareas: form de cambiar fecha dentro del modal */
.taskcal-date-form { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; }
.taskcal-date-form label { flex: 1; margin: 0; font-size: 13px; color: var(--muted-2); }
.taskcal-date-form input { margin-top: 4px; }

/* Indicador de mensaje sin responder en el listado de contactos */
.contact-name-row { display: flex; align-items: center; gap: 8px; }
.contact-unread-badge { position: relative; display: inline-flex; color: var(--green); flex-shrink: 0; }
.contact-unread-badge svg { width: 20px; height: 20px; }
.contact-unread-dot {
  position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger); border: 1.5px solid #fff; animation: unread-blink 1.1s ease-in-out infinite;
}
@keyframes unread-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Badge del icono de Contactos en el menú lateral */
.side-icon-wrap { position: relative; display: inline-flex; }
.side-badge {
  position: absolute; top: -7px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  line-height: 16px; text-align: center;
}