/* ------- costos del proyecto (columna izquierda; solo test, asesor/admin) ------- */
  #costados { width: 352px; flex: none; border-right: 1px solid var(--line);
    overflow-y: auto; padding: 14px 16px 22px; font-size: 12.5px; }
  #costados h3 { font-size: 13px; margin: 0 0 2px; display: flex; gap: 6px; align-items: center; }
  #costados .ctotal { font-size: 21px; font-weight: 650; margin: 4px 0 10px; }
  #costados .csec { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); margin: 12px 0 2px; }
  #costados .citem { padding: 5px 0; border-top: 1px solid var(--line); }
  #costados .cfila { display: flex; justify-content: space-between; gap: 8px; }
  #costados .cfila b { white-space: nowrap; }
  #costados .cdet { color: var(--muted); font-family: var(--mono); font-size: 10.5px;
    margin-top: 2px; line-height: 1.4; }
  #costados details { border-top: 1px solid var(--line); padding: 5px 0; }
  #costados summary { cursor: pointer; list-style: none; }
  #costados summary::-webkit-details-marker { display: none; }
  #costados summary .cfila span::before { content: "▸ "; color: var(--muted); }
  #costados details[open] summary .cfila span::before { content: "▾ "; }
  #costados .cnota { color: var(--muted); font-size: 10px; margin-top: 14px; line-height: 1.4; }
  #costados .cquien { display: block; color: var(--muted); font-size: 10.5px; font-weight: 400; }
  #costados .cbloque { margin-top: 10px; border-top: none; }
  #costados .cbloque > summary { padding: 8px 10px; background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 8px; }
  #costados .cbloque > summary .cfila { font-weight: 600; font-size: 13px; }
  #costados .cbloque[open] > summary { border-radius: 8px 8px 0 0; }
  #costados .cbloque > *:not(summary) { margin: 0 4px 0 12px; }
  #costados .cbloque > details:last-child { border-bottom: 1px solid var(--line); }
  /* ------- arena A/B (solo test) ------- */
  .votobar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin: 4px 0 14px 46px; padding: 9px 12px; border: 1px solid var(--line);
    border-radius: 10px; background: var(--surface-2); font-size: 12.5px; }
  .votobar .vtit { font-weight: 600; }
  .marcador { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 14px; }
  .marcador .mchip { border: 1px solid var(--line); border-radius: 20px;
    padding: 4px 10px; font-size: 11.5px; background: var(--surface-2); }

  #costados .cgrupo > summary { padding: 7px 0; }
  #costados .cgrupo > summary .cfila { font-weight: 600; }
  #costados .cgrupo > *:not(summary) { margin-left: 12px; }
  #costados .cgrupo > details:last-child { border-bottom: none; }
  @media (max-width: 900px) { #costados { display: none; } }
  .msj.error .burbuja { background: var(--risk-soft); border: 1px solid var(--risk); }

  .burbuja p { margin: 0 0 10px; } .burbuja p:last-child { margin-bottom: 0; }
  .burbuja h3, .burbuja h4 { margin: 14px 0 6px; font-size: 1rem; font-weight: 650; }
  .burbuja ul, .burbuja ol { margin: 6px 0 10px; padding-left: 1.3em; }
  .burbuja li { margin: 3px 0; }
  .burbuja code { font-family: var(--mono); font-size: .85em; background: var(--surface-2);
                  border-radius: 3px; padding: 1px 5px; }
  .burbuja a { color: var(--accent); text-decoration-color: var(--accent-2); }
  .burbuja blockquote { margin: 8px 0 10px; padding: 6px 12px;
                        border-left: 3px solid var(--accent); background: var(--surface-2);
                        border-radius: 0 6px 6px 0; font-family: var(--serif); }

  .doccard { display: flex; align-items: center; gap: 10px; font-size: 14px; }
  .doccard .icono { font-size: 1.5rem; }
  .doccard small { display: block; color: var(--muted); font-family: var(--mono); font-size: 11px; }

  /* ------- drawers: historial y usuarios (mismo lenguaje visual) ------- */
  #drawer, #admindrawer { position: fixed; right: 0; top: 0; bottom: 0; z-index: 55;
            width: min(94vw, 380px); background: var(--surface);
            border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(0,0,0,.25);
            display: flex; flex-direction: column;
            transform: translateX(102%); transition: transform .18s ease; }
  #drawer.abierto, #admindrawer.abierto { transform: none; }
  @media (prefers-reduced-motion: reduce) { #drawer, #admindrawer { transition: none; } }
  .drawercab { padding: 14px 16px 10px; border-bottom: 1px solid var(--line-soft);
               display: flex; align-items: baseline; gap: 10px; flex: none; }
  .drawercab .titulo { font-family: var(--serif); font-size: 1.05rem; flex: 1; }
  #drawerlista { flex: 1; overflow-y: auto; padding: 10px;
                 display: flex; flex-direction: column; gap: 6px; }
  .sesionitem { font: inherit; text-align: left; border: 1px solid var(--line-soft);
                background: var(--surface); color: var(--ink); border-radius: 8px;
                padding: 9px 12px; cursor: pointer;
                display: flex; flex-direction: column; gap: 3px; }
  .sesionitem:hover { border-color: var(--accent); }
  .sesionitem .stitulo { font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
  .sesionitem .sfecha { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
  .drawervacio { color: var(--muted); font-size: 13.5px; text-align: center; padding: 18px 8px; }

  /* revisiones del abogado: vista a pantalla completa (issue #52) */
  #revvista { position: fixed; inset: 0; z-index: 60; background: var(--ground);
              display: flex; }
  /* el display de estas reglas le ganaría al [hidden] del navegador y dejaría
     el overlay tapando toda la app (o pestañas superpuestas en el panel
     admin): ocultarlas explícitamente */
  #revvista[hidden], #revtabs[hidden], #revbarra[hidden],
  #adminalta[hidden], #adminlista[hidden], #adminfb[hidden] { display: none; }
  #revlat { width: min(88vw, 320px); flex: none; background: var(--surface);
            border-right: 1px solid var(--line); display: flex;
            flex-direction: column; }
  #revprogreso { font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .revfiltro { display: flex; gap: 6px; padding: 8px 10px;
               border-bottom: 1px solid var(--line-soft); flex: none; }
  .revfiltro button, #revtabs [data-tab] { font: inherit; font-size: 12.5px;
               padding: 4px 11px; border-radius: 999px; cursor: pointer;
               border: 1px solid var(--line); background: var(--surface);
               color: var(--muted); }
  .revfiltro button.activo, #revtabs [data-tab].activo {
               color: var(--accent); border-color: var(--accent); }
  #revitems { flex: 1; overflow-y: auto; padding: 8px;
              display: flex; flex-direction: column; gap: 6px; }
  .revitem { font: inherit; text-align: left; border: 1px solid var(--line-soft);
             background: var(--surface); color: var(--ink); border-radius: 8px;
             padding: 9px 11px; cursor: pointer; display: flex;
             flex-direction: column; gap: 5px; align-items: flex-start; }
  .revitem:hover { border-color: var(--accent); }
  .revitem.activo { border-color: var(--accent);
                    box-shadow: inset 3px 0 0 var(--accent); }
  .revitem .rtitulo { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
  .revchip { font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
             text-transform: uppercase; border-radius: 5px; padding: 2px 7px;
             border: 1px solid var(--line); color: var(--muted); flex: none; }
  .revchip.aprobado { color: var(--accent); border-color: var(--accent); }
  .revchip.observado { text-decoration: underline dotted; }
  #revmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  #revtabs { flex: none; display: flex; gap: 6px; align-items: center;
             padding: 8px 14px; border-bottom: 1px solid var(--line-soft);
             background: var(--surface); }
  #revtabs #revtitulo { margin-left: 8px; font-size: 12.5px; color: var(--muted);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #revlista-btn { display: none; }
  #revdoc { flex: 1; overflow-y: auto; padding: 26px clamp(14px, 5vw, 64px) 40px; }
  .revdocu { max-width: 840px; margin: 0 auto; font-size: 14.5px; line-height: 1.62; }
  .revdocu h3 { font-family: var(--serif); font-size: 17.5px; margin: 24px 0 6px;
                display: flex; align-items: baseline; gap: 8px; }
  .revdocu p { margin: 8px 0; }
  .revdocu blockquote { margin: 10px 0; padding: 8px 14px;
                border-left: 3px solid var(--accent); color: var(--muted);
                font-size: 13.5px; }
  .revdocu .reflink { color: var(--accent); text-decoration: underline dotted;
                cursor: pointer; }
  /* presentación editorial del ítem: jerarquía de imprenta, medida de
     lectura corta y aire, como los documentos que se revisan en papel */
  .revdocu { max-width: 46rem; }
  .revdocu h1 { font-family: var(--serif); font-size: 27px; font-weight: 700;
                line-height: 1.22; margin: 4px 0 14px; letter-spacing: -.01em; }
  .revdocu h2 { font-family: var(--serif); font-size: 19px; font-weight: 600;
                color: var(--accent); margin: 34px 0 8px; }
  .revdocu h1 + p, .revdocu h2 + p { margin-top: 4px; }
  .revdocu h4 { font-family: var(--serif); font-size: 15px; margin: 18px 0 4px; }
  .revdocu > p:first-child { color: var(--muted); font-size: 12.5px;
                letter-spacing: .13em; text-transform: uppercase; font-weight: 700; }
  .revdocu ul { margin: 8px 0; padding-left: 1.15rem; }
  .revdocu li { margin: 4px 0; }
  .revdocu hr { border: none; border-top: 1px solid var(--line-soft); margin: 26px 0; }
  /* cuestionario: cada pregunta es una tarjeta que se contesta en el lugar */
  .revpregunta { margin: 14px 0 20px; padding: 12px 14px; border-radius: 10px;
                border: 1px solid var(--line); background: var(--surface); }
  .revpregunta-txt { margin: 0 0 9px; font-weight: 600; }
  .revopciones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 9px; }
  .revopcion { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
                border: 1px solid var(--line); border-radius: 999px;
                padding: 4px 13px; font-size: 13px; background: var(--bg); }
  .revopcion:hover { border-color: var(--accent); }
  .revopcion.elegida { border-color: var(--accent); color: var(--accent);
                background: var(--accent-soft); font-weight: 600; }
  .revopcion input { accent-color: var(--accent); margin: 0; }
  .revpregunta-nota { width: 100%; box-sizing: border-box; resize: vertical;
                font: inherit; font-size: 13px; padding: 7px 9px; color: inherit;
                border: 1px solid var(--line); border-radius: 8px;
                background: var(--bg); }
  .revpregunta-nota:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
  .revpregunta [disabled] { opacity: .65; cursor: default; }
  /* progreso del cuestionario, pegado arriba del documento */
  #revavance { display: flex; align-items: center; gap: 10px; font-size: 12px;
                color: var(--muted); padding: 7px clamp(14px, 5vw, 64px);
                border-bottom: 1px solid var(--line-soft); background: var(--surface); }
  .revavance-barra { flex: 1; max-width: 240px; height: 4px; border-radius: 99px;
                background: var(--line-soft); overflow: hidden; }
  .revavance-barra > i { display: block; height: 100%; width: 0;
                background: var(--accent); transition: width .25s; }
  .revavance-estado::after { content: ""; }
  #revavance[data-estado="guardando"] .revavance-estado::after { content: "guardando…"; }
  #revavance[data-estado="guardado"] .revavance-estado::after { content: "guardado ✓"; }
  #revavance[data-estado="error"] .revavance-estado::after { content: "sin guardar ⚠"; color: var(--accent); }
  .revtabla { overflow-x: auto; margin: 10px 0;
              border: 1px solid var(--line-soft); border-radius: 8px; }
  .revtabla table { border-collapse: collapse; width: 100%; font-size: 13px; }
  .revtabla th, .revtabla td { text-align: left; padding: 7px 10px;
              border-bottom: 1px solid var(--line-soft); vertical-align: top; }
  .revtabla th { color: var(--muted); }
  .revtabla tr:last-child td { border-bottom: none; }
  .notabtn { font: inherit; font-size: 11.5px; border: 1px solid var(--line);
             background: var(--surface); color: var(--muted); border-radius: 6px;
             padding: 1px 8px; cursor: pointer; flex: none; }
  .notabtn.connota { color: var(--accent); border-color: var(--accent); }
  .revnota { margin: 6px 0 14px; }
  .revnota textarea { width: 100%; box-sizing: border-box; font: inherit;
             font-size: 13px; padding: 7px 10px; border: 1px solid var(--accent);
             border-radius: 8px; background: var(--surface); color: var(--ink);
             min-height: 54px; resize: vertical; }
  .revcoms { max-width: 840px; margin: 26px auto 0; padding-top: 14px;
             border-top: 1px solid var(--line); }
  .revcoms h3 { font-family: var(--serif); font-size: 15.5px; margin: 0 0 10px; }
  .revcom { border: 1px solid var(--line-soft); border-radius: 8px;
            padding: 8px 12px; margin-bottom: 8px; font-size: 13.5px; }
  .revcomcab { display: flex; gap: 10px; align-items: baseline; margin-bottom: 3px; }
  .revcomcab b { font-size: 12.5px; }
  .revcomcab span { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
  .revcomvacio { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
  .revcomnuevo { display: flex; gap: 8px; align-items: flex-start; }
  .revcomnuevo textarea { flex: 1; font: inherit; font-size: 13px;
             padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
             background: var(--surface); color: var(--ink); min-height: 44px;
             resize: vertical; }
  #revbarra { flex: none; display: flex; gap: 8px; align-items: center;
              padding: 10px 14px; border-top: 1px solid var(--line);
              background: var(--surface); }
  #revbarra textarea { flex: 1; font: inherit; font-size: 13px; padding: 8px 10px;
              border: 1px solid var(--line); border-radius: 8px;
              background: var(--ground); color: var(--ink); resize: none;
              min-height: 38px; max-height: 110px; }
  .revhecho { flex: 1; font-size: 13px; color: var(--muted); }
  @media (max-width: 860px) {
    #revlat { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;
              box-shadow: 12px 0 40px rgba(0,0,0,.25);
              transform: translateX(-102%); transition: transform .18s ease; }
    #revlat.abierto { transform: none; }
    #revlista-btn { display: inline-block; }
  }
  /* con la vista de revisión abierta, el panel de fallo/artículo flota encima */
  body.rev-abierta #panel { position: fixed; right: 0; top: 0; bottom: 0;
                            z-index: 70; }

  /* panel de usuarios (solo admin) */
  #adminalta { display: flex; gap: 6px; padding: 10px 12px; flex: none;
               border-bottom: 1px solid var(--line-soft); }
  #adminalta input { flex: 1; min-width: 0; font: inherit; font-size: 13px;
                     padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px;
                     background: var(--ground); color: var(--ink); }
  #adminalta .btn { flex: none; }
  select.rolsel, #adminalta select { font: inherit; font-size: 12.5px; padding: 5px 6px;
                     border: 1px solid var(--line); border-radius: 7px;
                     background: var(--surface); color: var(--ink); }
  #adminlista { flex: 1; overflow-y: auto; padding: 10px;
                display: flex; flex-direction: column; gap: 6px; }
  .usuarioitem { display: flex; align-items: center; gap: 8px;
                 border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 10px; }
  .usuarioitem .uemail { flex: 1; font-family: var(--mono); font-size: 12px;
                         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .usuarioitem.inactivo .uemail { text-decoration: line-through; color: var(--muted); }
  .usuarioitem .btn { font-size: 12px; padding: 4px 9px; }
  .uyo { font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
         text-transform: uppercase; color: var(--muted); padding: 0 4px; }

  /* ------- feedback (issue #15) ------- */
  .feedback { display: flex; gap: 4px; align-items: center; margin-top: 10px;
              font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .feedback .fb { border: none; background: none; cursor: pointer; font-size: 13px;
                  line-height: 1; opacity: .45; padding: 2px 5px; border-radius: 5px; }
  .feedback .fb:hover { opacity: 1; background: var(--surface-2); }
  .feedback .fb.activo { opacity: 1; background: var(--accent-soft); }
  .feedback .fbeco { margin-left: 4px; }
  /* botón Word (issue #16): discreto, al final de la franja */
  .feedback .fbword { margin-left: auto; border: 1px solid var(--line);
                      background: none; cursor: pointer; font-family: var(--mono);
                      font-size: 10.5px; letter-spacing: .04em; color: var(--muted);
                      border-radius: 5px; padding: 2px 9px; }
  .feedback .fbword:hover { color: var(--accent); border-color: var(--accent); }
  .feedback .fbword:disabled { opacity: .45; cursor: default; }
  #fbform { position: fixed; right: 18px; bottom: 76px; z-index: 65; width: min(92vw, 340px);
            background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
            box-shadow: var(--shadow); padding: 14px; display: flex;
            flex-direction: column; gap: 10px; }
  #fbform[hidden] { display: none; }
  #fbform .fbtitulo { font-size: 13.5px; color: var(--muted); }
  #fbform textarea { font: inherit; font-size: 13.5px; border: 1px solid var(--line);
                     border-radius: 8px; background: var(--ground); color: var(--ink);
                     padding: 8px 10px; resize: vertical; min-height: 84px; }
  #fbform .fbacciones { display: flex; justify-content: flex-end; gap: 8px; }

  /* tabs del drawer de administración: usuarios | feedback */
  .admintabs { display: flex; gap: 6px; padding: 10px 12px 0; flex: none; }
  .atab { font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
          text-transform: uppercase; border: 1px solid var(--line);
          background: var(--surface); color: var(--muted); border-radius: 14px;
          padding: 4px 12px; cursor: pointer; }
  .atab.activo { background: var(--accent-soft); border-color: var(--accent);
                 color: var(--accent); }
  #adminalta[hidden], #adminlista[hidden], #adminfb[hidden] { display: none; }
  #adminfb { flex: 1; overflow-y: auto; padding: 10px; display: flex;
             flex-direction: column; gap: 6px; }
  .fbitem { border: 1px solid var(--line-soft); border-radius: 8px;
            padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; }
  .fbitem .fbcab { display: flex; gap: 8px; align-items: baseline;
                   font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .fbitem .fbcab .fbemail { flex: 1; overflow: hidden; text-overflow: ellipsis;
                            white-space: nowrap; }
  .fbitem .fbcoment { font-size: 13px; }
  .fbctx summary { cursor: pointer; font-family: var(--mono); font-size: 11px;
                   color: var(--muted); }
  .fbctx pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 0;
               font-family: var(--mono); font-size: 11px; color: var(--muted);
               background: var(--surface-2); border-radius: 6px; padding: 6px 8px; }

  /* Admin solicitudes */
  .badge-sol { font-size: 10px; font-family: var(--mono); padding: 2px 6px; border-radius: 4px;
               text-transform: uppercase; font-weight: 600; }
  .badge-sol.pendiente { background: rgba(234, 179, 8, 0.15); color: #eab308; }
  .badge-sol.aprobada { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
  .badge-sol.rechazada { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
  .sol-card { border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px;
              display: flex; flex-direction: column; gap: 8px; font-size: 13px; background: var(--surface); }
  .sol-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .sol-card-nombre { font-weight: 600; }
  .sol-card-email { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
  .sol-card-detalles { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--muted); }
  .sol-card-motivo { background: var(--surface-2); padding: 6px 10px; border-radius: 6px;
                     font-size: 12px; font-style: italic; color: var(--ink); }
  .sol-card-acciones { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 4px; }
  .sol-card-acciones select { font-size: 11.5px; padding: 3px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); }
  .btn-sol-aprobar { background: var(--accent); color: var(--accent-ink, #fff); border: none; padding: 4px 10px; border-radius: 6px; font-size: 11.5px; font-weight: 500; cursor: pointer; }
  .btn-sol-rechazar { background: none; border: 1px solid var(--line); color: var(--muted); padding: 4px 8px; border-radius: 6px; font-size: 11.5px; cursor: pointer; }
  .btn-sol-rechazar:hover { color: var(--risk); border-color: var(--risk); }

  .landing-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
  .feature-card { background: #ffffff; border: 1px solid #e2e8f0;
                  border-radius: 16px; padding: 20px 18px; display: flex;
                  flex-direction: column; gap: 8px; box-shadow: 0 2px 8px rgba(15,23,42,.03); transition: border-color .15s ease; }
  .feature-card:hover { border-color: #059669; }
  .feature-icon { font-size: 24px; margin-bottom: 2px; }
  .feature-card h4 { margin: 0; font-size: 14.5px; font-weight: 700; color: #0f172a; }
  .feature-card p { margin: 0; font-size: 12.5px; line-height: 1.55; color: #64748b; }

  .landing-footer { text-align: center; padding: 20px 0 10px; border-top: 1px solid #e2e8f0;
                    font-size: 12px; color: #64748b; }

  @media (max-width: 860px) {
    .landing-hero { grid-template-columns: 1fr; gap: 28px; }
    .landing-title { font-size: 1.95rem; }
    .sim-grid { grid-template-columns: 1fr; }
    .sim-col-izq { border-right: none; border-bottom: 1px solid #e2e8f0; }
  }
  @media (max-width: 540px) {
    .landing-features { grid-template-columns: 1fr; }
    .landing-nav { flex-direction: column; align-items: flex-start; gap: 12px; }
  }
  /* email logueado del header — scopeado: ".usuario" suelto pisaba los
     mensajes del chat (.msj.usuario) y los truncaba a una línea de 220px */
  header .usuario { font-family: var(--mono); font-size: 11.5px; color: var(--muted);
                    max-width: 220px; overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; }

  /* ------- panel de progreso de subida de documentos ------- */
  #subidas { border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
    box-shadow: var(--shadow); margin: 0 0 8px; overflow: hidden; }
  #subidas .subcab { display: flex; justify-content: space-between; align-items: center;
    padding: 6px 8px 6px 14px; background: var(--surface-2); font-size: 11px;
    text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  .subfila { display: flex; gap: 10px; align-items: baseline; padding: 8px 14px;
    border-top: 1px solid var(--line-soft); font-size: 13px; }
  .subfila .subnombre { max-width: 42%; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
  .subfila .subestado { color: var(--muted); font-size: 12px; flex: 1; }
  .subfila .subspin { width: 14px; flex: none; text-align: center; }
  .subfila:not(.subok):not(.suberror) .subspin::after { content: ""; display: inline-block;
    width: 9px; height: 9px; border: 2px solid var(--line); border-top-color: var(--accent);
    border-radius: 50%; animation: girar 0.9s linear infinite; }
  @keyframes girar { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .subfila:not(.subok):not(.suberror) .subspin::after { animation: none;
      border-top-color: var(--line); }
  }
  .subfila.subok .subspin { color: var(--ok); font-weight: 700; }
  .subfila.subok .subestado { color: var(--ok); }
  .subfila.suberror .subspin { color: var(--risk); font-weight: 700; }
  .subfila.suberror .subestado { color: var(--risk); }

  /* ------- causas (carpetas obligatorias) ------- */
  #causalinea { margin: 0 0 8px; }
  #causachip { font: 12.5px var(--sans); border: 1px solid var(--accent);
    background: var(--accent-soft); color: var(--ink); border-radius: 20px;
    padding: 5px 12px; cursor: pointer; }
  #causachip b { font-family: var(--serif); }
  #causasel { position: fixed; inset: 0; background: rgba(19,30,29,.45);
    z-index: 70; display: flex; align-items: center; justify-content: center;
    padding: 16px; }
  #causasel[hidden] { display: none; }
  .causacaja { width: min(94vw, 470px); background: var(--surface);
    border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
    padding: 20px; max-height: 82vh; overflow-y: auto; }
  .causacaja h3 { margin: 0 0 4px; font-size: 17px; }
  .causacaja > p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
  #causalista { display: grid; gap: 6px; margin-bottom: 12px; }
  .causaitem { text-align: left; font: 13.5px var(--sans); border: 1px solid var(--line);
    background: var(--surface); color: var(--ink); border-radius: 10px;
    padding: 9px 12px; cursor: pointer; display: flex; justify-content: space-between;
    gap: 8px; align-items: baseline; }
  .causaitem:hover { background: var(--surface-2); }
  .causaitem small { color: var(--muted); font-family: var(--mono); font-size: 10.5px;
    white-space: nowrap; }
  #causasinicio { display: grid; gap: 8px; width: min(92vw, 560px);
    margin: 0 auto; text-align: left; }
  #causasinicio .causaitem.activa { border-color: var(--accent); background: var(--accent-soft); }
  #causasinicio .nuevacausa { border-style: dashed; color: var(--muted); justify-content: center; }
  #causanueva { display: flex; gap: 8px; }
  #causainput { flex: 1; font: 14px var(--sans); border: 1px solid var(--line);
    border-radius: 8px; padding: 8px 11px; background: var(--surface); color: var(--ink); }

  #toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
           background: var(--ink); color: var(--ground); border-radius: 8px;
           padding: 9px 18px; font-size: 13.5px; opacity: 0; pointer-events: none;
           transition: opacity .25s; z-index: 60; }
  #toast.ver { opacity: .95; }

  @media (max-width: 900px) {
    header { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
    #panel { position: fixed; right: 0; top: 0; bottom: 0; z-index: 50;
             box-shadow: -12px 0 40px rgba(0,0,0,.25); }
    #panel.abierto { width: min(94vw, 560px); }
  }