/* Bono Horas islaNet — estética de islanetworks.com
   Inter · blanco · rojo #C40100 · botones pastilla · titulares negros.
   Los colores de ESTADO (verde/ámbar/rojo de saldos) se mantienen. */
:root {
  --rojo: #c40100;
  --rojo-oscuro: #a30100;
  --fondo: #ffffff;
  --panel: #ffffff;
  --tinta: #141618;
  --tinta-suave: #595959;
  --primario: var(--rojo);
  --primario-oscuro: var(--rojo-oscuro);
  --peligro: #c40100;
  --ok: #16a34a;
  --alerta: #d97706;
  --borde: #e8e8e8;
  --marca-azul: #c40100;
  --radio: 18px;
  --sombra: 0 2px 14px rgba(20, 22, 24, 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--fondo);
  color: var(--tinta-suave);
  line-height: 1.6;
}

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.cabecera {
  background: #fff;
  color: var(--tinta);
  padding: 18px 4vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 20;
}
.marca-cabecera { display: flex; align-items: center; gap: 14px; min-width: 0; text-decoration: none; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; text-align: left; border-radius: 8px; }
.marca-cabecera:hover h1, .marca-cabecera:focus-visible h1 { opacity: .75; }
.logo-cabecera { height: 46px; width: auto; display: block; flex-shrink: 0; }
.cabecera h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--tinta);
  text-transform: uppercase;
}
.cabecera h1 .marca { color: var(--marca-azul); text-transform: none; }
.cabecera h1 .marca b { color: var(--tinta); }
.subtitulo { margin: 0; color: var(--tinta-suave); font-size: 12px; font-weight: 500; }

.cabecera-derecha { display: flex; align-items: center; gap: 10px; }
.chip-usuario { font-size: 13px; color: var(--tinta); font-weight: 600; max-width: 100%; overflow-wrap: anywhere; }
.btn-cabecera {
  background: #fff;
  border: 1px solid var(--borde);
  color: var(--tinta);
}
.btn-cabecera:hover { border-color: var(--tinta); background: #fff; }

/* Escritorio: cabecera a la mitad de alto (~42 px) para dejar sitio al panel.
   En móvil manda la cabecera compacta de más abajo (≤900px), que no se toca. */
@media (min-width: 901px) {
  .cabecera { padding: 7px 3vw; gap: 10px; }
  .marca-cabecera { gap: 10px; }
  .logo-cabecera { height: 28px; }
  .cabecera h1 { font-size: 16px; letter-spacing: -0.5px; }
  .cabecera-derecha { gap: 8px; }
  .cabecera .btn-cabecera { padding: 6px 13px; font-size: 12.5px; }
  .cabecera .chip-crono { padding: 5px 12px; font-size: 12.5px; }
  .chip-usuario { font-size: 12.5px; }
}
.chip-crono {
  background: var(--rojo);
  border: none;
  color: #fff;
  font-variant-numeric: tabular-nums;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  animation: pulso 2s infinite;
}
@keyframes pulso {
  50% { opacity: 0.75; }
}

/* Solo visible para el rol admin (el servidor lo verifica igualmente) */
.solo-admin { display: none !important; }
body.es-admin .solo-admin { display: revert !important; }

/* Solo visible en el portal del cliente */
.solo-cliente { display: none !important; }
body.es-cliente .solo-cliente { display: revert !important; }

/* Visible para el personal (admin y técnicos), nunca para clientes */
body.es-cliente .solo-personal { display: none !important; }

/* Contratar soporte desde el login */
.contratar-login { border-top: 1px solid var(--borde); margin-top: 20px; padding-top: 16px; text-align: center; }
.contratar-login .btn { display: inline-block; text-decoration: none; }

/* Modo cliente: consulta pura de su bono */
body.es-cliente .solo-staff,
body.es-cliente [data-action="volver"],
body.es-cliente [data-action="cerrar-intervencion"],
body.es-cliente [data-action="editar-cliente"],
body.es-cliente .btn-icono,
body.es-cliente #chip-crono { display: none !important; }

/* ── Menú lateral del panel ───────────────────────────────────────────── */
/* Barra fija a la izquierda en escritorio/tablet; cajón deslizante en móvil */
.menu-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 230px;
  background: #fff;
  border-right: 1px solid var(--borde);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  overflow-y: auto;
  z-index: 40;
  transform: translateX(-105%);
  transition: transform 0.2s ease;
}
.menu-item {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: var(--tinta);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 6px;
}
.menu-item:hover { border-color: var(--borde); background: #faf5f5; }
.menu-item.activo { background: var(--rojo); border-color: var(--rojo); color: #fff; }

/* Reordenar el menú arrastrando (solo escritorio; en móvil no se activa) */
.menu-panel.reordenable .menu-item { cursor: grab; }
.menu-panel.reordenable .menu-item:active { cursor: grabbing; }
.menu-item.arrastrando { opacity: 0.45; border-color: var(--rojo); border-style: dashed; }

/* Modo «Ordenar»: con el dedo o con el teclado, para cuando no hay arrastre */
.menu-orden-barra { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.menu-orden-btn, .menu-orden-mover {
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: #fff;
  color: var(--tinta-suave);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
}
.menu-orden-btn { flex: 1; text-align: left; }
.menu-orden-btn[aria-pressed="true"] { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.menu-orden-controles { display: flex; gap: 4px; }
.menu-orden-mover { padding: 6px 9px; line-height: 1; }
.menu-orden-btn:hover, .menu-orden-mover:hover { background: #faf5f5; color: var(--tinta); }
.menu-panel.modo-orden .menu-item { border-style: dashed; border-color: var(--borde); cursor: move; }
.menu-panel.modo-orden .menu-item.orden-elegido { border-style: solid; border-color: var(--rojo); box-shadow: 0 0 0 2px rgba(196, 1, 0, 0.18); }
/* El rol logística solo ve su módulo: no hay nada que reordenar */
body.es-logistica .menu-orden-barra { display: none; }

/* ── Escritorio (≥901px): el menú se esconde para dejar sitio al panel ──────
   Por defecto el menú NO ocupa espacio: se saca con el asa ☰ del borde izquierdo
   y se cierra al elegir pestaña. Con la chincheta 📌 queda fijo y aparta el
   contenido, como antes. En móvil/tablet (≤900px) nada de esto aplica: sigue el
   cajón de siempre con ☰ de la cabecera. */
@media (min-width: 901px) {
  .btn-menu { display: none !important; }
  /* Fijo con chincheta: barra siempre visible y contenido apartado */
  body.con-menu.menu-fijo { padding-left: 230px; }
  body.con-menu.menu-fijo .menu-panel { transform: none; }
  /* Suelto: el menú asoma por encima del contenido (no lo desplaza) */
  body.con-menu.menu-suelto .menu-panel { transform: none; box-shadow: 0 0 44px rgba(20, 22, 24, 0.28); }
  body.con-menu.menu-suelto .fondo-menu { display: block; background: transparent; }
  /* Sin chincheta el panel central usa TODO el ancho de la pantalla */
  body.con-menu:not(.menu-fijo) .vista { max-width: none; padding-left: max(4vw, 54px); padding-right: 4vw; }
  body.con-menu:not(.menu-fijo) #vista-teams,
  body.con-menu:not(.menu-fijo) #vista-buzon,
  body.con-menu:not(.menu-fijo) #vista-whatsapp { padding-left: 54px; padding-right: 1.5vw; }
  /* Asa del borde izquierdo (con sus avisos): recuerda que ahí está el menú */
  body.con-menu:not(.menu-fijo):not(.menu-suelto) .asa-zona { display: flex; }
}

/* Asa + avisos, fijos a media altura del borde izquierdo (solo escritorio) */
.asa-zona {
  display: none;
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 38;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.asa-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 74px;
  padding: 0;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  color: var(--tinta);
  background: #fff;
  border: 1px solid var(--borde);
  border-left: 0;
  border-radius: 0 12px 12px 0;
  box-shadow: 2px 0 10px rgba(20, 22, 24, 0.1);
}
.asa-menu:hover { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.asa-menu:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }

/* Burbujas de aviso bajo el asa: icono de la pestaña + número (abren esa pestaña) */
.asa-avisos { display: flex; flex-direction: column; gap: 9px; margin-left: 4px; }
.asa-aviso {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  background: #fff;
  color: var(--tinta);
  border: 1px solid var(--borde);
  border-radius: 50%;
  box-shadow: 1px 1px 10px rgba(20, 22, 24, 0.12);
}
.asa-aviso:hover { border-color: var(--rojo); background: #faf5f5; }
.asa-aviso:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }
.asa-aviso svg { width: 17px; height: 17px; fill: currentColor; }
.asa-aviso-num {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rojo);
  color: #fff;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Chincheta: fija el menú para que no se esconda (junto a "Ordenar").
   Solo escritorio: en móvil/tablet el menú es un cajón y no hay nada que fijar. */
.menu-fijar-btn { flex: 0 0 auto; padding: 6px 9px; line-height: 1; }
@media (max-width: 900px) { .menu-fijar-btn { display: none; } }
.menu-fijar-btn[aria-pressed="true"] { background: var(--rojo); border-color: var(--rojo); color: #fff; }

/* Botón hamburguesa (solo móvil/tablet pequeña, solo personal) */
.btn-menu {
  font-size: 20px;
  line-height: 1;
  padding: 9px 13px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: #fff;
  color: var(--tinta);
  cursor: pointer;
}

/* Botón «← Volver» de la cabecera: deshace el último salto de pestaña. Solo
   aparece cuando hay recorrido que deshacer (js/volver.js lo muestra). */

/* Cajón móvil: se abre con ☰ y se cierra tocando el fondo o navegando */
.fondo-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 24, 0.45);
  z-index: 35;
}
@media (max-width: 900px) {
  body.menu-abierto .menu-panel { transform: none; box-shadow: 0 0 44px rgba(20, 22, 24, 0.3); }
  body.menu-abierto .fondo-menu { display: block; }
}

/* ── Vistas y paneles ─────────────────────────────────────────────────── */
.vista { max-width: 1020px; margin: 0 auto; padding: 30px 4vw 70px; }
.oculto { display: none !important; }

.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 26px 28px;
  margin-bottom: 22px;
}
.panel h2 {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 800;
  color: var(--tinta);
  text-transform: uppercase;
  letter-spacing: -0.3px;
}

.vista-login { display: flex; justify-content: center; padding-top: 70px; }
.panel-login { width: min(420px, 92vw); }

/* ── Formularios ──────────────────────────────────────────────────────── */
.formulario {
  display: grid;
  /* minmax(0, …): sin esto una opción larga de un <select> estira la columna
     y arrastra a toda la página (desbordamiento horizontal en móvil) */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 18px;
  align-items: end;
}
.formulario label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 6px;
  font-size: 13px;
  color: var(--tinta);
  font-weight: 600;
}
.formulario input,
.formulario select,
.formulario textarea {
  padding: 11px 14px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  font-size: 14px;
  color: var(--tinta);
  background: #fff;
  font-family: inherit;
  min-width: 0;
  max-width: 100%;
}
.formulario textarea { resize: vertical; }
/* El selector de ficheros mide por su texto («Seleccionar archivo…»): sin tope
   desborda el formulario en móvil */
.formulario input[type="file"] { max-width: 100%; }
.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus { outline: 2px solid var(--rojo); outline-offset: -1px; border-color: transparent; }
.campo-ancho { grid-column: 1 / -1; }
.opcional { font-weight: 400; color: var(--tinta-suave); font-size: 11px; }
/* Aviso de redondeo bajo el campo de horas de las intervenciones (unidad mínima) */
.nota-redondeo { font-weight: 400; color: var(--tinta-suave); font-size: 11px; }

.campo-check {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  grid-column: 1 / -1;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500 !important;
}
.campo-check input { width: 16px; height: 16px; accent-color: var(--rojo); }

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn {
  padding: 11px 22px;
  border: 1px solid var(--borde);
  border-radius: 30px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--tinta);
  font-family: inherit;
  letter-spacing: 0.02em;
}
.btn:hover { border-color: var(--tinta); }
.btn-primario { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.btn-primario:hover { background: var(--rojo-oscuro); border-color: var(--rojo-oscuro); }
.btn-peligro { color: var(--rojo); border-color: #f3c1c0; }
.btn-peligro:hover { background: #fdecec; border-color: var(--rojo); }
.btn-enlace { border: none; background: none; color: var(--tinta); padding: 4px 0; margin-bottom: 8px; font-weight: 700; }
.btn-enlace:hover { color: var(--rojo); background: none; border: none; }
.btn-icono { border: none; background: none; padding: 4px 6px; cursor: pointer; font-size: 14px; opacity: 0.55; }
.btn-icono:hover { opacity: 1; }

/* ── Tarjetas de cliente ──────────────────────────────────────────────── */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tarjeta {
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
}
.tarjeta:hover { border-color: var(--tinta); transform: translateY(-2px); box-shadow: var(--sombra); }
.tarjeta h3 { margin: 0 0 10px; font-size: 16px; font-weight: 800; color: var(--tinta); letter-spacing: -0.3px; }
.tarjeta .cifras { display: flex; justify-content: space-between; font-size: 13px; color: var(--tinta-suave); margin-bottom: 8px; }
.tarjeta .cifras strong { color: var(--tinta); }

.barra { height: 8px; background: #efefef; border-radius: 30px; overflow: hidden; margin-top: 10px; }
.barra-relleno { height: 100%; border-radius: 30px; background: var(--ok); transition: width 0.3s; }
.barra-relleno.media { background: var(--alerta); }
.barra-relleno.agotada { background: var(--rojo); }

.saldo-negativo { color: var(--rojo); font-weight: 700; }

/* Aviso de bono casi agotado (≤1 h restante) */
.tarjeta.bono-bajo { border-color: var(--rojo); background: #fffafa; }

/* Bono caducado: tarjeta apagada */
.tarjeta.bono-caducado { border-color: #d7d7d7; background: #f7f7f7; opacity: 0.85; }
.linea-caducidad { font-size: 12px; color: var(--tinta-suave); margin-bottom: 6px; }
.linea-caducidad.caducada { color: var(--rojo); font-weight: 700; }

.etiqueta-bono-bajo {
  font-size: 12px;
  font-weight: 700;
  color: var(--rojo);
  background: #fdecec;
  border-radius: 30px;
  padding: 4px 12px;
  margin-bottom: 8px;
  display: inline-block;
  animation: pulso 2s infinite;
}
.banda-aviso {
  background: #fdecec;
  border: 1px solid var(--rojo);
  color: #7f1d1d;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  margin-top: 14px;
}
.banda-aviso .btn { margin-left: 8px; vertical-align: middle; }

/* ── Detalle ──────────────────────────────────────────────────────────── */
.detalle-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.detalle-cabecera h2 { font-size: 24px; letter-spacing: -0.8px; }
.notas { margin: 2px 0 0; color: var(--tinta-suave); font-size: 13px; }
.acciones { display: flex; gap: 8px; }

.resumen { display: flex; gap: 36px; margin: 18px 0 6px; }
.dato { display: flex; flex-direction: column; }
.dato-valor { font-size: 28px; font-weight: 900; color: var(--tinta); letter-spacing: -1px; }
.dato-etiqueta { font-size: 11px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

/* ── Tablas ───────────────────────────────────────────────────────────── */
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-suave);
  padding: 8px 10px;
  border-bottom: 2px solid var(--tinta);
  font-weight: 700;
}
.tabla td { padding: 12px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; color: var(--tinta-suave); }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla .fecha { white-space: nowrap; color: var(--tinta-suave); }

.vacio { color: var(--tinta-suave); font-size: 14px; text-align: center; padding: 12px 0; }

/* Estado de incidencias */
.insignia {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 30px;
  white-space: nowrap;
}
.insignia.cerrada { background: #dcfce7; color: #166534; }
.insignia.en-proceso { background: #fef3c7; color: #92400e; }
.insignia.agotado { background: #fee2e2; color: #991b1b; }
.celda-estado { white-space: nowrap; }
.celda-canal { white-space: nowrap; }
.detalle-contacto { font-size: 12px; color: var(--tinta-suave); margin-top: 3px; }
.motivo { font-size: 13px; color: var(--alerta); margin-top: 4px; }

/* Capturas adjuntas */
.miniaturas { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.miniatura {
  height: 48px;
  width: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--borde);
  transition: transform 0.15s;
}
.miniatura:hover { transform: scale(1.6); }

/* ── Calendario de intervenciones ─────────────────────────────────────── */
.calendario-cabecera { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.calendario-cabecera h2 { margin: 0; }
.calendario-nav { display: flex; align-items: center; gap: 4px; }
.calendario-titulo { min-width: 150px; text-align: center; text-transform: capitalize; color: var(--tinta); font-size: 15px; }
/* Resumen del mes en la propia franja de arriba, en rojo cuando hay días
   marcados (el rojo del texto es el mismo de los días con intervenciones). */
.calendario-leyenda { flex: 1 1 260px; min-width: 0; margin: 0; text-align: center; font-size: 13px; line-height: 1.35; color: var(--tinta-suave); }
.calendario-leyenda.con-actividad { color: var(--rojo); font-weight: 600; }
@media (max-width: 900px) { .calendario-leyenda { flex-basis: 100%; order: 3; text-align: left; } }
.btn-cal { font-size: 13px; opacity: 0.8; }
.btn-cal-hoy { padding: 4px 12px; font-size: 12px; margin-left: 6px; }
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 12px; }
.cal-dow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-suave); text-align: center; padding: 4px 0; font-weight: 700; }
.cal-dia {
  position: relative;
  min-height: 42px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 5px 7px;
  font-size: 13px;
  color: var(--tinta-suave);
  background: #fff;
  user-select: none;
}
.cal-dia.cal-fuera { border-color: transparent; background: transparent; }
.cal-dia.hoy { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.cal-dia.con-intervenciones { color: var(--rojo); font-weight: 800; cursor: pointer; border-color: #f3c2c2; background: #fff5f5; }
.cal-dia.con-intervenciones:hover { background: #fee2e2; }
.cal-dia.seleccionado { background: var(--rojo); color: #fff; border-color: var(--rojo); }
.cal-dia.seleccionado .cal-contador { background: #fff; color: var(--rojo); }
.cal-contador { position: absolute; right: 4px; bottom: 4px; font-size: 10px; line-height: 1; background: var(--rojo); color: #fff; border-radius: 20px; padding: 3px 6px; font-weight: 700; }
.intervenciones-filtro { font-size: 13px; font-weight: 400; color: var(--tinta-suave); text-transform: capitalize; }

/* Lista de intervenciones: una línea por parte, desplegable al pulsar */
.tabla-intervenciones .fila-intervencion td { padding: 8px 10px; vertical-align: middle; }
.tabla-intervenciones .celda-desc { max-width: 0; width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta); }
.tabla-intervenciones .celda-tecnico { white-space: nowrap; }
/* Solo en móvil (≤640): ahí se esconden las columnas Técnico y Contacto */
.rol-bajo-nombre, .detalle-columnas-ocultas { display: none; }
.tabla-intervenciones .celda-acciones { white-space: nowrap; }
.chevron { display: inline-block; width: 10px; color: var(--tinta-suave); font-size: 12px; }
.fila-intervencion.desplegada td { border-bottom: none; background: #fafafa; }
.fila-intervencion.desplegada .celda-desc { color: var(--tinta-suave); }
.marca-adjuntos { font-size: 11px; color: var(--tinta-suave); }
.fila-detalle td { background: #fafafa; padding: 4px 14px 16px 34px; }
.fila-detalle .texto-completo { white-space: pre-wrap; color: var(--tinta); font-size: 14px; line-height: 1.5; margin-top: 6px; max-width: 900px; }
.fila-detalle .detalle-contacto { margin-top: 0; }

.resumen-amplio { flex-wrap: wrap; gap: 26px 36px; }

/* Mini-barras de peso en estadísticas */
.peso { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.peso > div:first-child, .peso-relleno { height: 8px; border-radius: 30px; }
.peso-relleno { background: var(--rojo); min-width: 2px; max-width: 110px; flex: none; }
.peso span { font-size: 12px; color: var(--tinta-suave); }

.subseccion { font-size: 13px; color: var(--tinta); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 20px 0 8px; }
#stats-totales { margin: 4px 0 6px; }
.acciones-backup { margin-top: 12px; }
.acciones-backup .btn { text-decoration: none; display: inline-block; }

/* ── Cronómetro ───────────────────────────────────────────────────────── */
.crono { display: flex; align-items: center; gap: 20px; }
.crono-tiempo {
  font-size: 38px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
  color: var(--tinta);
}

/* ── Diálogos ─────────────────────────────────────────────────────────── */
dialog {
  border: none;
  border-radius: var(--radio);
  box-shadow: 0 20px 60px rgba(20, 22, 24, 0.25);
  padding: 26px;
  width: min(440px, 92vw);
}
dialog::backdrop { background: rgba(20, 22, 24, 0.45); }
.formulario-dialogo { grid-template-columns: minmax(0, 1fr); }
.formulario-dialogo .acciones { justify-content: flex-end; margin-top: 6px; flex-wrap: wrap; }
/* Con muchos botones (la gestión de un vehículo llegó a SEIS: guardar, quitar,
   quitar la serie, rechazar, asignar y cerrar) la fila se desbordaba del
   diálogo y los de la izquierda quedaban FUERA: se veían a medias y el clic
   caía en el borde. Es el pariente del pie del compositor de Correo que se
   salía de pantalla. Con wrap bajan a la línea siguiente y se alcanzan todos. */
dialog h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--tinta);
  text-transform: uppercase;
  letter-spacing: -0.3px;
}

/* ── Aviso flotante ───────────────────────────────────────────────────── */
.aviso {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--tinta);
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--sombra);
  z-index: 50;
  max-width: 90vw;
  cursor: pointer; /* un clic lo cierra */
}
.aviso.error { background: var(--rojo); }
.aviso.atencion { background: #b45309; } /* ámbar: hecho, pero con advertencia (F6) */

@media (max-width: 560px) {
  .formulario { grid-template-columns: minmax(0, 1fr); }
  .resumen { gap: 20px; }
  .cabecera h1 { font-size: 19px; }
  .logo-cabecera { height: 36px; }
}

/* ── Tickets ──────────────────────────────────────────────────────────── */
.badge {
  background: #fff;
  color: var(--rojo);
  border-radius: 30px;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
  margin-left: 6px;
}
.menu-item.activo .badge { background: #fff; color: var(--rojo); }
.menu-item:not(.activo) .badge { background: var(--rojo); color: #fff; }

.fila-ticket { cursor: pointer; }
.fila-ticket:hover td { background: #fafafa; }
.ticket-resuelto { opacity: 0.55; }

.insignia.urgencia-baja { background: #dcfce7; color: #166534; }
.insignia.urgencia-normal { background: #fef3c7; color: #92400e; }
.insignia.urgencia-alta { background: #fee2e2; color: #b91c1c; }
.insignia.estado-abierto { background: #ffedd5; color: #9a3412; }
.insignia.estado-en_curso { background: #dbeafe; color: #1d4ed8; }
.insignia.estado-esperando_cliente { background: #f3f4f6; color: #374151; }
.insignia.estado-resuelto { background: #dcfce7; color: #166534; }
.cita-propuesta { color: var(--alerta); font-size: 11px; }
.cita-confirmada { color: var(--ok); font-size: 11px; }
.cita-reprogramada { color: #1d4ed8; font-size: 11px; }

.controles-ticket {
  display: flex;
  gap: 16px;
  align-items: end;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}
.controles-ticket label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--tinta); }
.controles-ticket select, .controles-ticket input {
  padding: 9px 12px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
}
.cita-inputs { display: flex; gap: 8px; }

.chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  padding: 6px 2px;
  margin-bottom: 18px;
}
/* Pestañas activos/cerrados y buscador de la cola de tickets */
.filtros-tickets { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filtros-tickets input[type="search"] {
  flex: 1;
  min-width: 220px;
  padding: 9px 14px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 14px;
  font-family: inherit;
}

/* Ficheros adjuntos al ticket: chips de descarga bajo la conversación */
.adjuntos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.adjuntos:empty { display: none; }
.adjunto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 13px;
  color: var(--tinta);
  text-decoration: none;
  background: #fff;
}
.adjunto:hover { border-color: var(--tinta); }
.adjunto-tam { color: var(--tinta-suave); font-size: 12px; }
.adjunto-foto img {
  display: block;
  width: 110px;
  height: 110px;
  object-fit: cover;
  border: 1px solid var(--borde);
  border-radius: 10px;
}
.adjunto-foto:hover img { border-color: var(--tinta); }
.adjunto-video {
  display: block;
  max-width: 280px;
  max-height: 200px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: #000;
}
.burbuja {
  max-width: 78%;
  padding: 10px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
}
.burbuja.de-cliente {
  align-self: flex-start;
  background: #f3f4f6;
  color: var(--tinta);
  border-bottom-left-radius: 4px;
}
.burbuja.de-tecnico {
  align-self: flex-end;
  background: #fdecec;
  color: var(--tinta);
  border-bottom-right-radius: 4px;
}
.burbuja-autor { font-size: 11px; color: var(--tinta-suave); font-weight: 700; margin-bottom: 3px; }
.btn-editar-mensaje { font-size: 11px; padding: 0 4px; opacity: 0.45; }
.burbuja:hover .btn-editar-mensaje { opacity: 0.9; }

.insignia.via-whatsapp { background: #dcfce7; color: #166534; font-size: 11px; }

/* ── Tareas ───────────────────────────────────────────────────────────── */
.insignia.estado-tarea-pendiente { background: #ffedd5; color: #9a3412; }
.insignia.estado-tarea-en_curso { background: #dbeafe; color: #1d4ed8; }
.insignia.estado-tarea-completada { background: #dcfce7; color: #166534; }
.texto-tarea { white-space: pre-wrap; color: var(--tinta-suave); margin: 10px 0; }

/* ── Wiki ─────────────────────────────────────────────────────────────── */
.wiki-controles { display: flex; gap: 12px; margin: 14px 0 20px; flex-wrap: wrap; }
.wiki-controles input[type="search"] {
  flex: 1;
  min-width: 220px;
  padding: 11px 16px;
  border: 1px solid var(--borde);
  border-radius: 30px;
  font-size: 14px;
  font-family: inherit;
}
.wiki-controles input:focus { outline: 2px solid var(--rojo); border-color: transparent; }
.wiki-controles select {
  padding: 11px 16px;
  border: 1px solid var(--borde);
  border-radius: 30px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.wiki-cat { font-size: 14px; font-weight: 800; color: var(--tinta); text-transform: uppercase; letter-spacing: 0.03em; margin: 18px 0 6px; }
.wiki-articulos { list-style: none; margin: 0; padding: 0; }
.wiki-articulos li { padding: 8px 4px; border-bottom: 1px solid var(--borde); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wiki-articulos a { color: var(--tinta); text-decoration: none; font-weight: 600; }
.wiki-articulos a:hover { color: var(--rojo); }

.articulo-cuerpo { line-height: 1.7; color: var(--tinta-suave); }
.articulo-cuerpo h2, .articulo-cuerpo h3, .articulo-cuerpo h4 { color: var(--tinta); margin: 20px 0 8px; letter-spacing: -0.3px; }
.articulo-cuerpo p { margin: 6px 0; }
.articulo-cuerpo code { background: #f4f4f4; border: 1px solid var(--borde); border-radius: 6px; padding: 1px 7px; font-size: 13px; }
.articulo-cuerpo ul, .articulo-cuerpo ol { margin: 8px 0; padding-left: 26px; }
.articulo-cuerpo hr { border: none; border-top: 1px solid var(--borde); margin: 18px 0; }

/* ── Panel de inicio ────────────────────────────────────────────────────── */
.inicio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.inicio-grid .panel { margin: 0; }
/* Sin min-width: 0 una tabla ancha estira su columna y desborda la página */
.inicio-grid > * { min-width: 0; }
.inicio-sub { font-size: 13px; font-weight: 800; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.04em; margin: 14px 0 4px; }
.inicio-lista { list-style: none; margin: 0; padding: 0; }
.inicio-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 6px; border-bottom: 1px solid var(--borde); cursor: pointer; border-radius: 8px;
}
.inicio-item:hover { background: #faf5f5; }
/* Personas con acceso al portal de un cliente (ficha, solo Admin) */
.lista-personas { display: flex; flex-direction: column; gap: 6px; }
.persona-cliente {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 10px; border: 1px solid var(--borde); border-radius: 8px; background: #fff;
}
.persona-cliente.inactiva { opacity: .6; }
.persona-quien { min-width: 0; }
.chip-persona {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 20px;
  font-size: 11.5px; background: #eef2f7; color: #43506b;
}
.chip-persona.chip-off { background: #fdecec; color: #a3231f; }
/* Listas separadas por área (Bonos, Tarifa Plana, Info clientes). El rótulo
   solo se pinta cuando hay más de un área: a quien solo lleva sistemas, un
   título sobre su única lista no le dice nada. */
.listas-por-area { display: flex; flex-direction: column; gap: 22px; }
.titulo-area {
  margin: 0 0 10px; padding-bottom: 6px; font-size: 15px; letter-spacing: .3px;
  border-bottom: 2px solid var(--borde);
}
.grupo-sistemas .titulo-area { border-bottom-color: var(--rojo, #c40100); }
.grupo-marketing .titulo-area { border-bottom-color: #1f7a4d; }
.grupo-ia .titulo-area { border-bottom-color: #6b4bbd; }

/* Casillas de área del alta de cliente */
.areas-alta { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.areas-alta .campo-check { margin: 0; }

/* Áreas contratadas de un cliente: Sistemas, Marketing e iA, cada una con SUS
   horas. La banda de color de la izquierda es lo que hace que se lean como
   contratos distintos y no como tres filas de la misma lista. */
.lista-areas { display: flex; flex-direction: column; gap: 6px; }
.area-cliente {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 10px 9px 13px; border: 1px solid var(--borde); border-left: 4px solid #9aa5b8;
  border-radius: 8px; background: #fff;
}
.area-cliente.area-sistemas { border-left-color: var(--rojo, #c40100); }
.area-cliente.area-marketing { border-left-color: #1f7a4d; }
.area-cliente.area-ia { border-left-color: #6b4bbd; }
.area-quien { min-width: 0; }
.area-horas { font-size: 13px; color: #43506b; }
.area-horas .saldo-agotado { color: #a3231f; }
/* Reparto por tipo de trabajo dentro de un área (diseño, SEO, SEM…) */
.area-desglose { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.chip-tipo {
  padding: 2px 9px; border-radius: 20px; font-size: 12px;
  background: #f2f4f8; color: #43506b; border: 1px solid var(--borde);
}

/* Hueco donde otros módulos (gestor de proyectos) pintan dentro de un área */
.area-extra:empty { display: none; }
.area-extra { flex-basis: 100%; margin-top: 8px; }

.chip-area {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 20px;
  font-size: 11.5px; background: #eef2f7; color: #43506b;
}
/* ✔ para cerrar la tarea sin abrirla. Área de 44 px para el dedo: la fila
   entera abre la ficha, así que este botón tiene que ser fácil de acertar. */
.inicio-hecha {
  flex-shrink: 0; min-width: 34px; min-height: 34px; border-radius: 8px;
  border: 1px solid var(--borde); background: #fff; color: #1b7f3b;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.inicio-hecha:hover, .inicio-hecha:focus-visible { background: #eaf6ee; border-color: #1b7f3b; }
.texto-alerta { color: var(--rojo); font-weight: 700; white-space: nowrap; }
.badge-kpi { font-size: 13px; background: var(--rojo); color: #fff; border-radius: 20px; padding: 2px 10px; vertical-align: middle; }
.badge-kpi:empty { display: none; }

/* ── Diagrama de red y firma ────────────────────────────────────────────── */
.diagrama-barra { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.diagrama-barra select, .diagrama-barra input {
  padding: 9px 12px; border: 1px solid var(--borde); border-radius: 10px; font-size: 14px; font-family: inherit; background: #fff;
}
#diagrama-lienzo {
  width: 100%; aspect-ratio: 1000 / 620; background:
    linear-gradient(#f1f3f7 1px, transparent 1px),
    linear-gradient(90deg, #f1f3f7 1px, transparent 1px);
  background-size: 26px 26px; border: 1px solid var(--borde); border-radius: 12px; touch-action: none;
}
.diagrama-nodo { cursor: grab; }
.diagrama-nodo circle, .diagrama-nodo .nodo-caja { fill: #fff; stroke: var(--rojo); stroke-width: 2; }
.diagrama-nodo.nodo-origen circle, .diagrama-nodo.nodo-origen .nodo-caja { fill: #fdeceb; stroke-width: 3.5; }
.diagrama-nodo.nodo-seleccionado .nodo-caja { stroke: #1d4ed8; stroke-width: 3; stroke-dasharray: 6 4; }
.diagrama-nodo.nodo-seleccionado use { filter: drop-shadow(0 0 3px #1d4ed8); }
.diagrama-nodo use { pointer-events: none; }
.diagrama-icono { font-size: 26px; text-anchor: middle; pointer-events: none; }
.diagrama-etiqueta { font-size: 13px; font-weight: 600; text-anchor: middle; fill: var(--tinta); pointer-events: none; }
.diagrama-linea { stroke: #9aa3b5; stroke-width: 2.5; pointer-events: none; }
.diagrama-linea-hit { stroke: transparent; stroke-width: 16; pointer-events: stroke; }
#diagrama-lienzo.borrando .diagrama-nodo, #diagrama-lienzo.borrando .diagrama-linea-hit { cursor: pointer; }
#diagrama-lienzo.borrando .diagrama-nodo:hover .nodo-caja { stroke: var(--rojo); stroke-width: 4; fill: #fdeceb; }
#diagrama-lienzo.borrando .diagrama-nodo:hover use { opacity: .45; }
#diagrama-lienzo.borrando .diagrama-linea-hit:hover { stroke: rgba(196, 1, 0, 0.25); }
#diagrama-lienzo.conectando .diagrama-nodo { cursor: crosshair; }
#btn-conectar.activo, #btn-borrar.activo { background: var(--rojo); color: #fff; }
.lienzo-firma { border: 1px dashed var(--borde); border-radius: 10px; touch-action: none; width: 100%; cursor: crosshair; background: #fff; }

/* ── Responsive: móviles, tablets y portátiles pequeños ─────────────────── */

dialog { max-height: 92dvh; overflow-y: auto; }

/* Tablets y portátiles pequeños */
@media (max-width: 900px) {
  .vista { padding: 20px 3vw 60px; }
  .panel { padding: 20px 18px; }
  /* Tablas anchas: desplazamiento horizontal dentro del panel, nunca de la página */
  .tabla { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .resumen { gap: 22px; flex-wrap: wrap; }
  .inicio-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Móviles */
@media (max-width: 640px) {
  /* Cabecera compacta: antes ocupaba 135 px (el 18 % de una pantalla de 740).
     .cabecera-derecha con display: contents deja que sus botones formen una
     sola fila con ☰ y la marca, y el nombre del usuario se lleva su propia
     línea completa (en el portal partía en cinco). */
  .cabecera { padding: 8px 4vw; gap: 8px 10px; justify-content: flex-start; }
  .cabecera h1 { font-size: 15px; letter-spacing: -0.4px; }
  /* El logo hace de «atrás»: en el móvil el área que se pulsa llega a 44 px
     aunque el logo mida 28, que es el mínimo para el dedo */
  .marca-cabecera { gap: 8px; flex: 1 1 auto; min-height: 44px; padding: 4px 2px; }
  .logo-cabecera { height: 28px; }
  .subtitulo { display: none; }
  .cabecera-derecha { display: contents; }
  #usuario-actual { flex: 1 1 100%; order: -1; font-size: 12px; line-height: 1.3; }
  .chip-usuario { font-size: 12px; }
  .btn-cabecera, .chip-crono { padding: 8px 12px; font-size: 13px; }
  .btn { padding: 10px 16px; font-size: 14px; }

  .vista { padding: 14px 3vw 70px; }
  .panel { padding: 16px 13px; border-radius: 12px; margin-bottom: 14px; }
  .panel h2 { font-size: 15px; }
  .formulario { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .acciones { flex-wrap: wrap; }
  .tabla { font-size: 13px; }
  .tabla th, .tabla td { padding: 9px 8px; }
  .tarjetas { grid-template-columns: 1fr; }
  .resumen { gap: 14px 22px; }
  .dato-valor { font-size: 22px; }
  .inicio-item { flex-wrap: wrap; }
  .inicio-hecha { min-width: 44px; min-height: 44px; }
  .wiki-controles { flex-direction: column; align-items: stretch; }
  .wiki-controles select { width: 100%; }
  .diagrama-barra select, .diagrama-barra input { width: 100%; }
  .diagrama-barra .btn { flex: 1 1 auto; }
  dialog { padding: 18px 14px; width: min(440px, 94vw); }
  .burbuja { max-width: 92%; }
  .calendario { gap: 3px; }
  .cal-dia { min-height: 36px; padding: 4px 5px; font-size: 12px; }
  .cal-contador { padding: 2px 5px; }
  .tabla-intervenciones .celda-desc { width: 40%; }
  .fila-detalle td { padding-left: 14px; }
}

/* Firma adjunta al parte: miniatura con sello de conformidad */
.firma-adjunta { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; }
.firma-adjunta span { font-size: 11px; font-weight: 700; color: var(--ok); }
.miniatura-firma { background: #fff; border: 1px dashed var(--borde); }
.etiqueta-campo { display: block; font-size: 13px; font-weight: 600; color: var(--tinta); margin-bottom: 6px; }
#campo-lienzo-firma .btn { margin-top: 8px; }
#campo-lienzo-firma .lienzo-firma { max-width: 560px; display: block; }
a.btn { text-decoration: none; display: inline-block; }
.nota-minimo { margin-top: 12px; background: #fffaf5; border: 1px solid #f3e3c1; border-radius: 10px; padding: 10px 14px; }

/* Sumar packs en crear bono */
.packs-botones { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.chip-pack {
  border: 1px solid var(--rojo); background: #fffafa; color: var(--rojo);
  border-radius: 30px; padding: 4px 12px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.chip-pack:hover { background: var(--rojo); color: #fff; }
.signo-suma { font-weight: 800; color: var(--tinta); }
.packs-total { color: var(--tinta); }

/* Tablas anchas contenidas en su panel: scroll propio, nunca desbordan */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Buscador del inventario de equipos: filtra en vivo por cualquier campo */
.equipos-buscador { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 12px; }
.equipos-buscador input[type="search"] { flex: 1 1 320px; min-width: 0; }
.equipos-buscador .notas { white-space: nowrap; }
.tabla-compacta { font-size: 13px; }
.tabla-compacta th, .tabla-compacta td { padding: 10px 8px; }
.tabla-compacta td { word-break: break-word; }
#lista-clientes-admin td:nth-child(2) { white-space: nowrap; }

/* Ficha emergente del cliente */
#dialogo-ficha { width: min(540px, 94vw); }
.ficha-lista { margin: 6px 0 14px; max-height: 46vh; overflow-y: auto; }
.ficha-fila { display: flex; justify-content: space-between; gap: 14px; padding: 7px 2px; border-bottom: 1px solid var(--borde); font-size: 14px; }
.ficha-fila span { color: var(--tinta-suave); white-space: nowrap; }
.ficha-fila strong { color: var(--tinta); text-align: right; word-break: break-word; }

/* Reloj: cronómetro y cuentas atrás SLA */
.reloj-display { font-size: 52px; font-weight: 900; letter-spacing: 1px; color: var(--tinta); font-variant-numeric: tabular-nums; margin: 8px 0 14px; text-align: center; }
.sla-restante { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tinta); }
.inicio-item.sla-apurado .sla-restante { color: var(--alerta); }
.inicio-item.sla-vencido { background: #fdecec; border-radius: 10px; }
.inicio-item.sla-vencido .sla-restante { color: var(--rojo); animation: pulso 1s infinite; }
.alarma-sla { text-align: center; }
.alarma-texto { font-size: 20px; color: var(--tinta); }
#dialogo-sla { border-top: 6px solid var(--rojo); }

/* Detalle de intervención: galería de adjuntos */
#dialogo-intervencion { width: min(560px, 94vw); }
.galeria-adjuntos { display: flex; flex-wrap: wrap; gap: 12px; }
.adjunto { display: flex; flex-direction: column; gap: 4px; text-decoration: none; align-items: center; }
.adjunto img { width: 130px; height: 96px; object-fit: contain; border: 1px solid var(--borde); border-radius: 10px; background: #fff; }
.adjunto:hover img { border-color: var(--rojo); }
.adjunto span { font-size: 12px; font-weight: 700; color: var(--tinta-suave); }

/* Info clientes: tarjetas de condiciones de servicio */
.tarjeta-info { cursor: default; }
.tarjeta-info:hover { transform: none; }
.insignias-info { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.insignia.info-tipo { background: #eef4ff; color: #1e3a8a; }
.insignia.info-sla { background: #fdecec; color: var(--rojo); font-weight: 800; }
.insignia.info-guardia { background: var(--rojo); color: #fff; }
.condiciones-info { font-size: 13px; color: var(--tinta); background: #fffaf5; border: 1px solid #f3e3c1; border-radius: 10px; padding: 8px 12px; margin: 8px 0 0; white-space: pre-wrap; }
.insignia.info-horario { background: #f0fdf4; color: #166534; }
.celda-facturado { white-space: nowrap; }
.check-facturado { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; color: var(--tinta); }
.check-facturado input { width: 16px; height: 16px; accent-color: var(--ok); cursor: pointer; }

/* Tutorial */
.tutorial-video { width: 100%; border: 1px solid var(--borde); border-radius: 12px; }
.paso-tutorial .numero-paso {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--rojo); color: #fff;
  font-size: 14px; margin-right: 6px; vertical-align: middle;
}
.texto-paso { color: var(--tinta-suave); line-height: 1.7; }
.texto-paso ul { margin: 8px 0; padding-left: 22px; }
.texto-paso li { margin-bottom: 4px; }
.texto-paso strong, .texto-paso em { color: var(--tinta); }

.form-con-margen { margin-top: 10px; }

/* 2FA / Seguridad */
.clave-2fa { font-family: ui-monospace, Menlo, monospace; font-size: 20px; font-weight: 800; letter-spacing: 2px; text-align: center; background: #f4f6fa; border: 1px solid var(--borde); border-radius: 10px; padding: 12px; color: var(--tinta); user-select: all; }
.qr-2fa { display: block; width: 220px; height: 220px; margin: 10px auto; padding: 10px; background: #fff; border: 1px solid var(--borde); border-radius: 12px; image-rendering: pixelated; }

.seg-activo { color: var(--ok); }
.celda-2fa { white-space: nowrap; }

/* Horario de acceso: diálogo y resumen en la tabla de usuarios/clientes */
.check-linea { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.dias-semana { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dias-semana label { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--borde); border-radius: 10px; padding: 6px 10px; font-weight: 700; cursor: pointer; user-select: none; }
.dias-semana label:has(input:checked) { border-color: var(--rojo); background: #faf5f5; color: var(--rojo); }
.horas-rango { display: flex; gap: 14px; flex-wrap: wrap; }
.horas-rango label { display: flex; flex-direction: column; font-size: 13px; font-weight: 700; gap: 4px; }
.celda-horario { white-space: nowrap; }
#login-bloqueo { background: #fdecec; border: 1px solid var(--rojo); color: var(--rojo); border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600; margin-bottom: 14px; }

/* ── Teams (Microsoft Graph) ── */
.panel-aviso { background: #f4f6fa; border: 1px solid var(--borde); border-radius: 12px; padding: 16px 18px; margin: 8px 0; }
.panel-aviso code { background: #fff; border: 1px solid var(--borde); border-radius: 6px; padding: 2px 6px; font-size: 12px; word-break: break-all; }
.teams-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

/* ── Correo de soporte (estilo Outlook web): carpetas · lista · lectura ── */
#vista-buzon { max-width: none; padding: 14px 1.5vw 14px; }
#vista-buzon .panel { padding: 16px 18px; margin-bottom: 0; }
#vista-buzon.buzon-lleno > .panel > .notas { display: none; }
.buzon-app { display: grid; grid-template-columns: 248px 340px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: calc(100dvh - 182px); min-height: 480px; border: 1px solid var(--tm-borde); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.buzon-carpetas-col { display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; background: var(--tm-gris); border-right: 1px solid var(--tm-borde); min-height: 0; }
.buzon-btn-nuevo { width: 100%; margin-bottom: 6px; }
.buzon-carpetas { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1 1 0; min-height: 0; }
.buzon-carpeta { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; border-radius: 8px; padding: 7px 10px; cursor: pointer; text-align: left; font: inherit; font-size: 13px; color: var(--tinta); }
.buzon-carpeta:hover { background: #ececf4; }
.buzon-carpeta.is-active { background: var(--tm-morado-claro); color: var(--tm-morado-osc); font-weight: 700; }
.buzon-carpeta-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buzon-carpeta-n { font-size: 11px; font-weight: 800; color: var(--tm-morado-osc); }
.buzon-pie-col { display: flex; flex-direction: column; gap: 2px; font-size: 12px; padding-top: 8px; border-top: 1px solid var(--tm-borde); }
.buzon-cuenta { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buzon-config summary { cursor: pointer; font-size: 12px; margin-top: 4px; }
.buzon-config input { width: 100%; margin: 6px 0 4px; padding: 5px 8px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; font-size: 12px; }
.buzon-lista-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--tm-borde); background: #fafafb; }
.buzon-buscar { padding: 10px 10px 6px; }
.buzon-buscar input { width: 100%; padding: 8px 12px; border: 1px solid var(--borde); border-radius: 20px; font: inherit; font-size: 13px; }
.buzon-lista { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 10px; flex: 1 1 0; min-height: 0; }
.buzon-msg { flex-shrink: 0; display: flex; gap: 10px; align-items: flex-start; background: none; border: 0; border-left: 3px solid transparent; border-radius: 8px; padding: 9px 10px; cursor: pointer; text-align: left; width: 100%; font: inherit; }
.buzon-msg:hover { background: #f0f0f5; }
.buzon-msg.is-active { background: var(--tm-morado-claro); }
.buzon-msg.no-leido { border-left-color: var(--tm-morado); }
.buzon-msg-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.buzon-msg-fila { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.buzon-msg-quien { font-size: 13px; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buzon-msg-fecha { font-size: 11px; color: var(--tinta-suave); flex-shrink: 0; }
.buzon-msg-asunto { font-size: 13px; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buzon-msg-prev { font-size: 12px; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buzon-msg.no-leido .buzon-msg-quien, .buzon-msg.no-leido .buzon-msg-asunto { font-weight: 800; }
.buzon-mas { align-self: center; margin: 8px 0; }
.buzon-vacio { color: var(--tinta-suave); font-size: 13px; padding: 14px; text-align: center; }
.buzon-vacio-grande { margin: auto; font-size: 15px; }
.buzon-lectura-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; }
.buzon-lectura { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
.buzon-cabecera { padding: 12px 18px 8px; border-bottom: 1px solid var(--tm-borde); flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.buzon-cab-fila { display: flex; align-items: center; gap: 10px; min-width: 0; }
.buzon-asunto { margin: 0; font-size: 18px; color: var(--tinta); overflow-wrap: anywhere; }
.buzon-cab-quien { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 13px; }
.buzon-cab-nombre { font-weight: 700; }
.buzon-cab-fecha { font-size: 12px; color: var(--tinta-suave); white-space: nowrap; }
.buzon-cab-acciones { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.buzon-cab-sep { flex: 1; }
.buzon-adjuntos { display: flex; gap: 6px; flex-wrap: wrap; }
.buzon-adjunto { border: 1px solid var(--borde); background: #f7f7fa; border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.buzon-adjunto:hover { border-color: var(--tinta); }
.buzon-marco { flex: 1 1 0; min-height: 160px; width: 100%; border: 0; background: #fff; }
#buzon-compositor { flex: 0 1 auto; max-height: 60%; overflow-y: auto; }
.buzon-comp { display: flex; flex-direction: column; gap: 6px; padding: 10px 18px 12px; border-top: 2px solid var(--tm-morado); background: #fafafb; }
.buzon-comp-cab { display: flex; align-items: center; gap: 8px; }
.buzon-comp-cab .btn-icono { margin-left: auto; }
.buzon-comp label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--tinta-suave); }
.buzon-comp label input { flex: 1; padding: 6px 10px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; font-size: 13px; }
.buzon-comp textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; font-size: 13px; resize: vertical; }
.buzon-comp-pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* De quién sale (el buzón común) y firma elegida, en la barra de la pestaña */
.buzon-comp-de { margin: 0; font-size: 12px; color: var(--tinta-suave); }
.buzon-barra { flex-wrap: wrap; }
.buzon-barra-firma { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--tinta-suave); }
.buzon-barra-firma select { padding: 5px 8px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; font-size: 12px; max-width: 200px; }
/* Archivos elegidos para adjuntar (hasta 20 MB cada uno) */
.buzon-comp-adjuntos { display: flex; gap: 6px; flex-wrap: wrap; }
/* Adjunto pendiente de WhatsApp: se ve antes de enviarlo y se puede quitar */
.wa-comp-adjunto { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 8px; }
.wa-adjunto-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--borde); border-radius: 999px; background: #fff; font-size: 12px; }
.buzon-adjunto-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--borde); border-radius: 999px; background: #fff; font-size: 12px; }
/* Redactando de cero no hay mensaje que leer: el compositor ocupa la columna
   entera pegado al margen de arriba, sin el hueco en blanco del visor */
.buzon-lectura.solo-compositor .buzon-marco,
.buzon-lectura.solo-compositor #buzon-cabecera { display: none; }
.buzon-lectura.solo-compositor #buzon-compositor { flex: 1 1 auto; max-height: none; display: flex; }
.buzon-lectura.solo-compositor .buzon-comp { flex: 1 1 auto; border-top: 0; }
.buzon-lectura.solo-compositor .buzon-comp textarea { flex: 1 1 auto; min-height: 120px; }
/* Diálogo de firmas: a pantalla completa, con la lista a un lado y el editor
   junto a la vista previa al otro (escribir una firma pide sitio de verdad) */
#dialogo-firmas { width: 96vw; max-width: 1500px; height: 92dvh; max-height: 92dvh; padding: 18px 22px; overflow: hidden; }
.firmas-dlg { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.firmas-dlg-cab { display: flex; align-items: center; gap: 10px; }
.firmas-dlg-cab h2 { margin: 0; }
.firmas-dlg-cab .btn-icono { margin-left: auto; }
.firmas-dlg-cuerpo { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; }
.firmas-dlg-col { display: flex; flex-direction: column; min-height: 0; }
.firmas-dlg-col h3, .firmas-dlg-previa h3, .firmas-dlg-editor h3 { margin: 0 0 8px; font-size: 14px; }
/* En pantallas anchas y bajas (un portátil de 1280×720 es lo normal aquí)
   apilar editor y vista previa dejaba el cuadro de escribir en 50 px: van uno
   al lado del otro y los dos aprovechan todo el alto. Si aun así no cabe, la
   zona hace scroll en vez de encogerse hasta lo inservible. */
.firmas-dlg-trabajo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; min-height: 0; overflow-y: auto; }
@media (max-width: 1199px) { .firmas-dlg-trabajo { grid-template-columns: minmax(0, 1fr); grid-template-rows: 3fr 2fr; } }
/* Columna flex de una sola columna (el .formulario general es una rejilla de
   dos, que aquí parte el formulario). La clave es `height: 0` en el textarea:
   con su alto intrínseco (el de sus `rows`) no encogía, se salía de su caja y
   se pintaba ENCIMA de la ayuda y de los botones a 1280×720 (lo vio Jose).
   Con height 0 + flex-grow crece solo hasta donde llega el hueco real. */
.firmas-dlg-editor { display: flex; flex-direction: column; gap: 8px; }
.firmas-dlg-cuerpo-campo { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.firmas-dlg-editor textarea { flex: 1 1 auto; height: 0; min-height: 110px; resize: none; }
.firmas-dlg-editor .acciones { flex: 0 0 auto; margin-top: 0; }
.firmas-dlg-previa { display: flex; flex-direction: column; min-height: 0; }
.firmas-lista { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; padding-right: 4px; }
.firma-fila { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--borde); border-radius: 8px; background: #fafafb; }
.firma-nombre { flex: 1; font-weight: 600; }
.firma-acciones { display: flex; gap: 6px; }
.firma-marco { width: 100%; flex: 1 1 auto; min-height: 140px; border: 1px dashed var(--borde); border-radius: 8px; background: #fff; }
@media (max-width: 900px) {
  #dialogo-firmas { width: 100vw; max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: 14px; }
  .firmas-dlg-cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); overflow-y: auto; }
  .firmas-lista { max-height: 30dvh; }
}
/* ── Aspecto Outlook web ─────────────────────────────────────────────────────
   Pedido de Jose (02-09): que el Correo del panel se parezca al webmail lo más
   posible. Los colores, la tipografía y el espaciado son los de Outlook, y las
   variables viven acotadas a #vista-buzon para no teñir el resto del panel
   (que va con el morado de Teams). */
#vista-buzon {
  --ol-azul: #0f6cbd;
  --ol-azul-osc: #115ea3;
  --ol-sel: #ebf3fc;
  --ol-hover: #f3f2f1;
  --ol-borde: #edebe9;
  --ol-fondo: #faf9f8;
  --ol-tinta: #242424;
  --ol-suave: #616161;
  /* Fondo de los correos anclados arriba de la lista (el ámbar de Outlook) */
  --ol-anclado: #fdf6e3;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}
#vista-buzon .buzon-app { border-color: var(--ol-borde); border-radius: 6px; box-shadow: 0 1.6px 3.6px rgba(0,0,0,.08), 0 .3px .9px rgba(0,0,0,.06); }
#vista-buzon .buzon-carpetas-col { background: var(--ol-fondo); border-right-color: var(--ol-borde); gap: 4px; }
#vista-buzon .buzon-lista-col { background: #fff; border-right-color: var(--ol-borde); }
#vista-buzon .buzon-btn-nuevo { background: var(--ol-azul); border-color: var(--ol-azul); border-radius: 4px; font-weight: 600; }
#vista-buzon .buzon-btn-nuevo:hover { background: var(--ol-azul-osc); border-color: var(--ol-azul-osc); }
#vista-buzon .buzon-carpeta { border-radius: 4px; padding: 6px 8px; color: var(--ol-tinta); }
#vista-buzon .buzon-carpeta:hover { background: var(--ol-hover); }
#vista-buzon .buzon-carpeta.is-active { background: var(--ol-sel); color: var(--ol-azul-osc); font-weight: 600; }
#vista-buzon .buzon-carpeta-n { color: var(--ol-azul-osc); font-weight: 600; }
#vista-buzon .buzon-buscar input { border-radius: 4px; border-color: var(--ol-borde); background: var(--ol-fondo); }
#vista-buzon .buzon-msg { border-radius: 4px; padding: 8px 10px; border-left-width: 3px; }
#vista-buzon .buzon-msg:hover { background: var(--ol-hover); }
#vista-buzon .buzon-msg.is-active { background: var(--ol-sel); }
#vista-buzon .buzon-msg.no-leido { border-left-color: var(--ol-azul); }
#vista-buzon .buzon-msg.no-leido .buzon-msg-quien,
#vista-buzon .buzon-msg.no-leido .buzon-msg-asunto { font-weight: 600; color: var(--ol-tinta); }
#vista-buzon .buzon-msg-quien { font-weight: 600; }
#vista-buzon .buzon-msg-fecha, #vista-buzon .buzon-msg-prev { color: var(--ol-suave); }
#vista-buzon .buzon-cabecera { border-bottom-color: var(--ol-borde); }
#vista-buzon .buzon-asunto { font-size: 20px; font-weight: 600; }
#vista-buzon .buzon-comp { border-top: 1px solid var(--ol-borde); background: #fff; }
#vista-buzon .btn-primario { background: var(--ol-azul); border-color: var(--ol-azul); }
#vista-buzon .btn-primario:hover { background: var(--ol-azul-osc); border-color: var(--ol-azul-osc); }

/* Árbol de carpetas: sangrado por nivel y flecha de plegar, como el webmail */
.buzon-carpeta-fila { display: flex; align-items: center; gap: 2px; }
.buzon-carpeta-flecha { width: 16px; flex-shrink: 0; border: 0; background: none; padding: 0; cursor: pointer; color: var(--ol-suave, #616161); font-size: 10px; line-height: 1; }
.buzon-carpeta-flecha.vacia { cursor: default; }
.buzon-carpeta-flecha:hover { color: var(--ol-azul, #0f6cbd); }
.buzon-carpeta-fila .buzon-carpeta { flex: 1; min-width: 0; }

/* Selección múltiple: casilla por fila y barra de acciones */
.buzon-seleccion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; background: var(--ol-sel, #ebf3fc); border-bottom: 1px solid var(--ol-borde, #edebe9); }
.buzon-sel-n { font-size: 12px; font-weight: 600; color: var(--ol-azul-osc, #115ea3); }
.buzon-msg-fila-sel { display: flex; align-items: flex-start; gap: 2px; }
.buzon-msg-fila-sel.marcado { background: var(--ol-sel, #ebf3fc); border-radius: 4px; }
.buzon-msg-check { display: flex; align-items: center; padding: 10px 2px 0 4px; cursor: pointer; }
.buzon-msg-check input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--ol-azul, #0f6cbd); }
.buzon-msg-fila-sel .buzon-msg { flex: 1; min-width: 0; }

/* Banderita y chincheta de cada correo, como en el webmail: discretas hasta
   que se pasa por encima, pero SIEMPRE a la vista si están puestas (si no,
   marcar un correo no se vería al soltar el ratón). */
.buzon-msg-marcas { display: flex; flex-direction: column; gap: 2px; padding: 6px 2px 0 0; }
.buzon-marca { background: none; border: 0; padding: 2px 4px; line-height: 1; font-size: 13px; cursor: pointer; opacity: 0; border-radius: 4px; filter: grayscale(1); }
.buzon-marca:hover { background: var(--ol-hover, #f0f0f0); }
.buzon-msg-fila-sel:hover .buzon-marca, .buzon-marca:focus-visible { opacity: .7; }
.buzon-marca.is-on, .buzon-marca.marcada, .buzon-marca.terminada { opacity: 1; filter: none; }
.buzon-msg-fila-sel.anclado { background: var(--ol-anclado, #fbf6e3); border-radius: 4px; }
.buzon-lista-titulo { margin: 8px 4px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--ol-suave, #616161); }
/* En la cabecera del mensaje abierto son botones normales y se ven siempre */
.buzon-cab-acciones .buzon-marca { opacity: 1; filter: none; }

.buzon-solo-movil { display: none; }
.buzon-consentimiento { margin-top: 16px; }
@media (max-width: 1100px) { .buzon-app { grid-template-columns: 210px 280px minmax(0, 1fr); } }
@media (max-width: 900px) {
  .buzon-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: calc(100dvh - 150px); }
  .buzon-carpetas-col { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--tm-borde); padding: 8px; }
  .buzon-btn-nuevo { width: auto; margin: 0; }
  .buzon-carpetas { flex-direction: row; overflow-x: auto; flex: 1 1 auto; }
  .buzon-carpeta-nombre { display: none; }
  .buzon-pie-col, .buzon-config { display: none; }
  .buzon-app.ver-mensaje { grid-template-rows: minmax(0, 1fr); }
  .buzon-app.ver-mensaje .buzon-carpetas-col, .buzon-app.ver-mensaje .buzon-lista-col { display: none; }
  .buzon-app:not(.ver-mensaje) .buzon-lectura-col { display: none; }
  .buzon-solo-movil { display: inline-block; }
}

/* ── Interfaz estilo Teams web ── */
:root { --tm-morado: #5b5fc7; --tm-morado-osc: #4f52b2; --tm-morado-claro: #e8ebfa; --tm-gris: #f5f5f5; --tm-borde: #e1e1e6; }
/* La vista de Teams ocupa toda la superficie disponible (sin el ancho máximo de 1020px) */
#vista-teams { max-width: none; padding: 14px 1.5vw 14px; }
#vista-teams .panel { padding: 16px 18px; margin-bottom: 0; }
#vista-teams .panel h2 { margin-bottom: 8px; }
/* Conectado: fuera todo lo que hay encima de la ventana de chat (título del
   panel, texto de ayuda y el formulario de configuración del Admin). La barra
   sobraba: cambiar de cuenta y salir viven en la cabecera de la lista de chats.
   El #teams-config lleva !important porque `body.es-admin .solo-admin` gana a `.oculto`. */
#vista-teams.teams-lleno > .panel > .notas,
#vista-teams.teams-lleno > .panel > .inventario-cabecera { display: none; }
#vista-teams.teams-lleno #teams-config { display: none !important; }
/* Sin cabecera, el marco del panel se aprieta para que la ventana de chat gane sitio */
#vista-teams.teams-lleno { padding-bottom: 8px; }
#vista-teams.teams-lleno > .panel { padding: 6px 12px; }
.teams-app {
  display: grid;
  grid-template-columns: 68px var(--col-lista, 320px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  /* Alto = ventana menos cabecera fija, márgenes y título del panel.
     dvh (no vh) para que en el móvil la barra del navegador no deje el
     compositor fuera de la pantalla.
     (--col-lista y --alto-app las fija js/paneles-redimensionables.js) */
  height: var(--alto-app, calc(100dvh - 182px));
  min-height: 360px;
  position: relative;
  border: 1px solid var(--tm-borde);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* Rail de apps */
.teams-rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; background: var(--tm-gris); border-right: 1px solid var(--tm-borde); }
.teams-rail-item { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 56px; padding: 8px 0; border: 0; background: none; border-radius: 8px; cursor: pointer; color: #4b4b52; font: inherit; position: relative; }
.teams-rail-item:hover:not(:disabled) { background: #ececf4; }
.teams-rail-item:disabled { opacity: .45; cursor: default; }
.teams-rail-item.is-active { color: var(--tm-morado-osc); font-weight: 700; }
.teams-rail-item.is-active::before { content: ""; position: absolute; left: 2px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--tm-morado); }
.teams-rail-ico { font-size: 20px; line-height: 1; }
.teams-rail-lbl { font-size: 10px; }
.teams-rail-avatar { margin-top: auto; }

/* Lista de chats */
.teams-lista { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--tm-borde); background: #fafafb; position: relative; }
/* Nueva conversación (buscador de compañeros) */
.teams-nuevo { margin: 0 12px 10px; padding: 10px 12px; border: 1px solid var(--tm-morado); border-radius: 12px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.teams-nuevo[hidden] { display: none; }
.teams-nuevo-cab { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.teams-nuevo input { width: 100%; padding: 8px 12px; border: 1px solid var(--tm-borde); border-radius: 10px; font: inherit; font-size: 13px; }
.teams-nuevo input:focus { outline: none; border-color: var(--tm-morado); }
.teams-nuevo .acciones { display: flex; justify-content: flex-end; gap: 6px; }
.teams-nuevo-resultados { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.teams-nuevo-resultados .notas { margin: 4px 2px; font-size: 12px; }
.teams-persona { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.teams-persona:hover { background: #f0f0f5; }
.teams-persona.is-elegida { background: var(--tm-morado-claro); }
.teams-persona input { width: auto; margin: 0; }
.teams-persona-txt { display: flex; flex-direction: column; min-width: 0; }
.teams-persona-nombre { font-size: 13px; font-weight: 700; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teams-persona-sub { font-size: 11px; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teams-lista-cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 6px; }
.teams-lista-cab h3 { margin: 0; font-size: 20px; color: var(--tinta); }
.teams-lista-acc { display: flex; gap: 6px; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.teams-yo-nombre { padding: 0 14px 8px; font-size: 12px; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teams-buscar { padding: 0 12px 10px; }
.teams-buscar input { width: 100%; padding: 8px 12px; border: 1px solid var(--tm-borde); border-radius: 18px; background: #fff; font: inherit; font-size: 13px; }
.teams-buscar input:focus { outline: none; border-color: var(--tm-morado); }
/* min-height:0 es lo que permite que el hijo flex encoja y aparezca la barra de scroll */
.teams-chats { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 10px; flex: 1 1 0; min-height: 0; }
.teams-chat { flex-shrink: 0; }

/* Item de chat */
.teams-chat { display: flex; gap: 10px; align-items: center; background: none; border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; text-align: left; width: 100%; font: inherit; }
.teams-chat:hover { background: #f0f0f5; }
.teams-chat.is-active { background: var(--tm-morado-claro); }
.teams-chat-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.teams-chat-fila { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.teams-chat-titulo { font-weight: 600; color: var(--tinta); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teams-chat-hora { font-size: 11px; color: var(--tinta-suave); flex-shrink: 0; }
.teams-chat-prev { font-size: 13px; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Chat con mensaje nuevo: título y previa en negrita + punto morado */
.teams-chat.no-leido .teams-chat-titulo { font-weight: 800; }
.teams-chat.no-leido .teams-chat-prev { color: var(--tinta); font-weight: 600; }
.teams-chat-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tm-morado); vertical-align: middle; margin-left: 4px; }

/* Avatar circular con iniciales */
.tm-avatar { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; }
.teams-rail-avatar.tm-avatar { width: 32px; height: 32px; }
.tm-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.tm-avatar--lg { width: 40px; height: 40px; font-size: 15px; }

/* Panel de conversación */
.teams-conv { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; }
.teams-conv-cab { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--tm-borde); min-height: 60px; flex-shrink: 0; }
.teams-conv-tit { display: flex; flex-direction: column; min-width: 0; }
.teams-conv-tit > span:first-child { font-weight: 700; font-size: 16px; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teams-conv-sub { font-size: 12px; color: var(--tinta-suave); }
.teams-mensajes { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.tm-msg { flex-shrink: 0; }
.teams-vacio { color: var(--tinta-suave); text-align: center; margin: auto; }

/* Mensaje (fila con avatar + burbuja) */
.tm-msg { display: flex; gap: 8px; max-width: 78%; align-items: flex-end; }
.tm-msg-cont { display: flex; flex-direction: column; min-width: 0; }
.tm-msg-autor { font-size: 12px; font-weight: 600; color: var(--tm-morado-osc); margin: 0 0 2px 2px; }
.tm-burbuja { padding: 8px 12px; border-radius: 8px; background: var(--tm-gris); color: var(--tinta); font-size: 14px; line-height: 1.4; word-wrap: break-word; overflow-wrap: anywhere; }
.tm-burbuja p { margin: 0 0 6px; } .tm-burbuja p:last-child { margin: 0; }
.tm-msg-hora { font-size: 10px; color: var(--tinta-suave); margin: 3px 2px 0; }
/* Míos: a la derecha, morado claro */
.tm-msg.es-mio { margin-left: auto; flex-direction: row-reverse; }
.tm-msg.es-mio .tm-burbuja { background: var(--tm-morado-claro); }
.tm-msg.es-mio .tm-msg-autor { display: none; }
.tm-msg.es-mio .tm-msg-hora { text-align: right; }
.tm-sistema { align-self: center; font-size: 12px; color: var(--tinta-suave); background: var(--tm-gris); padding: 3px 10px; border-radius: 10px; }

/* Compositor */
.teams-comp { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--tm-borde); background: #fafafb; flex-shrink: 0; }
.teams-comp[hidden] { display: none; }
.teams-comp-fila { display: flex; gap: 8px; align-items: flex-end; }
.teams-comp-icono { flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--tm-borde); border-radius: 50%; background: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.teams-comp-icono:hover:not(:disabled) { background: var(--tm-morado-claro); border-color: var(--tm-morado); }
.teams-comp-icono:disabled { opacity: .45; cursor: not-allowed; }
/* Chips de archivos pendientes de enviar */
.teams-comp-adjuntos { display: flex; flex-wrap: wrap; gap: 6px; }
.teams-comp-adjuntos[hidden] { display: none; }
.teams-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 280px; padding: 4px 6px 4px 10px; border: 1px solid var(--tm-borde); border-radius: 16px; background: #fff; font-size: 12px; color: var(--tinta); }
.teams-chip-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.teams-chip-peso { color: var(--tinta-suave); flex-shrink: 0; }
.teams-chip-quitar { border: 0; background: none; cursor: pointer; font-size: 12px; color: var(--tinta-suave); padding: 2px 4px; border-radius: 50%; }
.teams-chip-quitar:hover { background: #fdecec; color: var(--rojo); }
/* Selector de emoticonos (flota sobre el compositor) */
.teams-emoji-panel { position: absolute; left: 16px; bottom: calc(100% + 6px); z-index: 5; display: grid; grid-template-columns: repeat(10, 36px); gap: 2px; padding: 8px; background: #fff; border: 1px solid var(--tm-borde); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.14); max-height: 240px; overflow-y: auto; }
.teams-emoji-panel[hidden] { display: none; }
.teams-emoji { width: 36px; height: 36px; border: 0; background: none; border-radius: 8px; font-size: 22px; line-height: 1; cursor: pointer; padding: 0; }
.teams-emoji:hover { background: var(--tm-morado-claro); }
/* Adjuntos e imágenes en los mensajes */
.tm-imagenes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tm-img { max-width: min(100%, 360px); max-height: 280px; border-radius: 8px; border: 1px solid var(--tm-borde); background: #fff; display: block; min-width: 60px; min-height: 40px; }
.tm-img-error { font-size: 12px; color: var(--tinta-suave); padding: 6px; }
.tm-adjuntos { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.tm-adjunto { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--tm-borde); border-radius: 8px; background: #fff; color: var(--tinta); text-decoration: none; font-size: 13px; font-weight: 600; max-width: 100%; }
.tm-adjunto:hover { border-color: var(--tm-morado); color: var(--tm-morado-osc); }
.tm-adjunto-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .teams-emoji-panel { grid-template-columns: repeat(7, 36px); left: 8px; } }
.teams-comp-txt { flex: 1; resize: vertical; min-height: 42px; max-height: 60vh; overflow-y: auto; padding: 10px 14px; border: 1px solid var(--tm-borde); border-radius: 18px; font: inherit; font-size: 14px; background: #fff; }
.teams-comp-txt:disabled { background: #f3f3f6; color: var(--tinta-suave); cursor: not-allowed; }
.teams-comp-txt:focus { outline: none; border-color: var(--tm-morado); }
.teams-comp-enviar { flex-shrink: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--tm-morado); color: #fff; font-size: 16px; cursor: pointer; }
.teams-comp-enviar:hover { background: var(--tm-morado-osc); }
.teams-comp-enviar:disabled { opacity: .5; cursor: default; }

/* Sin la cabecera del panel, la ventana de chat se queda con casi toda la altura.
   Sigue siendo el VALOR POR DEFECTO de --alto-app: si el técnico arrastra el asa,
   js/paneles-redimensionables.js fija --alto-app en línea y esto no le estorba.
   Solo escritorio: por debajo de 900 px manda el @media de más abajo. */
@media (min-width: 901px) {
  #vista-teams.teams-lleno .teams-app { height: var(--alto-app, calc(100dvh - 124px)); }
}
@media (max-width: 1100px) {
  .teams-app { grid-template-columns: 68px 260px minmax(0, 1fr); }
}
/* Mismo punto de corte que Correo (900): en una tableta de 768 los tres
   paneles de conversación se ven igual, no unos en columnas y otros no */
@media (max-width: 900px) {
  #vista-teams { padding: 8px 2vw 8px; }
  .teams-app { grid-template-columns: 56px minmax(0, 1fr); height: calc(100dvh - 150px); min-height: 420px; }
  .teams-app.ver-conv .teams-lista { display: none; }
  .teams-app:not(.ver-conv) .teams-conv { display: none; }
}

/* ── WhatsApp (Freshchat) ── */
:root { --wa-verde: #25D366; --wa-verde-osc: #128C7E; --wa-verde-claro: #dcf8c6; --wa-fondo: #efeae2; --wa-borde: #e1e1e6; --wa-nota: #fff3cd; --wa-nota-borde: #f0d98a; }
.ico-wa { width: 1.05em; height: 1.05em; vertical-align: -0.15em; fill: #25D366; flex-shrink: 0; }
/* Icono de Microsoft Teams: mismo tamaño que el de WhatsApp; conserva sus colores también en el ítem activo */
.ico-teams { width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex-shrink: 0; }
.teams-rail-ico .ico-teams { width: 1.35em; height: 1.35em; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.menu-item.activo .ico-wa { fill: currentColor; }
#vista-whatsapp { max-width: none; padding: 14px 1.5vw 14px; }
#vista-whatsapp .panel { padding: 16px 18px; margin-bottom: 0; }
#vista-whatsapp .panel h2 { margin-bottom: 8px; display: inline-flex; align-items: center; gap: 8px; }
#wa-aviso { background: #fdecec; border: 1px solid var(--rojo); color: var(--rojo); border-radius: 12px; padding: 10px 14px; margin: 8px 0 12px; font-weight: 600; }
.wa-app {
  display: grid;
  grid-template-columns: var(--col-lista, 340px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  height: var(--alto-app, calc(100dvh - 182px));
  min-height: 360px;
  position: relative;
  margin-top: 10px;
  border: 1px solid var(--wa-borde);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.wa-app > .wa-vistas { grid-column: 1 / -1; grid-row: 1; }
.wa-app > .wa-lista  { grid-column: 1; grid-row: 2; }
.wa-app > .wa-conv   { grid-column: 2; grid-row: 2; }

/* Barra de vistas (arriba): como las "Vistas predeterminadas" de Freshchat */
.wa-vistas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 12px; background: #f5f5f5; border-bottom: 1px solid var(--wa-borde); min-height: 0; }
.wa-vista { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid transparent; border-radius: 20px; background: #fff; color: #4b4b52; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.wa-vista:hover { background: #eef1ee; }
.wa-vista.activo { background: var(--wa-verde-claro); color: var(--wa-verde-osc); border-color: var(--wa-verde-osc); }
.wa-vista-n { min-width: 18px; padding: 0 6px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #e3e6e3; color: #4b4b52; font-size: 11px; font-weight: 700; }
.wa-vista-n:empty { display: none; }
.wa-vista.activo .wa-vista-n { background: var(--wa-verde-osc); color: #fff; }
.wa-vistas-tema { margin-left: auto; max-width: 180px; font-weight: 600; }
.wa-vistas-traer { flex: 0 0 auto; white-space: nowrap; }
.wa-vistas-agente { padding: 0 4px; font-size: 11px; color: var(--tinta-suave); overflow-wrap: anywhere; line-height: 1.35; text-align: right; }
.wa-vistas-agente strong { color: var(--tinta); font-size: 12px; }
.wa-origen { color: var(--tinta-suave); }
.wa-origen.es-vinculado { color: var(--wa-verde-osc); font-weight: 700; }
.wa-origen.es-defecto { color: #b45309; }

/* Aviso para vincular la cuenta con un agente de Freshchat */
.wa-vincular { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: #fff8e6; border-color: var(--wa-nota-borde); }
.wa-vincular.oculto { display: none; }
.wa-vincular-texto { flex: 1 1 260px; font-size: 13px; }
.wa-vincular .wa-select { max-width: 260px; }
.wa-vincular .btn-sm { padding: 6px 16px; }
/* Con el aviso visible la bandeja cede su altura para no sacar el compositor de la pantalla */
#vista-whatsapp:has(.wa-vincular:not(.oculto)) .wa-app { height: calc(100dvh - 248px); }

/* Lista de conversaciones */
.wa-lista { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--wa-borde); background: #fafafb; position: relative; }

/* ── Paneles ajustables (Teams y WhatsApp): divisor de columnas y asa de alto ── */
.panel-divisor { position: absolute; top: 0; bottom: 0; right: -4px; width: 8px; cursor: col-resize; z-index: 4; touch-action: none; }
.panel-divisor::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background .15s; }
.panel-divisor:hover::after, .redimensionando .panel-divisor::after { background: var(--tm-morado); }
.wa-app .panel-divisor:hover::after, .wa-app.redimensionando .panel-divisor::after { background: var(--wa-verde-osc); }
.panel-asa-alto { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; cursor: row-resize; z-index: 4; display: flex; justify-content: center; align-items: flex-end; touch-action: none; }
.panel-asa-alto span { width: 56px; height: 4px; border-radius: 4px; background: #c9ccd6; margin-bottom: 2px; }
.panel-asa-alto:hover span, .redimensionando .panel-asa-alto span { background: var(--tm-morado); }
.wa-app .panel-asa-alto:hover span, .wa-app.redimensionando .panel-asa-alto span { background: var(--wa-verde-osc); }
.redimensionando { user-select: none; }
.redimensionando iframe { pointer-events: none; }
@media (max-width: 900px) { .panel-divisor, .panel-asa-alto { display: none; } }
.wa-lista-cab { display: flex; align-items: baseline; gap: 8px; padding: 14px 14px 6px; }
.wa-lista-cab h3 { margin: 0; font-size: 20px; color: var(--tinta); }
.wa-lista-total { font-size: 12px; color: var(--tinta-suave); font-weight: 700; }
.wa-lista-filtros { display: flex; gap: 6px; padding: 0 12px 8px; }
.wa-lista-filtros .wa-select { flex: 1 1 0; min-width: 0; max-width: none; font-weight: 600; }
.wa-buscar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.wa-buscar input { flex: 1 1 auto; min-width: 0; padding: 8px 12px; border: 1px solid var(--wa-borde); border-radius: 18px; background: #fff; font: inherit; font-size: 13px; }
.wa-buscar .wa-lista-total { flex: 0 0 auto; }
.wa-buscar input:focus { outline: none; border-color: var(--wa-verde-osc); }
/* min-height:0 + flex:1 1 0 es lo que permite que aparezca la barra de scroll */
.wa-chats { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 10px; flex: 1 1 0; min-height: 0; }
.wa-chat { flex-shrink: 0; display: flex; gap: 10px; align-items: center; background: none; border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; text-align: left; width: 100%; font: inherit; }
.wa-chat[hidden] { display: none; } /* buscador: display:flex no debe pisar hidden */
.wa-chat:hover { background: #f0f0f5; }
.wa-chat.is-active { background: var(--wa-verde-claro); }
.wa-chat.is-resuelta .wa-chat-titulo { color: var(--tinta-suave); font-weight: 500; }
.wa-chat-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wa-chat-fila { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.wa-chat-titulo { font-weight: 600; color: var(--tinta); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-chat-hora { font-size: 11px; color: var(--tinta-suave); flex-shrink: 0; }
.wa-chat-prev { font-size: 13px; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-chat-noleidos { flex-shrink: 0; min-width: 20px; text-align: center; background: var(--wa-verde); color: #fff; border-radius: 20px; font-size: 11px; font-weight: 800; padding: 1px 6px; }
.wa-chat-meta { font-size: 11px; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Conversación */
.wa-conv { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--wa-fondo); }
/* Cabecera estilo Freshchat: "WhatsApp - Canal" + cliente, "Grupo / Agente", ⋮ y "✔ Resolver ▾" */
.wa-conv-cab { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--wa-borde); min-height: 60px; flex-shrink: 0; background: #fff; }
.wa-volver { display: none; border: 0; background: none; font-size: 20px; cursor: pointer; padding: 4px 6px; }
.wa-conv-tit { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; gap: 2px; }
.wa-conv-fila1 { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: 14px; color: var(--tinta); min-width: 0; }
.wa-conv-fila1 .ico-wa { width: 1.2em; height: 1.2em; }
.wa-conv-canal { font-weight: 800; white-space: nowrap; }
#wa-conv-titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.wa-conv-sub { display: contents; font-size: 12px; color: var(--tinta-suave); }
.wa-conv-sub-item { font-size: 12px; color: var(--tinta-suave); white-space: nowrap; }
.wa-conv-fila2 { position: relative; display: flex; align-items: center; gap: 6px; font-size: 13px; min-height: 18px; }

/* Cabecera compacta (una línea) que se despliega al pulsarla (.expandido) */
.wa-conv-fila1 { cursor: pointer; } /* pliega/despliega; la fila 2 lleva selectores y NO debe plegar */
.wa-conv-caret { margin-left: auto; padding-left: 6px; color: var(--tinta-suave); font-size: 12px; flex: 0 0 auto; }
.wa-conv:not(.expandido) .wa-conv-canal { display: none; }
.wa-conv:not(.expandido) .wa-conv-fila1 { flex-wrap: nowrap; overflow: hidden; }
.wa-conv:not(.expandido) #wa-conv-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.wa-conv:not(.expandido) .wa-conv-fila2 { display: none; }
.wa-conv:not(.expandido) .wa-conv-cab { min-height: 44px; }
.wa-conv.expandido .wa-conv-caret { margin-left: 6px; }
.wa-conv-asig { display: inline-flex; align-items: center; gap: 6px; }
.wa-asig-enlace { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: #1a73e8; cursor: pointer; white-space: nowrap; }
.wa-asig-enlace:hover { text-decoration: underline; }
.wa-asig-enlace.es-vacio { font-weight: 500; }
.wa-asig-sep { color: var(--tinta-suave); }
.wa-enlace { border: 0; background: none; padding: 0; font: inherit; color: var(--wa-verde-osc); font-weight: 700; cursor: pointer; text-decoration: underline; }
.wa-estado { font-weight: 700; }
.wa-estado-resolved { color: var(--tinta-suave); }
.wa-estado-new, .wa-estado-reopened, .wa-estado-assigned { color: var(--wa-verde-osc); }
.wa-conv-acc { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.wa-conv-acc[hidden] { display: none; }
.wa-select { padding: 5px 10px; border: 1px solid var(--wa-borde); border-radius: 30px; font: inherit; font-size: 12px; background: #fff; max-width: 180px; }

/* Popovers (selector de grupo / agente) y menús desplegables */
.wa-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; background: #fff; border: 1px solid var(--wa-borde); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 10px 12px; min-width: 240px; }
.wa-pop[hidden] { display: none; }
.wa-pop label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave); }
.wa-pop .wa-select { max-width: none; width: 100%; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.wa-menu-wrap { position: relative; display: flex; }
.wa-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; background: #fff; border: 1px solid var(--wa-borde); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.wa-menu[hidden] { display: none; }
.wa-menu-item { text-align: left; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--tinta); padding: 8px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.wa-menu-item:hover:not(:disabled) { background: #f0f0f5; }
.wa-menu-item:disabled { opacity: .5; cursor: default; }
.wa-btn-mas { width: 36px; height: 36px; border: 1px solid var(--wa-borde); border-radius: 8px; background: #fff; font-size: 18px; font-weight: 700; color: var(--tinta); cursor: pointer; line-height: 1; }
.wa-btn-mas:hover { background: #f0f0f5; }
.wa-btn-oscuro { border: 0; background: #2b2d33; color: #fff; font: inherit; font-size: 13px; font-weight: 700; padding: 0 14px; height: 36px; cursor: pointer; letter-spacing: .01em; }
.wa-btn-oscuro:hover { background: #15161a; }
.wa-btn-principal { border-radius: 8px 0 0 8px; white-space: nowrap; }
.wa-btn-principal.es-reabrir { background: var(--wa-verde-osc); }
.wa-btn-principal.es-reabrir:hover { background: #0e6f64; }
.wa-btn-caret { border-radius: 0 8px 8px 0; padding: 0 10px; border-left: 1px solid rgba(255,255,255,.28); font-size: 12px; }
.wa-resolver-grupo .wa-btn-caret { margin-left: 0; }

.wa-mensajes { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; background: var(--wa-fondo); }
.wa-vacio { color: var(--tinta-suave); text-align: center; margin: auto; font-size: 14px; padding: 12px; }

/* Hilo estilo Freshchat: grupos de mensajes seguidos del mismo actor (nombre y avatar una vez, hora al final).
   Cliente a la izquierda (azul claro), agente a la derecha (blanco con borde), nota privada (amarillo), sistema centrado con rayas */
.wa-grupo { flex-shrink: 0; display: flex; gap: 8px; align-items: flex-start; max-width: 78%; }
.wa-grupo.es-cliente { align-self: flex-start; }
.wa-grupo.es-agente, .wa-grupo.es-privado { align-self: flex-end; flex-direction: row-reverse; }
.wa-grupo > .tm-avatar { margin-top: 18px; }
.wa-grupo-cuerpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wa-grupo.es-agente .wa-grupo-cuerpo, .wa-grupo.es-privado .wa-grupo-cuerpo { align-items: flex-end; }
.wa-msg-autor { font-size: 12px; font-weight: 700; color: var(--tinta-suave); margin: 0 4px 1px; }
.wa-grupo.es-agente .wa-msg-autor { color: var(--wa-verde-osc); }
.wa-grupo.es-privado .wa-msg-autor { color: #8a6d1d; }
.wa-msg { display: flex; max-width: 100%; }
.wa-burbuja { display: flex; flex-direction: column; padding: 7px 10px 5px; border-radius: 10px; background: #fff; color: var(--tinta); font-size: 14px; line-height: 1.4; word-wrap: break-word; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0,0,0,.06); min-width: 0; border: 1px solid transparent; }
.wa-grupo.es-cliente .wa-burbuja { background: #e8f1fb; border-color: #d2e3f7; border-top-left-radius: 3px; }
.wa-grupo.es-agente .wa-burbuja { background: #fff; border-color: var(--wa-borde); border-top-right-radius: 3px; }
.wa-grupo.es-privado .wa-burbuja { background: var(--wa-nota); border: 1px dashed var(--wa-nota-borde); border-top-right-radius: 3px; }
.wa-burbuja p { margin: 0 0 4px; } .wa-burbuja p:last-of-type { margin: 0; }
.wa-msg-etq { font-size: 11px; font-weight: 800; color: #8a6d1d; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.wa-msg-meta { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-top: 3px; font-size: 10px; color: var(--tinta-suave); }
.wa-msg-hora { font-size: 10px; color: var(--tinta-suave); }
.wa-ticks { font-size: 11px; font-weight: 700; letter-spacing: -0.25em; padding-right: .25em; color: #9aa0a6; line-height: 1; }
.wa-ticks.es-leido { color: #34b7f1; }
.wa-msg-sistema { flex-shrink: 0; align-self: stretch; display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--tinta-suave); text-align: center; }
.wa-msg-sistema::before, .wa-msg-sistema::after { content: ''; flex: 1 1 0; height: 1px; background: #cfcac0; }
.wa-msg-sistema > span { flex: 0 1 auto; max-width: 70%; }

/* Adjuntos en los mensajes */
.wa-adjuntos { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.wa-adj-img img { display: block; max-width: min(100%, 320px); max-height: 260px; border-radius: 8px; border: 1px solid var(--wa-borde); background: #fff; min-width: 60px; min-height: 40px; }
.wa-adj-media { max-width: min(100%, 320px); display: block; }
video.wa-adj-media { max-height: 260px; border-radius: 8px; background: #000; }
.wa-adj-doc { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--wa-borde); border-radius: 8px; background: #fff; color: var(--tinta); text-decoration: none; font-size: 13px; font-weight: 600; max-width: 100%; }
a.wa-adj-doc:hover { border-color: var(--wa-verde-osc); color: var(--wa-verde-osc); }
.wa-adj-doc.es-sin-enlace { color: var(--tinta-suave); cursor: default; }
.wa-adj-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-adj-peso { color: var(--tinta-suave); font-weight: 400; flex-shrink: 0; }

/* Compositor */
.wa-comp { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--wa-borde); background: #f5f5f5; flex-shrink: 0; }
.wa-comp-fila { display: flex; gap: 8px; align-items: flex-end; }
.wa-comp-icono { flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--wa-borde); border-radius: 50%; background: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.wa-comp-icono:hover:not(:disabled) { background: var(--wa-verde-claro); border-color: var(--wa-verde-osc); }
.wa-comp-icono:disabled { opacity: .45; cursor: not-allowed; }
.wa-comp-txt { flex: 1; resize: vertical; min-height: 42px; max-height: 60vh; overflow-y: auto; padding: 10px 14px; border: 1px solid var(--wa-borde); border-radius: 18px; font: inherit; font-size: 14px; background: #fff; }
.wa-comp-txt:disabled { background: #f3f3f6; color: var(--tinta-suave); cursor: not-allowed; }
.wa-comp-txt:focus { outline: none; border-color: var(--wa-verde-osc); }
.wa-comp-enviar { flex-shrink: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--wa-verde-osc); color: #fff; font-size: 16px; cursor: pointer; }
.wa-comp-enviar:hover { background: #0e6f64; }
.wa-comp-enviar:disabled { opacity: .5; cursor: default; }
/* Pestañas Responder | Nota privada (como Freshchat) */
.wa-comp-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--wa-borde); margin: -4px 0 2px; }
.wa-comp-tab { border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--tinta-suave); padding: 4px 2px 7px; cursor: pointer; }
.wa-comp-tab:hover:not(:disabled) { color: var(--tinta); }
.wa-comp-tab.activo { color: var(--tinta); border-bottom-color: var(--wa-verde-osc); }
.wa-comp-tab:disabled { opacity: .45; cursor: not-allowed; }
.wa-comp.es-nota .wa-comp-tab.activo { border-bottom-color: #d4a017; }
.wa-comp.es-nota .wa-comp-txt { background: var(--wa-nota); border-color: var(--wa-nota-borde); }
.wa-comp-enviar.es-nota { width: auto; border-radius: 20px; padding: 0 16px; font-size: 13px; font-weight: 700; background: #b8860b; white-space: nowrap; }
.wa-comp-enviar.es-nota:hover { background: #9a7009; }
/* Ventana de 24 h de WhatsApp cerrada: solo notas privadas */
.wa-comp-ventana { margin: 0 0 4px; padding: 8px 12px; border-radius: 8px; background: #fff4d6; border: 1px solid #f2d27c; color: #7a5a06; font-size: 12px; font-weight: 600; }
.wa-comp-ventana[hidden] { display: none; }

@media (max-width: 1100px) {
  .wa-app { grid-template-columns: var(--col-lista, 300px) minmax(0, 1fr); }
  .wa-vistas-agente { display: none; }
}
@media (max-width: 900px) {
  #vista-whatsapp { padding: 8px 2vw 8px; }
  .wa-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: calc(100dvh - 150px); min-height: 420px; }
  .wa-app > .wa-lista, .wa-app > .wa-conv { grid-column: 1; grid-row: 2; }
  .wa-vistas { padding: 6px 8px; overflow-x: auto; flex-wrap: nowrap; }
  .wa-vista { padding: 5px 10px; font-size: 12px; }
  .wa-vistas-tema { max-width: 150px; }
  .wa-lista { border-right: 0; }
  .wa-volver { display: inline-block; }
  .wa-app.ver-conv .wa-lista, .wa-app.ver-conv .wa-vistas { display: none; }
  .wa-app:not(.ver-conv) .wa-conv { display: none; }
  .wa-grupo { max-width: 92%; }
  .wa-conv-cab { flex-wrap: wrap; }
  .wa-conv-acc { width: 100%; justify-content: flex-end; }
}

/* ── Inventario (Holded) ── */
.inventario-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.inventario-cabecera h2 { margin: 0; }
.inventario-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.inventario-filtros { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 6px; }
.inv-buscar { flex: 1 1 280px; min-width: 220px; padding: 11px 14px; border: 1px solid var(--borde); border-radius: 12px; font-size: 14px; font-family: inherit; }
.inv-buscar:focus { outline: 2px solid var(--rojo); outline-offset: -1px; border-color: transparent; }
.inv-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.inv-chips .chip { padding: 7px 14px; border-radius: 30px; font-size: 13px; font-weight: 700; border: 1px solid var(--borde); background: #fff; color: var(--tinta); cursor: pointer; font-family: inherit; }
.inv-chips .chip:hover { border-color: var(--tinta-suave); }
.inv-chips .chip.activo { background: var(--rojo); border-color: var(--rojo); color: #fff; }
tr.fila-agotado td { background: #fff7f7; }
.campos-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.obligatorio { color: var(--rojo); }
@media (max-width: 560px) { .campos-2 { grid-template-columns: minmax(0, 1fr); } }

/* ── Proyectos: tablero kanban (Holded) ── */
.board-scroll { overflow-x: auto; padding-bottom: 10px; }
.board-kanban { display: flex; gap: 14px; align-items: flex-start; min-height: 200px; }
.columna-kanban { flex: 0 0 260px; background: #f4f6fa; border: 1px solid var(--borde); border-radius: 14px; display: flex; flex-direction: column; max-height: 68vh; }
.columna-cabecera { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--borde); }
.columna-nombre { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.2px; color: var(--tinta); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.columna-conteo { background: var(--rojo); color: #fff; border-radius: 20px; font-size: 11px; font-weight: 700; padding: 2px 8px; }
.columna-cuerpo { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; }
.columna-cuerpo.sobre { background: #eef3ff; outline: 2px dashed var(--rojo); outline-offset: -4px; border-radius: 10px; }
.tarjeta-kanban { background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 9px 11px; font-size: 13px; font-weight: 600; color: var(--tinta); box-shadow: 0 1px 3px rgba(20,22,24,0.05); display: flex; gap: 6px; align-items: flex-start; }
.tarjeta-estado { flex-shrink: 0; }
.columna-resto { font-size: 12px; color: var(--tinta-suave); text-align: center; padding: 6px; }
#dialogo-seguridad { width: min(460px, 94vw); }

/* Facturación en la ficha del cliente */
.bloque-factura { border-top: 1px solid var(--borde); margin-top: 14px; padding-top: 10px; }
.factura-campos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.factura-campos label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--tinta); }
.factura-campos input { padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; font-size: 13px; font-family: inherit; }

/* Panel de inicio: dos columnas independientes (izq: Tareas + Bonos; der: Tickets) */
.inicio-columnas { display: flex; gap: 18px; align-items: flex-start; }
.inicio-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.inicio-col .panel { margin: 0; }
@media (max-width: 900px) { .inicio-columnas { flex-direction: column; } }

/* Tickets: distinguir cliente de bono (rojo), Freshdesk (azul) y WhatsApp convertido (verde) */
.insignia.via-bono { background: var(--rojo); color: #fff; font-weight: 800; }
.insignia.via-freshdesk { background: #dbeafe; color: #1e40af; font-size: 11px; }
.ticket-fd-meta { font-size: 11px; color: var(--tinta-suave); }
tr.ticket-bono td:first-child { border-left: 4px solid var(--rojo); }
tr.ticket-bono { background: #fffafa; }

/* T3: buscador "🔎 Buscar en Freshdesk" desplegable dentro de la cola de Tickets */
.panel-fd-buscador { border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; background: #f7f9ff; }
.panel-fd-buscador input[type="search"] { flex: 1; min-width: 240px; }
.fd-res-fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--borde); }
.fd-res-fila:first-child { border-top: 0; }
.fd-res-asunto { flex: 1; min-width: 200px; }
.fd-res-quien { font-size: 12px; color: var(--tinta-suave); }

/* Portal del cliente. ⚠️ AQUÍ HABÍA un `order:` fijo por sección (resumen 1,
   tickets 2, calendario 3, intervenciones 4, avisos 5, documentos 6) y era el
   fallo del 15-09: en un flex, `order` MANDA sobre el orden del documento, así
   que recolocar las secciones —a mano con ▲▼, o desde la ficha del cliente— se
   guardaba bien y en pantalla no se movía nada. Y las dos secciones SIN número
   (Áreas contratadas y Mis equipos) valían 0 y se iban las dos arriba, que es
   justo lo que Jose veía. Sin `order`, el flex respeta el orden del documento,
   que es el que coloca js/portal-orden.js. NO volver a fijarlo aquí. */
body.es-cliente #vista-detalle { display: flex; flex-direction: column; }
/* Las flechas del calendario son .btn-icono: el cliente sí debe verlas */
body.es-cliente .btn-cal { display: inline-block !important; }

/* Paginado de la cola de tickets */
.paginado { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; }
.pag-btn { min-width: 34px; padding: 7px 11px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; font-size: 14px; font-weight: 700; color: var(--tinta); cursor: pointer; font-family: inherit; }
.pag-btn:hover:not([disabled]) { border-color: var(--tinta); }
.pag-btn.activa { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.pag-btn[disabled] { opacity: 0.4; cursor: default; }
.pag-puntos { padding: 7px 4px; color: var(--tinta-suave); }

/* Botón azul (Tarifa Plana) */
.btn-azul { background: #1e60d8; border-color: #1e60d8; color: #fff; text-decoration: none; display: inline-block; }
.btn-azul:hover { background: #174ba8; border-color: #174ba8; color: #fff; }

/* Portal del cliente: bajo su nombre solo van los botones (sin correo ni notas) */
body.es-cliente #detalle-contacto-cliente,
body.es-cliente #detalle-notas { display: none !important; }

/* Inicio: tickets de cliente de bono destacados por defecto (vs Freshdesk) */
.inicio-item.inicio-ticket-bono { background: #fff0f0; border-left: 4px solid var(--rojo); border-radius: 8px; padding-left: 8px; }

/* Estadísticas interactivas: datos clicables + pop-up de detalle */
.dato-click { background: none; border: none; font: inherit; cursor: pointer; text-align: center; padding: 0; border-radius: 10px; transition: background .12s; }
.dato-click:hover { background: #faf5f5; }

/* Pastillas KPI reordenables por arrastre (solo escritorio) */
.resumen-ordenable > .dato { cursor: grab; border-radius: 10px; }
.resumen-ordenable > .dato:active { cursor: grabbing; }
.dato.arrastrando { opacity: 0.45; outline: 2px dashed var(--rojo); outline-offset: 4px; }
tr.fila-drill { cursor: pointer; }
tr.fila-drill:hover { background: #faf5f5; }
#dialogo-drill { width: min(560px, 94vw); }
.drill-lista { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.drill-item { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; text-align: left; background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; }
.drill-item:hover { border-color: var(--rojo); }
.drill-item.drill-bono { background: #fff7f7; border-left: 4px solid var(--rojo); }
.drill-asunto { font-weight: 700; color: var(--tinta); }
.drill-meta { grid-column: 2; font-size: 12px; color: var(--tinta-suave); }


/* ── Control de backups diarios ───────────────────────────────────────── */
.campo-fecha-backups { padding: 9px 12px; border: 1px solid var(--borde); border-radius: 10px; font-family: inherit; font-size: 14px; color: var(--tinta); }
.resumen-backups { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 16px; }
.chip-backups { padding: 7px 16px; border-radius: 30px; font-size: 13px; font-weight: 700; border: 1px solid var(--borde); color: var(--tinta); }
.chip-backups.ok { background: #eaf7ee; border-color: #b7e0c2; color: #166534; }
.chip-backups.atencion { background: #fef6e7; border-color: #f5d9a8; color: #92400e; }
.chip-backups.mal { background: #fdecec; border-color: #f3c1c0; color: var(--rojo-oscuro); }
.tarjeta-backup { border: 1px solid var(--borde); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; background: #fff; }
.cabecera-backup { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.nota-backup { display: block; font-size: 12px; color: #92400e; background: #fef6e7; border-radius: 8px; padding: 2px 8px; margin-top: 4px; }
.fila-backup { display: grid; grid-template-columns: 150px auto minmax(110px, 0.55fr) minmax(300px, 2.2fr); gap: 8px 12px; align-items: center; padding: 7px 0; border-top: 1px solid #f2f2f2; }
.fila-backup.no-aplica { grid-template-columns: 150px 1fr; opacity: 0.55; }
.fila-backup-error { background: #fdecec; border-radius: 8px; }
.tipo-backup { font-size: 12px; font-weight: 800; letter-spacing: 0.3px; color: var(--tinta); }
.botones-backup { display: flex; gap: 5px; flex-wrap: wrap; }
.btn-estado-backup { border: 1px solid var(--borde); background: #fff; border-radius: 30px; padding: 5px 11px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; color: var(--tinta); }
.btn-estado-backup:hover { border-color: var(--tinta); }
.btn-estado-backup.activo.estado-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-estado-backup.activo.estado-error { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.btn-estado-backup.activo.estado-pendiente { background: var(--tinta-suave); border-color: var(--tinta-suave); color: #fff; }
.marca-backup { font-size: 12px; font-weight: 600; color: #166534; white-space: nowrap; }
.texto-error-backup { color: var(--rojo-oscuro); }
.campo-backup { padding: 7px 10px; border: 1px solid var(--borde); border-radius: 9px; font-size: 12px; font-family: inherit; color: var(--tinta); min-width: 0; }
.campo-backup:focus { outline: 2px solid var(--rojo); outline-offset: -1px; border-color: transparent; }
.pie-backup { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.btn-tarea-backup { font-size: 12px; padding: 6px 12px; }

/* Chips del resumen desplegables (qué servidores hay detrás de cada número) */
.resumen-backups button { cursor: pointer; font-family: inherit; }
.resumen-backups .activo { outline: 2px solid var(--tinta); outline-offset: 1px; }
.desplegable-backups { border: 1px solid var(--borde); border-radius: 12px; background: #fff; padding: 10px 14px; margin: -8px 0 16px; }
.desplegable-cabecera { display: flex; align-items: center; gap: 8px; }
.desplegable-cabecera .btn-icono { margin-left: auto; }
.lista-desplegable { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.lista-desplegable li { padding: 5px 8px; border-top: 1px solid #f2f2f2; }
@media (max-width: 900px) {
  .fila-backup { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 0; }
  .fila-backup.no-aplica { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Plantilla del nuevo reporte de backups */
.fila-reporte { grid-template-columns: 150px auto minmax(300px, 2.2fr); }
.etiqueta-fecha-reporte { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--tinta); }
@media (max-width: 900px) { .fila-reporte { grid-template-columns: minmax(0, 1fr); } }

/* Semáforo de backups por cliente y luces del día */
.bola { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.bola-verde { background: var(--ok); box-shadow: 0 0 6px rgba(22, 163, 74, 0.6); }
.bola-naranja { background: var(--alerta); box-shadow: 0 0 6px rgba(217, 119, 6, 0.6); }
.bola-roja { background: var(--rojo); box-shadow: 0 0 6px rgba(196, 1, 0, 0.6); animation: pulso 1.2s infinite; }
.bola-cliente { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.3px; padding: 3px 10px; border-radius: 30px; margin-left: 8px; vertical-align: middle; }
.bola-cliente.bola-verde { background: #eaf7ee; color: #166534; box-shadow: none; }

/* Tareas entre técnicos: check de "hecha por" y aviso al creador */
.check-tarea { display: block; font-size: 11px; font-weight: 800; color: #166534; margin-top: 3px; white-space: nowrap; }
.tarea-check-nueva td { background: #eaf7ee; }

/* Estado del equipo (pestaña Bonos): quién está interviniendo y quién libre */
.estado-equipo { display: flex; flex-wrap: wrap; gap: 10px; }
.ficha-tecnico {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 30px; font-size: 13px;
  border: 1px solid var(--borde, #e3e7ef); background: #fff;
}
.ficha-tecnico strong { font-weight: 800; }
.ficha-tecnico.ocupado { background: #fdecec; border-color: #f5c2c0; color: var(--rojo-oscuro, #8f0100); }
.ficha-tecnico.libre { background: #eaf7ee; border-color: #bfe5cb; color: #166534; }
.ficha-tecnico.desconectado { background: #f3f4f6; border-color: #d9dce3; color: #6b7280; }
.bola-gris { background: #9ca3af; box-shadow: none; }
.ficha-tecnico-sub { font-size: 11px; color: inherit; opacity: .8; margin-left: 4px; white-space: nowrap; }
/* Solo Admin: el nombre es un botón que abre el histórico del técnico */
.ficha-tecnico-nombre { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.ficha-tecnico-nombre:hover { text-decoration-style: solid; }
#dialogo-actividad-tecnico { width: min(96vw, 1000px); }
.tabla-actividad { max-height: 240px; overflow: auto; border: 1px solid var(--borde); border-radius: 10px; margin-bottom: 14px; }
.tabla-actividad .tabla { margin: 0; }
.tabla-actividad td.vacio { text-align: center; color: var(--tinta-suave); padding: 14px; }
.bola-cliente.bola-naranja { background: #fef6e7; color: #92400e; box-shadow: none; }
.bola-cliente.bola-roja { background: #fdecec; color: var(--rojo-oscuro); box-shadow: none; animation: none; }
.luz-backups { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 30px; font-size: 14px; font-weight: 800; }
.luz-backups.luz-verde { background: #eaf7ee; border: 1px solid #b7e0c2; color: #166534; }
.luz-backups.luz-roja { background: #fdecec; border: 1px solid #f3c1c0; color: var(--rojo-oscuro); }

/* Fila de fechas del Reporte Backups bajo el título */
.acciones-fechas-backups { margin-bottom: 10px; flex-wrap: wrap; }

/* ── Estadísticas: secciones reordenables (drag & drop) ──────────────────── */
.barra-orden-stats { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; flex-wrap: wrap; }
.barra-orden-stats .notas { margin: 0; }
.seccion-ordenable { position: relative; }
/* Controles de orden de cada módulo (flechas ▲/▼ + asa de arrastre), arriba a la dcha. */
.controles-seccion { position: absolute; top: 8px; right: 10px; z-index: 3; display: flex; align-items: center; gap: 4px; }
.flecha-orden { width: 26px; height: 24px; padding: 0; border: 1px solid var(--borde); border-radius: 7px; background: #fff; cursor: pointer; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, opacity 0.12s; }
.flecha-subir { color: var(--ok); }
.flecha-bajar { color: var(--rojo); }
.flecha-orden:hover:not(:disabled) { background: #f3eeee; }
.flecha-orden:disabled { opacity: 0.3; cursor: default; }
.flecha-verde { color: var(--ok); font-weight: 800; }
.flecha-roja { color: var(--rojo); font-weight: 800; }
.asa-arrastre { position: static; z-index: 2; background: none; border: none; cursor: grab; color: var(--tinta-suave); font-size: 18px; line-height: 1; padding: 5px 6px; border-radius: 8px; opacity: 0.35; transition: opacity 0.12s, background 0.12s; }
.asa-arrastre:hover { opacity: 1; background: #f3eeee; }
.asa-arrastre:active { cursor: grabbing; }
.seccion-ordenable.arrastrando { opacity: 0.45; outline: 2px dashed var(--rojo); outline-offset: 4px; }

/* Subtítulos de la sección Reporte Backups Clientes de Estadísticas */
.panel-stats-backups h3 { margin: 16px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tinta-suave); }

/* ── Selector "Espacio disponible en disco" del Reporte Backups ──────────── */
/* Verde = +70% libre · amarillo = ~50% · rojo = 30% o menos */
.selector-espacio { cursor: pointer; background: #fff; }
.selector-espacio.nivel-ninguno { color: var(--tinta-suave); }
.selector-espacio.nivel-alto { background: #eaf7ee; border-color: #b7e0c2; color: #166534; font-weight: 700; }
.selector-espacio.nivel-medio { background: #fef6e7; border-color: #f3ddb0; color: #92400e; font-weight: 700; }
.selector-espacio.nivel-bajo { background: #fdecec; border-color: #f3c1c0; color: var(--rojo-oscuro); font-weight: 700; }

/* Flechas para reordenar las pastillas del Reporte Backups */
.flecha-orden { font-size: 15px; font-weight: 900; line-height: 1; }
.flecha-subir { color: var(--ok); }
.flecha-bajar { color: var(--rojo); }

/* Varios discos por servidor y anotaciones permanentes del cliente */
.discos-fila { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.disco-backup { display: flex; gap: 6px; align-items: center; min-width: 0; }
.disco-backup .selector-espacio { flex: 1 1 130px; min-width: 0; }
.disco-backup input { flex: 1 1 110px; min-width: 0; }
.anotaciones-cliente { width: 100%; margin-top: 8px; resize: vertical; }

/* Anotación por disco y discos por tipo en el diálogo del cliente */
.disco-backup { flex-wrap: wrap; }
.disco-backup .disco-nota { flex: 1.6 1 150px; }

/* Máquinas virtuales (nombre + última copia) y fecha del último WSERVERBACKUP */
.vm-backup .vm-nombre { flex: 2 1 160px; }
.etiqueta-fecha-backup { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--tinta-suave); white-space: nowrap; }
.etiqueta-fecha-backup input[type="date"] { flex: 0 0 auto; width: auto; }
.ultimo-backup { margin-bottom: 2px; }
#form-backup-cliente .campo-check { display: flex; align-items: center; gap: 8px; }
.discos-tipo { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tinta-suave); font-weight: 400; white-space: nowrap; }
.discos-tipo input { width: 58px; padding: 4px 6px; }
/* Máquinas de un mismo tipo de copia (dos o tres Windows Server, por ejemplo):
   en la ficha del cliente se editan como una lista y en el cuadro diario cada
   una lleva su nombre encima de sus discos */
.tipos-backup { display: flex; flex-direction: column; gap: 12px; }
.tipo-backup { border: 1px solid var(--borde); border-radius: 10px; padding: 8px 10px; background: #fafafb; }
.tipo-backup > .campo-check { margin: 0 0 6px; }
.maquinas-tipo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.maquina-fila { display: flex; align-items: center; gap: 8px; }
.maquina-fila .maquina-nombre { flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; font-size: 13px; }
.maquina-fila .discos-tipo { margin-left: 0; }
.maquina-backup { display: block; padding: 4px 0 4px 10px; border-left: 3px solid var(--borde); margin-bottom: 4px; }
.maquina-backup-nombre { display: block; font-size: 12px; font-weight: 700; color: var(--tinta-suave); margin-bottom: 3px; }

/* Botón azul (Crear makina en el Reporte Backups) */
.btn-azul { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.btn-azul:hover { background: #1e40af; border-color: #1e40af; color: #fff; }

/* Wiki: barra de herramientas y adjuntos de artículos */
.wiki-herramientas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.wiki-herramientas-titulo { font-size: 13px; font-weight: 700; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.05em; }
.adjuntos-wiki { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin: 6px 0 4px; }
.adjunto-wiki-foto { position: relative; display: inline-block; }
.adjunto-wiki-foto .btn-icono { position: absolute; top: 4px; right: 4px; background: rgba(255, 255, 255, 0.88); border-radius: 8px; }
.adjunto-wiki-chip { display: inline-flex; align-items: center; gap: 4px; }

/* Bono Extra del mes: siempre en rojo, en el panel del cliente y en las tarjetas */
.bono-extra { color: var(--rojo) !important; font-weight: 800; }

.oauth-msg { font-family: Inter, Arial, sans-serif; color: #141618; padding: 24px; }

/* ── Logística: paquetes ──────────────────────────────────────────────── */
.insignia.estado-paquete-almacen { background: #ffedd5; color: #9a3412; }
.insignia.estado-paquete-entregado { background: #dcfce7; color: #166534; }
.log-foto-preview { max-width: 100%; max-height: 220px; border-radius: 8px; margin: 4px 0 10px; display: block; object-fit: contain; }

/* ── Rol Logística y acceso al módulo de Logística ───────────────────────── */
/* Solo ven la pestaña Logística quienes tienen el acceso (admin, rol
   logística o técnico con "Logística + Sistemas") */
body:not(.con-logistica) [data-action="menu-logistica"] { display: none; }
/* El rol logística SOLO ve su módulo: se le oculta el resto del menú */
body.es-logistica .menu-item:not([data-action="menu-logistica"]) { display: none; }
.insignia.estado-paquete-devuelto { background: #dbeafe; color: #1d4ed8; }

/* Logística: casilla INSTALADO (grande, con su nombre encima) y estados nuevos */
.check-instalado { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: var(--tinta-suave); cursor: pointer; margin-right: 8px; vertical-align: middle; }
.check-instalado input { width: 22px; height: 22px; accent-color: var(--rojo); pointer-events: none; margin: 0; }
.insignia.estado-paquete-archivado { background: #ede9fe; color: #5b21b6; }
.insignia.estado-paquete-salida { background: #fef9c3; color: #854d0e; }

/* Ficha completa del paquete (Logística) */
.detalle-paquete-fila { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 0; border-bottom: 1px solid #f2f2f2; }
.detalle-paquete-fila > span:first-child { color: var(--tinta-suave); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; flex-shrink: 0; }
.detalle-paquete-fila > div { text-align: right; }
.detalle-paquete-img { max-width: 200px; max-height: 120px; border-radius: 8px; border: 1px solid var(--borde); display: block; }

/* ── Comparador de precios ──────────────────────────────────────────────── */
.precios-directa { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.btn-mini { padding: 5px 10px; font-size: 12px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; color: var(--tinta); text-decoration: none; font-weight: 600; }
.btn-mini:hover { border-color: var(--rojo); color: var(--rojo); }
.precios-item { border: 1px solid var(--borde); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.precios-item-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; cursor: pointer; background: #fff; }
.precios-item-cab:hover { background: #fafafa; }
.precios-item-cab > strong { color: var(--tinta); }
.precios-meta { font-size: 12px; color: var(--tinta-suave); margin-left: auto; }
.precios-detalle { padding: 0 14px 14px; }
.precios-detalle .tabla { margin-top: 6px; }
.chip-fiable { font-size: 11px; color: #166534; background: #dcfce7; border-radius: 20px; padding: 1px 7px; white-space: nowrap; }
.chip-dudoso { font-size: 11px; color: #92400e; background: #fef3c7; border-radius: 20px; padding: 1px 7px; white-space: nowrap; }

/* ── Freshdesk completo ─────────────────────────────────────────────────── */
.fd-select { padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; background: #fff; color: var(--tinta); }
.fd-filtros { align-items: center; }
.fd-filtros input { min-width: 200px; }
.tabla-fd .fila-ticket { cursor: pointer; }
.fd-ficha-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.fd-ficha-cab h2 { margin: 0 0 4px; }
.fd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fd-chip { font-size: 11px; background: #f1f3f7; color: var(--tinta-suave); border-radius: 20px; padding: 2px 9px; }
.fd-controles { margin: 12px 0; align-items: flex-end; }
.fd-controles label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--tinta-suave); }
.fd-conversacion { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px; background: #fafbfc; border: 1px solid var(--borde); border-radius: 12px; }
.fd-conversacion .burbuja { max-width: 82%; }
.fd-cuerpo { font-size: 14px; line-height: 1.5; }
.fd-cuerpo img { max-width: 100%; height: auto; border-radius: 8px; }
.burbuja.fd-privada { background: #fff7e6; border: 1px dashed #e0b64d; align-self: center; max-width: 92%; }
.fd-nota-priv { color: #92400e; font-weight: 700; }
.fd-compositor { margin-top: 14px; }
.fd-comp-tabs { display: flex; gap: 6px; margin-bottom: 6px; }
.fd-tab { padding: 6px 12px; font-size: 13px; background: #fff; }
.fd-tab.activa { background: var(--rojo); color: #fff; border-color: var(--rojo); }
.fd-compositor textarea { width: 100%; padding: 10px; border: 1px solid var(--borde); border-radius: 10px; font: inherit; resize: vertical; }
.fd-compositor .acciones { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 10px; flex-wrap: wrap; }
/* T2: sección Freshdesk de la ficha del ticket y notas internas en el hilo local */
#panel-ticket-fd .fd-conversacion { max-height: 60vh; }
#ticket-mensajes .burbuja.fd-privada { align-self: flex-end; }
.notas.es-aviso { color: #92400e; }
.notas.es-error { color: var(--rojo); }
#resolver-fd-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ── Tarifa Plana ───────────────────────────────────────────────────────── */
.tarjeta-tp { border-left: 4px solid #1e60d8; }
.tarjeta-tp .linea-caducidad { color: #1e60d8; }
body.cliente-tarifa-plana .ocultar-en-tp { display: none !important; }
.insignia.chip-bono { background: #fee2e2; color: #991b1b; font-size: 10px; }
.insignia.chip-tp { background: #dbeafe; color: #1e40af; font-size: 10px; }

/* ── Parte del día ──────────────────────────────────────────────────────── */
.cd-tecnico { border: 1px solid var(--borde); border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; }
.cd-tecnico-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cd-tecnico-cab h3 { margin: 0; }
.cd-lista { margin: 8px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.cd-lista li { color: var(--tinta); }
.cd-acciones { border-top: 1px dashed var(--borde); padding-top: 8px; }
.cd-accion { color: var(--tinta-suave); font-size: 13px; }
/* Portal del cliente de Tarifa Plana: no aplican los avisos de bolsa de horas */
body.cliente-tarifa-plana .nota-minimo { display: none !important; }
body.cliente-tarifa-plana .solo-bono { display: none !important; }

/* ── Selector de cliente (integración F1, js/selector-cliente.js) ─────────── */
.sel-cliente { position: relative; display: inline-flex; align-items: center; margin: 0; max-width: 100%; min-width: 0; }
.sel-cliente-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--borde); background: #fff; color: var(--tinta); border-radius: 30px; padding: 3px 11px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; max-width: 100%; }
.sel-cliente-chip:hover:not(:disabled) { border-color: var(--tinta-suave); }
.sel-cliente-chip:disabled { opacity: .6; cursor: progress; }
.sel-cliente-chip strong { font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sel-cliente-chip.es-bono { background: #fee2e2; border-color: #f3c1c0; color: #991b1b; }
.sel-cliente-chip.es-tp { background: #dbeafe; border-color: #bfdbfe; color: #1e40af; }
.sel-cliente-chip.es-vacio { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.sel-cliente-chip.es-vacio:hover:not(:disabled) { background: var(--rojo-oscuro); }
.sel-cliente-chip.es-no-cliente { background: #f1f3f7; color: var(--tinta-suave); }
.sel-cliente-saldo { font-weight: 500; opacity: .85; }
.sel-cliente-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 320px; max-width: 90vw; background: #fff; border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.sel-cliente-buscar { width: 100%; padding: 7px 10px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; font-size: 13px; }
.sel-cliente-lista { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.sel-cliente-extra { border-top: 1px solid var(--borde); padding-top: 6px; display: flex; flex-direction: column; gap: 1px; }
.sel-cliente-op { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; text-align: left; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--tinta); padding: 7px 9px; border-radius: 6px; cursor: pointer; }
.sel-cliente-op[hidden] { display: none; }
.sel-cliente-op:hover:not(:disabled) { background: #f0f0f5; }
.sel-cliente-op.es-actual { background: #fee2e2; }
.sel-cliente-op.es-especial { color: var(--tinta-suave); font-weight: 500; }
.sel-cliente-op:focus-visible { outline: 2px solid var(--rojo); outline-offset: -2px; }
.sel-cliente-op .sel-cliente-saldo { font-size: 11px; color: var(--tinta-suave); white-space: nowrap; }
.sel-cliente-op.es-agotado .sel-cliente-saldo { color: var(--rojo); font-weight: 700; }
.sel-cliente-vacio { padding: 8px 9px; }
.sel-cliente-vacio[hidden] { display: none; }
/* "Resolver" sin cliente: atenuado pero vivo (al pulsarlo explica el porqué, también en móvil) */
.wa-btn-principal.es-bloqueado, .wa-menu-item.es-bloqueado { opacity: .45; cursor: not-allowed; }
.wa-btn-principal.es-bloqueado:hover { background: #2b2d33; }
.wa-menu-item.es-bloqueado:hover { background: none; }
.wa-conv-fila2 { flex-wrap: wrap; }
/* Móvil: el chip pierde el saldo y el popover pasa a hoja inferior (no se sale por la derecha) */
@media (max-width: 720px) {
  .sel-cliente-chip .sel-cliente-saldo { display: none; }
  .sel-cliente-pop { position: fixed; left: 4vw; right: 4vw; top: auto; bottom: 12px; width: auto; max-width: none; max-height: 70vh; z-index: 60; }
  .sel-cliente-lista { max-height: 45vh; }
}

/* ── Cierre con intervención (integración F2, js/intervencion-cierre.js) ──── */
.chip-origen { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 20px; background: #eef2ff; color: #3730a3; text-decoration: none; margin-right: 5px; white-space: nowrap; vertical-align: 1px; }
a.chip-origen:hover { background: #3730a3; color: #fff; }

/* ── Bandeja "por confirmar" (integración F3) ─────────────────────────────── */
.pc-item { align-items: flex-start; cursor: default; flex-wrap: wrap; }
.pc-item:hover { background: none; }
.pc-item-antigua { background: #fef6e7; }
.pc-datos { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 3px; }
.pc-cabecera { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pc-descripcion { white-space: pre-line; }
.pc-botones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pc-sin-tecnico, .pc-antigua { color: #92400e; font-weight: 700; }
.pc-sin-descripcion { white-space: normal; }
.pc-botones .btn:disabled { opacity: .45; cursor: not-allowed; }
/* Bandeja vacía: solo título + "Nada pendiente de confirmar." (no empuja las Tareas) */
.pc-vacia > .notas { display: none; }
.pc-insignia { background: #fef3c7; color: #92400e; }
.cd-sin-confirmar { border: 1px solid #f5d9a8; background: #fef6e7; border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
.cd-sin-confirmar h3 { margin: 0 0 4px; color: #92400e; }
@media (max-width: 720px) {
  .pc-botones { width: 100%; justify-content: flex-start; }
}
.cierre-cliente-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.cierre-etiqueta { font-weight: 700; font-size: 13px; }
.cierre-cliente { font-weight: 700; padding: 3px 10px; border-radius: 20px; background: #f1f3f7; font-size: 13px; }
.cierre-cliente.es-aviso { background: #fdecec; color: var(--rojo-oscuro); }
.cierre-cliente-fila .btn-enlace { margin-bottom: 0; padding: 4px 6px; min-height: 32px; font-size: 12px; color: var(--rojo); text-decoration: underline; }
/* Errores y notas del diálogo de cierre: dentro del <dialog> (la capa superior tapa #aviso) */
.cierre-error { margin: 6px 0 0; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; background: #eef2ff; color: #3730a3; }
.cierre-error.es-error { background: #fdecec; color: var(--rojo-oscuro); }
.nota-campo { font-weight: 400; color: var(--tinta-suave); font-size: 11px; }
#cierre-campos { display: contents; }
#cierre-campos.oculto { display: none; }

/* ── Reloj: botones arriba de Bonos y Tarifa Plana + diálogo con crono y SLA ── */
.reloj-barra { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.reloj-barra .badge { background: var(--rojo); color: #fff; margin-left: 8px; }
.reloj-crono-mini { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--rojo); }
.dialogo-reloj { width: min(960px, 95vw); }
.dialogo-reloj-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.dialogo-reloj-cab h2 { margin: 0; }

/* ── Chat iA ─────────────────────────────────────────────────────────────── */
.chat-ia-caja { max-height: 58vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: #fafbfc; border: 1px solid var(--borde); border-radius: 12px; }
.chat-ia-caja .burbuja { max-width: 82%; }
.chat-ia-asistente { align-self: flex-start; }
.chat-ia-caja .de-tecnico { align-self: flex-end; }
.chat-ia-pensando { color: var(--tinta-suave); font-style: italic; }
.chat-ia-error { color: var(--alerta); }
.chat-ia-compositor { display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; }
.chat-ia-compositor textarea { flex: 1; padding: 10px; border: 1px solid var(--borde); border-radius: 10px; font: inherit; resize: vertical; }

/* ── Calendario de intervenciones (Microsoft Graph) ── */
.cal-alerta { position: sticky; top: 0; z-index: 40; background: var(--alerta); color: #fff; padding: 10px 16px; border-radius: 10px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.cal-alerta .btn-mini { background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.4); padding: 2px 8px; border-radius: 6px; font-size: .85em; cursor: pointer; }
.cal-dia-grupo { margin-bottom: 18px; }
.cal-dia-cab { font-size: 1em; color: var(--texto-suave); margin: 0 0 8px; border-bottom: 1px solid var(--borde); padding-bottom: 4px; }
.cal-evento { display: flex; gap: 12px; align-items: baseline; padding: 8px 10px; border-radius: 8px; background: var(--fondo-suave); margin-bottom: 6px; }
.cal-evento:hover { background: var(--fondo-hover, var(--fondo-suave)); }
.cal-hora { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--acento, #C40100); min-width: 90px; }
.cal-titulo { flex: 1; }
.cita-inputs { display: flex; gap: 10px; flex-wrap: wrap; }
.cita-inputs label { flex: 1; min-width: 120px; }
.opcional { font-weight: 400; color: var(--texto-suave); font-size: .85em; }

/* ── Calendario: barra, selector de vista y rejilla mes/semana/día ── */
.cal-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 14px; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-flecha { font-size: 1.2em; line-height: 1; padding: 4px 12px; }
.cal-periodo { font-weight: 600; font-size: 1.05em; text-transform: capitalize; margin-left: 6px; }
.cal-modos { display: flex; gap: 4px; }
.cal-modos .btn.activo { background: var(--acento, #C40100); color: #fff; border-color: var(--acento, #C40100); }
/* Vista Mes */
.cal-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.cal-mes-cab { background: var(--fondo-suave); text-align: center; font-weight: 600; padding: 6px 0; font-size: .85em; color: var(--texto-suave); }
.cal-celda { background: var(--fondo, #fff); min-height: 96px; padding: 4px 5px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: background .1s; }
.cal-celda:hover { background: var(--fondo-suave); }
.cal-celda.cal-fuera { opacity: .45; }
.cal-celda.cal-hoy-celda { outline: 2px solid var(--acento, #C40100); outline-offset: -2px; }
.cal-celda-num { font-size: .85em; font-weight: 600; color: var(--texto-suave); }
.cal-hoy-celda .cal-celda-num { color: var(--acento, #C40100); }
.cal-celda-evs { display: flex; flex-direction: column; gap: 2px; }
.cal-mas { font-size: .72em; color: var(--texto-suave); padding-left: 2px; }
/* Vista Semana */
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.cal-col { background: var(--fondo, #fff); min-height: 220px; cursor: pointer; display: flex; flex-direction: column; }
.cal-col:hover { background: var(--fondo-suave); }
.cal-col-cab { text-align: center; font-weight: 600; padding: 6px 0; font-size: .85em; border-bottom: 1px solid var(--borde); position: relative; }
.cal-col-add { position: absolute; right: 6px; color: var(--texto-suave); font-weight: 700; }
.cal-col-evs { display: flex; flex-direction: column; gap: 3px; padding: 5px; }
.cal-col-vacio { color: var(--texto-suave); text-align: center; font-size: .8em; padding-top: 8px; }
/* Vista Día */
.cal-dia { border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.cal-dia-otras { padding: 8px 10px; background: var(--fondo-suave); border-bottom: 1px solid var(--borde); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: .85em; }
.cal-hora-fila { display: flex; gap: 10px; padding: 4px 8px; border-bottom: 1px solid var(--borde); min-height: 40px; cursor: pointer; align-items: flex-start; }
.cal-hora-fila:hover { background: var(--fondo-suave); }
.cal-hora-lbl { min-width: 54px; font-variant-numeric: tabular-nums; color: var(--texto-suave); font-size: .85em; padding-top: 3px; }
.cal-hora-evs { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; }
/* Evento (chip) común a las tres vistas */
.cal-chip { display: block; width: 100%; text-align: left; background: var(--acento, #C40100); color: #fff; border: none; border-radius: 6px; padding: 2px 6px; font-size: .78em; line-height: 1.35; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip:hover { filter: brightness(1.08); }
.cal-chip-h { font-variant-numeric: tabular-nums; opacity: .85; margin-right: 3px; }
.cal-semana .cal-chip, .cal-dia .cal-chip { white-space: normal; }
.btn-peligro { background: var(--alerta); color: #fff; border-color: var(--alerta); }
#cal-ver-cuerpo h3 { margin: 0 0 8px; }
#cal-ver-cuerpo p { margin: 4px 0; }
@media (max-width: 640px) {
  .cal-celda { min-height: 62px; }
  .cal-chip { font-size: .8em; } /* .68em quedaba en ~9,5 px: ilegible */
  .cal-semana { grid-template-columns: minmax(0, 1fr); }
}

/* ── Calendario: sección de repetición del alta ── */
#cal-repeticion-detalle { border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; margin-top: 4px; background: var(--fondo-suave); }
.cal-dias-semana { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cal-dias-semana label { display: inline-flex; align-items: center; gap: 3px; font-size: .9em; }
.cal-meses-input { width: 5em; }
/* ── Facturable (integración F4): casilla en los formularios, chip en la ficha y tile ── */
.campo-facturable { align-self: end; }
.nota-tarifa-plana { font-size: 12px; margin: 0; align-self: end; }
.chip-facturable {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 20px;
  background: #f0fdf4; color: #166534; white-space: nowrap; margin-left: 6px; vertical-align: 1px;
}
/* "No facturable" es una decisión (cortesía, garantía), no una alarma: neutro, como en el correo del parte */
.chip-facturable.no { background: #f3f4f6; color: #374151; }
.dato-no-facturable { color: var(--tinta-suave); }
.pc-facturable { font-size: 12px; margin-top: 4px; }
.pc-facturable input { width: 14px; height: 14px; }
/* Consecuencia de desmarcar, visible sin tooltip (móvil, teclado): solo con la casilla desmarcada */
.campo-facturable .nota-no-facturable, .pc-facturable .nota-no-facturable { display: none; }
.campo-facturable:has(input:not(:checked)) .nota-no-facturable, .pc-facturable:has(input:not(:checked)) .nota-no-facturable { display: block; }
.pc-tarifa-plana { font-size: 12px; color: var(--tinta-suave); margin-top: 4px; display: block; }

/* ── Actividad del cliente (integración F5, js/actividad.js) ───────────────── */
.filtros-actividad { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.filtros-actividad label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--tinta-suave); font-weight: 600; }
.filtros-actividad select, .filtros-actividad input { min-width: 140px; }
.filtros-actividad .btn-enlace { margin-bottom: 0; }
/* Error de carga: no debe parecer "no hay nada" (gris) */
.vacio.aviso-error { color: var(--rojo); font-weight: 600; }
#sin-actividad .btn-mini { margin-left: 6px; }
.lista-actividad { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--borde); }
.act-item { position: relative; padding: 8px 10px 8px 18px; margin-left: 6px; border-bottom: 1px solid #f0f0f0; }
.act-item::before { content: ''; position: absolute; left: -12px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: #c7ccd8; border: 2px solid #fff; }
.act-item.act-freshdesk::before { background: #3730a3; }
.act-item.act-whatsapp::before { background: #16a34a; }
.act-item.act-portal::before { background: #b45309; }
.act-item.act-panel::before { background: var(--rojo); }
.act-cabecera { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.act-fecha { color: var(--tinta-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.act-tecnico { font-size: 12px; color: var(--tinta-suave); }
.insignia.act-tipo { background: #f3f4f6; color: #374151; font-size: 11px; }
.insignia.act-tipo-respuesta_cliente { background: #dbeafe; color: #1d4ed8; }
.insignia.act-tipo-respuesta_tecnico, .insignia.act-tipo-nota { background: #dcfce7; color: #166534; }
.insignia.act-tipo-resuelto { background: #dcfce7; color: #166534; font-weight: 800; }
.insignia.act-tipo-reabierto, .insignia.act-tipo-ticket_nuevo { background: #ffedd5; color: #9a3412; }
.insignia.act-tipo-intervencion { background: #fdecec; color: var(--rojo); }
.act-titulo { font-weight: 700; margin-top: 3px; }
.act-resumen { color: var(--tinta-suave); font-size: 13px; margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
.paginacion-actividad { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.fila-intervencion.act-resaltada td { background: #fff7cc; transition: background 0.4s; }
.cd-actividad { font-size: 13px; color: var(--tinta-suave); margin: 4px 0 8px; }
@media (max-width: 720px) {
  .filtros-actividad label { flex: 1 1 45%; }
  .filtros-actividad select, .filtros-actividad input { min-width: 0; width: 100%; }
}

/* ── Móvil y tablet: objetivos táctiles ─────────────────────────────────
   Va al FINAL de la hoja a propósito: las reglas de tamaño de estos botones
   (.flecha-orden, .asa-arrastre, .botones-backup…) están más abajo y con la
   misma especificidad, así que solo desde aquí manda el tamaño para el dedo.
   Con el dedo hacen falta ~44 px y hueco entre botones: antes había iconos de
   30x31 px y ✏️ a 3 px de 🗑️ en Usuarios (se borraba queriendo editar).
   Solo móvil y tablet: en escritorio la densidad no cambia. */
@media (max-width: 900px) {
  .btn-icono,
  a.btn.btn-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
    font-size: 16px;
  }
  /* Celdas de acciones: en fila flexible con hueco, nunca pegadas */
  .celda-acciones,
  .tabla-intervenciones .celda-acciones {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: normal;
  }
  .menu-item { min-height: 44px; }
  .btn-menu { min-width: 44px; min-height: 44px; }
    .btn-cabecera, .chip-crono { min-height: 44px; }
  .pag-btn { min-width: 44px; min-height: 44px; }
  .btn-estado-backup { min-height: 40px; padding: 9px 14px; }
  .botones-backup { gap: 8px; }
  .campo-check input { width: 24px; height: 24px; }
  .ficha-tecnico-nombre { padding: 7px 2px; }
  /* Reordenar módulos en Estadísticas: los controles dejan de flotar sobre el
     título del panel (lo solapaban) y ocupan su propia fila */
  .controles-seccion {
    position: static;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 6px;
  }
  .flecha-orden { width: 40px; height: 40px; font-size: 15px; }
  .asa-arrastre { padding: 10px 12px; font-size: 20px; opacity: 0.6; }
}

/* ── Móvil: tablas de uso diario legibles ───────────────────────────────
   A 360 px la descripción de una intervención se leía en 104 px con puntos
   suspensivos (12 caracteres de 247). Se esconden las columnas que ya salen
   en la fila desplegable o en la ficha del paquete, y el texto ocupa el
   ancho que queda. La columna de acciones NUNCA se esconde. */
@media (max-width: 640px) {
  /* Intervenciones: Técnico y Contacto pasan a la fila desplegable */
  .tabla-intervenciones .celda-tecnico,
  .tabla-intervenciones .celda-canal { display: none; }
  .tabla-intervenciones .celda-desc {
    max-width: none;
    width: auto;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  /* Tres líneas en vez de una recortada: el texto entero sigue en la fila
     desplegable (pulsa la fila) y así el listado no crece a 475 px por parte */
  .desc-recorte {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
  /* Fecha y chips de estado dejan de ir en una sola línea: así la
     descripción se queda con el ancho que sobra en vez de con 104 px */
  .tabla-intervenciones .fecha { white-space: normal; }
  .tabla-intervenciones .celda-estado,
  .tabla-intervenciones .celda-estado .insignia,
  .tabla-intervenciones .celda-estado .chip-facturable { white-space: normal; }
  .detalle-columnas-ocultas { display: block; }

  /* Usuarios: el rol se lee bajo el nombre y su columna se esconde */
  .celda-rol { display: none; }
  .rol-bajo-nombre { display: block; margin-top: 4px; }
  .celda-2fa, .celda-horario { white-space: normal; }

  /* En un móvil no cabe toda la fila de botones: se parten en dos columnas
     (44+8+44 más los 16 px de relleno de la celda; con menos de 120 px se
     apilan de uno en uno y la fila crece hasta 218 px de alto) */
  .celda-acciones,
  .tabla-intervenciones .celda-acciones { flex-wrap: wrap; min-width: 120px; }

  /* Logística: lo escondido está entero en la ficha del paquete (pulsa la fila) */
  .celda-log-entrada,
  .celda-log-transporte,
  .celda-log-recogido,
  .celda-log-destino,
  .celda-log-foto { display: none; }
}

/* Pantallas muy estrechas: 🔐 y 🎓 se quedan en el icono (el title y el
   aria-label siguen diciendo qué son) y la marca se queda en el logotipo,
   que es lo que hace falta para que ☰, marca y botones quepan en una fila */
@media (max-width: 480px) {
  .texto-cabecera { display: none; }
  .cabecera h1 { font-size: 0; }
  .cabecera h1 .marca { font-size: 15px; }
  .cabecera { gap: 6px 8px; }
  .btn-cabecera, .chip-crono { padding: 8px 10px; min-width: 44px; }
  /* En pantallas muy estrechas el botón «Volver» se queda solo con la flecha */
  }

/* ── Móvil: rematar detalles medidos en la auditoría ────────────────────── */
@media (max-width: 900px) {
  /* M2 · el cajón del menú aprovecha la pantalla y su último ítem no queda
     pegado al borde (22 pestañas, 1 172 px de recorrido) */
  .menu-panel { width: min(280px, 82vw); padding-bottom: 24px; }

  /* M3 · texto de contenido legible: nada de 10-12 px en lo que hay que leer
     (los <th> a 11 px son etiquetas y se quedan como están) */
  .insignia { font-size: 13px; }
  .insignia.chip-bono, .insignia.chip-tp { font-size: 12px; }
  .detalle-contacto { font-size: 13px; }

  /* M6 · pista de que la tabla sigue a los lados: sombras que solo aparecen
     por el lado que queda por desplazar (background-attachment: local) */
  .tabla,
  .tabla-scroll {
    background-image:
      linear-gradient(to right, var(--panel) 30%, rgba(255, 255, 255, 0)),
      linear-gradient(to left, var(--panel) 30%, rgba(255, 255, 255, 0)),
      linear-gradient(to right, rgba(20, 22, 24, 0.14), rgba(20, 22, 24, 0)),
      linear-gradient(to left, rgba(20, 22, 24, 0.14), rgba(20, 22, 24, 0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 30px 100%, 30px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

@media (max-width: 720px) {
  /* M5 · el diagrama de red se ve al 31 % en un móvil: se le deja un ancho
     mínimo usable y su caja se desplaza a lo ancho (arrastrar nodos sigue
     yendo bien: js/diagrama.js usa getScreenCTM, que cuenta el scroll) */
  .diagrama-lienzo-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #diagrama-lienzo { min-width: 640px; }
  /* La barra de herramientas del diagrama, en dos columnas */
  .diagrama-barra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .diagrama-barra select, .diagrama-barra input { width: 100%; }
}

@media (max-width: 640px) {
  /* M1 · los filtros de Tickets en dos columnas: siete controles apilados
     llenaban la pantalla entera antes del primer ticket */
  .filtros-tickets {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .filtros-tickets input[type="search"] { grid-column: 1 / -1; }
  .filtros-tickets .btn { padding: 9px 10px; font-size: 13px; }

  /* M4 · el selector de técnico medía 104 px dentro de #form-intervencion */
  .formulario .select-tecnico { width: 100%; }
}

/* ── Visor de imágenes (js/visor-imagen.js) ── */
.visor { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.visor::backdrop { background: rgba(0,0,0,.85); }
.visor-barra { position: fixed; top: 12px; right: 16px; z-index: 2; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.94); border-radius: 24px; padding: 6px 10px; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.visor-nivel { font-size: 12px; font-weight: 700; color: var(--tinta-suave); min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }
.visor-lienzo { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#visor-img { max-width: 92vw; max-height: 92vh; transform-origin: center center; transition: transform .08s linear; cursor: grab; user-select: none; -webkit-user-drag: none; }
#visor-img:active { cursor: grabbing; }
/* Las imágenes de Teams invitan a pulsarlas */
.tm-img { cursor: zoom-in; }
/* "Ver mensajes anteriores" del histórico de Teams */
.teams-mas { display: flex; justify-content: center; padding: 6px 0 10px; }
@media (max-width: 720px) {
  .visor-barra { top: 8px; right: 8px; padding: 4px 8px; }
  #visor-img { max-width: 98vw; max-height: 86vh; }
}

/* ── Teams: editar mensajes propios (original tachado + marca de editado) ── */
.tm-original { display: block; font-size: 12px; color: var(--tinta-suave); opacity: .8; margin: 0 0 2px; line-height: 1.35; overflow-wrap: anywhere; }
.tm-original s { text-decoration: line-through; }
.tm-editado { display: block; margin-top: 4px; font-size: 11px; color: var(--tinta-suave); font-style: italic; }
.es-mio .tm-editado { color: rgba(255,255,255,.75); }
.tm-editar { border: 0; background: none; padding: 0 0 0 6px; font-size: 11px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; }
.tm-msg:hover .tm-editar, .tm-editar:focus-visible { opacity: .85; }
.tm-editar-txt { width: 100%; min-width: 220px; padding: 6px 8px; border: 1px solid var(--tm-borde); border-radius: 8px; font: inherit; font-size: 14px; resize: vertical; color: var(--tinta); background: #fff; }
.tm-editar-acciones { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; }
@media (max-width: 720px) { .tm-editar { opacity: .7; } }

/* ── Arrastrar/pegar ficheros (js/subir-arrastrar.js) ── */
.zona-soltar { outline: 2px dashed var(--rojo); outline-offset: 3px; border-radius: 8px; background: rgba(196,1,0,.05); }
.pista-soltar { display: block; margin-top: 4px; font-size: 12px; color: var(--tinta-suave); }

/* ── Cuaderno del cliente (js/notas-cliente.js) ── */
.notas-app { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; margin-top: 10px; }
.notas-lista { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; }
.nota-item { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; }
.nota-item:hover { background: var(--fondo-suave); }
.nota-item.is-active { border-color: var(--rojo); background: rgba(196,1,0,.05); }
.nota-item-tit { font-weight: 600; font-size: 14px; color: var(--tinta); }
.nota-item-meta { font-size: 11px; color: var(--tinta-suave); }
.notas-editor { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.notas-editor .vacio { margin: 0; }
.nota-titulo, .nota-cuerpo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tinta-suave); }
.nota-titulo input, .nota-cuerpo textarea { padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; color: var(--tinta); }
.nota-cuerpo textarea { resize: vertical; min-height: 220px; line-height: 1.5; }
@media (max-width: 900px) { .notas-app { grid-template-columns: 1fr; } .notas-lista { max-height: 200px; } }
.nota-ilegible { padding: 12px 14px; border: 1px solid var(--rojo); border-radius: 8px; background: rgba(196,1,0,.05); line-height: 1.5; }

/* Ficha de producto del Inventario: la categorización se ve pero no se edita
   (la API de Holded no la guarda), así que se pinta como datos, no como campos. */
.fila-pulsable { cursor: pointer; }
.fila-pulsable:hover { background: var(--fondo-suave, rgba(0, 0, 0, 0.04)); }
.inv-categorizacion { border-top: 1px solid var(--borde, #ddd); margin-top: 1rem; padding-top: 0.75rem; }
.inv-categorizacion h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.inv-atributos { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0.5rem 0 0.75rem; }
.inv-atributos dt { font-weight: 600; color: var(--texto-suave, #555); }
.inv-atributos dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .inv-atributos { grid-template-columns: 1fr; gap: 0 0; }
  .inv-atributos dd { margin-bottom: 0.4rem; }
}

/* Categorías del inventario: son las etiquetas de Holded, editadas como chips.
   Varias por producto, que es lo que se pidió; el ✕ quita una sin tocar el resto. */
.inv-cats-campo { margin: 0.5rem 0; }
.inv-cats-etq { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.inv-cats { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.35rem; min-height: 1.6rem; align-items: center; }
.inv-cat { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.5rem; border-radius: 999px;
  background: var(--fondo-suave, #eef1f5); border: 1px solid var(--borde, #d7dde5); font-size: 0.9rem; }
.inv-cat-x { border: 0; background: none; cursor: pointer; padding: 0 0.1rem; line-height: 1; color: var(--texto-suave, #666); font-size: 0.95rem; }
.inv-cat-x:hover { color: var(--rojo, #c40100); }
.inv-cat-add { width: 100%; }
.inv-filtro-cat { max-width: 16rem; }

/* Historial de correcciones del ticket (solo Admin): el antes tachado y el
   después, para comparar de un vistazo el original con lo que quedó. */
.edicion { border-left: 3px solid var(--borde, #d7dde5); padding: 0.35rem 0 0.35rem 0.6rem; margin-bottom: 0.6rem; }
.edicion-cab { font-size: 0.88rem; color: var(--texto-suave, #555); margin-bottom: 0.2rem; }
.edicion-etq { display: inline-block; min-width: 3.4rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texto-suave, #777); }
.edicion-antes { color: var(--texto-suave, #777); text-decoration: line-through; overflow-wrap: anywhere; }
.edicion-antes .edicion-etq { text-decoration: none; }
.edicion-ahora { overflow-wrap: anywhere; }

/* Pestañas que no son del departamento de esta persona (js: app.js).
   Clase propia y no `.oculto`: así no pelea con quien ya usa `.oculto` para
   otra cosa —los permisos por usuario— y cada mecanismo esconde lo suyo. */
.menu-item.fuera-de-departamento { display: none; }

/* Escritorio por departamento: bonos, tickets e intervenciones por confirmar
   son trabajo de Sistemas. A quien es de Marketing o de iA no le dicen nada, y
   un escritorio lleno de cosas ajenas se deja de mirar. El Admin lo ve todo. */
body.sin-sistemas:not(.es-admin) .solo-sistemas { display: none; }

/* Departamentos de una persona: varios a la vez, así que casillas y no un
   desplegable —con un desplegable no se puede decir «sistemas y marketing»—. */
.campo-departamentos { border: 1px solid var(--borde, #d7dde5); border-radius: 6px; padding: .6rem .8rem; margin: .5rem 0; }
.campo-departamentos legend { font-weight: 600; padding: 0 .3rem; }
.campo-departamentos .campo-check { display: block; margin: .25rem 0; }


/* ─── Gestor de proyectos de Marketing e iA (estilo Asana) ──────────────────
   El tablero son las fases en columnas; en «Lista» las mismas fases se apilan
   a lo ancho, que es lo que se lee mejor cuando hay muchas tareas. */
.gestor-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.gestor-proy {
  display: flex; flex-direction: column; gap: 5px; text-align: left; cursor: pointer;
  padding: 12px; border: 1px solid var(--borde); border-radius: 10px; background: #fff; font: inherit;
}
.gestor-proy:hover { border-color: var(--marca-azul, #0f6cbd); }
.gestor-proy-cab { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gestor-barra { display: block; height: 6px; border-radius: 20px; background: #eef0f4; overflow: hidden; }
.gestor-barra-relleno { display: block; height: 100%; background: #2f855a; }
.chip-area { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 11.5px; background: #eef2f7; color: #43506b; }
.chip-area.chip-off { background: #f1f1f1; color: #666; }
.chip-area.chip-alta { background: #fdecec; color: #a3231f; }
.chip-area.chip-tarde { background: #fdecec; color: #a3231f; font-weight: 700; }

.gestor-app { overflow-x: auto; }
.gestor-tablero { display: flex; gap: 12px; align-items: flex-start; min-height: 200px; }
.gestor-tablero.gestor-vista-lista { flex-direction: column; }
.gestor-tablero.gestor-vista-lista .gestor-fase { width: 100%; }
.gestor-fase {
  flex: 0 0 280px; background: var(--ol-fondo, #faf9f8); border: 1px solid var(--borde);
  border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.gestor-fase-cab { display: flex; align-items: center; gap: 6px; }
.gestor-fase-cab strong { flex: 1; min-width: 0; }
.gestor-fase-tareas { display: flex; flex-direction: column; gap: 6px; }
.gestor-tarea {
  display: flex; align-items: flex-start; gap: 4px; background: #fff;
  border: 1px solid var(--borde); border-radius: 8px; padding: 8px 6px 8px 10px;
}
.gestor-tarea.hecha .gestor-tarea-titulo { text-decoration: line-through; opacity: .65; }
.gestor-tarea-abrir { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; }
.gestor-tarea-titulo { font-weight: 600; }
.gestor-tarea-pie { display: flex; gap: 4px; flex-wrap: wrap; }
/* El ojo decide qué ve el cliente: se ve siempre, no escondido en la ficha */
.gestor-ojo { background: none; border: 0; cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 6px; opacity: .45; }
.gestor-ojo.is-on { opacity: 1; }
.gestor-ojo:hover { background: #eef2f7; opacity: 1; }
.gestor-fase-nueva, .gestor-add { align-self: flex-start; }
/* Área dada de baja: se consulta, no se toca */
.gestor-app.solo-lectura .gestor-ojo,
.gestor-app.solo-lectura .gestor-add,
.gestor-app.solo-lectura .gestor-fase-nueva,
.gestor-app.solo-lectura .gestor-fase-cab .btn-icono { display: none; }

.gestor-conversacion { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.gestor-comentario { border-left: 3px solid var(--borde); padding: 4px 0 4px 8px; }
.gestor-comentario.del-cliente { border-left-color: #0f6cbd; background: #f5f9fd; }
.gestor-comentario.interno { border-left-color: #d99b1c; background: #fdf8ec; }
.gestor-comentario p { margin: 2px 0 0; white-space: pre-wrap; }

/* ─── Lo que ve el cliente en su portal, dentro de su fila de área ──────── */
.pcli-proyecto { border: 1px solid var(--borde); border-radius: 10px; padding: 10px; margin-top: 8px; background: #fff; }
.pcli-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.pcli-cab strong { flex: 1; min-width: 0; }
.pcli-fase { margin-top: 10px; }
.pcli-fase-cab { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.pcli-barra { height: 8px; border-radius: 20px; background: #eef0f4; overflow: hidden; margin: 4px 0 6px; }
.pcli-barra-relleno { display: block; height: 100%; background: #2f855a; }
.pcli-tareas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pcli-tarea { display: flex; align-items: center; gap: 6px; }
.pcli-tarea.hecha .pcli-tarea-abrir span:first-child { text-decoration: line-through; opacity: .65; }
.pcli-tarea-abrir {
  flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: none; border: 0; padding: 5px 6px; border-radius: 6px; font: inherit; text-align: left; cursor: pointer;
}
.pcli-tarea-abrir:hover { background: #f5f7fa; }
@media (max-width: 640px) {
  .gestor-fase { flex-basis: 84vw; }
}

/* Marketing/iA sin sistemas: en la ficha del cliente les sobra el histórico de
   soporte (Freshdesk/Freshchat/tickets) y los equipos. No es solo estético: el
   servidor tampoco se los entrega (403); esto evita pintar lo que fallaría. */
body.sin-sistemas #panel-actividad,
body.sin-sistemas #panel-equipos-cliente { display: none; }

/* ─── Registro de intervención en modo AGENCIA (área marketing/ia) ──────────
   El parte de soporte se guarda sus campos (canal, persona, llamada, firma) y
   el formulario pasa a hablar el idioma de una agencia: tipo de trabajo,
   campaña y entregable, con un acento propio para que se note el cambio. */
#form-intervencion.modo-agencia .solo-soporte { display: none; }
#form-intervencion.modo-agencia { border-left: 4px solid #7c5cd6; padding-left: 12px; border-radius: 4px; }
.nota-agencia { background: #f4f0fd; border: 1px solid #ddd2f5; border-radius: 8px; padding: 8px 12px; color: #4a3d75; }

/* Adjuntos, menciones y avisos del gestor */
.gestor-adjuntos { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.gestor-adjunto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gestor-subir { align-self: flex-start; cursor: pointer; }
.gestor-caja-comentario { position: relative; }
.menciones-lista {
  position: absolute; left: 8px; bottom: calc(100% + 4px); z-index: 30;
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--borde);
  border-radius: 8px; box-shadow: 0 8px 22px rgba(20, 22, 24, .14); overflow: hidden;
}
.mencion-opcion { background: none; border: 0; padding: 7px 14px; text-align: left; font: inherit; cursor: pointer; }
.mencion-opcion:hover, .mencion-opcion:focus-visible { background: #eef2f7; }
.mencion { background: #e8f0fe; color: #174ea6; border-radius: 4px; padding: 0 3px; font-weight: 600; }
.gestor-menciones-aviso { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

/* Tiempos de una tarea del gestor (Clockify) */
.gestor-tiempos { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.gestor-tiempos-controles { display: flex; align-items: center; gap: 10px; }
.gestor-tiempo-fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gestor-tiempo-alta { display: flex; gap: 6px; flex-wrap: wrap; }
.gestor-tiempo-alta input[type="number"] { width: 80px; }
.gestor-tiempo-alta input[type="text"] { flex: 1; min-width: 140px; }

/* ─── El diálogo de la tarea del gestor, a (casi) toda pantalla ─────────────
   Jose (09-09): «la ventana emergente se debe de ver a toda pantalla para
   poder rellenar bien los datos». En escritorio, 94vw con margen respira
   mejor que el borde a borde; en móvil sí ocupa todo, con el formulario en
   scroll y los botones al final (patrón de los diálogos del panel: así
   Guardar no queda bajo el teclado). */
#dialogo-gestor-tarea { width: 94vw; max-width: 1400px; height: 92dvh; max-height: 92dvh; padding: 18px 22px; }
#dialogo-gestor-tarea .formulario-dialogo { height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
#dialogo-gestor-tarea .formulario-dialogo > .acciones { align-self: flex-end; }
/* La descripción es donde se escribe el encargo: que crezca de verdad */
#dialogo-gestor-tarea [name="descripcion"] { min-height: 220px; resize: vertical; }
/* En pantallas grandes, dos columnas de verdad: los datos a la izquierda y el
   tiempo, los ficheros y la conversación a la derecha — sin autocolocación de
   rejilla, que dejaba la derecha vacía por arriba */
.gestor-dlg-cols { display: flex; flex-direction: column; gap: 10px; }
.gestor-dlg-izq, .gestor-dlg-der { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (min-width: 1000px) {
  .gestor-dlg-cols { flex-direction: row; gap: 30px; align-items: flex-start; flex: 1 1 auto; }
  .gestor-dlg-izq { flex: 1.1; }
  .gestor-dlg-der { flex: 1; }
  #dialogo-gestor-tarea [name="descripcion"] { min-height: 320px; }
}
@media (max-width: 640px) {
  #dialogo-gestor-tarea { width: 100vw; max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: 14px; }
  #dialogo-gestor-tarea [name="descripcion"] { min-height: 160px; }
}

/* ─── El tablero de la flota ────────────────────────────────────────────── */
.veh-tablero-marco { overflow-x: auto; }
.veh-tablero th, .veh-tablero td { vertical-align: top; min-width: 118px; }
.veh-tablero .veh-nombre { min-width: 150px; }
.veh-vehiculo { background: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; padding: 2px 4px; border-radius: 6px; text-align: left; }
.veh-vehiculo:hover { background: #f0f2f6; }
/* Icono dibujado del vehículo (SVG: los emoji no admiten color) */
.veh-vehiculo { display: inline-flex; align-items: center; gap: 6px; }
.veh-icono { width: 26px; height: 26px; flex: none; }
.veh-averia-marca { font-size: 13px; margin-left: -4px; }
.veh-nombre.averiado .veh-vehiculo { color: #8a6d1a; }
.veh-tablero td.averiado { background: #f5f5f4; }
.veh-tablero .veh-hoy { background: #fbf6e8; }
.veh-chip {
  display: block; width: 100%; margin: 2px 0; padding: 3px 8px; border-radius: 14px;
  border: 1px solid transparent; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
/* Jose (12-09): la solicitud PENDIENTE en rojo. El color marca lo que pide una
   decisión, no el estado final; por eso lo ya asignado pasa a verde: si ambos
   fueran rojizos, lo que hay que atender se perdería entre lo que ya está
   resuelto —y el rojo dejaría de significar nada—. */
.veh-chip.veh-solicitada { background: #fdecec; border-color: var(--rojo, #c40100); color: var(--rojo, #c40100); font-weight: 700; }
.veh-chip.veh-asignada { background: #e9f6ec; border-color: #a6d8b4; font-weight: 600; }
.veh-chip.veh-rechazada { background: #f1f1f1; color: #777; text-decoration: line-through; }
.veh-add { background: none; border: 1px dashed var(--borde); border-radius: 8px; width: 100%; margin-top: 2px; cursor: pointer; color: #888; padding: 2px; }
.veh-add:hover { border-color: var(--marca-azul, #0f6cbd); color: var(--marca-azul, #0f6cbd); }

/* ── Grupo Técnicos: calendario propio y partes (11-09) ────────────────── */
.ptec-cal-marco { overflow-x: auto; }
.ptec-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  gap: 4px;
  min-width: 800px;
}
.ptec-cab { font-weight: 600; text-align: center; padding: 4px 0; color: var(--texto-suave, #666); }
.ptec-dia {
  border: 1px solid var(--borde, #ddd);
  border-radius: 6px;
  min-height: 84px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--fondo-panel, #fff);
}
.ptec-dia.vacio { border: none; background: transparent; }
.ptec-dia.hoy { border-color: #c40100; box-shadow: inset 0 0 0 1px #c40100; }
.ptec-num { font-size: 0.8rem; color: var(--texto-suave, #666); }
.ptec-chip {
  border: none;
  border-radius: 5px;
  padding: 2px 5px;
  font-size: 0.72rem;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  background: #fff3e0;
}
.ptec-chip.estado-realizado { background: #e6f4ea; }
.ptec-chip.estado-no_realizado { background: #fdecea; }
.ptec-chip.cita { background: #e8f0fe; }

/* ── Presupuestos y material (tablero de Soporte) ─────────────────────────── */
/* Las columnas van SIEMPRE en una fila, con scroll lateral si no caben. Estaba
   fijado en 4 y la quinta que añadió Jose se caía a una segunda fila, con el
   tablero partido: el número de columnas lo decide él, no el CSS. */
.presu-tablero {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr);
  gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 6px;
}
/* Alto mínimo para que una columna VACÍA siga siendo un destino cómodo al
   arrastrar: con solo el «Nada aquí» hay que acertar en una caja diminuta. */
.presu-columna {
  background: #f7f8fa; border: 1px solid var(--borde); border-radius: 10px; padding: 10px;
  min-height: 150px; display: flex; flex-direction: column;
}
.presu-columna .presu-lista { flex: 1; }
.presu-columna h3 { margin: 0 0 2px; font-size: 14px; }
.presu-suma { font-size: 12px; color: #5b6478; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.presu-lista { display: flex; flex-direction: column; gap: 8px; }
.presu-tarjeta {
  background: #fff; border: 1px solid var(--borde); border-left: 3px solid var(--rojo, #c40100);
  border-radius: 8px; padding: 9px 10px; cursor: pointer;
}
.presu-tarjeta:hover { background: #fffafa; }
.presu-tarjeta h4 { margin: 0 0 3px; font-size: 14px; }
.presu-cliente { font-size: 12.5px; color: #43506b; }
.presu-avance { font-size: 12px; color: #1f7a4d; margin-top: 4px; }
.presu-pie { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 7px; }
.presu-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.chip-presu { padding: 1px 8px; border-radius: 20px; font-size: 11.5px; background: #eef2f7; color: #43506b; }
.chip-presu.chip-holded { background: #e7f3ec; color: #1f7a4d; }
.presu-ficha { min-width: min(760px, 92vw); }
.presu-material { font-size: 12.5px; padding: 2px 4px; }
.presu-holded {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde);
}
@media (max-width: 900px) {
  /* En el móvil se sigue arrastrando el tablero de lado; una sola columna
     obligaría a bajar media pantalla para ver la siguiente fase. */
  .presu-tablero { grid-auto-columns: minmax(78vw, 1fr); }
}

/* Diálogos a pantalla completa: rellenar un presupuesto con sus líneas no cabe
   en una ventanita (pedido de Jose). En móvil van al 100 %; los botones quedan
   al final del scroll para que el teclado no los tape. */
.dialogo-lleno { width: 94vw; max-width: 94vw; height: 92dvh; max-height: 92dvh; }
.dialogo-lleno > * { max-height: 100%; overflow-y: auto; }
.campos-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* Desglose en vivo, con la misma forma en que se escribe a mano el presupuesto */
.presu-calculo {
  background: #f7f8fa; border: 1px solid var(--borde); border-radius: 8px;
  padding: 10px 12px; font-variant-numeric: tabular-nums; font-size: 13.5px;
}
.presu-calculo div { display: flex; justify-content: space-between; gap: 12px; }
.presu-calculo .total { font-weight: 700; border-top: 1px solid var(--borde); margin-top: 6px; padding-top: 6px; }
.presu-totales { margin-top: 10px; }
@media (max-width: 900px) {
  .dialogo-lleno { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .campos-3 { grid-template-columns: 1fr; }
}

/* Arrastrar en el tablero de presupuestos: tarjetas entre columnas y columnas
   entre sí. Se marca siempre QUÉ se mueve y DÓNDE va a caer; un arrastre sin
   respuesta visual parece que no funciona y la gente lo repite. */
.presu-tarjeta[draggable="true"] { cursor: grab; }
.presu-tarjeta.arrastrando { opacity: .45; cursor: grabbing; }
.presu-columna.sobre { background: #eef4ff; outline: 2px dashed #7d9ff5; outline-offset: -4px; }
.presu-columna.arrastrando { opacity: .6; }
.presu-col-cab { display: flex; align-items: center; justify-content: space-between; gap: 6px; cursor: grab; }
.presu-col-cab:active { cursor: grabbing; }
.presu-col-nombre { min-width: 0; }
/* Los botones de mover y quitar la columna, SIEMPRE a la vista. Estaban solo
   al pasar el ratón «para que el tablero se leyera mejor» y el resultado fue
   que Jose no encontraba cómo mover las columnas: esconder el control de una
   función es esconder la función. */
.presu-col-botones { white-space: nowrap; display: inline-flex; gap: 1px; }
.presu-col-botones .btn-icono { opacity: .5; transition: opacity .12s; }
.presu-columna:hover .presu-col-botones .btn-icono,
.presu-col-cab:focus-within .presu-col-botones .btn-icono { opacity: 1; }

/* Buscador predictivo de cliente. No hay lista desplegable con todos: el
   técnico encuentra al suyo escribiendo, pero no puede leerse la agenda
   entera (el corte de verdad está en el servidor). */
.presu-busca-cliente { position: relative; }
.presu-sugerencias {
  position: absolute; z-index: 30; left: 0; right: 0; max-height: 280px; overflow-y: auto;
  background: #fff; border: 1px solid var(--borde); border-radius: 8px; box-shadow: 0 8px 24px #0002;
}
.presu-sugerencia {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 8px 10px; font: inherit; cursor: pointer; border-bottom: 1px solid #f0f2f6;
}
.presu-sugerencia:last-child { border-bottom: 0; }
.presu-sugerencia:hover, .presu-sugerencia:focus { background: #eef4ff; outline: none; }
.presu-sugerencia .cif { color: #5b6478; font-size: 12.5px; }
.presu-sugerencia .solo-panel { color: #8a6d1a; font-size: 12px; }
.presu-elegido {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  padding: 6px 10px; background: #e7f3ec; border-radius: 8px; font-weight: 600;
}

/* Historial de cambios de un presupuesto (solo Admin) */
.presu-historial { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.presu-cambio { font-size: 13px; border-left: 3px solid var(--borde); padding: 4px 0 4px 9px; }
.presu-cambio .antes { color: #a3231f; text-decoration: line-through; }
.presu-cambio .ahora { color: #1f7a4d; font-weight: 600; }
.presu-cambio .quien { color: #5b6478; font-size: 12px; }

/* La primera sugerencia va resaltada: es la que se elige con Enter */
.presu-sugerencia.primera { background: #eef4ff; font-weight: 600; }
.presu-sin-resultados { padding: 8px 10px; margin: 0; }

/* Resumen de presupuestos en el Inicio */
.inicio-presu { display: flex; flex-direction: column; gap: 6px; }
.inicio-presu .fila {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 5px 8px; border-radius: 6px; background: #f7f8fa;
}
.inicio-presu .cuantos { font-weight: 700; font-variant-numeric: tabular-nums; }
.inicio-presu .importe { color: #43506b; font-variant-numeric: tabular-nums; }
/* Quién lo creó, en la tarjeta */
.presu-autor { font-size: 12px; color: #5b6478; margin-top: 3px; }

/* Colocar los bloques del Inicio a gusto de cada uno */
.inicio-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
#vista-inicio.modo-orden .panel[id] { cursor: grab; outline: 2px dashed var(--borde); outline-offset: 2px; }
#vista-inicio.modo-orden .panel[id]:active { cursor: grabbing; }
#vista-inicio .panel.arrastrando { opacity: .5; }
#vista-inicio .panel.orden-elegido { outline: 2px solid var(--rojo, #c40100); outline-offset: 2px; }
/* ── Agenda semanal de partes (12-09): la vista del que asigna ─────────── */
.ptec-sem-marco { overflow: auto; max-height: 72vh; border: 1px solid var(--borde, #ddd); border-radius: 8px; }
.ptec-sem {
  display: grid;
  grid-template-columns: 52px repeat(7, minmax(120px, 1fr));
  min-width: 940px;
  background: var(--fondo-panel, #fff);
}
.ptec-sem-esquina, .ptec-sem-cab { position: sticky; top: 0; z-index: 3; background: var(--fondo-panel, #fff); border-bottom: 2px solid var(--borde, #ddd); }
.ptec-sem-cab { font-weight: 600; text-align: center; padding: 6px 2px; }
.ptec-sem-cab.hoy { color: #c40100; }
.ptec-sem-gutter { font-size: 0.75rem; color: var(--texto-suave, #666); text-align: right; padding-right: 4px; }
.ptec-sem-hora { box-sizing: border-box; }
.ptec-sem-tododia { min-height: 30px; border-left: 1px solid var(--borde, #eee); border-bottom: 2px solid var(--borde, #ddd); display: flex; flex-direction: column; gap: 2px; padding: 2px; }
.ptec-sem-dia { position: relative; border-left: 1px solid var(--borde, #eee); }
.ptec-sem-dia.hoy { background: rgba(196, 1, 0, 0.03); }
.ptec-sem-linea { position: absolute; left: 0; right: 0; border-top: 1px solid var(--borde, #eee); pointer-events: none; }
.ptec-b {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  color: #fff;
  font-size: 0.7rem;
  line-height: 1.25;
  text-align: left;
  padding: 3px 5px;
  overflow: hidden;
  cursor: grab;
  display: flex;
  flex-direction: column;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  touch-action: none;
  z-index: 1;
}
.ptec-b.arrastrando { opacity: 0.75; z-index: 5; cursor: grabbing; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
.ptec-b-dia { position: static; min-height: 24px; }
.ptec-b span, .ptec-b strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptec-b .opcional { color: rgba(255, 255, 255, 0.85); }
.ptec-b-asa { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; cursor: ns-resize; }
.ptec-leyenda-chip { display: inline-flex; align-items: center; gap: 5px; margin-right: 12px; }
.ptec-leyenda-chip i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
#ptec-btn-mes.activo, #ptec-btn-semana.activo { outline: 2px solid #c40100; }

/* Bloques del calendario tecnicos@ que no son partes: se miran, no se tocan */
.ptec-b-ext { background: #6b7280; opacity: 0.8; cursor: default; pointer-events: none; border-style: dashed; }
#ptec-btn-dia.activo { outline: 2px solid #c40100; }
.ptec-tiempo { display: inline-flex; align-items: center; gap: 5px; }
.ptec-color { width: 26px; height: 20px; padding: 0; border: 1px solid var(--borde, #ccc); border-radius: 4px; cursor: pointer; }

/* Atajos de mano de obra y desplazamiento en la ficha del presupuesto */
.presu-servicios { align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.presu-horas { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; }
.presu-horas select { min-width: 88px; }

/* Presupuesto parado una semana en la misma columna */
.presu-tarjeta-parada { border-color: var(--rojo, #c40100); box-shadow: 0 0 0 2px rgba(196, 1, 0, .18); }
.presu-parado { color: var(--rojo, #c40100); font-weight: 600; font-size: .8rem; margin: 4px 0; }
.inicio-presu .parados { color: var(--rojo, #c40100); font-weight: 600; }

/* Cinta para instalar la app en el móvil */
.cinta-instalar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; background: #fff4f4; border-bottom: 1px solid var(--borde); }
.pasos-ios { margin: 8px 0 4px; padding-left: 20px; line-height: 1.7; }
.pasos-ios li { margin-bottom: 4px; }

/* ── Mapa de técnicos (12-09): teselas OSM + puntos por color ──────────── */
.ptec-mapa-marco { overflow: auto; border: 1px solid var(--borde, #ddd); border-radius: 8px; }
.ptec-mapa { position: relative; width: 1024px; height: 768px; background: #e8ecef; }
.ptec-tesela { position: absolute; width: 256px; height: 256px; }
.ptec-punto { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; z-index: 2; }
.ptec-punto i { width: 16px; height: 16px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.ptec-punto b { background: rgba(255,255,255,.92); border-radius: 4px; padding: 1px 5px; font-size: .72rem; margin-top: 3px; white-space: nowrap; }
.ptec-punto.apagado { opacity: .55; filter: grayscale(.6); }
.ptec-mapa-atrib { position: absolute; right: 4px; bottom: 2px; font-size: .68rem; background: rgba(255,255,255,.8); padding: 0 4px; border-radius: 3px; z-index: 3; }
#ptec-btn-mapa.activo { outline: 2px solid #c40100; }

/* Botón de dictado junto a cada campo de texto largo */
.btn-dictar { background: none; border: 1px solid var(--borde); border-radius: 6px; cursor: pointer; font-size: 1rem; padding: 2px 8px; margin-top: 4px; }
.btn-dictar.dictando { background: var(--rojo, #c40100); border-color: var(--rojo, #c40100); }

/* Pestañas escondidas a una cuenta desde Usuarios (cosmético, no es un permiso) */
#menu-panel .menu-item.escondida-a-mano { display: none; }

/* Casillas de «qué pestañas ve» en Usuarios → Editar */
.menu-casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 10px; }
.menu-casillas label { display: flex; align-items: center; gap: 6px; font-size: .85rem; }

/* Aviso de solicitudes de vehículo en el Inicio de quien las aprueba */
.veh-solicitud { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.veh-solicitud:last-child { border-bottom: 0; }
.veh-solicitud .quien { font-weight: 600; }
.veh-solicitud .detalle { font-size: .85rem; color: #555; }
.veh-solicitud .acciones-fila { display: flex; gap: 6px; }
.ptec-facturado { color: var(--verde, #1a7f37); font-weight: 600; font-size: .8rem; }
.ptec-ruta { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* Sección Mapas */
.mapa-caja { position: relative; width: 1024px; max-width: 100%; height: 768px; max-height: 70vh; overflow: hidden; border: 1px solid var(--borde); border-radius: 8px; margin-top: 10px; background: #eef1f4; }
.mapa-linea { position: absolute; left: 0; top: 0; pointer-events: none; }
.mapas-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.mapas-fila { display: flex; align-items: center; gap: 6px; border: 1px solid var(--borde); border-radius: 999px; padding: 3px 10px; font-size: .85rem; }
.mapas-fila.apagado { opacity: .55; }
.mapas-fila i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mapas-resumen { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0; }
.mapas-kpi { display: flex; align-items: center; gap: 8px; border: 1px solid var(--borde); border-radius: 8px; padding: 8px 12px; font-size: .85rem; }
.mapas-kpi .cifra { font-size: 1.5rem; font-weight: 700; }
.mapas-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 12px; }
.mapas-detalle { list-style: none; padding: 0; margin: 0; }
.mapas-detalle li { border-bottom: 1px solid var(--borde); padding: 6px 0; }
.mapas-detalle li:last-child { border-bottom: 0; }
.mapas-detalle .detalle { font-size: .85rem; color: #555; }

/* Distintivo fijo para quien está compartiendo su ubicación */
.marca-ubicacion { background: #fff4f4; border: 1px solid var(--rojo, #c40100); color: var(--rojo, #c40100); border-radius: 999px; padding: 2px 10px; font-size: .75rem; font-weight: 600; margin-left: 8px; }

/* Inventario del grupo Técnicos: un apartado por empresa partner */
.tecinv-grupo { margin-bottom: 14px; }
.tecinv-cantidad { white-space: nowrap; }
.tecinv-cantidad strong { display: inline-block; min-width: 2.2em; text-align: center; }

/* ── Jornada (aviso de las 17:00) y cierres automáticos (13-09) ────────── */
.jornada-tarjeta { border: 1px solid var(--borde, #ddd); border-left: 4px solid #3730a3; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: var(--fondo-panel, #fff); }
.jornada-tarjeta.completa { border-left-color: var(--verde, #1a7f37); }
.jornada-tarjeta.especial { border-left-color: #b45309; }
.jornada-alerta { color: #b91c1c; }
.jornada-tabla td { padding: 4px 8px; }
.jornada-roja td { background: rgba(185, 28, 28, 0.06); }
.cierres-simulacro { border: 1px dashed #b45309; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; }
#dialogo-cierres { width: min(860px, 96vw); }

/* ── Tu equipo en línea y conexiones del portal (13-09) ────────────────── */
.eq-tarjeta { border-left-color: #1a7f37; }
.eq-grupo { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.eq-persona { display: inline-flex; align-items: center; gap: 5px; }
.eq-punto { width: 10px; height: 10px; border-radius: 50%; background: #b8bec6; display: inline-block; }
.eq-punto.online { background: #1a7f37; box-shadow: 0 0 0 3px rgba(26, 127, 55, 0.18); }
.eq-clientes { border-top: 1px dashed var(--borde, #ddd); padding-top: 6px; }

/* ── 🗒️ Notas-Clientes (13-09) ────────────────────────────────────────── */
/* La gravedad se ve por la franja de color de la izquierda, no solo por el
   emoji: en una lista larga el color es lo que se lee de un vistazo. */
.aviso-cliente {
  border: 1px solid var(--borde, #ddd);
  border-left: 4px solid var(--borde, #ddd);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--fondo-panel, #fff);
}
.aviso-cliente header { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.aviso-cliente p { margin: 8px 0 0; }
.aviso-cliente .acciones { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aviso-respuesta-campo { flex: 1 1 260px; min-width: 0; }
.aviso-respuesta { background: rgba(0, 0, 0, 0.04); border-radius: 6px; padding: 8px 10px; }
.aviso-urgente { border-left-color: #c40100; }
.aviso-alta { border-left-color: #e07b00; }
.aviso-media { border-left-color: #d9b100; }
.aviso-baja { border-left-color: var(--borde, #ddd); }
/* Lo resuelto se apaga pero no se esconde: sirve de historial del cliente */
.aviso-resuelto { opacity: 0.62; }
.inicio-aviso-cliente { margin: 0 0 10px; }

/* Tarjetas del Inicio que llevan a su sección (14-09): se nota que se pueden
   pulsar, pero sin cambiar el cursor sobre el texto de dentro —lo que se lee
   se sigue pudiendo seleccionar—. */
.panel-navegable > h2 { cursor: pointer; }
.panel-navegable > h2::after { content: ' ›'; color: var(--texto-suave, #666); }
.panel-navegable:hover { border-color: var(--rojo, #c40100); }

/* Modo «Ordenar secciones» del portal del cliente (14-09). Mismo aspecto que
   el del Inicio del personal para que se reconozca: lo elegido en rojo y el
   resto con el borde discontinuo de «esto se puede mover». */
#vista-detalle.modo-orden > section.panel[id] { cursor: pointer; outline: 2px dashed var(--borde); outline-offset: 2px; }
#vista-detalle.modo-orden > section.panel[id].orden-elegido { outline: 2px solid var(--rojo, #c40100); box-shadow: 0 0 0 2px rgba(196, 1, 0, 0.18); }
/* Los ▲▼ de CADA sección (js/portal-orden.js). Van dentro de la propia sección
   para que no haya que «elegirla» antes: se pulsa el de la que se quiere mover.
   44 px de lado para que se acierten con el dedo — el portal se usa sobre todo
   desde el móvil—, y el botón apagado se ve apagado (la primera no sube y la
   última no baja). */
.portal-orden-mando { display: flex; gap: .4rem; justify-content: flex-end; margin-bottom: .6rem; }
.portal-orden-mando .btn { min-width: 44px; min-height: 44px; font-size: 1rem; line-height: 1; padding: 0; }
.portal-orden-mando .btn[disabled] { opacity: .35; cursor: not-allowed; }
/* Sección QUITADA del portal por su dueño: no se pinta. Dentro del modo de
   ordenar sí se ve, en gris y con el ✕ marcado, para poder devolverla. */
#vista-detalle > section.panel.portal-quitada { display: none; }
#vista-detalle.modo-orden > section.panel.portal-quitada { display: revert; opacity: .45; }
#portal-quitadas { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .5rem; }

/* Dónde se compra: las filas de proveedor+enlace de una línea de presupuesto
   (js/presupuestos.js). Hasta 10; el ✕ quita la suya. En móvil se apilan, que
   dos campos y un botón en 360 px no caben en una fila legible. */
/* Concepto arriba y el detalle justo debajo, como Holded (Jose, 15-09).
   ⚠️ En la misma fila del formulario conviven dos cuadros de texto con
   destinos OPUESTOS: «Descripción» se la lleva el cliente (PDF y Holded) y
   «Notas de la línea» no sale del panel. Si se parecieran, alguien acabaría
   escribiendo «no cobrar el desplazamiento» en el que sale. Por eso cada uno
   lleva su marca de destino, y no solo su nombre. */
.campo-visible-cliente,
.campo-solo-interno { border-left: 3px solid var(--borde); padding-left: .6rem; }
.campo-visible-cliente { border-left-color: var(--alerta); }
.campo-solo-interno { border-left-color: var(--borde); }
.destino { display: block; font-size: 11px; font-weight: 600; letter-spacing: .01em; margin: .1rem 0 .3rem; }
.destino-fuera { color: var(--alerta); }
.destino-dentro { color: var(--tinta-suave); }

/* Y lo mismo en la tabla de la ficha: la descripción con el texto normal y con
   sus saltos de línea (se ve igual que saldrá impresa), lo interno en gris. */
.presu-linea-desc { font-size: 13px; color: var(--tinta); white-space: pre-line; margin-top: 2px; }
.presu-linea-nota { font-style: italic; }
/* Dónde se compra: los sitios se separan con · y pueden ser hasta diez, así
   que la fila envuelve en vez de estirar la columna del concepto. */
.presu-linea-compra { display: flex; flex-wrap: wrap; gap: 0 .35rem; }

#presu-enlaces-zona .etiqueta-grupo { display: block; font-weight: 600; margin-bottom: .35rem; }
.presu-enlace-fila { display: flex; gap: .5rem; align-items: center; margin-bottom: .45rem; }
.presu-enlace-fila .presu-enlace-prov { flex: 0 1 36%; }
.presu-enlace-fila .presu-enlace-url { flex: 1 1 auto; min-width: 0; }
.presu-enlace-fila .btn { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0; }
@media (max-width: 700px) {
  .presu-enlace-fila { flex-wrap: wrap; }
  .presu-enlace-fila .presu-enlace-prov,
  .presu-enlace-fila .presu-enlace-url { flex: 1 1 100%; }
}