:root {
  --navy: #1F3A5F;
  --navy-dark: #16283F;
  --green: #4C9A2A;
  --green-light: #7CB342;
  --green-dark: #2E7D32;
  --accent: #2E7D32;
  --accent-2: #2E86C1;
  --bg: #F5F7F4;
  --card: #FFFFFF;
  --border: #E3E8E0;
  --text: #222222;
  --grey: #5B6472;
  --charcoal: #4A4A4A;
  --danger: #C0392B;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }

/* ---------- Login ---------- */
.pantalla-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--green-dark) 0%, var(--navy-dark) 55%, #12201C 100%);
  padding: 32px 20px;
}
#pantallaLogin[hidden] { display: none; }
.tarjeta-login {
  background: var(--card);
  border-radius: 18px;
  padding: 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.35);
}
.login-marca { text-align: center; margin-bottom: 24px; }
.login-logo-municipal {
  height: 76px; width: auto; margin: 0 auto 14px; display: block;
}
.login-marca h1 { margin: 0 0 4px; font-size: 22px; color: var(--navy-dark); }
.login-marca p { margin: 0; color: var(--grey); font-size: 12.5px; }

#formLogin label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--grey); font-weight: 600; }
#formLogin input {
  width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
}
#formLogin button {
  width: 100%; padding: 12px; border: none; border-radius: 8px;
  background: linear-gradient(135deg, var(--green-light) 0%, var(--green-dark) 100%);
  color: white; font-weight: 700; font-size: 14px; margin-top: 4px;
  box-shadow: 0 6px 16px rgba(46,125,50,0.3);
}
#formLogin button:hover { filter: brightness(0.95); }
.login-ayuda {
  margin-top: 18px; padding: 12px; background: var(--bg); border-radius: 8px;
  font-size: 12px; color: var(--grey); line-height: 1.6;
}
.login-ayuda code { background: #fff; border: 1px solid var(--border); padding: 1px 5px; border-radius: 4px; }
.mensaje-error { color: var(--danger); font-size: 13px; margin-top: 4px; }

/* ---------- Franja de establecimientos ---------- */
.franja-establecimientos { margin-top: 26px; text-align: center; max-width: 460px; width: 100%; }
.franja-titulo {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.8); font-weight: 700; margin-bottom: 10px;
}
.franja-logos {
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  background: rgba(255,255,255,0.95); padding: 14px 22px; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.franja-logos img { height: 38px; width: auto; object-fit: contain; }

.sidebar-establecimientos { padding: 14px 16px 18px; border-top: 1px solid var(--border); }
.sidebar-establecimientos .franja-titulo { color: var(--grey); text-align: left; }
.franja-logos-sidebar {
  background: transparent; box-shadow: none; padding: 0; justify-content: flex-start; gap: 12px;
}
.franja-logos-sidebar img { height: 24px; opacity: 0.85; filter: grayscale(10%); transition: opacity 0.15s, filter 0.15s; }
.franja-logos-sidebar img:hover { opacity: 1; filter: none; }

/* ---------- App shell ---------- */
.app { display: flex; height: 100vh; }
#app[hidden] { display: none; }

.sidebar {
  width: 250px; flex-shrink: 0; background: var(--card); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; height: 100vh;
}
.sidebar-marca {
  display: flex; align-items: center; gap: 10px; padding: 18px 16px; border-bottom: 1px solid var(--border);
}
.sidebar-logo { height: 40px; width: auto; flex-shrink: 0; }
.sidebar-marca-texto { line-height: 1.35; min-width: 0; }
.sidebar-marca-texto strong { display: block; font-size: 13.5px; color: var(--navy-dark); }
.sidebar-marca-texto span { display: block; font-size: 11px; color: var(--green-dark); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }

.nav-principal { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 3px; }
.nav-btn {
  display: flex; align-items: center; gap: 11px; text-align: left;
  border: none; background: transparent; padding: 10px 12px; border-radius: 10px;
  font-size: 13.5px; color: var(--charcoal); font-weight: 600; width: 100%;
}
.nav-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.nav-btn:hover { background: var(--bg); }
.nav-btn.activo {
  background: linear-gradient(135deg, var(--green-light) 0%, var(--green-dark) 100%);
  color: white; box-shadow: 0 6px 14px rgba(46,125,50,0.28);
}

.app-main { flex: 1; min-width: 0; height: 100vh; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: flex-end; gap: 20px;
  padding: 12px 26px; background: var(--card); border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.topbar-usuario { display: flex; align-items: center; gap: 12px; }
.usuario-info { text-align: right; line-height: 1.3; }
.usuario-info strong { display: block; font-size: 13px; }
.usuario-info span { font-size: 11px; color: var(--grey); }

.boton-primario, .boton-secundario {
  border-radius: 8px; padding: 9px 14px; font-size: 13px; font-weight: 600; border: 1px solid transparent;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.boton-primario { background: linear-gradient(135deg, var(--green-light) 0%, var(--green-dark) 100%); color: white; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(46,125,50,0.25); }
.boton-primario:hover { filter: brightness(0.96); }
.boton-secundario { background: white; color: var(--navy-dark); border: 1px solid var(--border); }
.boton-secundario:hover { background: var(--bg); }
.boton-icono { background: transparent; border: none; font-size: 16px; color: var(--grey); }

.contenido { flex: 1; overflow-y: auto; padding: 22px 26px 60px; }
.vista-header h2 { margin: 0 0 4px; color: var(--navy-dark); display: flex; align-items: center; gap: 10px; }
.vista-header p { margin: 0 0 16px; color: var(--grey); font-size: 13px; max-width: 780px; }
.pill {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--bg); color: var(--grey); padding: 3px 8px; border-radius: 20px; border: 1px solid var(--border);
}
.pill-inactivo { background: #FBE9E7; color: var(--danger); border-color: #F0C4BE; }
.usuario-inactivo { opacity: 0.55; }
.celda-acciones-usuario { display: flex; gap: 6px; flex-wrap: wrap; }
.celda-acciones-usuario button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Filtros calendario central ---------- */
.filtros-mayor { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filtro-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  padding: 6px 12px 6px 10px; max-width: 190px;
  border-radius: 999px; border: 1px solid var(--chip-border, var(--border));
  background: var(--chip-bg, white); color: var(--text);
  cursor: pointer; user-select: none;
  transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}
.filtro-chip:hover { background: var(--chip-bg-hover, var(--chip-bg, white)); transform: translateY(-1px); }
.filtro-chip input { margin: 0; flex: none; accent-color: var(--chip-dot, var(--accent)); }
.filtro-chip .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.filtro-chip .filtro-codigo { font-weight: 800; flex: none; }
.filtro-chip .filtro-nombre {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.85;
}
.filtro-chip.inactivo { opacity: 0.45; background: transparent; }

/* ---------- Semana ---------- */
.semana-nav { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.semana-rango { font-weight: 700; color: var(--navy-dark); font-size: 14px; }
.semana-grid { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 10px; }
.semana-dia { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); min-height: 160px; padding: 10px; }
.semana-dia-header { font-size: 12px; font-weight: 700; color: var(--navy-dark); margin-bottom: 8px; text-transform: capitalize; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.semana-dia-header.hoy { color: var(--accent); }
.evento-card {
  border-radius: 8px; padding: 7px 9px; margin-bottom: 6px; font-size: 12px; color: white; cursor: default;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.evento-card .hora { font-weight: 700; display: block; font-size: 11px; opacity: 0.9; }
.evento-card .titulo { display: block; font-weight: 600; margin-top: 1px; }
.evento-card .meta { display: block; font-size: 10px; opacity: 0.85; margin-top: 2px; }
.evento-card.tentativo { opacity: 0.65; border: 1px dashed rgba(255,255,255,0.7); }
.evento-card.cancelado { text-decoration: line-through; opacity: 0.5; }
.evento-card .acciones { margin-top: 5px; display: flex; gap: 6px; }
.evento-card .acciones button {
  background: rgba(255,255,255,0.25); border: none; color: white; border-radius: 5px; font-size: 10px; padding: 2px 6px;
}
.semana-dia-vacio { font-size: 11px; color: var(--grey); opacity: 0.6; }

/* ---------- Calendario Central: resúmenes de sala y movilización ---------- */
.mayor-resumenes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.mayor-resumen-bloque { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.mayor-resumen-bloque h3 { margin: 0 0 10px; font-size: 14px; color: var(--navy-dark); }
.lista-resumen { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.resumen-item {
  display: flex; flex-direction: column; gap: 1px; padding: 8px 10px;
  background: var(--bg); border-radius: 8px; border: 1px solid var(--border);
}
.resumen-item-fecha { font-size: 11px; font-weight: 700; color: var(--accent-2); text-transform: capitalize; }
.resumen-item-titulo { font-size: 13px; font-weight: 600; color: var(--navy-dark); }
.resumen-item-meta { font-size: 11.5px; color: var(--grey); }
.resumen-vacio { font-size: 12.5px; color: var(--grey); margin: 0; }

@media (max-width: 720px) {
  .mayor-resumenes { grid-template-columns: 1fr; }
}

/* ---------- Listas / tablas ---------- */
.lista-eventos { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.fila-evento {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
}
.fila-evento .franja { width: 6px; align-self: stretch; border-radius: 4px; }
.fila-evento-info { flex: 1; min-width: 220px; }
.fila-evento-info .titulo { font-weight: 700; color: var(--navy-dark); }
.fila-evento-info .sub { font-size: 12px; color: var(--grey); margin-top: 2px; }
.estado-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 12px; }
.estado-confirmado { background: #E3F3EC; color: #1E8449; }
.estado-tentativo { background: #FDF3E3; color: #B9770E; }
.estado-cancelado { background: #FBE9E7; color: var(--danger); }
.fila-evento-acciones { display: flex; gap: 6px; }
.fila-evento-acciones button { font-size: 12px; padding: 6px 10px; }

.tabla { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; }
.tabla th, .tabla td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.tabla th { background: var(--bg); color: var(--grey); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }

/* En pantallas angostas (celular/tablet) estas tablas suelen ser más anchas que la
   pantalla (muchas columnas). En vez de que la página entera se desplace hacia los
   lados, cada tabla se desplaza dentro de su propio contenedor. */
.tabla-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
.tabla-scroll .tabla { min-width: 560px; }

/* ---------- Archivos ---------- */
.archivos-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.archivos-toolbar label { font-size: 12px; color: var(--grey); font-weight: 600; }
.archivos-toolbar select { display: block; margin-top: 5px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); min-width: 260px; }
.form-inline { display: flex; gap: 8px; align-items: center; }
#formSubirArchivo[hidden] { display: none; }

/* ---------- Chat ---------- */
.chat-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; height: calc(100vh - 190px); }
.chat-canales { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow-y: auto; }
.chat-canales-header { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.chat-canales-header h3 { margin: 0 0 8px; font-size: 13px; color: var(--navy-dark); }
.chat-canales-header select { width: 100%; padding: 7px; border-radius: 6px; border: 1px solid var(--border); font-size: 12px; }
.lista-canales { padding: 6px; }
.canal-item { padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; margin-bottom: 2px; }
.canal-item:hover { background: var(--bg); }
.canal-item.activo { background: linear-gradient(135deg, var(--green-light) 0%, var(--green-dark) 100%); color: white; }
.canal-item .canal-nombre { font-weight: 600; }
.canal-item .canal-preview { font-size: 11px; color: var(--grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.canal-item.activo .canal-preview { color: #cfd9e8; }

.chat-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; }
.chat-panel-header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 700; color: var(--navy-dark); }
.chat-mensajes { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.mensaje { max-width: 70%; padding: 8px 12px; border-radius: 12px; background: var(--bg); font-size: 13px; }
.mensaje.propio { align-self: flex-end; background: var(--navy); color: white; }
.mensaje .autor { font-size: 10px; font-weight: 700; opacity: 0.7; display: block; margin-bottom: 2px; }
.mensaje .hora { font-size: 9px; opacity: 0.6; display: block; margin-top: 3px; }
.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
#formChat[hidden] { display: none; }
.chat-input input { flex: 1; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); }

/* ---------- Modal ---------- */
.modal-fondo {
  position: fixed; inset: 0; background: rgba(15, 23, 35, 0.5);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
#modalFondo[hidden] { display: none; }
.modal { background: white; border-radius: 14px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-header h3 { margin: 0; font-size: 16px; color: var(--navy-dark); }
.modal-cuerpo { padding: 18px 20px 22px; }
.modal-cuerpo label { display: block; font-size: 12px; font-weight: 700; color: var(--grey); margin-bottom: 12px; }
.modal-cuerpo input, .modal-cuerpo select, .modal-cuerpo textarea {
  width: 100%; margin-top: 5px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px;
}
.modal-cuerpo .fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-cuerpo .acciones-modal { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.modal-error { color: var(--danger); font-size: 12px; margin: -6px 0 12px; }
.modal-aviso {
  background: #FFF6E5; border: 1px solid #F0D9A0; color: var(--charcoal);
  font-size: 12.5px; padding: 10px 12px; border-radius: 8px; margin: -4px 0 14px;
}

/* ---------- Subtabs (Mi Departamento: Actividades / Tablero) ---------- */
.subtabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.subtab-btn {
  background: none; border: none; padding: 9px 4px; margin-right: 18px; font-size: 13.5px; font-weight: 700;
  color: var(--grey); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subtab-btn:hover { color: var(--navy-dark); }
.subtab-btn.activo { color: var(--green-dark); border-bottom-color: var(--green-dark); }
.subtab-panel[hidden] { display: none; }

/* ---------- Tablero de tareas (tipo Microsoft Planner) ---------- */
.tablero-toolbar { margin-bottom: 10px; }
.tablero-ayuda { font-size: 12.5px; color: var(--grey); margin: 0 0 12px; }
.tablero { display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; padding-bottom: 16px; }

.bucket-columna {
  flex: 0 0 268px; width: 268px; background: #EEF1EC; border-radius: 12px;
  display: flex; flex-direction: column; max-height: 74vh;
}
.bucket-columna.arrastrando-sobre { background: #DCE7D6; outline: 2px dashed var(--green-dark); outline-offset: -2px; }
.bucket-header { display: flex; align-items: center; gap: 8px; padding: 12px 10px 8px 14px; }
.bucket-header h3 { flex: 1; margin: 0; font-size: 13.5px; font-weight: 800; color: var(--navy-dark); cursor: default; }
.bucket-header .bucket-contador { font-size: 11px; font-weight: 700; color: var(--grey); background: white; border-radius: 10px; padding: 1px 8px; }
.bucket-menu-btn { background: none; border: none; color: var(--grey); font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 6px; }
.bucket-menu-btn:hover { background: rgba(0,0,0,0.06); }

.bucket-tarjetas { flex: 1; overflow-y: auto; padding: 2px 10px; display: flex; flex-direction: column; gap: 8px; min-height: 40px; }

.btn-agregar-tarea {
  display: block; width: calc(100% - 20px); margin: 6px 10px 12px; text-align: left; background: none; border: none;
  color: var(--grey); font-size: 12.5px; font-weight: 700; padding: 8px 6px; border-radius: 8px;
}
.btn-agregar-tarea:hover { background: rgba(0,0,0,0.06); color: var(--navy-dark); }

.bucket-nueva { flex: 0 0 220px; }
.btn-nueva-columna {
  width: 100%; background: rgba(0,0,0,0.03); border: 1px dashed var(--border); border-radius: 12px;
  padding: 14px; font-size: 13px; font-weight: 700; color: var(--grey); min-height: 52px;
}
.btn-nueva-columna:hover { background: rgba(0,0,0,0.06); color: var(--navy-dark); }

.tarea-card {
  background: white; border-radius: 9px; padding: 10px 11px 9px; box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  cursor: grab; border-left: 4px solid var(--border); position: relative;
}
.tarea-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.tarea-card.arrastrando { opacity: 0.4; }
.tarea-card.completada { opacity: 0.65; }
.tarea-card.completada .tarea-titulo { text-decoration: line-through; }

.tarea-card.prioridad-urgente { border-left-color: var(--danger); }
.tarea-card.prioridad-importante { border-left-color: #D68910; }
.tarea-card.prioridad-media { border-left-color: var(--accent-2); }
.tarea-card.prioridad-baja { border-left-color: var(--green); }

.tarea-etiquetas { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }
.tarea-prioridad-pill {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
  padding: 2px 7px; border-radius: 8px; color: white;
}
.tarea-prioridad-pill.prioridad-urgente { background: var(--danger); }
.tarea-prioridad-pill.prioridad-importante { background: #D68910; }
.tarea-prioridad-pill.prioridad-media { background: var(--accent-2); }
.tarea-prioridad-pill.prioridad-baja { background: var(--green); }

.tarea-check {
  position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--border); background: white; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: transparent; padding: 0;
}
.tarea-check:hover { border-color: var(--green-dark); }
.tarea-card.completada .tarea-check { background: var(--green-dark); border-color: var(--green-dark); color: white; }

/* Botón alternativo a arrastrar-y-soltar (necesario en celulares/tablets, donde el
   Drag and Drop nativo del navegador no funciona con el dedo): abre un menú para
   elegir a qué columna mover la tarjeta. Visible siempre, no solo en mobile, para
   que también sirva como atajo rápido en escritorio. */
.tarea-mover-btn {
  position: absolute; top: 6px; right: 30px; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--border); background: white; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--grey); padding: 0; line-height: 1;
}
.tarea-mover-btn:hover { border-color: var(--accent-2); color: var(--accent-2); }

.tarea-titulo { font-size: 13px; font-weight: 600; color: var(--text); padding-right: 44px; display: block; margin-bottom: 4px; }
.tarea-descripcion-icono { font-size: 11px; color: var(--grey); }

.tarea-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 11px; color: var(--grey); }
.tarea-fecha { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 8px; background: var(--bg); }
.tarea-fecha.vencida { background: #FBE3E0; color: var(--danger); font-weight: 700; }
.tarea-checklist-mini { display: inline-flex; align-items: center; gap: 3px; }

.tarea-avatares { margin-left: auto; display: flex; }
.tarea-avatar {
  width: 21px; height: 21px; border-radius: 50%; background: var(--navy); color: white; font-size: 9.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid white; margin-left: -6px;
}
.tarea-avatar:first-child { margin-left: 0; }

.bucket-vacio { font-size: 12px; color: var(--grey); text-align: center; padding: 14px 6px; }

/* Formulario de tarea */
.checklist-editor { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.checklist-fila { display: flex; align-items: center; gap: 6px; }
.checklist-fila input[type="text"] { flex: 1; margin-top: 0; }
.checklist-fila input[type="checkbox"] { width: auto; margin: 0; flex: none; }
.checklist-fila .quitar-item { flex: none; background: none; border: none; color: var(--danger); font-size: 15px; padding: 2px 6px; }
.btn-agregar-item { align-self: flex-start; background: none; border: none; color: var(--green-dark); font-weight: 700; font-size: 12px; padding: 4px 0; }
.asignados-lista { display: flex; flex-direction: column; gap: 6px; max-height: 130px; overflow-y: auto; border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; margin-top: 5px; }
.asignados-lista label { display: flex !important; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 0 !important; }
.asignados-lista input { width: auto !important; margin: 0 !important; flex: none; }

/* ---------- Menú flotante (opciones de columna del tablero) ---------- */
.menu-flotante {
  position: absolute; z-index: 60; background: white; border-radius: 10px; min-width: 190px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2); border: 1px solid var(--border); padding: 6px; display: flex; flex-direction: column;
}
.menu-flotante button {
  background: none; border: none; text-align: left; font-size: 13px; padding: 8px 10px; border-radius: 7px; color: var(--text);
}
.menu-flotante button:hover { background: var(--bg); }
.menu-flotante button.peligro { color: var(--danger); }

/* ---------- Vista de Proyecto (tipo Microsoft Project) ---------- */
.proyecto-resumen {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
}
.proyecto-stat {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px;
  min-width: 120px;
}
.proyecto-stat .valor { font-size: 19px; font-weight: 800; color: var(--navy-dark); display: block; }
.proyecto-stat .etiqueta { font-size: 11px; color: var(--grey); text-transform: uppercase; letter-spacing: 0.02em; }

.proyecto-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.proyecto-leyenda { display: flex; gap: 16px; font-size: 12px; color: var(--grey); }
.leyenda-item { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-swatch { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.leyenda-swatch.leyenda-critica { background: var(--danger); }
.leyenda-swatch.leyenda-hito { background: var(--navy-dark); transform: rotate(45deg); border-radius: 2px; width: 9px; height: 9px; }

.proyecto-alerta {
  background: #FBE3E0; color: var(--danger); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 10px;
}

.gantt-contenedor {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: auto; max-height: 74vh;
}
.gantt-grid { display: flex; width: max-content; min-width: 100%; }

.gantt-tabla { position: sticky; left: 0; z-index: 3; background: var(--card); border-right: 1px solid var(--border); flex: 0 0 auto; }
.gantt-tabla-header, .gantt-tabla-fila {
  display: grid; grid-template-columns: 30px 1fr 62px 62px 40px 56px 76px; gap: 0;
  align-items: center; height: 38px; border-bottom: 1px solid var(--border);
}
.gantt-tabla-header {
  position: sticky; top: 0; z-index: 4; background: #F3F5F1; font-size: 10px; font-weight: 800;
  text-transform: uppercase; color: var(--grey); letter-spacing: 0.02em; height: 34px;
}
.gantt-tabla-header > span, .gantt-tabla-fila > span { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-tabla-fila { font-size: 12px; cursor: pointer; }
.gantt-tabla-fila:hover { background: var(--bg); }
.gantt-tabla-fila.fila-critica { background: #FDEEEC; }
.gantt-tabla-fila.fila-critica:hover { background: #FBE3E0; }
.gantt-tabla-fila .col-titulo { font-weight: 600; color: var(--text); }
.gantt-tabla-fila .col-hito { color: var(--navy-dark); }
.gantt-tabla-fila .col-num { color: var(--grey); font-weight: 700; }

.gantt-timeline { position: relative; flex: 0 0 auto; }
.gantt-timeline-header { position: sticky; top: 0; z-index: 2; display: flex; background: #F3F5F1; height: 34px; border-bottom: 1px solid var(--border); }
.gantt-dia-header {
  flex: none; font-size: 9.5px; color: var(--grey); text-align: center; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center; line-height: 1.2;
}
.gantt-dia-header.finde { background: #EAEDE7; }
.gantt-dia-header .mes { font-weight: 800; color: var(--navy-dark); font-size: 9px; }

.gantt-filas { position: relative; }
.gantt-fila-fondo { display: flex; height: 38px; border-bottom: 1px solid var(--border); }
.gantt-celda-fondo { flex: none; border-right: 1px solid #EEF1EC; }
.gantt-celda-fondo.finde { background: #F7F8F5; }

.gantt-barra {
  position: absolute; height: 20px; border-radius: 5px; background: var(--accent-2);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15); cursor: pointer; overflow: hidden;
}
.gantt-barra .gantt-progreso { position: absolute; inset: 0; background: rgba(0,0,0,0.28); border-radius: 5px 0 0 5px; }
.gantt-barra .gantt-barra-texto {
  position: absolute; left: 6px; top: 0; height: 100%; display: flex; align-items: center;
  font-size: 10px; color: white; font-weight: 700; white-space: nowrap; text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.gantt-barra.prioridad-urgente { background: var(--danger); }
.gantt-barra.prioridad-importante { background: #D68910; }
.gantt-barra.prioridad-media { background: var(--accent-2); }
.gantt-barra.prioridad-baja { background: var(--green); }
.gantt-barra.critica { outline: 2px solid var(--danger); outline-offset: 1px; }

.gantt-hito {
  position: absolute; width: 16px; height: 16px; background: var(--navy-dark); transform: rotate(45deg);
  border-radius: 3px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.gantt-hito.critica { background: var(--danger); }

.gantt-svg { position: absolute; inset: 0; pointer-events: none; overflow: visible; }

.gantt-sin-fechas { padding: 14px 16px; font-size: 12.5px; color: var(--grey); border-top: 1px solid var(--border); }
.gantt-sin-fechas strong { color: var(--text); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--navy-dark); color: white; padding: 11px 18px; border-radius: 30px;
  font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); z-index: 100;
}
.toast.error { background: var(--danger); }

@media (max-width: 720px) {
  .chat-layout { grid-template-columns: 1fr; height: auto; }
  /* Con una sola columna, cada panel necesita su propia altura acotada — si no,
     .chat-mensajes (que depende de flex:1 para su scroll interno) pierde el límite
     y toda la página termina siendo muy larga. */
  .chat-canales { max-height: 180px; }
  .chat-panel { height: 62vh; min-height: 320px; }
  .semana-grid { grid-template-columns: repeat(7, 220px); }
}

@media (max-width: 860px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); }
  .sidebar-marca { border-bottom: none; border-right: 1px solid var(--border); }
  .nav-principal { flex-direction: row; overflow-x: auto; padding: 8px; }
  .nav-btn { width: auto; white-space: nowrap; padding: 12px 14px; }
  .nav-label { display: none; }
  .nav-icon { font-size: 18px; }
  .sidebar-establecimientos { display: none; }
  .app-main { height: auto; }
  .contenido { padding: 16px 14px 50px; }
  .topbar { padding: 10px 14px; gap: 10px 14px; }
}

/* ---------- Celulares (retrato angosto) ---------- */
@media (max-width: 480px) {
  .modal-cuerpo .fila-2 { grid-template-columns: 1fr; }
  .tarjeta-login { padding: 26px 20px; }
  .franja-logos img { height: 30px; }
  .archivos-toolbar select { min-width: 0; width: 100%; }
  .fila-evento { padding: 10px 12px; }
  .bucket-columna { flex: 0 0 82vw; width: 82vw; }
  .proyecto-stat { min-width: 0; flex: 1 1 45%; }
  /* Objetivos táctiles más grandes: botones e íconos de acción pequeños son
     difíciles de tocar con precisión en pantallas de celular. */
  .boton-primario, .boton-secundario { padding: 10px 14px; }
  .tarea-check, .tarea-mover-btn { width: 26px; height: 26px; }
  .bucket-menu-btn { padding: 6px 8px; }
}