/* ============================================================
   CIA — Asistente Climatización Integral
   Sistema de diseño funcional/corporativo (Dieter Rams):
   "menos, pero mejor". Paleta neutra, un único acento de marca
   usado con moderación, tipografía precisa, superficies planas
   con hairlines, motion mínimo y honesto. Sin emojis.
   ============================================================ */

:root {
  --paper:     #f0f1f5;   /* fondo ligeramente azulado */
  --surface:   #ffffff;   /* tarjetas/campos */
  --surface-2: #f7f8fb;   /* hover sutil */
  --ink:       #1a1a1a;   /* texto principal */
  --ink-2:     #3d3d3d;
  --muted:     #767672;   /* texto secundario */
  --hairline:  #e4e4e0;
  --hairline-2:#d2d2cd;
  --accent:    #1e3a5f;   /* azul marino — único acento, uso moderado */
  --accent-ink:#14283f;
  --accent-wash:#e9eef4;
  --ok:        #3f7d4e;

  --radius:    6px;
  --radius-lg: 10px;
  --tap:       48px;
  --maxw:      680px;
  --gap:       16px;

  /* Sistema de elevación (sombras) */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --shadow:    0 2px 10px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
  --shadow-lg: 0 6px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);

  --ease: cubic-bezier(.2, 0, 0, 1);
  --fast: 140ms;

  --font: "Helvetica Neue", Arial, "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; /* elimina flash azul en Android */
  overscroll-behavior-y: none;             /* sin rebote al final del scroll */
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
}

svg { display: block; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 14px;
}
.skip-link:focus { left: 0; top: 0; }

/* ── Header ──────────────────────────────────────────────── */
.app-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: max(11px, env(safe-area-inset-top)) 16px 11px;
  background: #0b3d5c;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: #fff;
}
.brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.brand-logo { width: 32px; height: 32px; flex: none; }
.brand-text { display: flex; flex-direction: column; }
.brand-name {
  font-size: 15px; font-weight: 600; color: #fff; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-clock { font-size: 11px; color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums; }
.app-main { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 20px 16px 90px; }
.net-state.off { color: var(--accent); }

/* ── Botones ─────────────────────────────────────────────── */
button { font-family: inherit; }

.icon-btn, .perfil-btn {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  background: rgba(255,255,255,0.1); color: #fff;
  border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius);
  cursor: pointer; transition: background var(--fast) var(--ease);
}
.icon-btn:hover, .perfil-btn:hover { background: rgba(255,255,255,0.2); }
.icon-btn:active, .perfil-btn:active { background: rgba(255,255,255,0.3); }
.icon-btn[hidden] { display: none; }
.perfil-btn { overflow: hidden; border-radius: 50%; font-weight: 600; color: rgba(255,255,255,0.9); }
.perfil-btn img { width: 100%; height: 100%; object-fit: cover; }

.ghost-btn {
  min-height: 36px; padding: 0 12px; font-size: 14px;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--hairline-2); border-radius: var(--radius); cursor: pointer;
}
.app-header .ghost-btn {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.15);
  font-weight: 500;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.app-header .ghost-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.6);
}
.app-header .ghost-btn:active {
  background: rgba(255, 255, 255, 0.35);
}
.ghost-btn[hidden] { display: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--tap); padding: 0 18px;
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent); border-radius: var(--radius);
  font-size: 15px; font-weight: 500; letter-spacing: .01em; cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn.secondary, .btn.secundario, .btn.verde {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hairline-2);
}
.btn.secondary:hover, .btn.secundario:hover, .btn.verde:hover { background: var(--surface-2); border-color: var(--muted); }

/* Acción destructiva: discreta en reposo (solo texto/borde rojo), se afirma
   al pasar el mouse. Gana a .secundario por venir después en la cascada. */
.btn.danger { background: var(--surface); color: #b4231f; border-color: #e6c4c2; }
.btn.danger:hover { background: #b4231f; color: #fff; border-color: #b4231f; }

.btn.small { width: auto; min-height: 38px; padding: 0 14px; font-size: 14px; }

.icon-action {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--hairline-2); border-radius: var(--radius);
  cursor: pointer; text-decoration: none;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.icon-action:hover { background: var(--surface-2); color: var(--ink); }
.icon-action.danger:hover { color: var(--accent); border-color: var(--accent); }

/* ── Banner promocional (home) ──────────────────────────── */
.banner { display: block; margin-bottom: 18px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--hairline); }
.banner-img { display: block; width: 100%; height: auto; }

/* ── Intro / títulos de página ──────────────────────────── */
.intro { padding: 2px 2px 18px; }
.intro h1 { display: flex; align-items: center; gap: 8px; font-size: 23px; font-weight: 500; letter-spacing: -.015em; margin: 0; }
.intro p { color: var(--muted); font-size: 14px; margin: 5px 0 0; max-width: 48ch; }
.section-help-btn { display: inline-flex; place-items: center; justify-content: center; background: var(--accent); color: #fff; border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; transition: transform 0.2s, background 0.2s; box-shadow: 0 2px 5px rgba(11, 61, 92, 0.2); }
.section-help-btn:active { transform: scale(0.9); }
.section-help-btn:hover { background: var(--accent-ink); }

/* ── Home: menú (lista funcional) ───────────────────────── */
.menu {
  background: var(--surface);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.menu-item {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px; min-height: var(--tap);
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: background var(--fast) var(--ease);
}
.menu-item:last-child { border-bottom: 0; }
.menu-item:hover { background: var(--surface-2); }
.menu-item:active { background: #f0f0ec; }
.mi-icon {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; color: var(--ink);
  border: 1px solid var(--hairline-2); border-radius: var(--radius);
}
.mi-body { flex: 1; min-width: 0; }
.mi-title { display: block; font-size: 16px; font-weight: 500; }
.mi-desc { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.mi-status { flex: none; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mi-status.soon { color: var(--hairline-2); }
.mi-arrow { flex: none; color: #bdbdb8; }

/* ── Home: lanzador guiado (tarjetas grandes) ───────────── */
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 2px; }
.launch { display: grid; gap: 10px; margin-top: 6px; }
.launch-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px; padding: 14px;
  background: var(--surface); border-radius: var(--radius-lg);
  color: var(--ink); text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease);
  animation: fadeUp .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms);
}
.launch-card:hover { background: var(--surface-2); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.launch-card:active { transform: translateY(-1px) scale(.99); }
/* Imagen de fondo B&W según la función (marca de agua) */
.lc-bg { position: absolute; right: -10px; bottom: -22px; z-index: 0; color: var(--ink); opacity: .07; pointer-events: none;
  transition: opacity var(--fast) var(--ease), transform .4s var(--ease); }
.launch-card:hover .lc-bg { opacity: .11; transform: scale(1.08) rotate(-4deg); }
.lc-icon, .lc-text, .lc-go, .lc-tag { position: relative; z-index: 1; }
.lc-icon {
  flex: none; width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; background: var(--accent-wash); color: var(--accent);
}
.lc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lc-title { font-size: 17px; font-weight: 600; }
.lc-desc { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.lc-go { flex: none; color: #c2c2bd; }
.lc-tag { flex: none; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border: 1px solid var(--hairline-2); border-radius: 999px; padding: 3px 9px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Home: slider horizontal de trabajos pendientes ──────── */
.agenda-slider {
  margin: 0 -16px 18px;   /* sangra hasta el borde de la pantalla */
  padding: 0 16px;
  overflow: hidden;
}
.am-slider-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 0 10px;
}
.am-slider-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.am-slider-title svg { color: var(--accent); flex: none; }
.am-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 999px;
}
.am-ver-todo {
  display: flex; align-items: center; gap: 3px;
  font-size: 12px; color: var(--accent); text-decoration: none; font-weight: 500;
  white-space: nowrap; flex: none;
}
.am-pista {
  display: flex; gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  /* Ocultar scrollbar visualmente pero mantener funcionalidad */
  scrollbar-width: none;
}
.am-pista::-webkit-scrollbar { display: none; }

/* Tarjeta individual */
.am-card {
  flex: none;
  width: 220px;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 7px;
  padding: 13px 14px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow var(--fast) var(--ease), transform .15s var(--ease);
  animation: fadeUp .3s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.am-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.am-card--hoy {
  box-shadow: 0 0 0 2px #d35400, var(--shadow-sm); /* Naranja premium */
  background: linear-gradient(135deg, #fff 70%, #fdf2e9);
  animation: hoyPulse 3s infinite ease-in-out;
}
@keyframes hoyPulse {
  0% { box-shadow: 0 0 0 2px rgba(211, 84, 0, 0.6), var(--shadow-sm); }
  50% { box-shadow: 0 0 0 4px rgba(211, 84, 0, 0.9), 0 0 8px rgba(211, 84, 0, 0.4); }
  100% { box-shadow: 0 0 0 2px rgba(211, 84, 0, 0.6), var(--shadow-sm); }
}
.am-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.am-chip {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--hairline-2);
}
.am-chip--hoy {
  background: #fdf2e9; color: #d35400; border-color: transparent;
}
/* Atrasado: más urgente que "hoy", por eso rojo y sin pulso (el pulso llama
   a la acción; el atraso ya es un reproche, alcanza con que se lea claro). */
.am-chip--atrasado {
  background: #fdecea; color: #b3261e; border-color: transparent;
}
.am-card--atrasado {
  box-shadow: 0 0 0 2px #b3261e, var(--shadow-sm);
  background: linear-gradient(135deg, #fff 70%, #fdecea);
}
.am-card-atraso {
  font-size: 11.5px; font-weight: 600; color: #b3261e; line-height: 1.3;
}
.wr-num-atraso { color: #b3261e; }

/* Estado del presupuesto en el historial */
.cita-estado.e-cot-pendiente { background: var(--surface-2); color: var(--muted); }
.cita-estado.e-cot-agendado  { background: #e9eef4; color: var(--accent); }
.cita-estado.e-cot-cumplido  { background: #e6f2ea; color: var(--ok); }
.cot--cumplido .cot-hist-cliente { text-decoration: line-through; text-decoration-color: var(--hairline-2); }
.cot--cumplido { opacity: .82; }

/* Vista previa de los ítems del presupuesto */
.cot-detalle {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline);
  display: grid; gap: 6px;
}
.cot-detalle-fila {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--ink-2);
}
.cot-detalle-fila strong { flex: none; font-variant-numeric: tabular-nums; }

/* Trabajos realizados en la ficha del cliente */
.crm-sub {
  margin: 24px 0 10px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.crm-trabajos { display: grid; gap: 10px; }
.crm-trabajo {
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 5px;
}
.crm-trabajo-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-trabajo-imp { margin-left: auto; font-variant-numeric: tabular-nums; }
.crm-trabajo-det { font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.crm-trabajo-acc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* ── Tipo de tarea: instalación / service / mantenimiento ──
   El mismo color identifica al tipo en la Agenda y en el panel de inicio,
   para reconocer de un vistazo qué clase de trabajo es cada tarjeta. */
.tarea-chip {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px; flex: none; white-space: nowrap;
}
.tarea-chip--instalacion   { background: #e9eef4; color: #1e3a5f; }
.tarea-chip--service       { background: #faefdc; color: #8a5a00; }
.tarea-chip--mantenimiento { background: #e0eef1; color: #2b5f6e; }

/* Franja lateral del color del tipo en la tarjeta de la agenda */
.cita { border-left: 4px solid transparent; }
.cita--instalacion   { border-left-color: #1e3a5f; }
.cita--service       { border-left-color: #8a5a00; }
.cita--mantenimiento { border-left-color: #2b5f6e; }
.am-card--service       { border-top: 3px solid #8a5a00; }
.am-card--mantenimiento { border-top: 3px solid #2b5f6e; }
.am-card--instalacion   { border-top: 3px solid #1e3a5f; }
.am-card .tarea-chip { align-self: flex-start; }

/* Vista previa de la tarea en la Agenda */
.detalle-card { max-width: 400px; text-align: left; }
.det-fila { padding: 7px 0; border-bottom: 1px solid var(--hairline); }
.det-fila:last-of-type { border-bottom: none; }
.det-fila > div { font-size: 14.5px; color: var(--ink); white-space: pre-wrap; }
.det-items { margin: 4px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); }

/* Alta de un trabajo que no está en la lista de precios */
.srv-nuevo-item {
  display: grid; grid-template-columns: minmax(0, 1fr) 88px auto; gap: 8px; align-items: center;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--hairline-2);
}
/* Sin min-width:0 los inputs imponen su ancho intrínseco y la grilla se pasa
   del ancho de la pantalla. */
.srv-nuevo-item > * { min-width: 0; }
.srv-nuevo-item input { min-height: 42px; width: 100%; }
@media (max-width: 420px) {
  .srv-nuevo-item { grid-template-columns: 1fr 1fr; }
  .srv-nuevo-item > button { grid-column: 1 / -1; }
}
.srv-check--extra { border-style: dashed; }

/* Trabajos realizados al cerrar un trabajo */
.cierre-items { display: grid; gap: 6px; margin-bottom: 10px; }
.cierre-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 8px 10px;
}
.cierre-item-desc { flex: 1; min-width: 0; font-size: 14px; }
.cierre-item-precio { flex: none; font-size: 13px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Saldo pendiente del cliente en su ficha */
.crm-saldo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--accent-wash); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 10px 12px; margin-bottom: 4px;
}
.crm-saldo-monto { display: block; font-size: 17px; color: var(--accent); font-variant-numeric: tabular-nums; }

/* Link de una cuenta por cobrar al trabajo que la originó */
.cuenta-origen {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font-size: 12px; font-family: inherit; text-align: left;
}
.cuenta-origen:hover { text-decoration: underline; }

/* Barra de espacio usado en la nube (Mi empresa) */
.sync-barra {
  height: 6px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--hairline); overflow: hidden; margin: 10px 0;
}
.sync-barra > span { display: block; height: 100%; background: var(--accent); transition: width var(--fast) var(--ease); }
.sync-barra--alta > span { background: #b3261e; }
.am-card-hora {
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.am-card-cliente {
  font-size: 15px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.am-card-dir {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 2px 4px; margin: -2px -4px; border-radius: 4px;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.am-card-dir:hover { background: var(--surface-2); color: var(--accent); }
.am-card-dir:hover svg { color: var(--accent); }
.am-card-dir svg { flex: none; color: var(--muted); transition: color var(--fast) var(--ease); }
.am-card-notas {
  font-size: 12px; color: var(--muted); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Acción rápida "Voy en camino" desde la tarjeta del Home, sin tener que
   entrar a la Agenda. Compacta a propósito: la tarjeta es una vista previa
   angosta en un carrusel horizontal, no el lugar para un botón de 48px. */
.am-card-wa {
  flex: none; margin-left: auto; display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  background: var(--accent-wash); color: var(--accent);
  border: none; border-radius: 50%; cursor: pointer;
  transition: background var(--fast) var(--ease);
}
.am-card-wa:hover { background: #dbe4ee; }
.am-card-wa:disabled { color: var(--ok); background: transparent; cursor: default; }

/* ── Guía de pasos (¿Cómo funciona?) ────────────────────── */
.guia { border-radius: var(--radius-lg); background: var(--surface); margin-bottom: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }
.guia summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 14px; cursor: pointer; list-style: none; font-weight: 500; color: var(--ink); }
.guia summary::-webkit-details-marker { display: none; }
.guia-t { display: flex; align-items: center; gap: 8px; }
.guia-t svg { color: var(--accent); flex: none; }
.guia-chev { color: var(--muted); transition: transform .2s var(--ease); }
.guia[open] .guia-chev { transform: rotate(90deg); }
.guia[open] summary { border-bottom: 1px solid var(--hairline); }
.guia-pasos { margin: 0; padding: 12px 16px 14px 30px; display: grid; gap: 9px; font-size: 14px; color: var(--ink-2); }
.guia-pasos li { line-height: 1.45; padding-left: 4px; }
.guia-pasos li::marker { color: var(--accent); font-weight: 700; }

/* ── Footer (logo Sofisticado) ──────────────────────────── */
.app-footer { display: flex; align-items: center; gap: 10px; justify-content: flex-start; margin-bottom: calc(60px + env(safe-area-inset-bottom)); }
.foot-logo { height: 22px; width: auto; opacity: .8; }

/* ── Barra de navegación inferior (tabbar) ──────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; background: var(--surface); border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 64px; padding: 7px 2px; color: var(--ink-2); text-decoration: none;
  transition: color var(--fast) var(--ease);
}
.tab span { font-size: 11px; font-weight: 500; }
.tab.active { color: var(--accent); }
.tab.active::before { content: ""; position: absolute; top: 0; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.tab:active { background: var(--surface-2); }

/* ── Aviso sin conexión ─────────────────────────────────── */
#offline {
  position: fixed; left: 12px; right: 12px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 28;
  background: var(--ink); color: #fff; padding: 9px 14px; border-radius: 8px;
  font-size: 13px; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.18); display: none;
}
body.offline #offline { display: block; }

/* ── Aviso de nueva versión ─────────────────────────────── */
#update-banner {
  position: fixed; left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 29;
  display: none; align-items: center; gap: 12px;
  background: var(--accent); color: #fff; padding: 11px 14px; border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.22); font-size: 14px;
  animation: fadeUp .3s var(--ease) both;
}
body.update-ready #update-banner { display: flex; }
#update-banner span { flex: 1; }
#update-banner button {
  flex: none; background: #fff; color: var(--accent-ink); border: 0; border-radius: 8px;
  padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer;
}
#update-banner button:disabled { opacity: .7; cursor: default; }

/* ── Aviso de versión demo ──────────────────────────────── */
/* Franja fija bajo el header, no un toast flotante: a diferencia de "sin
   conexión" o "hay versión nueva", esto es un estado que dura días, tiene
   que poder verse todo el tiempo mientras se usa la app, no solo un
   instante. Mismo color de atención que usa el panel de admin para
   "pendiente"/"demo" (admin.css .admin-tile--aten), para que sea el mismo
   lenguaje visual en los dos lugares. */
#demo-banner {
  background: #f7ecd9; color: #8a5a00; border-bottom: 1px solid #ecd9ae;
  padding: 7px 14px; font-size: 12.5px; font-weight: 600; text-align: center;
}

/* ── Login / autenticación ──────────────────────────────── */
.login-mode .tabbar, .login-mode .app-footer, .login-mode #btn-install, .login-mode #btn-perfil, .login-mode #demo-banner { display: none !important; }
.login-wrap { min-height: 62vh; display: grid; place-items: center; padding: 12px 0; }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 22px; }
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.login-brand strong { font-size: 18px; }
.login-card h1 { font-size: 20px; font-weight: 500; margin: 0 0 4px; }
.login-card > p { margin: 0 0 16px; }
.login-error { background: var(--accent-wash); border: 1px solid var(--accent); color: var(--accent-ink); padding: 9px 12px; border-radius: var(--radius); font-size: 13px; margin-bottom: 12px; }
.login-error.success { background: #e6f4ea; border-color: #57bb8a; color: #137333; }
.login-card .btn { margin-top: 4px; }
.login-sep { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 14px 0; }
.login-sep::before, .login-sep::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.login-link { display: block; width: 100%; margin-top: 14px; padding: 8px; background: none; border: 0; color: var(--accent); font: inherit; font-size: 14px; cursor: pointer; text-align: center; }
.cargando { display: grid; place-items: center; gap: 14px; min-height: 62vh; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--hairline-2); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Tarjetas y formularios ─────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg); padding: 18px; margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.card h2 { font-size: 18px; font-weight: 500; letter-spacing: -.01em; margin: 0 0 14px; }
.card h3 {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 20px 0 10px;
}

.field { margin-bottom: 14px; }
.field label, .ag-form label {
  display: block; font-size: 12px; font-weight: 600;
  /* --ink-2 en vez de --muted: en obra, a pleno sol, un gris muy claro
     se lava por completo. --ink-2 mantiene el mismo tono discreto pero
     con contraste de sobra (>10:1) contra el fondo de las tarjetas. */
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); margin-bottom: 6px;
}
.field input, .field select, .field textarea,
.ag-form input, .ag-form textarea {
  width: 100%; min-height: var(--tap);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hairline-2); border-radius: var(--radius);
  padding: 0 12px; font: inherit;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.field textarea, .ag-form textarea { min-height: 64px; padding: 10px 12px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder,
.ag-form input::placeholder, .ag-form textarea::placeholder {
  color: #5c5c58; opacity: 1; /* placeholder gris del navegador es demasiado claro para exterior */
}
.field input:focus, .field select:focus, .field textarea:focus,
.ag-form input:focus, .ag-form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent);
}
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Debajo de ~480px (celulares en vertical) los pares de campos como
   RUT/Teléfono quedan muy angostos para escribir con el dedo sin errar.
   Se apilan en una sola columna; en tablet/desktop siguen de a dos. */
@media (max-width: 480px) {
  .row { grid-template-columns: 1fr; }
}
.toggle { display: flex; align-items: center; gap: 10px; min-height: var(--tap); font-size: 15px; cursor: pointer; }
.toggle input { width: 20px; height: 20px; accent-color: var(--accent); }

.muted { color: var(--muted); font-size: 13px; }
.hint { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.hint.error { color: #b4231f; }
.field input.input-error, .field select.input-error, .field textarea.input-error,
.ag-form input.input-error, .ag-form textarea.input-error { border-color: #b4231f; }
.field input.input-error:focus, .field textarea.input-error:focus,
.ag-form input.input-error:focus, .ag-form textarea.input-error:focus { box-shadow: 0 0 0 1px #b4231f; }
.acciones { display: grid; gap: 10px; margin-top: 16px; }

/* ── Resultado / datos ──────────────────────────────────── */
.resultado { border-top: 1px solid var(--hairline); padding-top: 16px; }
.big { font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.big-num { color: var(--ink); }
.sub { color: var(--muted); font-size: 13px; margin-top: 6px; }

.desglose { list-style: none; margin: 16px 0 0; padding: 0; font-size: 14px; }
.desglose li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.desglose li:last-child { border-bottom: 0; }
.desglose li span:first-child { color: var(--muted); }
.desglose li span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }

.reco {
  display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px;
  border: 1px solid var(--hairline-2); border-left: 3px solid var(--accent); border-radius: var(--radius);
}
.reco .cap { font-size: 20px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

.aviso {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-top: 14px;
  background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius);
  font-size: 13px; color: var(--ink-2);
}
.aviso svg { flex: none; color: var(--muted); margin-top: 1px; }

/* ── Aviso de sesión (Mi empresa) ───────────────────────────
   Completar los datos de empresa es opcional, así que esto es lo único
   que le confirma al instalador que sí está logueado. */
.sesion-aviso { background: var(--accent-wash); border-color: var(--hairline); }
.sesion-aviso p { margin: 0; display: flex; align-items: flex-start; gap: 6px; }
.sesion-aviso p + p { margin-top: 6px; }
.sesion-aviso svg { color: var(--accent); flex: none; margin-top: 1px; }
.sesion-aviso strong { color: var(--accent-ink); }

/* ── Tablas (catálogo) ──────────────────────────────────── */
table.items { width: 100%; border-collapse: collapse; font-size: 14px; }
table.items th {
  text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--hairline-2);
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap;
}
table.items td { padding: 9px 6px; border-bottom: 1px solid var(--hairline); }
table.items td.num, table.items th.num { text-align: right; font-variant-numeric: tabular-nums; }
.total-row td { font-weight: 600; border-top: 1px solid var(--hairline-2); border-bottom: 0; }

/* ── "Próximamente" ─────────────────────────────────────── */
.placeholder { text-align: center; padding: 28px 16px; }
.placeholder .ico {
  display: inline-grid; place-items: center; width: 56px; height: 56px; color: var(--ink);
  border: 1px solid var(--hairline-2); border-radius: var(--radius-lg); margin-bottom: 6px;
}
.placeholder h2 { margin: 12px 0 6px; font-weight: 500; }
.placeholder p { color: var(--muted); max-width: 42ch; margin: 6px auto; }

/* ── Personalización (perfil) ───────────────────────────── */
.perfil-hint {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--hairline-2); border-left: 3px solid var(--accent);
  border-radius: var(--radius); color: var(--ink); text-decoration: none; font-size: 14px;
  transition: background var(--fast) var(--ease);
}
.perfil-hint:hover { background: var(--surface-2); }
.perfil-hint .arr { margin-left: auto; color: var(--muted); }
.logo-prev { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.logo-prev img { max-height: 70px; max-width: 200px; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 6px; background: var(--surface); }
.logo-prev .btn { width: auto; min-height: 40px; padding: 0 14px; }

/* Zona táctil grande para subir el logo, en vez del <input type=file>
   nativo (chico y con poco contraste). El input real sigue existiendo,
   invisible pero enfocable (.visually-hidden) — así el picker se abre
   igual con mouse, dedo o teclado. */
.logo-dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 96px; margin-bottom: 8px; padding: 12px;
  border: 2px dashed var(--hairline-2); border-radius: var(--radius-lg);
  background: var(--surface-2); color: var(--ink-2);
  font-size: 13px; font-weight: 600; text-align: center; cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.logo-dropzone:hover { border-color: var(--accent); background: var(--accent-wash); }
.logo-dropzone svg { color: var(--muted); }
.logo-dropzone:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

/* Utilidad de ocultamiento: tiene que ganarle a cualquier regla de layout.
   Sin !important, `.ag-form input { width: 100% }` (más específica) estiraba
   estos campos a todo el ancho y, al estar posicionados absolutos, empujaban
   el ancho de la página en el formulario de service. */
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Recortador de logo (círculo, zoom, arrastre) ────────── */
.crop-card { max-width: 340px; }
.crop-visor {
  position: relative; width: 280px; height: 280px; margin: 14px auto;
  border-radius: 50%; overflow: hidden; background: var(--paper);
  border: 2px solid var(--accent); cursor: grab; touch-action: none;
}
.crop-visor:active { cursor: grabbing; }
.crop-zoom-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; color: var(--muted); }
.crop-zoom { flex: 1; accent-color: var(--accent); }

/* ── Presupuesto editable ───────────────────────────────── */
.pres-list { display: grid; gap: 10px; margin-bottom: 12px; }
.pres-item { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px; }
.pi-head { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.pi-desc {
  flex: 1; min-width: 0; min-height: 42px;
  border: 1px solid var(--hairline-2); border-radius: var(--radius); padding: 10px 11px;
  font: inherit; font-weight: 500; color: var(--ink); background: var(--surface);
  /* Crece con el texto: la descripción completa del ítem tiene que leerse
     entera, sin recorte ni scroll horizontal. */
  resize: none; overflow: hidden; line-height: 1.35;
  font-family: inherit;
}
.pi-desc:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pi-del {
  flex: none; width: 42px; height: 42px; border: 1px solid var(--hairline-2); border-radius: var(--radius);
  background: var(--surface); color: var(--muted); cursor: pointer; display: grid; place-items: center;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.pi-del:hover { color: var(--accent); border-color: var(--accent); }
.pi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 10px; align-items: end; }
.pi-grid label, .pi-impwrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pi-grid label > span, .pi-impwrap > span { font-size: 10px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pi-num, .pi-mon {
  min-height: 42px; border: 1px solid var(--hairline-2); border-radius: var(--radius); padding: 0 10px;
  font: inherit; background: var(--surface); color: var(--ink);
}
.pi-num { text-align: right; font-variant-numeric: tabular-nums; }
.pi-num:focus, .pi-mon:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pi-imp { font-size: 16px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; padding: 8px 0; }
.add-item { width: 100%; margin-bottom: 14px; }
@media (min-width: 560px) { .pi-grid { grid-template-columns: repeat(4, 1fr); } }

.pres-tot {
  display: grid; gap: 7px; padding: 14px; margin-bottom: 10px;
  border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface-2);
}
.pres-tot > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.pres-tot > div span { color: var(--muted); }
.pres-tot > div strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.pres-tot .gran { border-top: 1px solid var(--hairline-2); padding-top: 9px; margin-top: 2px; }
.pres-tot .gran span, .pres-tot .gran strong { color: var(--ink); }

/* ── Agenda ─────────────────────────────────────────────── */
.ag-list { display: grid; gap: 10px; margin-top: 16px; }
.ag-empty { text-align: center; padding: 26px 16px; }
.cita { display: flex; gap: 14px; background: var(--surface); border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-sm); }
.cita.done { opacity: .6; }
.cita--resaltada {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-wash);
  animation: resaltarCita .4s var(--ease) both;
}
@keyframes resaltarCita {
  from { transform: scale(1.02); box-shadow: 0 0 0 6px var(--accent-wash); }
  to   { transform: none; }
}

.cita-date {
  flex: none; width: 56px; text-align: center; padding-top: 2px;
  border-right: 1px solid var(--hairline); padding-right: 12px;
}
.cd-day { display: block; font-size: 24px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.cd-mon { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 2px; }
.cd-time { display: block; font-size: 12px; color: var(--ink-2); margin-top: 6px; font-variant-numeric: tabular-nums; }
.cita-body { flex: 1; min-width: 0; }
/* Con la etiqueta de tipo, la fila pasó a tener tres elementos y ya no entra
   en una línea en pantalla chica: se permite que baje y que el nombre del
   cliente se recorte, en vez de que la tarjeta empuje el ancho de la página. */
.cita-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; min-width: 0; }
.cita-cliente { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cita-cliente { font-size: 16px; font-weight: 500; }
.cita-estado { flex: none; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--hairline-2); color: var(--muted); }
.cita-estado.e-en_camino { color: var(--accent); border-color: var(--accent); }
.cita-estado.e-completada { color: var(--ok); border-color: #bcd6c2; }
.cita-dir { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.cita-dir svg { flex: none; color: var(--muted); }
.cita-notas { font-size: 13px; color: var(--muted); margin-top: 4px; }
.cita-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ── Service: checklist, total, fotos, detalle de trabajo ─── */
.srv-checklist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
/* Chip/card seleccionable en vez de checkbox nativo: el checkbox real sigue
   ahí (.visually-hidden), así que sigue siendo tocable/enfocable por
   teclado — solo se reemplaza cómo se ve, no cómo funciona. */
.srv-check {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 12px 14px; border-radius: var(--radius-lg); cursor: pointer;
  border: 1.5px solid var(--hairline-2); background: var(--surface);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.srv-check:hover { border-color: var(--muted); }
.srv-check.checked { border-color: var(--accent); background: var(--accent-wash); }
.srv-check-icon {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--hairline-2); display: grid; place-items: center; color: transparent;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.srv-check.checked .srv-check-icon { background: var(--accent); border-color: var(--accent); color: #fff; }
.srv-check-desc { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; line-height: 1.3; }
/* La píldora del precio tiene ancho fijo: "Sin precio" es bastante más ancha
   que "$U 1.500", así que al marcar la tarjeta el texto se reacomodaba y la
   tarjeta parecía deformarse. Con un ancho reservado, marcar solo cambia el
   color — el efecto que se buscaba— y nada se mueve. */
.srv-check-precio {
  flex: none; width: 88px; text-align: center;
  font-size: 12.5px; font-weight: 600; padding: 4px 8px;
  border-radius: 999px; background: var(--surface-2); color: var(--muted);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.srv-check.checked .srv-check-precio { background: var(--accent); color: #fff; }
/* Sin precio cargado no hay número que destacar: se marca con un tono suave
   en vez del azul pleno, que gritaba más que los ítems que sí tienen precio. */
.srv-check.checked .srv-check-precio--vacio {
  background: var(--surface-2); color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--hairline-2);
}
.srv-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; margin-bottom: 12px;
  background: var(--accent-wash); border-radius: var(--radius); font-size: 15px;
}
.srv-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.srv-foto { position: relative; width: 84px; height: 84px; }
.srv-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); cursor: pointer; border: 1px solid var(--hairline); }
.srv-foto-del {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  border-radius: 50%; border: none; background: #b4231f; color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.td-fila { padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.td-fila:last-child { border-bottom: none; }

/* ── Postventa: segmentos / calendario / clientes ───────── */
.seg { display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 4px; margin-bottom: 16px; }
.seg-btn { flex: 1; min-height: 40px; border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 500; border-radius: 4px; cursor: pointer; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.seg-btn.active { background: var(--paper); color: var(--ink); }

.cal { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--hairline); }
.cal-mlabel { font-weight: 500; text-transform: capitalize; }
.cal-nav { display: flex; gap: 8px; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-weekdays span { text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-left: 1px solid var(--hairline); border-top: 1px solid var(--hairline); }
.cal-day { min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 13px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); font-variant-numeric: tabular-nums; }
.cal-day.empty { background: var(--surface-2); }
.cal-day.today .cal-num { font-weight: 700; color: var(--accent); }
.cal-day.has { cursor: pointer; }
.cal-day.sel { background: var(--accent-wash); }
.cal-day .dot { width: 6px; height: 6px; border-radius: 50%; }
.cal-day .dot.vencido { background: var(--accent); }
.cal-day .dot.proximo { background: var(--accent); opacity: .5; }
.cal-day .dot.futuro { background: var(--muted); opacity: .5; }
/* El punto del calendario usaba la clase "cita", la misma que las tarjetas de
   la lista: cualquier selector .cita agarraba primero el punto. */
.cal-day .dot--cita { background: #2196F3; } /* azul agenda */
.ag-cal-day { cursor: pointer; transition: background var(--fast) var(--ease); }
.ag-cal-day:hover { background: var(--accent-wash); }
.ag-cal-wrap { margin-bottom: 8px; }

/* ── Historial de cotizaciones ──────────────────────────── */
.cot-hist-card { margin-bottom: 10px; padding: 12px 14px; }
.cot-hist-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cot-hist-cliente { font-weight: 600; font-size: 15px; }
.cot-hist-detail { font-size: 13px; color: var(--ink-2); margin-bottom: 10px; }
.cot-hist-card .acciones { gap: 8px; margin-top: 0; }

/* ── Notificación banner / ajuste de hora ───────────────── */
.notif-banner { display: flex; align-items: center; gap: 10px; background: var(--accent-wash); border: 1px solid var(--accent); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.notif-banner svg { flex: none; color: var(--accent); }
.notif-hora-sel { padding: 4px 8px; border: 1px solid var(--hairline-2); border-radius: var(--radius); font: inherit; font-size: 13px; background: var(--surface); }

.mant-sec h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 12px; }
.mant-sec .cita { margin-bottom: 10px; }
.small { font-size: 12px; }

.cita-estado.e-vencido { color: var(--accent); border-color: var(--accent); }
.cita-estado.e-proximo { color: var(--ink-2); border-color: var(--hairline-2); }
.cita-estado.e-futuro, .cita-estado.e-sin { color: var(--muted); }
.cita-estado.e-pendiente { color: var(--accent); border-color: var(--accent); }
.cita-estado.e-parcial { color: var(--ink-2); border-color: var(--hairline-2); }
.cita-estado.e-pagado { color: var(--ok); border-color: #bcd6c2; }

/* ── Cobros / estado de cuenta ──────────────────────────── */
.cobros-sum { display: flex; gap: 24px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 14px; background: linear-gradient(180deg, #fff, var(--surface-2)); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.cobros-sum > div { display: flex; flex-direction: column; gap: 2px; }
.cobros-sum span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cobros-sum strong { font-size: 22px; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.cobros-nueva { margin-bottom: 14px; }
.cuenta-nums { display: flex; gap: 20px; flex-wrap: wrap; margin: 10px 0; }
.cuenta-nums > div { display: flex; flex-direction: column; gap: 2px; }
.cuenta-nums span { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.cuenta-nums strong { font-variant-numeric: tabular-nums; font-weight: 600; }
.cuenta-nums .saldo strong { color: var(--accent); font-size: 18px; font-weight: 700; }
.pago-list { display: grid; gap: 5px; margin: 8px 0 12px; padding: 9px 11px; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius); }
.pago-row { display: flex; gap: 10px; font-size: 13px; align-items: baseline; }
.pago-row span:first-child { color: var(--muted); min-width: 56px; flex: none; }
.pago-row span:nth-child(2) { flex: 1; min-width: 0; color: var(--ink-2); }
.pago-row strong { font-variant-numeric: tabular-nums; }

/* ── Resumen de cobros (modal) ──────────────────────────────── */
.resumen-card { max-width: 420px; max-height: 80vh; display: flex; flex-direction: column; padding: 20px; }
.resumen-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.resumen-head h2 { margin: 0; }
.resumen-cerrar {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: none; background: var(--surface-2); border-radius: 50%; color: var(--ink-2);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.resumen-tot {
  display: flex; gap: 20px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 12px;
  background: var(--accent-wash); border-radius: var(--radius);
}
.resumen-tot > div { display: flex; flex-direction: column; gap: 2px; }
.resumen-tot span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.resumen-tot strong { font-size: 19px; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.resumen-lista { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: -4px; padding: 4px; }
.resumen-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 8px; border-radius: var(--radius); border-bottom: 1px solid var(--hairline);
}
.resumen-fila:last-child { border-bottom: none; }
.resumen-fila-nombre { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cliente .cl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cl-nombre { font-size: 16px; font-weight: 500; }
.cl-actions { display: flex; gap: 8px; flex: none; }
.cliente-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.cliente-acciones .btn.small { flex: 1; min-width: 96px; }
.cl-equipos { margin: 12px 0; display: grid; gap: 8px; }
.eq-row { padding: 12px; border: 1px solid var(--hairline); border-radius: var(--radius); }
.eq-top { display: flex; align-items: center; gap: 10px; }
.eq-ico { flex: none; color: var(--ink-2); display: grid; place-items: center; }
.eq-body { flex: 1; min-width: 0; }
.eq-name { font-size: 14px; font-weight: 500; }
.eq-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.eq-acts .btn.small { width: auto; }
.icon-action:disabled { opacity: .4; cursor: not-allowed; }
.add-eq { width: auto; }

/* Historial de mantenimientos por equipo */
.hist-head { margin-bottom: 12px; }
.hist-head .btn { width: auto; }
.hist-list { display: grid; gap: 8px; }
.hist-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--radius); }
.hist-date { flex: none; min-width: 62px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hist-body { flex: 1; min-width: 0; font-size: 14px; color: var(--ink-2); }

/* ── Herramientas de campo ──────────────────────────────── */

.tool-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 2px 0 4px; }
.tool-out { margin-bottom: 14px; font-size: 18px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.tool-out small { color: var(--muted); font-weight: 400; font-size: 13px; }
.tool-out:empty { display: none; }

/* ── Firma (puesta en marcha) ───────────────────────────── */
.firma-pad { width: 100%; height: 170px; display: block; border: 1px dashed var(--hairline-2); border-radius: var(--radius); background: var(--surface); touch-action: none; cursor: crosshair; }
.conv-in { display: flex; gap: 8px; align-items: stretch; }
.conv-in input { flex: 1; min-width: 0; }
.conv-in input, .conv-in select {
  min-height: 48px; border: 1px solid var(--hairline-2); border-radius: var(--radius);
  padding: 0 12px; font: inherit; background: var(--surface); color: var(--ink);
}
.conv-in select { flex: none; padding: 0 10px; }
.conv-in input:focus, .conv-in select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.conv-out { display: grid; gap: 6px; margin-top: 12px; }
.conv-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius); font-variant-numeric: tabular-nums; }
.conv-row span { color: var(--muted); }
.conv-row strong { font-weight: 600; }

/* ── Mi lista de precios (apilado, apto teléfono) ───────── */
.precio-list {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
  width: 100%;
  max-width: 100%;
  grid-template-columns: 1fr;
  box-sizing: border-box;
}
@media (min-width: 580px) {
  .precio-list {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}
.precio-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.precio-item .p-desc {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius);
  padding: 0 11px;
  font: inherit;
  font-weight: 500;
  background: var(--surface);
  color: var(--ink);
  box-sizing: border-box;
}
.precio-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.precio-foot .p-mon {
  flex: none;
  min-width: 34px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.precio-foot .p-precio {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  text-align: right;
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius);
  padding: 0 12px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  color: var(--ink);
  box-sizing: border-box;
}
.precio-foot .icon-action {
  flex: none;
}
.precio-item .p-desc:focus, .precio-foot .p-precio:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* ── Chatbot HVAC (Consultá) ────────────────────────────── */
.chat-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.chat-tools { display: flex; gap: 8px; flex: none; }
.chat { display: flex; flex-direction: column; min-height: 65vh; justify-content: space-between; }
.chat-list {
  display: flex; flex-direction: column; gap: 10px;
  flex: 1; overflow-y: auto;
  padding: 6px 2px; -webkit-overflow-scrolling: touch;
}
.msg { display: flex; }
.msg.user { justify-content: flex-end; }
.msg-bubble {
  max-width: 86%; padding: 10px 13px; font-size: 14.5px; line-height: 1.5;
  white-space: pre-wrap; word-wrap: break-word; border-radius: 14px;
}
.msg.bot .msg-bubble { background: var(--surface); border: 1px solid var(--hairline); border-top-left-radius: 4px; }
.msg.user .msg-bubble { background: var(--accent); color: #fff; border-top-right-radius: 4px; }
.msg.error .msg-bubble {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--surface-2); border: 1px solid var(--hairline-2); color: var(--ink-2);
}
.msg.error .msg-bubble svg { flex: none; color: var(--muted); margin-top: 2px; }

.typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typing 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  border: 1px solid var(--hairline-2); background: var(--surface); color: var(--ink-2);
  border-radius: var(--radius-pill); padding: 8px 13px; font: inherit; font-size: 13px; cursor: pointer; text-align: left;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.chip:hover { background: var(--surface-2); border-color: var(--muted); }

.chat-input-row { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.chat-input-box {
  display: flex; align-items: flex-end; flex: 1;
  background: var(--surface); border: 1px solid var(--hairline-2); border-radius: 24px;
  padding: 2px 6px;
}
.chat-input-box:focus-within { border-color: var(--accent); }
.chat-input {
  flex: 1; min-height: 44px; max-height: 120px; resize: none;
  border: none; padding: 12px 10px; font: inherit; background: transparent; color: var(--ink);
}
.chat-input:focus { outline: none; }

.chat-action-btn {
  flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: background var(--fast) var(--ease), transform 0.1s;
}
.chat-action-btn:active { transform: scale(0.95); }
.chat-action-btn:hover { background: var(--accent-ink); }
.chat-action-btn:disabled { opacity: .5; cursor: not-allowed; }
.chat-aviso { margin-bottom: 12px; }
.chat-aviso a { color: var(--accent); font-weight: 600; }

/* foto + voz */
.chat-icon-btn {
  flex: none; width: 44px; height: 44px; border: none; border-radius: 50%;
  background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer;
  transition: color var(--fast) var(--ease);
}
.chat-icon-btn:hover { color: var(--accent); background: var(--surface-2); }
.chat-action-btn.rec { background: red; border-color: red; color: #fff; animation: micPulse 1.3s ease-in-out infinite; }
@keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(30,58,95,.4); } 50% { box-shadow: 0 0 0 7px rgba(30,58,95,0); } }

.chat-adjunto-cont:empty { display: none; }
.chat-adjunto { display: flex; align-items: center; gap: 10px; padding: 8px; margin-top: 10px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); }
.chat-adjunto img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.chat-adjunto .icon-action { margin-left: auto; }

.msg-foto { display: block; max-width: 220px; width: 100%; border-radius: 10px; margin-bottom: 6px; }
.msg-foto-nota { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 4px; }

.chat-config-head { margin-bottom: 12px; }
.chat-config-head .btn { width: auto; }
.key-row { display: flex; gap: 8px; align-items: center; }
.key-row input { flex: 1; min-width: 0; }
.key-row .btn.small { width: auto; flex: none; }
.speech-area { width: 100%; font-family: inherit; font-size: 13.5px; line-height: 1.5; border: 1px solid var(--hairline-2); border-radius: var(--radius); padding: 12px; resize: vertical; background: var(--surface); color: var(--ink); }
.speech-area:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* ── Toast ──────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(10px);
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 8px;
  font-size: 14px; opacity: 0; pointer-events: none; z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Cambio de modo (View Transitions, crossfade breve) ─── */
::view-transition-group(root) { animation-duration: 160ms; }

/* ── Accesibilidad: menos movimiento ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

/* ── Fix teclado móvil ──────────────────────────────────── */
input, select, textarea { scroll-margin-block: 96px; }

/* ── Dashboard: acceso principal ─────────────────────────── */
/* Primer botón que ve un instalador al abrir la app: arrancar un trabajo
   nuevo. Mismo navy que el resto de las acciones primarias (.btn), no un
   color nuevo — pero más alto y con más peso visual para que sea el
   primer lugar donde cae el dedo. */
.home-hero-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; margin-bottom: 16px; padding: 0 18px;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  border-radius: var(--radius-lg); text-decoration: none;
  font-size: 16px; font-weight: 700; letter-spacing: .01em;
  box-shadow: var(--shadow);
  transition: background var(--fast) var(--ease), transform .15s var(--ease);
}
.home-hero-cta:hover { background: var(--accent-ink); }
.home-hero-cta:active { transform: translateY(1px); }

/* ── Menú "Nuevo trabajo" y modal "Agendar visita" ────────── */
.menu-trabajo-card { max-width: 380px; }
.menu-trabajo-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.menu-trabajo-op {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 60px; padding: 10px 12px; border: 1px solid var(--hairline-2); border-radius: var(--radius-lg);
  background: var(--surface); cursor: pointer; text-align: left; font: inherit; color: var(--ink);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.menu-trabajo-op:hover { border-color: var(--accent); background: var(--accent-wash); }
.menu-trabajo-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-wash); color: var(--accent); }
.menu-trabajo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.menu-trabajo-txt strong { font-size: 14.5px; }
.menu-trabajo-op svg:last-child { flex: none; color: var(--muted); }
.agendar-visita-card { max-width: 380px; }

/* ── Dashboard: widgets del Home ─────────────────────────── */
.widgets-row {
  display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px;
}
.widget {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 14px;
  display: flex; flex-direction: column; gap: 0;
}
.widget-head {
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
}
.widget-head svg { color: var(--accent); flex: none; }
.widget-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); flex: 1;
}

/* Widget: Resumen */
.wr-stats { display: flex; justify-content: space-between; gap: 10px; }
.wr-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.wr-num { font-size: 20px; font-weight: 700; color: var(--ink); }
.wr-num-money { color: var(--ok); }
.wr-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

/* Widget: Clima */
.w-min { color: var(--muted); }

/* Animaciones del clima */
@keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: .8; } 100% { transform: scale(1); opacity: 1; } }
.w-anim-sun { animation: pulse 4s infinite ease-in-out; }
.w-anim-cloud { animation: float 6s infinite ease-in-out; }
.w-anim-cloudRain { animation: float 4s infinite ease-in-out; }
.w-anim-cloudSnow { animation: float 5s infinite ease-in-out; }
.w-anim-cloudLightning { animation: pulse 3s infinite ease-in-out; }

/* Widget: Slider Accesos */
.accesos-slider { margin: 0 -16px 18px; padding: 0 16px; overflow: hidden; }
.wa-slider { display: flex; gap: 12px; padding-bottom: 8px; }
.wa-item-scroll {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 16px; background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink);
  transition: transform .15s var(--ease), box-shadow var(--fast) var(--ease);
}
.wa-item-scroll:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.wa-ico-scroll { color: var(--accent); background: var(--accent-wash); padding: 10px; border-radius: 50%; display: grid; place-items: center; }
.wa-label-scroll { font-size: 11px; font-weight: 600; text-align: center; }

/* Widget: Asistente AI */
.widget-ai {
  display: flex; align-items: center; gap: 16px; text-decoration: none; margin-bottom: 12px;
  background: linear-gradient(135deg, var(--accent) 0%, #1c3556 50%, #14283f 100%);
  background-size: 200% auto;
  animation: aiGlow 6s ease infinite;
  border-radius: var(--radius-lg); padding: 16px 20px;
  box-shadow: var(--shadow);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
  position: relative; overflow: hidden;
}
.widget-ai:hover { box-shadow: var(--shadow-lg), 0 0 15px rgba(30, 58, 95, 0.4); transform: translateY(-2px); }
/* Destello que cruza la tarjeta: le da vida sin pedir atención constante.
   La pausa larga del keyframe es a propósito — un brillo continuo cansa
   y compite con el resto del home. */
.widget-ai::after {
  content: ""; position: absolute; inset: 0 auto 0 -60%;
  width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.14) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: aiSheen 5.5s ease-in-out infinite;
}
.wai-bot, .wai-content { position: relative; z-index: 1; }
@keyframes aiSheen {
  0%, 62% { left: -60%; }
  100% { left: 130%; }
}
.wai-bot {
  flex: none; display: grid; place-items: center;
  background: rgba(255,255,255,0.15); border-radius: 50%;
  width: 56px; height: 56px; color: #fff;
  box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.4);
  animation: botPulse 2s infinite;
}
@keyframes aiGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes botPulse {
  0% { box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.3); }
  70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0px rgba(255, 255, 255, 0); }
}
.wai-content { flex: 1; min-width: 0; }
.widget-ai .widget-head { margin-bottom: 4px; }
.widget-ai .widget-head svg { color: rgba(255,255,255,.8); }
.widget-ai .widget-title { color: rgba(255,255,255,.65); }
.wai-arrow { color: rgba(255,255,255,.5); margin-left: auto; }
.wai-desc { font-size: 13.5px; color: rgba(255,255,255,.9); margin: 0; line-height: 1.4; }


/* ── Visor del documento (previsualización antes de imprimir) ──
   Al tocar "Generar PDF" el instalador ve la hoja tal como va a salir y
   recién entonces decide: guardarla, compartirla o cerrar. Antes se llamaba
   a imprimir a ciegas y en el celular no se veía nada. */
.visor {
  position: fixed; inset: 0; z-index: 1200;
  background: #5a5f66; display: flex; flex-direction: column;
}
body.visor-abierto { overflow: hidden; }
.visor-barra {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: var(--accent); color: #fff;
  padding-top: max(10px, env(safe-area-inset-top));
}
.visor-titulo { flex: 1; font-weight: 600; font-size: 15px; min-width: 0; }
.visor-icono {
  flex: none; width: 38px; height: 38px; border: none; border-radius: 8px;
  background: rgba(255,255,255,.14); color: #fff; font-size: 18px; cursor: pointer;
}
.visor-icono:hover { background: rgba(255,255,255,.24); }
.visor-btn {
  flex: none; min-height: 38px; padding: 0 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff;
  font-size: 14px; font-weight: 600; font-family: inherit;
}
.visor-btn:hover { background: rgba(255,255,255,.14); }
.visor-btn--principal { background: #fff; color: var(--accent); border-color: #fff; }
.visor-btn--principal:hover { background: #eaeef3; }
.visor-scroll { flex: 1; overflow: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
.visor-hoja {
  max-width: 210mm; margin: 0 auto; background: #fff;
  box-shadow: 0 6px 28px rgba(0,0,0,.35); border-radius: 2px; overflow: hidden;
}
@media (max-width: 640px) {
  .visor-scroll { padding: 8px; }
  .visor-hoja > .print-doc { padding: 8mm !important; }
  .visor-btn { padding: 0 11px; font-size: 13.5px; }
}

/* ── Documento imprimible / PDF ─────────────────────────── */
.print-doc { position: absolute; left: -9999px; top: 0; opacity: 0; pointer-events: none; }
/* Estilos del documento. Van FUERA de @media print a propósito: desde que el
   visor muestra la hoja en pantalla, estas reglas tienen que aplicar también
   ahí. Cuando vivían solo dentro de @media print, en el visor el logo salía a
   su tamaño natural (420 px) y ocupaba la primera pantalla entera antes de
   cualquier dato del trabajo. */
#cia-print .pd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  border-bottom: 2px solid var(--accent); padding-bottom: 10px; }
/* Encabezado compacto: en A4 (297 mm) 40 px ≈ 3,5 % del alto de la página,
   muy por debajo del 15 % máximo. El objetivo es que cliente, fecha y
   dirección se lean sin scrollear. */
#cia-print .pd-logo { max-height: 40px; max-width: 150px; width: auto; object-fit: contain; flex: none; }
#cia-print .pd-logo-ph { width: 40px; height: 40px; border: 1px solid #ccc; flex: none;
  display: grid; place-items: center; font-size: 18px; color: #999; }
#cia-print .pd-inst { text-align: right; font-size: 11px; line-height: 1.45; color: #444; }
#cia-print .pd-inst strong { display: block; font-size: 13.5px; color: var(--accent-ink); margin-bottom: 1px; }
#cia-print h1 { font-size: 18px; font-weight: 600; letter-spacing: .1em; color: var(--ink); margin: 12px 0 10px; }
#cia-print .pd-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; font-size: 11.5px; margin-bottom: 14px; }
#cia-print .pd-meta span { color: #666; }
#cia-print .pd-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
#cia-print .pd-table th { background: #f3f3f1; border: 1px solid #d8d8d2; padding: 6px 8px; text-align: left; color: #444; font-weight: 600; }
#cia-print .pd-table td { border: 1px solid #e3e3de; padding: 5px 8px; }
#cia-print .pd-table .num { text-align: right; font-variant-numeric: tabular-nums; }
#cia-print .pd-totals { width: 62%; margin: 12px 0 0 auto; }
#cia-print .pd-totals > div { display: flex; justify-content: space-between; padding: 5px 8px; font-size: 12px; }
#cia-print .pd-totals > div span { color: #555; }
#cia-print .pd-totals .gran { border-top: 2px solid var(--accent); margin-top: 4px; font-size: 13.5px; font-weight: 600; }
#cia-print .pd-notes { margin: 20px 0 0; padding-left: 18px; font-size: 10.5px; color: #555; }
#cia-print .pd-notes li { margin: 3px 0; }
#cia-print .pd-foot { margin-top: 22px; border-top: 1px solid #ddd; padding-top: 8px; font-size: 10px; color: #777; text-align: center; }
#cia-print .pd-section { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--accent-ink); border-bottom: 1px solid #e3e3de; padding-bottom: 3px; }
#cia-print .pd-eqline { font-size: 12px; }
#cia-print .pd-check { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 20px; font-size: 11.5px; }
#cia-print .pd-check li { display: flex; gap: 6px; margin: 3px 0; break-inside: avoid; }
#cia-print .pd-mark { font-weight: 700; width: 12px; flex: none; }
#cia-print .pd-obs { font-size: 11.5px; white-space: pre-wrap; }
#cia-print .pd-firma { margin-top: 20px; break-inside: avoid; }
#cia-print .pd-firma-img { max-height: 80px; display: block; }
#cia-print .pd-firma-line { border-bottom: 1px solid #333; width: 60%; height: 56px; }
#cia-print .pd-firma-cap { font-size: 10.5px; color: #555; margin-top: 4px; }

@media print {
  @page { size: A4 portrait; margin: 14mm; }
  body { background: #fff; }
  body > *:not(#cia-print) { display: none !important; }
  #cia-print { position: static; opacity: 1; display: block !important; font: 12px/1.5 var(--font); color: #1a1a1a; }
  #cia-print, #cia-print * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #cia-print .pd-table, #cia-print tr { break-inside: avoid; }
}

/* -- Tour / Onboarding Modal ------------------------------ */
.tour-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(3px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity var(--fast) var(--ease); }
.tour-backdrop.show { opacity: 1; }
.tour-backdrop.fade-out { opacity: 0; }
.tour-card { background: var(--surface); width: 100%; max-width: 340px; border-radius: 20px; padding: 24px; box-shadow: 0 15px 35px rgba(0,0,0,0.25); transform: translateY(20px) scale(0.95); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tour-backdrop.show .tour-card { transform: translateY(0) scale(1); }
.tour-head { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 20px; text-align: center; color: var(--accent); }
.tour-head h2 { font-size: 22px; font-weight: 700; color: var(--ink); margin: 0; }
.tour-list { list-style: none; padding: 0; margin: 0 0 24px 0; display: flex; flex-direction: column; gap: 14px; }
.tour-li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.4; color: var(--ink-2); }
.tour-li svg { flex: none; color: var(--accent); margin-top: 2px; }
.tour-btn-ok { width: 100%; }
.help-btn { color: var(--ink-2); opacity: 0.7; }
.help-btn:hover { color: var(--accent); opacity: 1; background: transparent; }

/* ── Guía de Instalación para iOS (iPhone/iPad) ─────────── */
.ios-install-popup {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 24px;
  background: rgba(15, 32, 53, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
  z-index: 9999;
  transform: translateY(120%) scale(0.95);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  pointer-events: none;
}
.ios-install-popup.show {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.ios-install-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.ios-install-title {
  font-size: 16px;
  font-weight: 600;
  color: #74c0fc;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ios-install-close {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
}
.ios-install-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.4;
}
.ios-install-step {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ios-install-icon-wrapper {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ios-install-step svg {
  color: #ffffff;
}
.ios-install-arrow {
  text-align: center;
  animation: bounce 2s infinite;
  margin-top: 10px;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(8px); }
  60% { transform: translateY(4px); }
}

/* ── Widget: Clima ──────────────────────────────────────── */
.widget-clima { margin-bottom: 12px; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.widget-clima.w-night {
  background: linear-gradient(180deg, #101c2c 0%, var(--accent-ink) 100%);
  color: #fff;
}
.widget-clima.w-night .widget-title, .widget-clima.w-night .w-temp-desc, .widget-clima.w-night .w-day-name, .widget-clima.w-night .w-min {
  color: rgba(255,255,255,0.7);
}
.widget-clima.w-night .w-temp-val, .widget-clima.w-night .w-max {
  color: #fff;
}
.widget-clima.w-night .w-icon, .widget-clima.w-night .w-day-icon {
  color: rgba(255,255,255,0.9);
}
.widget-clima.w-night .w-forecast { border-color: rgba(255,255,255,0.1); }
.w-loading { font-size: 13px; color: var(--muted); padding: 10px 0; text-align: center; }
.w-current { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.w-icon { color: var(--accent); }
.w-temp-info { display: flex; flex-direction: column; }
.w-temp-val { font-size: 32px; font-weight: 700; color: var(--ink); line-height: 1; margin-bottom: 2px; }
.w-temp-desc { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.w-forecast { display: flex; justify-content: space-between; border-top: 1px solid var(--hairline); padding-top: 12px; }
.w-day { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.w-day-name { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.w-day-icon { color: var(--accent); }
.w-day-temps { display: flex; gap: 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.w-max { font-weight: 600; color: var(--ink); }
.w-min { color: var(--muted); }

/* ── Widget: Cuadrícula de Accesos Rápidos ───────────────── */
.accesos-seccion { margin-bottom: 24px; }
.accesos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline-2);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.wa-item-grid {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 1;
  padding: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: background var(--fast) var(--ease);
}
.wa-item-grid:active {
  background: var(--surface-2);
}
.wa-ico-grid {
  color: var(--accent);
  display: grid;
  place-items: center;
  opacity: 0.85;
}
.wa-label-grid {
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  color: var(--ink-2);
  line-height: 1.2;
}

/* ── Custom Dialogs (Confirm/Alert) ─────────────────────── */
.dialog-card {
  max-width: 320px;
  padding: 20px;
  border-radius: 16px;
  text-align: center;
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.dialog-head {
  color: var(--accent); /* Naranja / Alerta */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.dialog-head svg {
  color: var(--accent);
}
.dialog-head-info {
  color: #2196F3; /* Azul / Info */
}
.dialog-head-info svg {
  color: #2196F3;
}
.dialog-msg {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0 0 20px 0;
}
.dialog-actions {
  display: flex;
  gap: 12px;
}
.dialog-actions .btn {
  flex: 1;
}
.dialog-cancel {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--hairline);
}