:root {
  --fondo: #f4f6f9; --superficie: #ffffff; --borde: #dde3ea; --texto: #1d2733; --suave: #5d6b7a;
  --primario: #0b3a63; --primario-2: #12558f; --acento: #f28c28; --exito: #18703d; --peligro: #c0392b; --aviso: #8a5600;
  --ed: #eef4fb; --usuario: #0b3a63; --sistema: #fff7ec;
  --n4: #18703d; --n3: #2f6bb8; --n2: #7550b8; --n1: #b0b8c2; --n0: #e0e4e8;
  /* Texto de color sobre superficie (AA 4.5:1 en claro y en oscuro) */
  --t-ok: #18703d; --t-info: #2f6bb8; --t-aviso: #8a5600; --t-acento: #a4500a; --t-peligro: #c0392b;
  --sobre-primario: #fff;  /* texto sobre botones rellenos con el primario */
  --radio: 10px; --sombra: 0 1px 3px rgba(16, 36, 60, .08);
  color-scheme: light dark;  /* barras de desplazamiento y controles nativos según el tema */
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f1620; --superficie: #17212d; --borde: #2a3746; --texto: #e6edf3; --suave: #9aa8b6;
    --primario: #4c9be8; --primario-2: #6aaef0; --ed: #1d2b3b; --usuario: #24548a; --sistema: #2c2416; --n1: #6b7785; --n0: #3a4654;
    --t-ok: #6fd39a; --t-info: #8ab8f0; --t-aviso: #f0b45a; --t-acento: #f5a35b; --t-peligro: #ff8f80;
    --sobre-primario: #0f1620;  /* el blanco sobre #4c9be8 daba 2.93:1 */
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fondo); color: var(--texto); }
.oculto { display: none !important; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Foco visible y consistente (teclado) */
:focus-visible { outline: 3px solid var(--primario); outline-offset: 2px; }
.btn.primario:focus-visible, .btn.exito:focus-visible, .chip-boton:focus-visible { outline-color: var(--texto); }
textarea:focus-visible, input:focus-visible, select:focus-visible { outline-offset: 0; }
h2 { margin: 0; font-size: 1.15rem; } h3 { margin: 0 0 .6rem; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.nota { color: var(--suave); font-size: .85rem; margin: .5rem 0 0; }
.error { color: var(--t-peligro); min-height: 1.2em; margin: .5rem 0 0; }

.btn { border: 1px solid transparent; border-radius: 8px; padding: .55rem 1rem; font: inherit; font-weight: 600; cursor: pointer; background: var(--superficie); color: var(--texto); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primario { background: var(--primario); color: var(--sobre-primario); }
.btn.primario:hover:not(:disabled) { background: var(--primario-2); }
.btn.exito { background: var(--exito); color: #fff; }
.btn.fantasma { background: transparent; border-color: var(--borde); }
.btn.ancho { width: 100%; }
.btn.chico { padding: .3rem .6rem; font-size: .85rem; }

.marca { display: flex; align-items: center; gap: .6rem; }
.marca img { width: 36px; height: 36px; }
.marca b { display: block; font-size: 1.1rem; line-height: 1.1; }
.marca span { display: block; font-size: .78rem; color: var(--suave); }

.login { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.login-caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 2rem; width: min(360px, 100%); box-shadow: var(--sombra); display: grid; gap: .7rem; }
.login-caja label { font-weight: 600; margin-top: .6rem; }
.login-caja input { font-size: 1.1rem; letter-spacing: .08em; text-align: center; padding: .6rem; border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo); color: var(--texto); }

.barra { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; background: var(--superficie); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 5; }
.pestanas { display: flex; gap: .25rem; margin-left: 1rem; flex: 1; }
.pestanas button { background: none; border: 0; padding: .5rem .9rem; font: inherit; font-weight: 600; color: var(--suave); border-radius: 8px; cursor: pointer; }
.pestanas button.activa { background: var(--ed); color: var(--primario); }

.vista { display: grid; grid-template-columns: 240px 1fr 320px; height: calc(100vh - 57px); }
.lista { border-right: 1px solid var(--borde); padding: 1rem; overflow-y: auto; background: var(--superficie); }
.lista ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .3rem; }
.lista li button { width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 8px; padding: .5rem .6rem; font: inherit; color: var(--texto); cursor: pointer; }
.lista li button:hover { background: var(--fondo); }
.lista li button.activo { background: var(--ed); border-color: var(--borde); }
.lista small { display: block; color: var(--suave); }

.chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.vacio { margin: auto; max-width: 520px; padding: 2rem 16px; }
.vacio ol { padding-left: 1.2rem; }
#conversacion { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-cabecera { padding: .8rem 1rem; border-bottom: 1px solid var(--borde); background: var(--superficie); }
.mensajes { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .8rem; }
.msg { max-width: 85%; padding: .7rem .9rem; border-radius: 12px; box-shadow: var(--sombra); overflow-wrap: anywhere; }
.msg .quien { font-size: .75rem; font-weight: 700; color: var(--suave); margin-bottom: .2rem; }
.msg.ed { background: var(--ed); align-self: flex-start; }
.msg.usuario { background: var(--usuario); color: #fff; align-self: flex-end; }
.msg.usuario .quien { color: rgba(255,255,255,.75); }
.msg.sistema { background: var(--sistema); align-self: center; font-size: .88rem; max-width: 95%; }
.msg code { background: rgba(127,127,127,.15); padding: 0 .25rem; border-radius: 4px; font-size: .9em; }
.msg ul { margin: .3rem 0; padding-left: 1.2rem; }
.msg.pensando { color: var(--suave); font-style: italic; }
.redactor { border-top: 1px solid var(--borde); padding: .8rem 1rem; background: var(--superficie); }
.redactor textarea { width: 100%; resize: vertical; font: inherit; padding: .6rem; border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo); color: var(--texto); }
.acciones { display: flex; justify-content: space-between; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }

.panel { border-left: 1px solid var(--borde); padding: 1rem; overflow-y: auto; display: grid; gap: 1rem; align-content: start; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; box-shadow: var(--sombra); }
.estado { display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; font-weight: 600; }
.punto { width: 10px; height: 10px; border-radius: 50%; background: var(--n1); flex: none; }
.punto.activo { background: var(--t-acento); box-shadow: 0 0 0 3px rgba(164, 80, 10, .2); }  /* estado fijo, sin animación */
.punto.ok { background: var(--exito); } .punto.mal { background: var(--peligro); }
.lista-simple { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; font-size: .9rem; }
.descargas { display: grid; gap: .4rem; }
.descargas a { display: flex; justify-content: space-between; text-decoration: none; color: var(--primario); font-weight: 600; padding: .4rem .6rem; border: 1px solid var(--borde); border-radius: 8px; }
.descargas a.principal { background: var(--primario); color: var(--sobre-primario); border-color: var(--primario); }
.paso { border-top: 1px solid var(--borde); padding: .5rem 0; font-size: .9rem; }
.paso:first-child { border-top: 0; }
.paso summary { cursor: pointer; display: flex; gap: .4rem; align-items: baseline; }
.paso pre { white-space: pre-wrap; font-size: .78rem; max-height: 240px; overflow: auto; background: var(--fondo); padding: .5rem; border-radius: 6px; }
.chip { display: inline-block; font-size: .72rem; font-weight: 700; padding: .05rem .45rem; border-radius: 999px; color: #fff; }
.chip.ok { background: var(--exito); } .chip.mal { background: var(--peligro); }
.chip.N1 { color: #1d2733; }
@media (prefers-color-scheme: dark) { .chip.N1 { color: #fff; } }
.chip.N4 { background: var(--n4); } .chip.N3 { background: var(--n3); } .chip.N2 { background: var(--n2); } .chip.N1 { background: var(--n1); } .chip.N0 { background: var(--n0); color: var(--texto); }

.fila-titulo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.fila-titulo select { font: inherit; padding: .3rem .5rem; border-radius: 6px; border: 1px solid var(--borde); background: var(--fondo); color: var(--texto); }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
td { border-top: 1px solid var(--borde); padding: .45rem .4rem; vertical-align: top; }
td:nth-child(2) { width: 52px; }
td .nota { margin: 0; }

/* ---------- Modelo visual ---------- */
:root { --construible: #18703d; --manual: #5f6b78; --pendiente: #8a5600; --sin-cloud: #c0392b; --cambio: #c2560c; --carril: #f8fafc; --carril-2: #f1f4f8;
  --trazo-ok: var(--construible); --trazo-manual: var(--manual); --trazo-pend: var(--pendiente); --trazo-cambio: var(--cambio); }
@media (prefers-color-scheme: dark) { :root { --carril: #141d28; --carril-2: #182330;
  --trazo-ok: #4cc07f; --trazo-manual: #9aa8b6; --trazo-pend: #e0a040; --trazo-cambio: #f28c28; } }
/* Proyecto = una sola pieza: diagrama al centro; elemento seleccionado y conversación con Ed a la derecha */
.vista { grid-template-columns: 220px minmax(0, 1fr) 400px; }
.centro { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.proyecto { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cabecera-proyecto { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .7rem 1rem; border-bottom: 1px solid var(--borde); background: var(--superficie); }
.cabecera-proyecto .estado { margin: 0; font-size: .88rem; }
.modelo { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.panel { display: flex; flex-direction: column; gap: .8rem; padding: .8rem; overflow: hidden; height: calc(100vh - 57px); }
.panel > .tarjeta { padding: .8rem; }
.inspector { flex: 0 1 auto; max-height: 32%; overflow-y: auto; }
.conversacion { flex: 1 1 0; min-height: 360px; display: flex; flex-direction: column; }
.conversacion .mensajes { min-height: 140px; }
.conversacion .redactor textarea { min-height: 3.2em; }
.m-contenido.flujo { display: flex; flex-direction: column; gap: .5rem; padding: .6rem 1rem; }
.m-contenido.flujo .m-lienzo { flex: 1; max-height: none; min-height: 280px; }
.m-barra { padding: .45rem 1rem; }
.m-barra select { max-width: 240px; }
.m-pestanas { padding-top: .2rem; }
.m-pestanas button { padding: .35rem .6rem; font-size: .9rem; }
.m-leyenda { font-size: .75rem; gap: .5rem; }
.conversacion .mensajes { flex: 1; overflow-y: auto; padding: .2rem .1rem .6rem; gap: .6rem; }
.conversacion .msg { max-width: 100%; font-size: .9rem; padding: .55rem .7rem; }
.conversacion .redactor { border-top: 1px solid var(--borde); padding: .6rem 0 0; background: none; }
.conversacion .redactor textarea { font-size: .9rem; }
#t-entregables { flex: none; max-height: 30%; overflow-y: auto; }
#t-entregables summary { cursor: pointer; list-style: none; } #t-entregables summary h2 { display: inline; margin: 0; }
#t-entregables[open] summary { margin-bottom: .6rem; }
.sobre { font-size: .82rem; background: var(--ed); border-radius: 6px; padding: .25rem .5rem; margin-bottom: .4rem; display: flex; gap: .4rem; align-items: center; }
.sobre-msg { background: rgba(127,127,127,.18); border-radius: 4px; padding: 0 .3rem; font-weight: 600; }
.dudas { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.duda { display: grid; gap: .35rem; border-top: 1px solid var(--borde); padding-top: .5rem; font-size: .88rem; }
.duda:first-child { border-top: 0; padding-top: 0; }
.duda.resuelta { opacity: .65; }
.duda textarea { font: inherit; font-size: .85rem; padding: .4rem .5rem; border: 1px solid var(--borde); border-radius: 6px; background: var(--fondo); color: var(--texto); resize: vertical; }
.chip-boton { border: 0; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 700; padding: .1rem .55rem; border-radius: 999px; background: var(--pendiente); color: #fff; }
.chip-boton.mal { background: var(--peligro); }
.etiqueta-el { font-size: .78rem; text-decoration: none; background: var(--ed); border-radius: 4px; padding: 0 .3rem; }
.m-vacio { margin: auto; max-width: 560px; padding: 2rem 16px; }
.fila-botones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.m-barra { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .6rem 1rem; border-bottom: 1px solid var(--borde); background: var(--superficie); }
.m-barra select, .m-historial select, #m-a, #m-b { font: inherit; padding: .3rem .4rem; border-radius: 6px; border: 1px solid var(--borde); background: var(--fondo); color: var(--texto); max-width: 320px; }
.m-espacio { flex: 1; }
.m-etapas { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; padding: .5rem 1rem; background: var(--ed); font-size: .8rem; }
.m-etapas span { padding: .1rem .5rem; border-radius: 999px; background: var(--superficie); color: var(--suave); }
.m-etapas span.hecha { background: var(--construible); color: #fff; }
.m-etapas span.actual { background: var(--t-acento); color: #fff; font-weight: 700; }
@media (prefers-color-scheme: dark) { .m-etapas span.actual { background: #a4500a; } }
.m-etapas b { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
.m-pestanas { display: flex; gap: .2rem; padding: .4rem 1rem 0; border-bottom: 1px solid var(--borde); overflow-x: auto; }
.m-pestanas button { background: none; border: 0; border-bottom: 3px solid transparent; padding: .45rem .7rem; font: inherit; font-weight: 600; color: var(--suave); cursor: pointer; white-space: nowrap; }
.m-pestanas button.activa { color: var(--primario); border-bottom-color: var(--primario); }
.m-contenido { flex: 1; overflow: auto; padding: 1rem; display: grid; gap: 1rem; align-content: start; min-height: 0; }
.m-leyenda { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; font-size: .8rem; color: var(--suave); }
.ley::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .3rem; vertical-align: -2px; border: 2px solid; }
.ley.construible::before { border-color: var(--trazo-ok); } .ley.manual::before { border-color: var(--trazo-manual); border-style: dashed; }
.ley.pendiente::before { border-color: var(--trazo-pend); border-style: dashed; } .ley.sin_cloud::before { border-color: var(--sin-cloud); border-style: dashed; }
.ley.cambiado::before { border: 0; width: 0; height: 0; border-radius: 0; border-top: 12px solid var(--trazo-cambio); border-right: 12px solid transparent; }
.m-lienzo { overflow: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); max-height: calc(100vh - 290px); }
#m-svg { display: block; font-family: inherit; }
.carril rect { fill: var(--carril); stroke: var(--borde); } .carril.par rect { fill: var(--carril-2); }
.carril-nombre { font-size: 12px; font-weight: 700; fill: var(--suave); text-transform: uppercase; letter-spacing: .03em; }
.arista { fill: none; stroke: var(--suave); stroke-width: 1.6; }
.arista.aprobado { stroke: var(--trazo-ok); } .arista.rechazado { stroke: var(--peligro); } .arista.evento { stroke: var(--t-info); }
.arista.manual { stroke: var(--trazo-manual); stroke-dasharray: 5 4; }
.punta { fill: var(--suave); } .punta.aprobado { fill: var(--trazo-ok); } .punta.rechazado { fill: var(--peligro); } .punta.evento { fill: var(--t-info); } .punta.manual { fill: var(--trazo-manual); }
.etq-arista { font-size: 12px; fill: var(--suave); font-weight: 600; }
.nodo { cursor: pointer; outline: none; }
.nodo rect { fill: var(--superficie); stroke: var(--trazo-ok); stroke-width: 2; }
.nodo.manual rect { stroke: var(--trazo-manual); stroke-dasharray: 6 4; fill: var(--fondo); }
.nodo.pendiente rect { stroke: var(--trazo-pend); stroke-dasharray: 6 4; }
.nodo.sin_cloud rect { stroke: var(--sin-cloud); stroke-dasharray: 6 4; }
.nodo.cambiado rect { stroke: var(--trazo-cambio); stroke-width: 3; }
.nodo.sel rect { stroke: var(--primario); stroke-width: 3.5; filter: drop-shadow(0 2px 6px rgba(11, 58, 99, .35)); }
.nodo:focus-visible rect { stroke: var(--primario); stroke-width: 4; stroke-dasharray: none; }
.nodo text { fill: var(--texto); }
.nodo .icono { font-size: 15px; } .nodo .titulo { font-size: 14px; font-weight: 700; }
.nodo .sub { font-size: 12px; fill: var(--suave); } .nodo .ins { font-size: 12px; fill: var(--t-acento); font-weight: 700; }
.insignia circle { stroke: var(--superficie); stroke-width: 2; } .insignia text { font-size: 12px; font-weight: 800; fill: #fff; text-anchor: middle; }
.insignia.mal circle { fill: var(--peligro); } .insignia.pend circle { fill: var(--pendiente); }
.origen { font-size: 12px; font-weight: 800; } .origen.dicho { fill: var(--t-ok); } .origen.inferido { fill: var(--t-info); } .origen.supuesto { fill: var(--t-aviso); }
.inspector h3 { margin-top: .8rem; } .inspector h3:first-child { margin-top: 0; text-transform: none; font-size: 1rem; color: var(--texto); letter-spacing: 0; }
.inspector .cita { font-style: italic; color: var(--suave); }
.m-json { white-space: pre-wrap; font-size: .75rem; max-height: 300px; overflow: auto; background: var(--fondo); padding: .5rem; border-radius: 6px; }
.chip.cob-construible { background: var(--construible); } .chip.cob-manual { background: var(--manual); } .chip.cob-pendiente { background: var(--pendiente); } .chip.cob-sin_cloud { background: var(--sin-cloud); }
.chip.org-dicho { background: var(--construible); } .chip.org-inferido { background: var(--n3); } .chip.org-supuesto { background: var(--pendiente); }
.arbol { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.arbol li { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; border-left: 2px solid var(--borde); padding: .2rem .4rem; }
.m-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.m-columnas section { display: grid; gap: 1rem; }
.m-contenido th { text-align: left; font-size: .78rem; color: var(--suave); padding: .3rem .4rem; }
.m-contenido td:nth-child(2) { width: auto; }
.f-vista { display: grid; gap: .6rem; }
.f-campo { display: grid; gap: .2rem; font-size: .88rem; }
.f-campo span { font-weight: 600; } .f-campo .req { color: var(--t-peligro); }
.f-campo input, .f-campo textarea, .f-campo select { font: inherit; padding: .35rem .5rem; border: 1px solid var(--borde); border-radius: 6px; background: var(--fondo); }
.f-campo small { color: var(--suave); font-size: .75rem; }
.pendientes { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pendientes li { display: flex; justify-content: space-between; gap: .5rem; align-items: start; border-top: 1px solid var(--borde); padding-top: .5rem; }
.pendientes li.resuelta { opacity: .7; }
.cambio.agregado code { color: var(--construible); } .cambio.eliminado code { color: var(--peligro); } .cambio.modificado code { color: var(--acento); }
.m-historial tr.actual td { background: var(--ed); }
.enlace { background: none; border: 0; color: var(--primario); font: inherit; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }
#m-diff details { margin: .4rem 0; }
@media (max-width: 1250px) { .vista { grid-template-columns: 170px minmax(0, 1fr) 340px; } .lista { padding: .7rem; } }
@media (max-width: 1050px) {
  .vista { grid-template-columns: 1fr; height: auto; }
  .panel { height: auto; overflow: visible; }
  .inspector { max-height: none; }
  .conversacion { min-height: 60vh; }
  .m-columnas { grid-template-columns: 1fr; }
  .m-lienzo { max-height: 70vh; }
  .proyecto { height: auto; }
}

.fondo-dialogo { position: fixed; inset: 0; background: rgba(10, 20, 32, .45); display: grid; place-items: center; z-index: 30; padding: 16px; }
.dialogo { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: 14px; padding: 1.4rem; width: min(460px, 100%); box-shadow: 0 10px 40px rgba(0, 0, 0, .25); display: grid; gap: .7rem; }
.dialogo h2 { font-size: 1.05rem; }
.dialogo .nota { margin: 0; }
.dialogo input { font: inherit; padding: .55rem .7rem; border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo); color: var(--texto); }
.dlg-botones { justify-content: flex-end; margin-top: .3rem; }

/* ---------- Revisión UX P2 ---------- */
/* Iconos SVG propios (sprite en index.html) */
.ico { width: 1.15em; height: 1.15em; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico.ok { color: var(--t-ok); } .ico.mal, .ico.riesgo { color: var(--peligro); } .ico.supuesto { color: var(--t-aviso); } .ico.pregunta { color: var(--t-info); }
.nodo .icono { fill: none; stroke: var(--texto); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.marca-cambio { fill: var(--trazo-cambio); }
.btn-ico { background: none; border: 0; color: inherit; cursor: pointer; min-width: 28px; min-height: 28px; display: inline-grid; place-items: center; border-radius: 6px; padding: 0; }
.btn-ico:hover { background: rgba(127,127,127,.15); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.descargas a { align-items: center; }
/* Razón visible de un botón deshabilitado */
.motivo-bloqueo { font-size: .8rem; color: var(--t-aviso); display: inline-flex; align-items: center; gap: .3rem; flex-basis: 100%; justify-content: flex-end; }
/* Objetivos de toque: 32 px en escritorio, 44 px con puntero grueso; chips clicables ≥ 24 px */
.btn.chico { min-height: 32px; }
.chip-boton { min-height: 24px; padding: .2rem .65rem; }
.enlace { min-height: 24px; }
@media (pointer: coarse) { .btn, .btn.chico, .m-pestanas button, .pestanas button, .lista li button { min-height: 44px; } .chip-boton, .btn-ico { min-height: 44px; min-width: 44px; } }
/* Texto mínimo de 12 px */
.chip, .chip-boton, .ley small { font-size: .75rem; }
/* Encabezado principal del proyecto */
.cabecera-proyecto h1 { margin: 0; font-size: 1.15rem; }
/* Saltar al diagrama (visible al recibir foco) */
.saltar { position: absolute; left: 8px; top: -60px; z-index: 40; background: var(--primario); color: var(--sobre-primario); padding: .5rem .8rem; border-radius: 8px; font-weight: 700; }
.saltar:focus { top: 8px; }
/* Lista de proyectos plegable: en escritorio siempre abierta y sin encabezado */
#s-proyectos { display: none; }
.ir-chat { display: none; }
@media (max-width: 1050px) {
  #s-proyectos { display: list-item; cursor: pointer; font-weight: 700; padding: .4rem 0; min-height: 44px; }
  #d-proyectos[open] #s-proyectos { margin-bottom: .6rem; }
  .ir-chat { display: inline-flex; }
}
/* Lista de proyectos ocultable (escritorio) */
.lista { position: relative; }
.plegar-lista { position: absolute; top: .55rem; right: .5rem; z-index: 2; }
.lista #d-proyectos { margin-top: 2.2rem; }
.vista.lista-oculta { grid-template-columns: 48px minmax(0, 1fr) 400px; }
.vista.lista-oculta .lista { padding: .55rem 0; overflow: hidden; }
.vista.lista-oculta .plegar-lista { position: static; margin: 0 auto; display: grid; }
.vista.lista-oculta #d-proyectos { display: none; }
@media (max-width: 1250px) { .vista.lista-oculta { grid-template-columns: 48px minmax(0, 1fr) 340px; } }
/* Cuadro de elemento y dudas plegable */
.insp-cab { display: flex; align-items: center; gap: .5rem; }
.insp-cab h2 { flex: 1; margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); cursor: pointer; }
.chip-dudas { font-size: .75rem; font-weight: 700; padding: .05rem .5rem; border-radius: 999px; background: var(--pendiente); color: #fff; }
#insp-cuerpo { margin-top: .6rem; }
.inspector.plegado { flex: none; overflow: visible; }
.inspector.plegado #insp-cuerpo { display: none; }
@media (max-width: 1050px) {  /* en angosto la lista ya se pliega con su encabezado "Proyectos · …" */
  .plegar-lista { display: none !important; }
  .lista #d-proyectos { margin-top: 0; }
  .vista.lista-oculta { grid-template-columns: 1fr; }
  .vista.lista-oculta .lista { padding: 16px; }
  .vista.lista-oculta #d-proyectos { display: block; }
}

/* ---------- Revisión con el skill ui-ux-pro-max ---------- */
/* Encabezados de sección con nivel correcto (h2) y el mismo aspecto de rótulo que tenían los h3 */
h2.rotulo { margin: 0 0 .6rem; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.panel h2.rotulo, #t-entregables h2.rotulo { font-size: .8rem; }
.titulo-vacio { margin: 0 0 .5rem; font-size: 1.15rem; }
/* Una sola acción primaria por zona: las demás, en contorno con el color primario */
.btn.secundario { background: var(--superficie); color: var(--primario); border-color: var(--primario); }
.btn.secundario:hover:not(:disabled) { background: var(--ed); }
/* Botón ocupado mientras el servidor responde (sin animación) */
.btn[aria-busy="true"] { cursor: progress; }
/* Estado de Ed posiblemente desactualizado (el servidor no responde) */
.conexion { flex-basis: auto; justify-content: flex-start; color: var(--t-peligro); font-weight: 600; }
/* Navegación principal: la sección actual también se marca con forma, no solo con fondo */
.pestanas button[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--primario); }
/* En angosto el panel tiene altura automática: la conversación necesita alto propio (antes colapsaba a 28 px) */
@media (max-width: 1050px) { #conversacion { flex: none; height: 70vh; min-height: 360px; } }
#t-entregables summary { min-height: 28px; display: flex; align-items: center; }
.enlace { min-width: 24px; }
@media (pointer: coarse) {  /* lo que faltaba de 44 px con puntero grueso */
  .btn, .enlace { min-width: 44px; }
  .enlace { min-height: 44px; }
  .m-barra select, .fila-titulo select, .m-historial select, #m-a, #m-b, #t-entregables summary, .saltar { min-height: 44px; }
  .saltar { display: inline-flex; align-items: center; }
}

/* Altura dinámica en móviles (la barra del navegador no recorta el panel) */
@supports (height: 100dvh) { .vista { height: calc(100dvh - 57px); } .panel { height: calc(100dvh - 57px); } }
@media (max-width: 1050px) { .vista, .panel { height: auto; } .m-contenido.flujo .m-lienzo { max-height: 60vh; min-height: 240px; } }
/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Inicio, conversaciones y tickets (PLAN-INICIO.md) ---------- */
/* Navegación principal con enlaces (la URL es la fuente de la sección) */
.pestanas { min-width: 0; overflow-x: auto; }
.pestanas a { padding: .5rem .9rem; font-weight: 600; color: var(--suave); border-radius: 8px; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: 32px; }
.pestanas a:hover { background: var(--fondo); }
.pestanas a.activa { background: var(--ed); color: var(--primario); }
.pestanas a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--primario); }
/* Inicio */
.vista-inicio { padding: 1rem 1.25rem 2rem; display: grid; gap: 1.25rem; max-width: 1280px; margin: 0 auto; align-content: start; }
.inicio-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; }
.inicio-cab h1 { margin: 0; font-size: 1.4rem; }
.estado-ed { margin: 0; display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.estado-ed a { color: var(--primario); }
.acciones-inicio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.accion-card { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; align-items: start; text-align: left; font: inherit; color: var(--texto); text-decoration: none;
  background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--primario); border-radius: var(--radio); padding: 1rem; box-shadow: var(--sombra); cursor: pointer; min-height: 44px; }
.accion-card:hover { background: var(--ed); }
.accion-card .ico { grid-row: span 2; width: 28px; height: 28px; color: var(--primario); }
.accion-card b { font-size: 1.05rem; color: var(--primario); }
.accion-card span { color: var(--suave); font-size: .9rem; }
.paneles-inicio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.paneles-inicio .fila-titulo h2 { margin: 0; }
.paneles-inicio .fila-titulo { margin-bottom: .5rem; }
.lista-inicio { list-style: none; margin: 0; padding: 0; display: grid; }
.lista-inicio li { border-top: 1px solid var(--borde); }
.lista-inicio li:first-child { border-top: 0; }
.lista-inicio a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .5rem; padding: .5rem .3rem; color: var(--texto); text-decoration: none; border-radius: 6px; }
.lista-inicio a:hover { background: var(--fondo); }
.li-titulo { font-weight: 600; overflow-wrap: anywhere; }
.li-meta { grid-column: 1 / -1; color: var(--suave); font-size: .82rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.lista-inicio time { color: var(--suave); font-size: .78rem; white-space: nowrap; grid-row: 1; grid-column: 2; }
.vacio-lista { color: var(--suave); font-size: .9rem; padding: .5rem 0; }
.resumen-tickets { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 .5rem; font-size: .88rem; color: var(--suave); }
.resumen-tickets b { color: var(--texto); }
.resumen-alta { display: inline-flex; gap: .3rem; align-items: center; }
/* Prioridad y estado de tickets: texto siempre visible (no solo color) */
.chip { white-space: nowrap; }
.chip.prio-alta { background: var(--peligro); } .chip.prio-media { background: var(--aviso); } .chip.prio-baja { background: var(--manual); }
.chip-estado { display: inline-block; white-space: nowrap; font-size: .75rem; font-weight: 700; padding: 0 .45rem; border-radius: 999px; border: 1px solid var(--borde); color: var(--texto); background: var(--superficie); }
.chip-estado.est-abierto { border-color: var(--t-acento); color: var(--t-acento); }
.chip-estado.est-en-análisis { border-color: var(--t-info); color: var(--t-info); }
.chip-estado.est-resuelto { border-color: var(--t-ok); color: var(--t-ok); }
/* Conversaciones y tickets: lista | conversación | (detalle del ticket) */
.vista-hilos { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: calc(100vh - 57px); }
.vista-hilos.con-panel.con-detalle { grid-template-columns: 240px minmax(0, 1fr) 320px; }
.vista-hilos .lista { display: flex; flex-direction: column; gap: .5rem; }
.vista-hilos .lista ul { margin-top: .5rem; }
.vista-hilos .lista li a { display: block; padding: .5rem .6rem; border: 1px solid transparent; border-radius: 8px; color: var(--texto); text-decoration: none; overflow-wrap: anywhere; }
.vista-hilos .lista li a:hover { background: var(--fondo); }
.vista-hilos .lista li a.activo { background: var(--ed); border-color: var(--borde); }
.vista-hilos .lista small { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; color: var(--suave); margin-top: .15rem; }
.etiqueta-filtro { font-size: .82rem; font-weight: 600; color: var(--suave); margin-top: .5rem; }
#filtro-tickets, .panel-ticket select, .campo input, .campo select, .campo textarea { font: inherit; padding: .45rem .55rem; border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo); color: var(--texto); min-height: 32px; width: 100%; }
.hilo-centro { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ticket-hilo { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.hilo-centro .cabecera-proyecto h1 { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.hilo-centro .cabecera-proyecto .estado { margin: 0; font-size: .88rem; }
.hilo-centro .redactor .error { margin: .2rem 0 0; min-height: 0; }
.hilo-centro .acciones { align-items: center; }
.aviso-linea { margin: 0; display: inline-flex; gap: .3rem; align-items: center; font-size: .8rem; }
.vacio-hilo { margin: auto; max-width: 560px; text-align: left; }
.ticket-nuevo { overflow-y: auto; padding: 1rem 1.25rem 2rem; max-width: 760px; width: 100%; }
.ticket-nuevo h1 { margin: 0 0 .75rem; font-size: 1.25rem; }
.aviso-sensible { display: flex; gap: .6rem; align-items: flex-start; background: var(--sistema); border: 1px solid var(--borde); border-left: 4px solid var(--t-aviso); border-radius: 8px; padding: .7rem .9rem; margin: 0 0 1rem; font-size: .9rem; }
.aviso-sensible .ico { color: var(--t-aviso); width: 22px; height: 22px; margin-top: .1rem; }
.campo { display: grid; gap: .25rem; margin-bottom: .6rem; }
.campo label { font-weight: 600; font-size: .9rem; }
.campo .nota { margin: 0; font-size: .8rem; }
.campo .error { margin: 0; min-height: 0; font-size: .85rem; }
.campo textarea { resize: vertical; }
.campo-fila { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 1rem; }
[aria-invalid="true"] { border-color: var(--t-peligro) !important; }
.panel-ticket { border-left: 1px solid var(--borde); padding: .8rem; overflow-y: auto; display: grid; gap: .8rem; align-content: start; }
.panel-ticket .tarjeta { padding: .8rem; }
.panel-ticket h2.rotulo { font-size: .8rem; }
.datos-ticket { display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; margin: .4rem 0 0; font-size: .88rem; }
.datos-ticket dt { color: var(--suave); font-weight: 600; } .datos-ticket dd { margin: 0; overflow-wrap: anywhere; }
.adjuntar { margin-top: .5rem; }
a.enlace { display: inline-flex; align-items: center; }
/* Tipo de ticket: incidente o solicitud de cambio (opciones grandes, el texto dice qué es cada una) */
.tipo-ticket { border: 0; padding: 0; margin: 0 0 .6rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tipo-ticket legend { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; padding: 0; }
.tipo-ticket .error { grid-column: 1 / -1; }
.opcion-tipo { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--borde); border-radius: 8px; padding: .6rem .7rem; cursor: pointer; background: var(--superficie); min-height: 44px; }
.opcion-tipo input { margin: .25rem 0 0; width: 18px; height: 18px; accent-color: var(--primario); flex: none; }
.opcion-tipo span { display: grid; gap: .1rem; }
.opcion-tipo small { color: var(--suave); font-size: .82rem; }
.opcion-tipo:has(input:checked) { border-color: var(--primario); box-shadow: inset 0 0 0 1px var(--primario); background: var(--ed); }
.opcion-tipo:has(input:focus-visible) { outline: 3px solid var(--primario); outline-offset: 2px; }
.chip-tipo { display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; font-size: .75rem; font-weight: 700; color: var(--texto); }
.chip-tipo .ico { width: 1em; height: 1em; }
.aviso-campo { margin: 0; font-size: .82rem; color: var(--t-aviso); font-weight: 600; display: flex; gap: .3rem; align-items: center; }
textarea.mono { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
#tk-convertir-caja .nota { margin: 0 0 .5rem; }
@media (max-width: 700px) { .tipo-ticket { grid-template-columns: 1fr; } }
/* ---------- Usuarios, roles y Administración ---------- */
.login-campos { display: grid; gap: .5rem; }
.login-campos input { text-align: left; letter-spacing: 0; font-size: 1rem; padding: .6rem; border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo); color: var(--texto); }
.login-campos label { font-weight: 600; margin-top: .4rem; }
.login-campos .nota { margin: 0; }
.vista-pagina { padding: 1rem 1.25rem 2rem; display: grid; gap: 1rem; max-width: 1100px; margin: 0 auto; align-content: start; }
.vista-pagina h1 { margin: 0; font-size: 1.4rem; }
.vista-pagina .aviso-sensible { margin: 0; }
.form-usuario { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 0 .8rem; align-items: start; }
.campo-boton { padding-top: 1.55rem; }
.form-contrasena { max-width: 420px; }
.tabla-desliza { overflow-x: auto; }
.tabla-usuarios, .tabla-roles { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla-usuarios th, .tabla-usuarios td, .tabla-roles th, .tabla-roles td { text-align: left; padding: .45rem .5rem; border-top: 1px solid var(--borde); vertical-align: middle; }
.tabla-usuarios thead th, .tabla-roles thead th { border-top: 0; font-size: .8rem; color: var(--suave); }
.tabla-roles tbody th { font-weight: 400; }
.tabla-roles td { width: 120px; }
.tabla-usuarios select { font: inherit; padding: .3rem .4rem; border: 1px solid var(--borde); border-radius: 6px; background: var(--fondo); color: var(--texto); min-height: 32px; }
.tabla-usuarios { min-width: 760px; }  /* en angosto la tabla se desplaza dentro de su caja en vez de partir el correo */
.celda-correo { white-space: nowrap; }
.acciones-fila { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.tabla-usuarios tr.inactivo th, .tabla-usuarios tr.inactivo .celda-correo { color: var(--suave); }
.bitacora { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; font-size: .88rem; max-height: 420px; overflow-y: auto; }
.bitacora li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--borde); }
.bitacora li:first-child { border-top: 0; }
.bitacora time { color: var(--suave); font-size: .82rem; }
.bitacora span { overflow-wrap: anywhere; }
@media (max-width: 1050px) { .form-usuario { grid-template-columns: 1fr 1fr; } .campo-boton { padding-top: 0; } }
@media (max-width: 700px) {
  .vista-pagina { padding: 1rem 16px 2rem; }
  .form-usuario { grid-template-columns: 1fr; }
  .bitacora li { grid-template-columns: 1fr; gap: .1rem; }
}
@media (pointer: coarse) { .tabla-usuarios select { min-height: 44px; min-width: 44px; } }
/* Rol de consulta: se ve y se descarga, pero no se escribe (el servidor también lo rechaza con 403) */
.aviso-consulta { display: none; margin: 0; padding: .5rem 1rem; background: var(--sistema); border-bottom: 1px solid var(--borde); font-size: .88rem; font-weight: 600; align-items: center; gap: .4rem; }
body.rol-consulta .aviso-consulta { display: flex; }
body.rol-consulta #nuevo, body.rol-consulta .acciones-inicio, body.rol-consulta #ini-acciones-t,
body.rol-consulta .vista-hilos .lista > a.btn, body.rol-consulta #form-chat, body.rol-consulta #form-ticket,
body.rol-consulta #form-ticket-msg, body.rol-consulta #tk-convertir-caja, body.rol-consulta .adjuntar,
body.rol-consulta #form-mensaje, body.rol-consulta .m-barra [data-a="aprobar"], body.rol-consulta #motivo-aprobar,
body.rol-consulta .m-mas, body.rol-consulta .m-vacio [data-a], body.rol-consulta .duda textarea,
body.rol-consulta .duda .fila-botones, body.rol-consulta .duda .error, body.rol-consulta [data-a="reabrir"],
body.rol-consulta .vacio-lista .enlace, body.rol-consulta #ticket-nuevo .aviso-sensible, body.rol-consulta .aviso-linea { display: none !important; }
/* Acceso inicial (aún no hay administradores): solo Administración */
body.acceso-inicial .pestanas a { display: none; }  /* Administración se abre desde el menú del perfil */

/* Barra del modelo: en pantallas anchas, Deshacer / Restaurar / Rehacer van en la barra; en celular, en el menú "Más" */
.m-mas-boton { display: none; }
.m-mas, .m-mas-menu { display: contents; }
@media (max-width: 700px) {
  .m-mas { display: block; position: relative; }
  .m-mas-boton { display: inline-flex; }
  .m-mas-menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; min-width: 220px; flex-direction: column; gap: .3rem;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: .4rem; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
  .m-mas-menu.abierto { display: flex; }
  .m-mas-menu .btn { justify-content: flex-start; width: 100%; }
  .m-barra { padding: .4rem 16px; gap: .3rem; }
  .m-barra select { flex: 1 1 140px; min-width: 0; }
  .m-barra .m-espacio { display: none; }
  .m-barra .motivo-bloqueo { flex-basis: 100%; justify-content: flex-start; }
  /* Cabecera del proyecto: nombre en una fila; Conversación y el estado de Ed juntos en la siguiente */
  .cabecera-proyecto { padding: .5rem 16px; gap: .3rem .6rem; }
  .cabecera-proyecto > div:first-child { flex: 1 0 100%; }
  .cabecera-proyecto #p-detalle { display: none; }
  .cabecera-proyecto .estado { flex: 1; min-width: 0; }
  .m-pestanas { padding: .2rem 16px 0; }
  .m-contenido.flujo { padding: .4rem 16px; gap: .3rem; }
  /* Leyenda plegada y controles de zoom en una sola fila */
  .m-leyenda { flex-wrap: nowrap; gap: .3rem; }
  .m-ley-det { flex: 1; min-width: 0; }
  .m-ley-det[open] { flex-basis: 100%; }
  .m-leyenda:has(.m-ley-det[open]) { flex-wrap: wrap; }
  .m-ley-det summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
  .m-leyenda .btn.chico { padding: .3rem .5rem; }
  .m-leyenda .m-espacio { display: none; }
  /* Lista de proyectos: en celular, solo su encabezado plegable */
  #vista-proyectos > .lista { padding: 4px 16px; }
}
/* En pantallas anchas la leyenda se ve siempre, sin el encabezado plegable */
.m-ley-det { display: contents; }
.m-ley-det summary { display: none; }
.m-ley-items { display: contents; }
@media (max-width: 700px) {
  .m-ley-det { display: block; }
  .m-ley-det summary { display: flex; }
  .m-ley-items { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: .3rem; }
}  /* min-height de 24 px también en enlaces en línea */
.texto-largo { font-size: .88rem; max-height: 260px; overflow-y: auto; overflow-wrap: anywhere; }
@supports (height: 100dvh) { .vista-hilos { height: calc(100dvh - 57px); } }
@media (max-width: 1250px) {
  .vista-hilos { grid-template-columns: 200px minmax(0, 1fr); }
  .vista-hilos.con-panel.con-detalle { grid-template-columns: 200px minmax(0, 1fr) 280px; }
}
@media (max-width: 1050px) {
  .acciones-inicio, .paneles-inicio { grid-template-columns: 1fr; }
  .vista-hilos, .vista-hilos.con-panel.con-detalle { grid-template-columns: 1fr; height: auto; }
  .vista-hilos .lista { border-right: 0; border-bottom: 1px solid var(--borde); max-height: 40vh; }
  .hilo-centro .mensajes { height: 60vh; flex: none; }
  .panel-ticket { border-left: 0; border-top: 1px solid var(--borde); }
  .vista-hilos .hilo-centro { order: -1; }  /* en angosto, la conversación primero; detalle y lista debajo */
  .vista-hilos .lista { order: 1; border-top: 1px solid var(--borde); }
  .marca span { display: none; }
}
@media (max-width: 700px) {
  .vista-inicio { padding: 1rem 16px 2rem; }
  .campo-fila { grid-template-columns: 1fr; }
  .ticket-nuevo { padding: 1rem 16px 2rem; }
}
@media (pointer: coarse) {
  .descargas a, .pestanas a, .vista-hilos .lista li a, .lista-inicio a, #filtro-tickets, .panel-ticket select, .campo input, .campo select { min-height: 44px; }
}

.aviso { position: fixed; bottom: 16px; left: 16px; right: 16px; margin: 0 auto; width: max-content; background: var(--texto); color: var(--fondo); padding: .6rem 1rem; border-radius: 8px; z-index: 20; max-width: calc(100% - 32px); }

@media (max-width: 1050px) {
  .vista { grid-template-columns: 200px 1fr; }
  .panel { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--borde); }
  .vista { height: auto; }
  #conversacion { height: 70vh; }
}
@media (max-width: 700px) {
  .barra { flex-wrap: wrap; padding: .6rem 16px; }
  .usuario-menu { order: 2; }
  .pestanas { order: 3; margin: 0; flex: 1 0 100%; }
  .vista { grid-template-columns: 1fr; }
  .lista { border-right: 0; border-bottom: 1px solid var(--borde); padding: 16px; }
  .msg { max-width: 100%; }
}

/* ---------- Menú de usuario (estilo SaaS): avatar con iniciales y panel con cuenta, administración y salida ---------- */
.usuario-menu { position: relative; margin-left: auto; }
.usuario-boton { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .25rem .65rem .25rem .25rem; border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: inherit; font: inherit; cursor: pointer; }
.barra .usuario-boton { color: var(--sobre-marca, #fff); }
.barra .usuario-boton:hover, .barra .usuario-boton[aria-expanded="true"] { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: var(--sobre-marca, #fff); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 600; font-size: .85rem; letter-spacing: .02em;
  background: var(--marca-azul, #43A4DC); color: var(--marca, #102A3F); }  /* 5.3:1 */
.avatar.grande { width: 44px; height: 44px; font-size: 1rem; }
.usuario-texto { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.usuario-nombre { font-weight: 600; font-size: .9rem; white-space: nowrap; }
.usuario-rol { font-size: .75rem; color: var(--sobre-marca-suave, #C9D3DC); white-space: nowrap; }
.usuario-flecha { width: 16px; height: 16px; color: var(--sobre-marca-suave, #C9D3DC); }
.usuario-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 290px; display: flex; flex-direction: column; padding: .4rem;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 42, 63, .18); }
.usuario-cabecera { display: flex; gap: .75rem; align-items: center; padding: .6rem .6rem .8rem; margin-bottom: .3rem; border-bottom: 1px solid var(--borde); }
.usuario-cabecera b { display: block; overflow-wrap: anywhere; }
.usuario-correo { display: block; font-size: .8rem; color: var(--suave); overflow-wrap: anywhere; }
.usuario-insignia { display: inline-block; margin-top: .35rem; padding: .05rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--ed); color: var(--texto); }
.usuario-item { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 40px; padding: .55rem .7rem; border: 0; border-radius: 8px;
  background: none; color: var(--texto); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.usuario-item .ico { color: var(--suave); }
.usuario-item:hover, .usuario-item:focus-visible { background: var(--ed); }
.usuario-item.peligro, .usuario-item.peligro .ico { color: var(--t-peligro); }
.usuario-panel hr { border: 0; border-top: 1px solid var(--borde); margin: .3rem 0; }
.usuario-panel :focus-visible { outline: 3px solid var(--enlace, var(--primario)); outline-offset: -3px; }  /* sobre blanco, no el azul claro de la barra */
@media (max-width: 1250px) { .usuario-texto { display: none; } .usuario-boton { padding-right: .45rem; } }
@media (pointer: coarse) { .usuario-item { min-height: 44px; } }

/* ---------- Estructura tipo SaaS (2026-10-21): barra lateral + barra superior delgada ----------
   La barra superior mide 57 px (56 + borde), igual que la barra horizontal anterior: las alturas calc(100vh - 57px) siguen valiendo. */
.app { display: grid; grid-template-columns: var(--ancho-lateral, 248px) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.app.lateral-plegada { --ancho-lateral: 72px; }
.contenido { min-width: 0; }

/* Barra lateral: el azul de la marca, logo arriba, secciones con icono y el usuario abajo */
.lateral { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 4px; padding: 14px 12px 12px;
  background: var(--marca, #102A3F); color: var(--sobre-marca, #fff); z-index: 25; border-right: 1px solid rgba(255, 255, 255, .06); }
.lateral-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.lateral-logo { display: flex; align-items: center; border-radius: 8px; }
.lateral-logo .logo-completo { width: 150px; height: auto; display: block; }
.lateral-logo .logo-icono { display: none; width: 36px; height: 36px; }  /* ícono oficial blanco; normativa: 32–40 px, nunca el logo encogido */
.lateral-boton { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--sobre-marca-suave, #C9D3DC); cursor: pointer; flex: none; }
.lateral-boton:hover { background: rgba(255, 255, 255, .1); color: var(--sobre-marca, #fff); }
.lateral-cerrar, .abrir-lateral { display: none; }
.lateral-producto { margin: 10px 4px 6px; display: flex; flex-direction: column; line-height: 1.25; }
.lateral-producto b { font-family: var(--f-titulo, inherit); font-size: 1.05rem; color: var(--sobre-marca, #fff); }
.lateral-producto span { font-size: .75rem; color: var(--sobre-marca-suave, #C9D3DC); }
.lateral .pestanas { order: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; margin: 8px 0 0; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .1); overflow-y: auto; overflow-x: hidden; min-width: 0; }
.lateral .pestanas a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 10px; white-space: nowrap;
  color: var(--sobre-marca-suave, #C9D3DC); font-weight: 600; text-decoration: none; background: none; box-shadow: none; }
.lateral .pestanas a .ico { width: 20px; height: 20px; flex: none; }
.lateral .pestanas a:hover { background: rgba(255, 255, 255, .08); color: var(--sobre-marca, #fff); }
.lateral .pestanas a.activa, .lateral .pestanas a[aria-current="page"] { background: rgba(67, 164, 220, .2); color: var(--sobre-marca, #fff); box-shadow: inset 3px 0 0 var(--marca-azul, #43A4DC); }
.lateral :focus-visible { outline: 3px solid var(--marca-azul, #43A4DC); outline-offset: 2px; }
.lateral-pie { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 10px; }

/* Usuario abajo: botón a lo ancho y panel que abre hacia arriba */
.lateral .usuario-menu { margin: 0; }
.lateral .usuario-boton { width: 100%; border-radius: 12px; padding: 6px 8px; color: var(--sobre-marca, #fff); }
.lateral .usuario-boton:hover, .lateral .usuario-boton[aria-expanded="true"] { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .15); }
.lateral .usuario-texto { display: flex; flex: 1; min-width: 0; }
.lateral .usuario-nombre { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lateral .usuario-boton.en-seccion { background: rgba(67, 164, 220, .2); box-shadow: inset 3px 0 0 var(--marca-azul, #43A4DC); }
.lateral .usuario-panel { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; width: 272px; }

/* Plegada: solo iconos; las etiquetas siguen para lectores de pantalla y el title da el nombre al pasar el puntero */
.app.lateral-plegada .lateral { padding-inline: 10px; }
.app.lateral-plegada .lateral-cab { flex-direction: column; }
.app.lateral-plegada .logo-completo, .app.lateral-plegada .lateral-producto { display: none; }
.app.lateral-plegada .logo-icono { display: block; }
.app.lateral-plegada .lateral .pestanas a { justify-content: center; padding: 10px 0; }
.app.lateral-plegada .lateral .pestanas a span, .app.lateral-plegada .lateral .usuario-texto, .app.lateral-plegada .lateral .usuario-flecha {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app.lateral-plegada .lateral .usuario-boton { justify-content: center; padding: 6px 0; }

/* Barra superior: sección actual y estado de Ed (en todas las vistas) */
.superior { position: sticky; top: 0; z-index: 15; height: 57px; display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem;
  background: var(--superficie); border-bottom: 1px solid var(--borde); }
.superior-logo { display: none; border-radius: 6px; }
.miga { margin: 0; flex: 1; min-width: 0; font-weight: 600; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.estado-global { display: inline-flex; align-items: center; gap: .45rem; min-height: 32px; padding: .25rem .75rem; border: 1px solid var(--borde); border-radius: 999px;
  color: var(--texto); font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; background: var(--fondo); }
.estado-global:hover { border-color: var(--suave); }
.estado-global .punto { width: 8px; height: 8px; }

/* Celular y tableta angosta: la barra lateral es un cajón con velo; la superior lleva el botón de menú */
.velo { position: fixed; inset: 0; z-index: 24; background: rgba(10, 20, 32, .5); }
@media (max-width: 899px) {
  .app, .app.lateral-plegada { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; left: 0; top: 0; width: min(300px, 86vw); display: none; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
  .app.lateral-abierta .lateral { display: flex; }
  #lateral-plegar { display: none; }  /* en el cajón no aplica plegar */
  .lateral-cerrar, .abrir-lateral { display: inline-grid; }
  .abrir-lateral { color: var(--texto); width: 44px; height: 44px; }
  .abrir-lateral:hover { background: var(--fondo); color: var(--texto); }
  .superior { padding: 0 12px; gap: .5rem; }
  .superior-logo { display: block; }
}
@media (max-width: 480px) { .estado-global #estado-global-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .estado-global { padding: .25rem .6rem; min-width: 44px; justify-content: center; } }
@media (pointer: coarse) { .lateral-boton { width: 44px; height: 44px; } .estado-global { min-height: 44px; } }

/* ---------- Administración en pestañas y Configuración del agente (2026-10-21) ---------- */
.adm-pestanas { padding: 0; background: none; }
.adm-pestanas button { min-height: 44px; }
.adm-panel { display: grid; gap: 1rem; }
.adm-panel[hidden] { display: none; }
.datos-agente { grid-template-columns: max-content 1fr; gap: .45rem 1rem; margin: 0 0 .8rem; }
.datos-agente dd { display: flex; align-items: center; gap: .35rem; }
.ag-trabajo { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; padding: .6rem .8rem; border-radius: 8px; background: var(--ed); font-weight: 600; }
.form-ia { max-width: 720px; }
.form-ia .tipo-ticket { margin-bottom: .2rem; }
.form-nombre { max-width: 420px; }

/* ---------- Pantalla del proyecto: ficha del paso, respuestas en lote y lienzo arrastrable (2026-10-21) ---------- */
/* Un modo de panel a la vez: al elegir un paso solo se ve su ficha; la conversación y los entregables, con sus botones */
#panel[data-modo="elemento"] #conversacion, #panel[data-modo="elemento"] #t-entregables,
#panel[data-modo="conversacion"] #inspector, #panel[data-modo="conversacion"] #t-entregables,
#panel[data-modo="entregables"] #inspector, #panel[data-modo="entregables"] #conversacion { display: none !important; }
#panel[data-modo="elemento"] .inspector { max-height: none; flex: 1 1 auto; overflow-y: auto; }
#panel[data-modo="elemento"] .inspector.plegado #insp-cuerpo { display: block; }
#panel[data-modo="elemento"] #plegar-insp { display: none; }
#panel[data-modo="conversacion"] .conversacion { flex: 1 1 auto; }
/* Respuestas listas para mandar juntas a revisión del agente */
.lote-dudas { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin: .6rem 0; padding: .6rem .75rem;
  border: 1px dashed var(--borde); border-radius: 10px; background: var(--fondo); font-size: .88rem; }
.lote-dudas.con-respuestas { border-style: solid; border-color: var(--t-ok); background: var(--ed); }
.lote-nota { flex: 1 1 100%; margin: 0; display: flex; gap: .35rem; align-items: center; color: var(--t-aviso); font-weight: 600; }
.lote-texto { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
/* Lienzo: se desplaza arrastrando con el cursor */
.m-lienzo { cursor: grab; }
.m-lienzo .nodo { cursor: pointer; }
.m-lienzo.arrastrando, .m-lienzo.arrastrando .nodo { cursor: grabbing; user-select: none; }
.m-lienzo:focus-visible { outline: 3px solid var(--enlace, var(--primario)); outline-offset: 2px; }
#panel[data-modo="elemento"] .panel-titulo { visibility: hidden; }  /* la ficha ya trae su encabezado "Ficha del paso" */
/* Login: botón para pausar la animación en bucle (WCAG 2.2.2) */
.login-pausa { position: absolute; right: 16px; top: 16px; z-index: 2; min-height: 36px; padding: .35rem .8rem; border: 1px solid #6B7A86; border-radius: 8px;
  background: #FFFFFF; color: #102B40; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.login-pausa:hover { background: #EEF1F3; }
.login-pausa:focus-visible { outline: 3px solid #102B40; outline-offset: 2px; }
@media (pointer: coarse) { .login-pausa { min-height: 44px; } }

/* Cuentas de ChatGPT del agente (Configuración del agente) */
.lista-cuentas { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .5rem; }
.cuenta-cx { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .7rem;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--fondo); }
.cuenta-cx small { color: var(--suave); }
.codigo-cx { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .4rem 0; }
.codigo-cx code { font-size: 1.6rem; font-weight: 700; letter-spacing: .12em; padding: .2rem .6rem; border: 1px solid var(--borde); border-radius: 8px; }