/* ── SIDEBAR ── */
  aside {
    width: 64px;
    background: #ece9e4;
    margin: 16px 0 16px 16px;
    border: 1px solid #e5e1da;
    border-radius: 14px;
    box-shadow: 0 20px 45px -20px rgba(26,26,26,0.16);
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    padding: 12px 6px;
    gap: 4px;
    transition: width 0.2s ease;
    overflow: hidden;
    position: relative;
  }

  aside.expanded {
    width: 260px;
    align-items: flex-start;
    padding: 12px 10px;
  }

  /* Logo area */
  .sidebar-logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0 16px;
    flex-shrink: 0;
  }

  aside.expanded .sidebar-logo {
    justify-content: space-between;
    padding: 4px 2px 16px;
  }

  .logo-img {
    height: 26px;
    width: auto;
    object-fit: contain;
  }

  .logo-link { display: none; align-items: center; text-decoration: none; color: inherit; }
  aside.expanded .logo-link { display: flex; }

  .collapse-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    color: #888;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
  }

  aside.expanded .collapse-btn { display: flex; }
  .collapse-btn:hover { background: #ece9e4; color: #1a1a1a; }
  .collapse-btn svg { width: 15px; height: 15px; }

  /* Collapsed-state logo/expand toggle (crossfades on hover) */
  .collapse-toggle-mini {
    width: 100%;
    height: 32px;
    border-radius: 7px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
  }

  aside.expanded .collapse-toggle-mini { display: none; }
  .collapse-toggle-mini:hover { background: #ece9e4; }

  .collapse-toggle-mini .mini-logo,
  .collapse-toggle-mini .mini-expand {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease;
  }

  .collapse-toggle-mini .mini-logo { opacity: 1; }
  .collapse-toggle-mini .mini-logo-svg { height: 16px; width: auto; display: block; fill: #1a1a1a; }

  .collapse-toggle-mini .mini-expand { opacity: 0; color: #888; }
  .collapse-toggle-mini .mini-expand svg { width: 15px; height: 15px; }
  .collapse-toggle-mini:hover .mini-logo { opacity: 0; }
  .collapse-toggle-mini:hover .mini-expand { opacity: 1; }

  /* ── ACCESO ── */
  #authView {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    background: #ffffff;
    font-family: 'Inter', sans-serif;
  }
  #authView.show { display: grid; grid-template-columns: 1fr 1fr; padding: 20px; gap: 20px; }

  /* ── Ubicación de la consulta ── */
  .dir-fondo {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(26,26,26,0.45);
    display: none; align-items: center; justify-content: center; padding: 24px;
  }
  .dir-fondo.show { display: flex; }
  .dir-caja {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 16px; max-width: 470px; width: 100%;
    padding: 28px 28px 24px;
    box-shadow: 0 20px 60px rgba(26,26,26,0.18);
  }
  .dir-caja h3 {
    font-family: 'Geist', sans-serif;
    font-size: 20px; font-weight: 500; letter-spacing: -0.4px;
    color: var(--black); margin: 0 0 4px;
  }
  .dir-caja > p {
    font-size: 13.5px; color: #8a857e; margin: 0 0 20px; line-height: 1.55;
  }
  .dir-caja > p.dir-alcance { margin: -14px 0 18px; font-size: 12.5px; color: var(--accent); }
  .dir-pestanas { display: flex; gap: 6px; margin-bottom: 16px; }
  .dir-pestana {
    flex: 1; padding: 8px 10px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--white);
    font-family: 'Inter', sans-serif; font-size: 13px; color: #6f6a62;
    cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s;
  }
  .dir-pestana.on { background: #e6ebfa; border-color: var(--accent); color: var(--accent); font-weight: 500; }
  .dir-panel { display: none; flex-direction: column; gap: 9px; }
  .dir-panel.on { display: flex; }
  .dir-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .dir-fila.via { grid-template-columns: 84px 1fr 74px; }
  .dir-input {
    width: 100%; padding: 10px 12px; border: 1px solid var(--border);
    border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13.5px;
    color: var(--black); background: var(--white); box-sizing: border-box;
  }
  .dir-input:focus { outline: none; border-color: var(--accent); }
  .dir-estado { font-size: 12.5px; margin-top: 12px; min-height: 17px; color: #8a857e; }
  .dir-estado.err { color: #a83c22; }
  .dir-ok {
    margin-top: 14px; padding: 12px 14px; border-radius: 9px;
    background: #f5f3f0; border: 1px solid var(--border); display: none;
  }
  .dir-ok.show { display: block; }
  .dir-ok b { display: block; font-size: 13.5px; color: var(--black); margin-bottom: 2px; }
  .dir-ok span { font-size: 12px; color: #8a857e; }
  .dir-pie { display: flex; gap: 9px; margin-top: 18px; }
  .dir-btn {
    flex: 1; padding: 11px 14px; border-radius: 9px; border: none;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer;
  }
  .dir-btn.sec { background: var(--white); border: 1px solid var(--border); color: #6f6a62; }
  .dir-btn.pri { background: var(--black); color: #fff; }
  .dir-btn.pri:disabled { background: #c9c4bc; cursor: default; }
  /* Quitar la ubicación de ESTE chat: un enlace discreto bajo los botones, y solo cuando el chat tiene una propia. */
  .dir-quitar {
    display: none; margin: 14px auto 0; padding: 4px 8px;
    background: none; border: none; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 500;
    color: #b3412e; text-decoration: underline; text-underline-offset: 2px;
  }
  .dir-quitar.show { display: block; }
  .dir-quitar:hover { color: #8f2f1f; }

  /* ── Aviso de preguntas agotadas ── */
  .lim-fondo {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(26, 26, 26, 0.45);
    display: none; align-items: center; justify-content: center;
    padding: 24px;
  }
  .lim-fondo.show { display: flex; }
  .lim-caja {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    max-width: 420px; width: 100%;
    padding: 34px 34px 28px;
    text-align: left;
    box-shadow: 0 20px 60px rgba(26, 26, 26, 0.18);
  }
  .lim-marca {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--accent);
    background: #e6ebfa;
    border-radius: 5px; padding: 4px 9px;
    margin-bottom: 18px;
  }
  .lim-caja h3 {
    font-family: 'Geist', sans-serif;
    font-size: 23px; font-weight: 500; line-height: 1.2;
    letter-spacing: -0.5px; color: var(--black);
    margin: 0 0 12px;
  }
  .lim-caja p {
    font-size: 14.5px; line-height: 1.6; color: #7d7871; margin: 0 0 22px;
  }
  .lim-caja p strong { color: var(--black); font-weight: 600; }
  .lim-btn {
    width: 100%; padding: 13px 16px;
    background: var(--black); color: #fff;
    border: none; border-radius: 9px;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px; font-weight: 500;
    cursor: pointer;
    transition: background 0.12s;
  }
  .lim-btn:hover { background: #333; }

  /* Panel de marca: tarjeta flotante en crema, con la retícula dentro.
     Sobre crema la retícula sí se lee; sobre blanco desaparecía. */
  .auth-marca {
    position: relative;
    background: #f5f3f0;
    border-radius: 18px;
    display: flex;
    align-items: flex-end;
    /* Más aire abajo que arriba: sube el bloque de texto sin mover la retícula,
       que va en absolute y no se entera del padding. */
    padding: 48px 48px 84px;
    overflow: hidden;
  }
  .auth-grid { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
  .auth-marca::after {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(ellipse at center, transparent 0%, transparent 70%, #f5f3f0 100%),
      linear-gradient(to bottom, #f5f3f0 0%, transparent 18%, transparent 72%, #f5f3f0 96%);
  }
  .auth-marca-texto { position: relative; z-index: 1; max-width: 420px; }
  .auth-marca-logo { height: 26px; width: auto; display: block; margin-bottom: 24px; }
  .auth-marca-texto h2 {
    font-family: 'Geist', sans-serif;
    font-size: 34px; font-weight: 500; line-height: 1.15; letter-spacing: -1px;
    color: #1a1a1a;
  }
  .auth-marca-texto h2 span { color: var(--accent); }
  .auth-marca-texto p {
    font-size: 14px; color: #999691; line-height: 1.6; margin-top: 16px; max-width: 380px;
  }

  /* Panel del formulario */
  .auth-panel {
    display: flex; align-items: center; justify-content: center;
    padding: 24px; overflow-y: auto;
  }

  .auth-card {
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    overflow: hidden;
    margin: auto;
  }

  @media (max-width: 900px) {
    #authView.show { grid-template-columns: 1fr; padding: 0; gap: 0; }
    .auth-marca { display: none; }
  }

  .auth-body { padding: 8px 0 24px; text-align: left; }
  /* Con la tarjeta de marca visible el logo ya sale ahí: el del formulario
     solo aparece en móvil, cuando la tarjeta se oculta. */
  .auth-logo { height: 24px; width: auto; display: none; margin: 0 0 30px; }
  @media (max-width: 900px) { .auth-logo { display: block; } }

  .auth-card h1 {
    font-family: 'Geist', sans-serif;
    font-size: 27px; font-weight: 500; letter-spacing: -0.7px; color: #1a1a1a;
    margin-bottom: 22px;
  }
  .auth-sub { font-size: 13.5px; color: #999691; line-height: 1.55; margin-top: 10px; }


  .auth-label {
    display: flex; align-items: baseline; justify-content: space-between;
    text-align: left;
    font-size: 13px; font-weight: 600; color: #1a1a1a; margin: 0 0 7px;
  }
  .auth-label span { font-size: 12px; font-weight: 400; color: #999691; }

  .auth-input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #e0dcd6;
    border-radius: 9px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
    background: #fff;
    outline: none;
    transition: border-color 0.12s;
  }
  .auth-input::placeholder { color: #b5b0a8; }
  .auth-input:focus { border-color: #1a1a1a; }
  .auth-input.error { border-color: #c2410c; }

  .auth-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }

  /* Teléfono con prefijo */
  .auth-tel { display: flex; gap: 8px; }
  .auth-prefijo {
    display: flex; align-items: center;
    padding: 0 12px;
    border: 1px solid #e0dcd6; border-radius: 9px;
    font-size: 14px; color: #4a4a4a; background: #faf9f7;
    white-space: nowrap; flex-shrink: 0;
  }
  .auth-tel .auth-input { flex: 1; min-width: 0; }

  .auth-check-legal {
    display: flex; align-items: flex-start; gap: 10px;
    text-align: left; margin-top: 18px;
    font-size: 13px; color: #4a4a4a; line-height: 1.5; cursor: pointer;
  }
  .auth-check-legal input {
    width: 16px; height: 16px; margin-top: 1px;
    accent-color: #1a1a1a; cursor: pointer; flex-shrink: 0;
  }

  .auth-error {
    display: none; text-align: left;
    font-size: 12.5px; color: #c2410c; margin-top: 8px;
  }
  .auth-error.show { display: block; }

  .auth-btn, .auth-btn-ghost {
    width: 100%;
    margin-top: 22px;
    padding: 13px 18px;
    border-radius: 9px;
    font-size: 14px; font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
  }
  .auth-btn { background: #2a2a2a; border: 1px solid #2a2a2a; color: #fff; }
  .auth-btn:hover { background: #1a1a1a; }
  .auth-btn[disabled] { opacity: 0.55; cursor: default; }

  .auth-btn-ghost { background: #fff; border: 1px solid #e0dcd6; color: #4a4a4a; font-weight: 500; }
  .auth-btn-ghost:hover { background: #f4f1ed; border-color: #d3cec5; }

  /* Pies de la tarjeta */
  .auth-cambio-top {
    position: absolute; top: 34px; right: 40px; z-index: 2;
    font-size: 13.5px; color: #999691;
  }
  .auth-cambio-top button {
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 13.5px; font-weight: 600; color: #1a1a1a;
    text-decoration: underline;
  }

  .auth-legal-pie {
    margin-top: 26px;
    font-size: 11.5px; color: #b5b0a8; line-height: 1.6; text-align: left;
  }
  .auth-legal-pie a { color: #999691; text-decoration: underline; }
  .auth-legal-pie a:hover { color: #1a1a1a; }
  /* Los dos enlaces de la casilla tienen que verse como enlaces: son los textos que se aceptan. */
  .auth-check-legal a { color: #1a1a1a; text-decoration: underline; text-underline-offset: 2px; }

  .auth-check {
    width: 46px; height: 46px; margin: 0 0 20px;
    border-radius: 50%; background: #ece9e4;
    display: flex; align-items: center; justify-content: center;
    color: #1a1a1a;
  }
  .auth-check svg { width: 22px; height: 22px; }

  /* Va dentro de la tarjeta de marca, así que se coloca a juego con su
     padding y con un tono que funciona igual sobre crema y sobre blanco. */
  .auth-back {
    position: absolute; top: 38px; left: 40px; z-index: 2;
    background: transparent; border: none; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 13px; color: #4a4a4a;
    padding: 7px 11px; border-radius: 7px;
  }
  .auth-back:hover { background: rgba(26,26,26,0.07); color: #1a1a1a; }

  /* Este bloque va DESPUÉS de las reglas base a propósito: con la misma
     especificidad gana la última, y antes quedaba anulado. */
  @media (max-width: 900px) {
    .auth-back { top: 16px; left: 12px; }
    .auth-cambio-top { top: 52px; right: 16px; }
  }

  @media (max-width: 480px) {
    /* Hueco arriba para que la tarjeta no pase por debajo de "Volver" */
    .auth-panel { padding: 92px 20px 28px; align-items: flex-start; }
    .auth-body { padding: 8px 0 20px; }
    .auth-fila { grid-template-columns: 1fr; gap: 0; }
    .auth-fila > div + div { margin-top: 18px; }
  }

  /* Salir, en el pie del sidebar */
  .sidebar-logout {
    background: transparent; border: none; cursor: pointer;
    color: #999691; padding: 5px; display: flex; border-radius: 6px;
    flex-shrink: 0; transition: background 0.12s, color 0.12s;
  }
  .sidebar-logout:hover { background: #e0dcd6; color: #1a1a1a; }
  .sidebar-logout svg { width: 14px; height: 14px; }
  aside:not(.expanded) .sidebar-logout { display: none; }

  /* ── VISTA PROYECTOS (panel principal, no modal) ── */
  .projects-view {
    display: none;
    flex: 1;
    overflow-y: auto;
    font-family: 'Inter', sans-serif;
  }

  .projects-view.show { display: block; }

  .pv-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 32px 40px;
  }

  .pv-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #e5e1da;
  }
  .pv-foot-fin { justify-content: flex-end; }      /* un solo boton («Continuar sin proyecto»): a la derecha, donde estaba. Va DESPUES de .pv-foot: misma especificidad, gana el ultimo */

  /* ── Detalle de proyecto ── */
  .pd-inner { max-width: 900px; margin: 0 auto; padding: 32px 32px 48px; }

  .pd-head { display: flex; align-items: center; gap: 10px; }
  .pd-head h3 {
    font-size: 20px; font-weight: 700; color: #1a1a1a; letter-spacing: -0.3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  /* Solo la medida. El color de estas carpetas lo pone la regla agrupada de
     arriba, y dejar aqui un stroke propio la pisaba por venir despues. */
  .pd-folder { width: 18px; height: 18px; flex-shrink: 0; }

  /* Las carpetas que representan UN PROYECTO van rellenas, no en linea: una
     carpeta hueca se lee como sitio vacio, y estas siempre tienen algo
     dentro. Relleno y trazo del mismo azul, para que sea una forma solida y
     no un contorno con color por dentro.
     El relleno va en CSS y no en el atributo del SVG a proposito: el marcado
     lleva fill="none" escrito en cada copia del icono --y hay cinco, dos de
     ellas generadas por JS-- asi que una regla que las tape todas es un sitio
     donde mirar en vez de cinco. Gana al atributo porque una regla de hoja de
     estilo pesa mas que un atributo de presentacion.
     Y van en DOS azules, que es lo que hace la jerarquia legible: la del menu
     --la seccion entera-- en el azul fuerte, y la de cada proyecto suelto en
     uno mas claro. Sin esa diferencia, once carpetas del mismo azul en la
     misma columna pesan todas igual y no se ve cual manda. */
  .nav-folder {
    fill: var(--accent);
    stroke: var(--accent);
  }

  /* Sin trazo, solo relleno. El trazo iba del mismo color que el relleno pero
     se dibuja centrado en el contorno, o sea medio pixel por fuera: donde se
     solapaban salia un borde mas denso y la carpeta parecia tener reborde.
     Quitandolo la forma queda plana y algo mas pequeña, que es lo que hace
     que la del menu --que si lo conserva-- se lea como la que manda. */
  .crumb-project svg,
  .sb-proj svg,
  .pd-folder,
  .pm-folder {
    fill: var(--accent-claro);
    stroke: none;
  }

  .pd-icon-btn {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; padding: 0;
    border-radius: 7px; cursor: pointer; color: #888; flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
  }
  .pd-icon-btn:hover { background: #ece9e4; color: #1a1a1a; }
  .pd-icon-btn svg { width: 16px; height: 16px; }

  .pd-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

  .pd-new-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    background: var(--accent); border: 1px solid var(--accent); color: #fff;
    border-radius: 8px;
    font-size: 13.5px; font-weight: 500; font-family: 'Inter', sans-serif;
    cursor: pointer; white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
  }
  .pd-new-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .pd-new-btn svg { width: 14px; height: 14px; }

  /* Pestañas */
  .pd-tabs {
    display: inline-flex; gap: 2px;
    background: #ece9e4;
    border-radius: 10px;
    padding: 4px;
    margin: 22px 0 24px;
  }

  .pd-tab {
    padding: 8px 16px;
    background: transparent; border: none;
    border-radius: 7px;
    font-size: 13.5px; font-weight: 500; color: #4a4a4a;
    font-family: 'Inter', sans-serif;
    cursor: pointer; white-space: nowrap;
    transition: background 0.12s, color 0.12s;
  }
  .pd-tab:hover { color: #1a1a1a; }
  .pd-tab.active { background: #fff; color: #1a1a1a; box-shadow: 0 1px 3px rgba(26,26,26,0.09); }

  /* Zona de subida */
  .pd-drop {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px;
    border: 1.5px dashed #d3cec5;
    border-radius: 10px;
    background: #faf9f7;
    transition: border-color 0.12s, background 0.12s;
  }
  .pd-drop.dragover { border-color: var(--accent); background: var(--accent-suave); }

  .pd-addfiles {
    padding: 9px 15px;
    background: #fff; border: 1px solid #e0dcd6;
    border-radius: 8px;
    font-size: 13px; font-weight: 500; color: #1a1a1a;
    font-family: 'Inter', sans-serif;
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s;
  }
  .pd-addfiles:hover { background: #f4f1ed; border-color: #d3cec5; }

  .pd-drop-text { font-size: 14px; color: #4a4a4a; }
  /* Subir archivos no entra en la prueba gratuita: los botones se ven, pero no se pueden pulsar (ver archivosBloqueados). */
  /* Una funcion de los planes de pago NO es un boton roto: se ve destacada, con candado y etiqueta, y al pulsarla se abre la ventana de venta (abrirPagoAviso). */
  .toolbar-btn.bloqueado { color: var(--accent); background: var(--accent-suave); border-color: var(--accent-borde); cursor: pointer; }
  .toolbar-btn.bloqueado:hover { background: #e3eafb; color: var(--accent-hover); }
  .pd-addfiles.bloqueado { color: var(--accent); background: var(--accent-suave); border-color: var(--accent-borde); cursor: pointer; }
  .pd-addfiles.bloqueado:hover { background: #e3eafb; border-color: var(--accent); }
  .pd-drop.bloqueado { background: linear-gradient(135deg, #f4f7ff, #eef2fc); border-color: var(--accent-borde); border-style: solid; }
  .pd-drop.bloqueado .pd-drop-text { color: var(--accent-hover); font-weight: 500; }
  .etq-pago { display: none; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px 2px 6px; border-radius: 999px; background: linear-gradient(135deg, #1e40af, #4f46e5); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
  .etq-pago svg { width: 9px; height: 9px; }
  .bloqueado .etq-pago { display: inline-flex; }
  .pago-enlace { display: none; margin-left: auto; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
  .pago-enlace:hover { text-decoration: underline; }
  .pd-drop.bloqueado .pago-enlace { display: inline; }
  .pd-drop.bloqueado .pd-usage { display: none; }
  /* La ventana de venta y el boton de solicitar precio */
  .lim-marca svg { width: 12px; height: 12px; }
  .pago-lista { list-style: none; margin: 0 0 22px; padding: 0; }
  .pago-lista li { position: relative; padding: 0 0 10px 22px; font-size: 14px; line-height: 1.5; color: #7d7871; }
  .pago-lista li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 10px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
  .pago-lista li strong { color: var(--black); font-weight: 600; }
  .pago-caja .pago-correo { font-size: 12.5px; margin: 14px 0 0; text-align: center; }
  a.lim-btn { display: block; box-sizing: border-box; text-align: center; text-decoration: none; }
  .lim-cta { background: linear-gradient(135deg, #1e40af, #4f46e5); }
  .lim-cta:hover { background: linear-gradient(135deg, #1e3a8a, #4338ca); }
  .lim-sec { background: transparent; color: #7d7871; margin-top: 8px; }
  .lim-sec:hover { background: #f3f1ed; }
  .pd-usage { margin-left: auto; font-size: 12.5px; color: #999691; white-space: nowrap; }

  /* Lista de documentos */
  .pd-doc {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e5e1da;
    border-radius: 9px;
    background: #fff;
    margin-top: 8px;
  }
  .pd-doc svg { width: 16px; height: 16px; stroke: #b5b0a8; flex-shrink: 0; }
  .pd-doc-name { flex: 1; min-width: 0; font-size: 13.5px; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pd-doc-size { font-size: 12px; color: #999691; flex-shrink: 0; }
  .pd-doc-del {
    background: transparent; border: none; cursor: pointer; color: #b5b0a8;
    padding: 4px; display: flex; border-radius: 5px; flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
  }
  .pd-doc-del:hover { background: #fde8dc; color: #c2410c; }
  .pd-doc-del svg { width: 14px; height: 14px; stroke: currentColor; }

  /* Estados vacíos */
  .pd-empty { text-align: center; padding: 70px 20px; }
  .pd-empty h4 { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; }
  .pd-empty p { font-size: 13.5px; color: #999691; line-height: 1.6; max-width: 360px; margin: 0 auto; }

  /* Conversaciones del proyecto */
  .pd-chat {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px;
    border: 1px solid #e5e1da;
    border-radius: 9px;
    background: #fff;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
  }
  .pd-chat:hover { border-color: #d3cec5; background: #fffdfb; }
  .pd-chat svg { width: 15px; height: 15px; stroke: #b5b0a8; flex-shrink: 0; }
  .pd-chat-title { flex: 1; min-width: 0; font-size: 13.5px; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Instrucciones */
  .pd-hint { font-size: 13.5px; color: #999691; margin-bottom: 14px; line-height: 1.55; }

  .pd-textarea {
    width: 100%;
    padding: 14px;
    border: 1px solid #e0dcd6;
    border-radius: 9px;
    font-size: 13.5px;
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
    background: #fff;
    outline: none;
    resize: vertical;
    line-height: 1.65;
    transition: border-color 0.12s;
  }
  .pd-textarea::placeholder { color: #b5b0a8; }
  .pd-textarea:focus { border-color: var(--accent); }

  /* ── Ubicación / catastro ── */
  .loc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .loc-hint { font-size: 12.5px; color: #999691; line-height: 1.5; }
  .loc-badge {
    font-size: 9px; letter-spacing: 0.8px; text-transform: uppercase; font-weight: 600;
    color: #999691; background: #ece9e4; border-radius: 5px; padding: 3px 7px;
    white-space: nowrap; flex-shrink: 0;
  }

  .loc-search { display: flex; gap: 8px; }
  .loc-search .pm-input { flex: 1; min-width: 0; letter-spacing: 0.3px; }
  .loc-search button { flex-shrink: 0; }

  .loc-or {
    display: flex; align-items: center; gap: 10px;
    margin: 12px 0 10px; color: #b5b0a8; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.6px;
  }
  .loc-or::before, .loc-or::after { content: ''; flex: 1; height: 1px; background: #e5e1da; }

  .loc-addr { margin-top: 0; }
  .loc-addr-grid { display: grid; grid-template-columns: 1fr 1fr 92px 1fr 70px auto; gap: 8px; }
  .loc-addr-grid .pm-input { min-width: 0; padding: 9px 10px; font-size: 12.5px; }
  .loc-addr-grid select.pm-input { appearance: none; cursor: pointer; }
  .loc-addr-grid button { white-space: nowrap; padding: 9px 14px; }

  .loc-status { font-size: 12.5px; min-height: 0; }
  .loc-status:not(:empty) { margin-top: 10px; }
  .loc-status.err { color: #c2410c; }
  .loc-status.load { color: #999691; }

  .loc-result { margin-top: 12px; }

  .loc-card {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px;
    border: 1px solid var(--accent-borde); background: var(--accent-suave);
    border-radius: 9px 9px 0 0;
    border-bottom: none;
  }
  .loc-card > svg { width: 17px; height: 17px; stroke: var(--accent); flex-shrink: 0; }
  .loc-card-text { flex: 1; min-width: 0; }
  .loc-card-addr {
    font-size: 13px; font-weight: 600; color: #1a1a1a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .loc-card-rc {
    font-size: 11.5px; color: #999691; margin-top: 1px; letter-spacing: 0.3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .loc-save { flex-shrink: 0; padding: 7px 14px; font-size: 12.5px; }
  .loc-clear {
    background: transparent; border: none; cursor: pointer; color: var(--accent);
    padding: 5px; display: flex; border-radius: 6px; flex-shrink: 0;
  }
  .loc-clear:hover { background: var(--accent-borde); }
  .loc-clear svg { width: 14px; height: 14px; }

  .loc-card[hidden] { display: none; }

  .loc-map {
    height: 400px;
    border: 1px solid #e5e1da; border-radius: 9px; overflow: hidden;
    background: #ece9e4;
  }
  /* Con parcela seleccionada, tarjeta y mapa forman un solo bloque */
  .loc-card:not([hidden]) + .loc-map { border-color: var(--accent-borde); border-radius: 0 0 9px 9px; }
  .loc-maphint { font-size: 11.5px; color: #b5b0a8; margin-top: 7px; }

  @media (max-width: 760px) {
    .loc-search { flex-wrap: wrap; }
    .loc-search .pm-input { flex: 1 1 100%; }
    .loc-addr-grid { grid-template-columns: 1fr 1fr; }
    .loc-addr-grid button { grid-column: 1 / -1; }
    .loc-map { height: 300px; }
    .loc-save { padding: 7px 10px; }
  }

  .pd-instr-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; }
  /* El contador a la izquierda y lo demas a la derecha: la fila entera va
     con justify-content flex-end, asi que el hueco lo abre este margen. */
  .pd-contador { font-size: 12.5px; color: #999691; margin-right: auto;
                 font-variant-numeric: tabular-nums; }
  .pd-contador.cerca { color: #c2410c; }
  .pd-saved { font-size: 12.5px; color: #999691; opacity: 0; transition: opacity 0.2s; }
  .pd-saved.show { opacity: 1; }

  @media (max-width: 640px) {
    .pd-inner { padding: 22px 18px 40px; }
    .pd-new-btn span, .pd-drop-text { display: none; }
    .pd-tabs { display: flex; width: 100%; }
    .pd-tab { flex: 1; padding: 8px 6px; font-size: 12.5px; }
    .pd-drop { flex-wrap: wrap; gap: 10px; }
    .pd-usage { margin-left: 0; }
  }

  .pm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .pm-head h3 { font-size: 24px; font-weight: 700; color: #1a1a1a; letter-spacing: -0.5px; line-height: 1.2; }

  .pm-close {
    width: 30px; height: 30px; border: none; background: transparent; cursor: pointer;
    border-radius: 7px; color: #888; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background 0.12s, color 0.12s;
  }
  .pm-close:hover { background: #ece9e4; color: #1a1a1a; }
  .pm-close svg { width: 17px; height: 17px; }

  .pm-sub { font-size: 13.5px; color: #999691; margin-top: 8px; line-height: 1.55; max-width: 92%; }

  /* Buscador + nuevo proyecto */
  .pm-toolbar { display: flex; gap: 10px; margin-top: 22px; }

  .pm-search { position: relative; flex: 1; min-width: 0; }
  .pm-search svg {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; stroke: #b5b0a8; pointer-events: none;
  }
  .pm-search input {
    width: 100%;
    padding: 11px 12px 11px 35px;
    border: 1px solid #e0dcd6;
    border-radius: 8px;
    font-size: 13.5px;
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
    background: #fff;
    outline: none;
    transition: border-color 0.12s;
  }
  .pm-search input::placeholder { color: #b5b0a8; }
  .pm-search input:focus { border-color: var(--accent); }

  /* Los botones del selector siguen el sistema que ya usa la web publica --
     .btn-ghost, .btn-primary negro y .btn-accent azul -- en vez de tener el
     suyo propio. Antes eran tres definiciones distintas para el mismo papel,
     con radios de 7 y 8 px y tres tamanos.
       azul   = empezar algo nuevo   (Nuevo proyecto, Nueva conversacion)
       negro  = confirmar un formulario (Crear proyecto)
       ghost  = lo secundario y la salida (Gestionar, Continuar sin proyecto) */
  .pm-new-btn,
  .pm-manage,
  .pm-btn-continue {
    display: flex; align-items: center; gap: 7px;
    padding: 11px 18px;
    border: none;
    border-radius: 7px;
    font-size: 13.5px; font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
    transition: all 0.12s;
  }

  /* Azul lo que empieza algo, negro lo demas. Sin grises: los secundarios
     iban en blanco con borde y se leian apagados al lado de los otros. */
  .pm-new-btn { background: var(--accent); color: #fff; }
  .pm-new-btn:hover { background: var(--accent-hover); }

  .pm-manage,
  .pm-btn-continue { background: var(--black); color: #fff; }
  .pm-manage:hover,
  .pm-btn-continue:hover { background: #333; }

  .pm-new-btn svg { width: 14px; height: 14px; }

  .pm-list-label {
    font-size: 9.5px; letter-spacing: 0.9px; text-transform: uppercase;
    color: #b5b0a8; font-weight: 600; margin: 22px 0 8px;
  }

  /* Fila de proyecto */
  .pm-project {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 14px;
    background: #fff;
    border: 1px solid #e5e1da;
    border-radius: 9px;
    cursor: pointer;
    margin-bottom: 7px;
    transition: border-color 0.12s, background 0.12s;
  }
  .pm-project:hover { border-color: #d3cec5; background: #fffdfb; }
  .pm-project.active { border-color: var(--accent); }

  .pm-folder { width: 19px; height: 19px; flex-shrink: 0; }   /* color: regla agrupada */

  .pm-project-text { flex: 1; min-width: 0; }
  .pm-project-name {
    font-size: 14px; font-weight: 600; color: #1a1a1a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pm-project-desc {
    font-size: 12.5px; color: #999691; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pm-project-desc.pm-desc-empty { font-style: italic; color: #b5b0a8; }

  .pm-files {
    font-size: 9.5px; letter-spacing: 0.7px; text-transform: uppercase;
    color: #b5b0a8; font-weight: 500; flex-shrink: 0;
  }

  /* Va dentro de la tarjeta del proyecto, asi que se encoge */
  .pm-manage { padding: 7px 13px; gap: 6px; font-size: 12.5px; }
  .pm-manage svg { width: 13px; height: 13px; }

  .pm-none { padding: 22px 4px; font-size: 13px; color: #999691; text-align: center; }


  /* "Continuar sin proyecto" es la salida, no lo que quieres que hagan: iba
     relleno y era lo mas llamativo de la pantalla, por encima de las propias
     tarjetas de proyecto. Ghost, para que no compita con ellas. */

  /* Formulario crear / editar */
  .pm-label {
    display: block;
    font-size: 12.5px; font-weight: 500; color: #4a4a4a;
    margin: 20px 0 7px;
  }
  .pm-opt { color: #b5b0a8; font-weight: 400; }

  .pm-input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #e0dcd6;
    border-radius: 8px;
    font-size: 13.5px;
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
    outline: none;
    background: #fff;
    transition: border-color 0.12s;
  }
  .pm-input::placeholder { color: #b5b0a8; }
  .pm-input:focus { border-color: var(--accent); }
  .pm-input.error { border-color: #c2410c; }

  .pm-error { display: none; font-size: 11.5px; color: #c2410c; margin-top: 6px; }
  .pm-error.show { display: block; }

  .pm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-left: auto; }

  .pm-btn-ghost, .pm-btn-primary, .pm-btn-danger {
    padding: 10px 17px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
  }

  .pm-btn-ghost { background: var(--black); border: none; color: #fff; }
  .pm-btn-ghost:hover { background: #333; }

  .pm-btn-primary { background: var(--black); border: none; color: #fff; }
  .pm-btn-primary:hover { background: #333; }

  .pm-btn-danger { background: transparent; border: 1px solid transparent; color: #c2410c; display: none; }
  .pm-btn-danger:hover { background: #fde8dc; }
  .pm-btn-danger.show { display: block; }

  @media (max-width: 640px) {
    .pm-toolbar { flex-direction: column; }
    .pm-new-btn { justify-content: center; }
    .pv-foot { flex-direction: column; align-items: stretch; }
    .pv-inner { padding: 28px 18px 32px; }
    .pm-btn-continue { width: 100%; }
    .pm-files, .pm-manage span { display: none; }
    .pm-head h3 { font-size: 20px; }
  }

  /* Nav */
  .nav { width: 100%; display: flex; flex-direction: column; gap: 2px; }

  .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 7px;
    cursor: pointer;
    color: #4a4a4a;
    transition: all 0.12s;
    white-space: nowrap;
    width: 100%;
    justify-content: center;
  }

  aside.expanded .nav-item { justify-content: flex-start; padding: 8px 10px; }
  .nav-item:hover { background: #ece9e4; color: #1a1a1a; }
  .nav-item.active { background: #ece9e4; color: #1a1a1a; font-weight: 500; }
  .nav-item svg { width: 15px; height: 15px; flex-shrink: 0; }
  .nav-label { display: none; font-size: 13.5px; }
  aside.expanded .nav-label { display: block; }

  /* Section */
  .section-label {
    padding: 12px 10px 4px;
    font-size: 9px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #999691;
    font-weight: 500;
    display: none;
    width: 100%;
  }

  aside.expanded .section-label { display: block; }

  /* La lista debe ceñirse al ancho del sidebar para que los títulos
     largos se recorten con puntos suspensivos en vez de desbordar. */
  #sessionList, #listaAnclados { width: 100%; min-width: 0; overflow-y: auto; }

  /* ── Secciones del sidebar (Conversaciones / Documentos / Instrucciones) ── */
  #sbSections { display: none; width: 100%; min-width: 0; flex: 1; overflow-y: auto; }
  aside.expanded #sbSections { display: block; }

  .sb-section { width: 100%; }

  /* Aire entre una seccion y la SIGUIENTE, para que "Nuevo proyecto" no
     quede pegado al rotulo de Anclado. Va en el hermano y no en el padding
     de .sb-head porque ese padding tambien separa cada titulo de su propia
     lista: tocarlo ahi habria movido las dos distancias a la vez, y la de
     dentro ya estaba bien. Y al ir en el hermano, la primera seccion no se
     despega de arriba. */
  .sb-section + .sb-section { margin-top: 18px; }
  .sb-head {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 10px 4px;
    cursor: pointer;
    user-select: none;
  }

  .sb-title {
    font-size: 9px; letter-spacing: 0.8px; text-transform: uppercase;
    color: #999691; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .sb-chev {
    width: 12px; height: 12px; stroke: #b5b0a8; margin-left: auto; flex-shrink: 0;
    transition: transform 0.15s ease;
  }
  .sb-section:not(.open) .sb-chev { transform: rotate(-90deg); }

  .sb-body { overflow: hidden; }
  .sb-section:not(.open) .sb-body { display: none; }

  .sb-add {
    display: flex; align-items: center; gap: 7px;
    width: 100%;
    padding: 7px 10px;
    margin-top: 2px;
    background: transparent; border: none;
    border-radius: 6px;
    font-size: 12.5px; color: #999691;
    font-family: 'Inter', sans-serif;
    cursor: pointer; text-align: left;
    transition: background 0.12s, color 0.12s;
  }
  .sb-add:hover { background: #ece9e4; color: #1a1a1a; }
  .sb-add svg { width: 13px; height: 13px; flex-shrink: 0; }

  .sb-empty { padding: 4px 10px 6px; font-size: 12px; color: #b5b0a8; }

  /* Acceso rápido a proyectos */
  .sb-proj {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12.5px; color: #4a4a4a;
    cursor: pointer; min-width: 0;
    transition: background 0.12s, color 0.12s;
  }
  .sb-proj:hover { background: #ece9e4; color: #1a1a1a; }
  .sb-proj.active { background: #ece9e4; color: #1a1a1a; font-weight: 500; }
  .sb-proj svg { width: 13px; height: 13px; flex-shrink: 0; }   /* color: regla agrupada */
  .sb-proj-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Buscador del historial */
  .session-item {
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: #4a4a4a;
    transition: all 0.12s;
    font-size: 12.5px;
    width: 100%;
    display: none;
    align-items: center;
    gap: 4px;
  }

  /* El recorte va en el titulo, no en la fila: la fila es flex para que el
     boton de borrar se quede a la derecha sin que el texto lo empuje. */
  .session-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  aside.expanded .session-item { display: flex; }
  .session-item:hover { background: #ece9e4; color: #1a1a1a; }
  .session-item.active { background: #ece9e4; color: #1a1a1a; font-weight: 500; }

  /* Lo que está abierto AHORA, como un sombreado. El fondo de la barra es #ece9e4 y estas reglas usaban ese mismo color: el fondo del elemento activo no se
     veía y solo cambiaba el tono del texto, así que no había forma de saber en qué chat estabas. Un tono más oscuro que la barra, sin filo ni marca de color.
     .en-chat es el proyecto cuyo chat tienes abierto: sus conversaciones no salen en la lista de la barra, y sin esto no se marcaba nada. */
  .nav-item.active, .sb-proj.active, .sb-proj.en-chat, .session-item.active {
    background: #dfdbd2;
    color: #1a1a1a;
    font-weight: 500;
  }

  /* Esta conversación tiene su ubicación guardada: un pin pequeño junto al título (el detalle va en el title). */
  .session-ubic { display: flex; flex-shrink: 0; color: #9a948a; }
  .session-ubic svg { width: 11px; height: 11px; }
  .session-item.active .session-ubic { color: inherit; }

  /* Los tres puntos. Aparecen al pasar por encima -- en una lista larga, un
     icono fijo por fila es ruido -- y se quedan visibles mientras su menu
     esta abierto, o desaparecerian al mover el raton hacia el. */
  .session-mas {
    flex-shrink: 0;
    display: none;
    padding: 2px 3px;
    border: none;
    background: transparent;
    color: #8a8a8a;
    cursor: pointer;
    border-radius: 4px;
    line-height: 0;
  }
  .session-item:hover .session-mas,
  .session-item:focus-within .session-mas,
  .session-item.menu-abierto .session-mas { display: block; }
  .session-mas svg { width: 14px; height: 14px; }
  .session-mas:hover, .session-item.menu-abierto .session-mas { background: #ded9d2; color: #1a1a1a; }

  /* El alfiler de una conversacion fijada: siempre visible, y ocupa el mismo
     sitio que los tres puntos para que la fila no baile al pasar por encima. */
  .session-pin { flex-shrink: 0; line-height: 0; color: #8a8a8a; }
  .session-pin svg { width: 11px; height: 11px; }
  .session-item:hover .session-pin,
  .session-item.menu-abierto .session-pin,
  .pd-chat:hover .session-pin { display: none; }

  /* El campo de renombrar, dentro de la propia fila. Hereda el cuerpo y el
     color del titulo que sustituye para que no parezca otra cosa: lo unico
     que cambia es que ahora se puede escribir. */
  .session-item.renombrando { background: #ece9e4; }
  .session-nombre {
    width: 100%;
    border: none;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: #1a1a1a;
    padding: 0;
    outline: none;
  }

  /* El aviso de "referencia copiada". Abajo y al centro, encima de todo y
     sin poder recibir el raton: aparece, se lee y se va; no es un dialogo. */
  .aviso-breve {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(8px);
    z-index: 2000;
    background: #1a1a1a;
    color: #fff;
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 8px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .aviso-breve.se-ve { opacity: 1; transform: translateX(-50%) translateY(0); }

  @media (prefers-reduced-motion: reduce) {
    .aviso-breve { transition: none; }
  }

  /* El menu va pegado al <body> y no dentro de la fila: la barra lateral
     tiene scroll y overflow oculto, asi que dentro se cortaria. */
  .menu-chat {
    position: fixed;
    z-index: 1000;
    min-width: 168px;
    background: #fff;
    border: 1px solid #e0dcd5;
    border-radius: 9px;
    box-shadow: 0 6px 22px rgba(0,0,0,.11);
    padding: 5px;
  }
  .menu-chat button {
    display: flex; align-items: center; gap: 9px;
    width: 100%;
    padding: 8px 9px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #1a1a1a;
    cursor: pointer;
    text-align: left;
  }
  .menu-chat button:hover { background: #f2efea; }
  .menu-chat button svg { width: 14px; height: 14px; stroke: #6a6a6a; flex-shrink: 0; }
  .menu-chat button.peligro { color: #c2410c; }
  .menu-chat button.peligro:hover { background: #fde8dc; }
  .menu-chat button.peligro svg { stroke: #c2410c; }

  /* Aqui vivia el paso de confirmacion: la fila se convertia en "¿Eliminar
     X?" con Eliminar y Cancelar. Se quito -- el menu ya obliga a abrirlo y a
     elegir una opcion escrita, y confirmar despues eran dos pasos para lo
     mismo. Lo que queda de aquello es que borrar SIGUE sin tener vuelta
     atras: se lleva los mensajes de la base de datos y no hay papelera. */

  /* Borrar desde la lista de conversaciones de un proyecto */
  .pd-chat-del {
    flex-shrink: 0; display: none; padding: 3px; border: none;
    background: transparent; color: #8a8a8a; cursor: pointer;
    border-radius: 5px; line-height: 0;
  }
  .pd-chat:hover .pd-chat-del { display: block; }
  .pd-chat-del svg { width: 15px; height: 15px; stroke: currentColor; }
  .pd-chat-del:hover { background: #f3ddd2; color: #c2410c; }

  /* Footer */
  .sidebar-footer {
    margin-top: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 8px;
    border-top: 1px solid #e5e1da;
  }

  aside.expanded .sidebar-footer { justify-content: space-between; padding: 10px 2px 2px; }

  .user-info { display: flex; align-items: center; gap: 8px; overflow: hidden; }

  .avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
  }

  .uname { font-size: 13px; color: #1a1a1a; white-space: nowrap; display: none; }
  aside.expanded .uname { display: block; }
  .lang { font-size: 11px; color: #888; white-space: nowrap; display: none; }
  aside.expanded .lang { display: block; }

  /* Migas de pan del chat dentro de un proyecto */
  .chat-crumb {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 40px 0;
    flex-shrink: 0;
    font-size: 12.5px;
    min-width: 0;
  }

  .crumb-project {
    display: flex; align-items: center; gap: 6px;
    background: transparent; border: none; padding: 4px 8px;
    border-radius: 6px; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 500;
    color: #4a4a4a; max-width: 260px;
    transition: background 0.12s, color 0.12s;
  }
  .crumb-project:hover { background: #ece9e4; color: #1a1a1a; }
  .crumb-project svg { width: 13px; height: 13px; flex-shrink: 0; }   /* color: regla agrupada */
  .crumb-project span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .crumb-sep { width: 12px; height: 12px; stroke: #b5b0a8; flex-shrink: 0; }

  .crumb-current {
    color: #999691; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  @media (max-width: 760px) {
    .chat-crumb { padding: 10px 16px 0; }
    .crumb-project { max-width: 150px; }
  }

  /* ── MAIN ── */
  main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--fondo-chat);
    overflow: hidden;
  }

  /* Top bar */
  .topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 20px;
    gap: 8px;
  }

  .topbar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e0dcd6;
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 12.5px;
    color: #888;
    cursor: pointer;
    transition: all 0.12s;
  }

  .topbar-btn:hover { background: #f0ede8; color: #1a1a1a; }
  .topbar-btn svg { width: 13px; height: 13px; }

  /* Chat */
  .chat {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  /* Empty state */
  .empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
  }

  .empty h2 {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
    color: #1a1a1a;
  }

  .empty p { font-size: 14px; color: #999; margin-bottom: 32px; }

  /* Dentro de la caja solo van el texto y la flecha, en una fila. Ubicacion y
     Subir salen fuera y cuelgan debajo -- ver .input-extras. Al quedarse de
     una linea, la caja admite ya la capsula entera, que es la forma de la
     referencia; con la barra de botones dentro no cabia. */

  /* UNA caja, dos sitios: centrada al empezar y abajo durante la conversacion.
     Estaban definidas por separado y se habian separado de verdad -- 760 px de
     ancho contra 820, y hasta distinto alto de texto -- asi que al escribir el
     primer mensaje la caja pegaba un salto. Van en la misma regla para que no
     puedan volver a irse cada una por su lado. */
  .input-center,
  .input-wrap {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;   /* la flecha se queda abajo si el texto crece */
    gap: 6px;
    padding-right: 8px;
    background: #fff;
    border: 1px solid #e0dcd6;
    /* 16 y no 10 como el boton: la caja mide 54 de alto y el boton 32, asi que
       con el mismo numero la esquina se veria mas cerrada que la de su propio
       boton. Este es el radio con el que las dos curvas se leen iguales. */
    border-radius: 16px;
    /* Grande y muy suave, no pegada: mucho desenfoque y poca opacidad, asi que
       no parece una sombra sino que la caja esta iluminada. */
    box-shadow: 0 10px 50px rgba(0,0,0,0.07);
  }

  .input-center textarea,
  .input-wrap textarea {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 13.5px;
    color: #1a1a1a;
    background: transparent;
    resize: none;
    padding: 16px 4px 16px 18px;
    min-height: 54px;
    max-height: 160px;
    line-height: 1.5;
  }

  /* Los dos botones, sueltos bajo la caja: sin fondo ni borde propios, para
     que cuelguen del aire en vez de formar una segunda caja. */
  .input-extras {
    display: flex;
    gap: 6px;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 10px 16px 0;
  }


  .input-center textarea::placeholder { color: #bbb; }

  .input-toolbar {
    display: flex;
    align-items: center;
    padding: 8px 12px 10px;
    gap: 6px;
    border-top: 1px solid #f0ede8;
  }

  /* Messages */
  .messages {
    padding: 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
  }

  /* User message */
  /* El turno propio: una burbuja del ancho de su texto, pegada a la derecha.
     Era una tarjeta con borde que ocupaba la columna entera, igual de ancha
     dijeras "hola" que un parrafo, y con el mismo peso visual que la respuesta.
     En una conversacion lo que distingue tu turno es DONDE esta, no que lleve
     marco: alineado a la derecha ya no hace falta el borde. */
  .msg-user {
    width: fit-content;
    max-width: 76%;
    margin: 0 0 22px auto;   /* auto a la izquierda = pegado a la derecha */
    /* Azul flojo y no el crema de antes: el crema es el color del fondo de
       toda la app, asi que la burbuja era el fondo con esquinas. Este es el
       mismo --accent-suave que ya usan el proyecto activo y las citas, o sea
       que no entra un azul nuevo en la paleta. */
    background: var(--accent-suave);
    border-radius: 16px 16px 4px 16px;   /* la esquina de abajo, hacia su lado */
    padding: 11px 16px;
    position: relative;
  }

  .msg-user-text { font-size: 14px; color: #1a1a1a; line-height: 1.6; }

  /* Debajo de la burbuja y solo al pasar por encima. Dentro ensanchaban el
     globo hasta el ancho de los botones aunque el mensaje fuera "hola". */
  .msg-user-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin: -18px 0 22px;
    opacity: 0;
    transition: opacity 0.12s;
  }
  .msg-user:hover + .msg-user-actions,
  .msg-user-actions:hover { opacity: 1; }

  .msg-user-actions button {
    width: 26px;
    height: 26px;
    border: 1px solid #e8e4de;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    transition: all 0.12s;
  }

  .msg-user-actions button:hover { background: #f5f3f0; color: #666; }
  .msg-user-actions button svg { width: 13px; height: 13px; }

  /* AI message */
  .msg-ai {
    display: flex;
    gap: 14px;
    margin-bottom: 16px;
  }

  /* Sin avatar. Habia un cuadrado negro con una C delante de cada respuesta
     y no hacia falta: en esta pantalla solo hablan dos, y el mensaje de quien
     pregunta ya va en burbuja a la derecha. Lo que queda a la izquierda es
     de Cotabase por descarte. */
  .ai-content { flex: 1; }


  .ai-text {
    font-size: 14px;
    color: #1a1a1a;
    line-height: 1.7;
  }

  .ai-text p { margin-bottom: 8px; }
  .ai-text p:last-child { margin-bottom: 0; }
  .ai-text strong { font-weight: 600; }
  /* 16 px (antes 14) y 48 de aire por encima (antes 24): el titulo se separa bien de la seccion de arriba. */
  .ai-text h2, .ai-text h3 { font-size: 16px; font-weight: 600; margin: 48px 0 6px; }
  .ai-text h2:first-child, .ai-text h3:first-child { margin-top: 0; }
  .ai-text ul, .ai-text ol { padding-left: 20px; margin: 6px 0; }
  .ai-text li { margin-bottom: 4px; }
  /* Listas con niveles: el subpunto va dentro del <li> de su padre, con sangria. */
  .ai-text li > ul, .ai-text li > ol { margin: 4px 0 2px; padding-left: 22px; }
  .ai-text li > ul { list-style: circle; }
  .ai-text table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
  .ai-text th { background: #f5f3f0; padding: 7px 10px; text-align: left; font-weight: 500; border: 1px solid #e0dcd6; font-size: 12px; }
  .ai-text td { padding: 7px 10px; border: 1px solid #e0dcd6; }
  .ai-text code { font-family: monospace; background: #f0ede8; padding: 1px 5px; border-radius: 3px; font-size: 12px; }
  .ai-text blockquote { border-left: 2px solid #e0dcd6; padding-left: 10px; color: #888; margin: 6px 0; }

  /* El texto de la referencia, enlace: «(TRLOTUP, art. 233.1.c)» en negrita y azul. */
  .cita-ref {
    font-weight: 600; color: var(--accent);
    cursor: pointer;
  }
  .cita-ref:hover, .cita-ref:focus-visible { text-decoration: underline; outline: none; }

  /* Lo que hay que saber del texto antes de fiarse de el, arriba del panel. */
  .cita-aviso {
    font-size: 13px; line-height: 1.5;
    background: #fbf4e4; border: 1px solid #eadcb6; color: #6f5412;
    border-radius: 8px; padding: 10px 12px; margin-bottom: 14px;
  }
  .cita-aviso p { margin: 0 0 4px; }
  .cita-aviso p:last-child { margin: 0; }
  .cita-enlace {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 18px; padding: 8px 12px;
    font: 500 13px 'Geist', sans-serif; color: var(--accent); text-decoration: none;
    border: 1px solid var(--border); border-radius: 8px;
  }
  .cita-enlace:hover { border-color: var(--accent); }
  .cita-enlace svg { width: 11px; height: 11px; }

  /* El articulo, tal cual lo dice la norma. */
  .cita-fondo {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(20, 16, 12, 0.45);
    padding: 24px;
    overflow-y: auto;
  }
  .cita-fondo.show { display: flex; align-items: flex-start; justify-content: center; }

  .cita-caja {
    position: relative;
    background: var(--white);
    border-radius: 14px;
    max-width: 680px;
    width: 100%;
    margin: auto;
    padding: 32px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  }

  .cita-cerrar {
    position: absolute;
    top: 16px; right: 16px;
    width: 30px; height: 30px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: transparent;
    color: #999;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .cita-cerrar:hover { background: var(--cream); color: var(--black); }
  .cita-cerrar svg { width: 14px; height: 14px; }

  .cita-norma {
    font: 500 11px 'Geist', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
  }
  .cita-articulo { font: 600 21px/1.25 'Geist', sans-serif; color: var(--black); margin: 0 0 4px; }
  .cita-titulo { font-size: 14px; color: #8a857e; margin-bottom: 20px; }

  /* pre-wrap y no <p>: el texto viene del PDF con sus saltos y sus listas, y
     recomponerlo en parrafos seria reescribir la norma. */
  .cita-texto {
    white-space: pre-wrap;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text);
    border-left: 2px solid var(--cream-dark);
    padding-left: 18px;
  }

  .cita-pie { font-size: 12px; color: #a49e95; margin: 22px 0 0; }

  @media (max-width: 760px) {
    .cita-fondo { padding: 12px; }
    .cita-caja { padding: 24px 20px; }
    .cita-articulo { font-size: 18px; }
  }


  /* Typing */

  /* Bottom input */
  .bottom-bar {
    padding: 0 40px 20px;
    background: var(--fondo-chat);
  }


  .input-wrap:focus-within { border-color: #ccc; }


  .input-wrap textarea::placeholder { color: #bbb; }

  .input-toolbar { display: flex; align-items: center; padding: 6px 10px 10px; gap: 6px; border-top: 1px solid #f0ede8; }

  .toolbar-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid #e0dcd6;
    border-radius: 5px;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    color: #999;
    cursor: pointer;
    transition: all 0.12s;
  }

  .toolbar-btn:hover { background: #f5f3f0; color: #1a1a1a; }
  .toolbar-btn svg { width: 12px; height: 12px; }
  .toolbar-btn.con-ubicacion { color: #1e40af; }
  /* La cruz para quitar la ubicación, dentro del propio botón. Va en un span y no en otro <button>: un botón dentro de un botón no es HTML válido. */
  .chip-x {
    display: none; align-items: center; justify-content: center;
    width: 20px; height: 20px; margin: -2px -6px -2px 2px; border-radius: 50%;
    color: inherit; opacity: 0.8; cursor: pointer;
  }
  .chip-x.show { display: inline-flex; }
  .chip-x:hover, .chip-x:focus-visible { opacity: 1; background: rgba(30,64,175,0.14); outline: none; }
  .chip-x svg { width: 10px; height: 10px; }

  .send-btn {
    margin-bottom: 10px;   /* a la altura de la primera linea de texto */
    width: 32px;
    height: 32px;
    border-radius: 10px;   /* cuadrado de esquinas blandas, no circulo */
    background: var(--accent);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s;
    flex-shrink: 0;
  }

  .send-btn:hover { background: var(--accent-hover); }
  .send-btn:disabled { background: #ccc; cursor: not-allowed; }
  .send-btn svg { width: 15px; height: 15px; }

  .chat::-webkit-scrollbar { width: 3px; }
  .chat::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }


  #landingView { display: block; }
  #appView { display: none; }