/* ---------- Pantallas internas, estilo SaaS (2026-10-21) ----------
   Se carga después de estilos.css y marca.css. Solo presentación: usa los tokens de marca (claro y oscuro)
   y conserva ids y clases que usan app.js, inicio.js, modelo.js, admin.js y las reglas del rol de consulta.
   Sin animaciones: los cambios de estado son inmediatos. */

:root { --radio-tarjeta: 14px; --sombra-suave: 0 1px 2px rgba(16, 42, 63, .05), 0 4px 16px rgba(16, 42, 63, .04); --ancho-lectura: 820px; }
@media (prefers-color-scheme: dark) { :root { --sombra-suave: 0 1px 2px rgba(0, 0, 0, .3); } }
.contenido { background: var(--fondo); }

/* Piezas compartidas */
.inicio-sub { margin: .25rem 0 0; color: var(--suave); font-size: .95rem; }
.codigo { font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--suave); }
.pildora { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; border: 1px solid var(--borde);
  font-size: .75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--superficie); color: var(--texto); }
.pildora .ico { width: 1em; height: 1em; }
.pildora.ok { color: var(--t-ok); border-color: currentColor; }
.pildora.mal { color: var(--t-peligro); border-color: currentColor; }
.pildora.trabajo { color: var(--t-acento); border-color: currentColor; }
.pildora.vacia { color: var(--suave); }
.tarjeta { border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-suave); }
.fila-titulo .enlace { font-size: .88rem; }

/* ---------- Inicio: saludo, indicadores, acciones y actividad ---------- */
.vista-inicio { max-width: 1240px; padding: 28px 32px 40px; gap: 28px; }
.inicio-cab { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px;
  background: none; color: var(--texto); padding: 0; border-radius: 0; }
.inicio-cab h1 { margin: 0; font-size: 1.75rem; line-height: 1.2; color: var(--texto); }
.inicio-cab .estado-ed { margin: 0; display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border: 1px solid var(--borde); border-radius: 999px;
  background: var(--superficie); color: var(--texto); font-size: .88rem; font-weight: 600; max-width: 100%; }
.inicio-cab .estado-ed a { color: var(--enlace); }

.kpis-inicio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kpi-card { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ico cifra" "ico etiqueta" "detalle detalle"; gap: 0 14px; align-items: center;
  padding: 18px 20px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-suave);
  color: var(--texto); text-decoration: none; min-height: 44px; }
.kpi-card:hover { border-color: var(--marca-azul); }
.kpi-ico { grid-area: ico; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ed); color: var(--enlace); }
.kpi-ico .ico { width: 22px; height: 22px; }
.kpi-cifra { grid-area: cifra; font-family: var(--f-titulo); font-weight: 600; font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-etiqueta { grid-area: etiqueta; font-weight: 600; font-size: .92rem; }
.kpi-detalle { grid-area: detalle; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borde); color: var(--suave); font-size: .85rem; }
.kpi-detalle b { color: var(--t-peligro); }

.acciones-inicio { gap: 16px; }
.accion-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 1px solid var(--borde); border-left-width: 1px; border-radius: var(--radio-tarjeta);
  background: var(--superficie); box-shadow: var(--sombra-suave); }
.accion-card:hover { background: var(--superficie); border-color: var(--marca-azul); }
.accion-card .accion-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ed); color: var(--enlace); }
.accion-card .accion-ico .ico { grid-row: auto; width: 22px; height: 22px; color: inherit; }
.accion-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.accion-card .accion-texto b { font-size: 1rem; }
.accion-card .accion-texto span { color: var(--suave); font-size: .88rem; }
.accion-card .accion-ir { grid-row: auto; flex: none; width: 18px; height: 18px; margin: 13px 0 0 auto; color: var(--suave); }
.accion-card:hover .accion-ir { color: var(--enlace); }

.paneles-inicio { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.columna-inicio { display: grid; gap: 16px; align-content: start; }
.paneles-inicio .tarjeta { padding: 18px 20px; }
.lista-inicio a { padding: 12px 10px; border-radius: 10px; gap: 2px 12px; }
.lista-inicio .li-meta { gap: .5rem; margin-top: 2px; }
.resumen-tickets { gap: .25rem 1rem; }

/* ---------- Proyectos: galería (#/proyectos) y espacio de trabajo (#/wNN) ---------- */
/* Espacio de trabajo: el diagrama ocupa todo el ancho. El panel (elemento, dudas, conversación, entregables) se abre
   bajo demanda a la derecha y se cierra solo al enviar un cambio. Sin columna de lista: se vuelve con "Todos los proyectos". */
#vista-proyectos.vista, #vista-proyectos.vista.lista-oculta { grid-template-columns: minmax(0, 1fr); }
#vista-proyectos.panel-abierto:not(.en-galeria) { grid-template-columns: minmax(0, 1fr) 400px; }
#vista-proyectos:not(.panel-abierto) #panel { display: none !important; }
#vista-proyectos > .lista { display: none; }
#vista-proyectos.en-galeria { grid-template-columns: minmax(0, 1fr); height: auto; min-height: calc(100vh - 57px); }
#vista-proyectos.en-galeria #proyecto, #vista-proyectos.en-galeria #panel { display: none !important; }
#vista-proyectos.en-galeria #vacio { display: grid !important; }
#vista-proyectos.en-galeria .centro { min-height: 0; }

.galeria { width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 32px 40px; display: grid; gap: 24px; align-content: start; }
.pagina-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.pagina-cab h1 { margin: 0; font-size: 1.75rem; line-height: 1.2; }
.pagina-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
#gal-buscar { height: 42px; min-width: 260px; padding: 0 14px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--texto); font: inherit; }
#gal-buscar::placeholder { color: var(--suave); }
.pagina-acciones .btn { height: 42px; }

.galeria-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.proy-card { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 160px; padding: 18px; background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-suave); text-decoration: none; }
.proy-card:hover { border-color: var(--marca-azul); }
.proy-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.proy-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ed); color: var(--enlace); }
.proy-ico .ico { width: 20px; height: 20px; }
.proy-nombre { font-family: var(--f-titulo); font-weight: 600; font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.proy-pie { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.proy-pie time { color: var(--suave); font-size: .8rem; }
.galeria-vacia { grid-column: 1 / -1; padding: 32px; text-align: center; color: var(--suave); background: var(--superficie);
  border: 1px dashed var(--borde); border-radius: var(--radio-tarjeta); }

.como-funciona { padding: 20px 24px; }
.pasos-ed { list-style: none; counter-reset: paso; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pasos-ed li { counter-increment: paso; display: grid; gap: 4px; align-content: start; }
.pasos-ed li::before { content: counter(paso); display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 4px; border-radius: 50%;
  background: var(--marca); color: #FFFFFF; font-weight: 600; font-size: .85rem; }
@media (prefers-color-scheme: dark) { .pasos-ed li::before { background: var(--marca-azul); color: var(--marca); } }
.pasos-ed b { font-size: .95rem; }
.pasos-ed span { color: var(--suave); font-size: .88rem; }

/* Espacio de trabajo del proyecto */
.cabecera-proyecto { padding: 12px 20px; gap: 4px 16px; }
.volver { flex-basis: 100%; display: inline-flex; align-items: center; gap: .3rem; width: max-content; min-height: 24px;
  color: var(--enlace); font-size: .85rem; font-weight: 600; text-decoration: none; }
.volver:hover { text-decoration: underline; }
.volver .ico { width: 1em; height: 1em; }
.cabecera-proyecto .estado { padding: .3rem .75rem; border: 1px solid var(--borde); border-radius: 999px; background: var(--fondo); }
.estado:empty, .estado-ed:empty { display: none !important; }  /* "Ed está libre" solo en la barra superior */
.cabecera-proyecto > div:nth-child(2) { flex: 1 1 260px; min-width: 0; }
.acciones-proyecto { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ir-chat { display: none !important; }
.nuevo-msg { margin-left: .25rem; padding: 0 .45rem; border-radius: 999px; background: var(--primario); color: var(--sobre-primario); font-size: .75rem; line-height: 1.5; }
.panel { background: var(--fondo); border-left: 1px solid var(--borde); }
.panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; }
.panel-titulo { font-weight: 600; font-size: .9rem; color: var(--suave); }

/* Pestañas del modelo: icono, texto y conteo; se desplazan a lo ancho si no caben */
.m-pestanas { gap: 4px; padding: 6px 16px 0; scrollbar-width: thin; }
.m-pestanas button { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .8rem; border-radius: 8px 8px 0 0; }
.m-pestanas button .ico { width: 16px; height: 16px; }
.m-pestanas button:hover { color: var(--texto); background: var(--fondo); }
.tab-cuenta { display: inline-grid; place-items: center; min-width: 1.5em; padding: 0 .4rem; border-radius: 999px; background: var(--fondo); border: 1px solid var(--borde);
  color: var(--texto); font-size: .75rem; font-weight: 600; line-height: 1.5; }
.m-pestanas button.activa .tab-cuenta { background: var(--ed); border-color: transparent; }

/* Plantillas y formularios: piezas separadas, cada una como tarjeta con su tipo */
.m-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; }
.pieza { padding: 0; overflow: hidden; }
.pieza-cab { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--borde); }
.pieza-cab > div { flex: 1; min-width: 0; }
.pieza-cab h2 { margin: 0; font-family: var(--f-titulo); font-size: 1.05rem; overflow-wrap: anywhere; }
.pieza-tipo { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.pieza-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; }
.pieza-plantilla .pieza-ico { background: var(--ed); color: var(--enlace); }
.pieza-formulario .pieza-ico { background: var(--sistema); color: var(--t-aviso); }
.pieza-plantilla { border-top: 3px solid var(--marca-azul); }
.pieza-formulario { border-top: 3px solid var(--marca-calido); }
.pieza .tabla-desliza { padding: 4px 18px 14px; overflow-x: auto; }
.pieza thead th { text-align: left; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); padding: .6rem .4rem; }
.f-hoja { margin: 16px 18px 18px; padding: 18px; background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px; }
.m-sin { grid-column: 1 / -1; padding: 28px; text-align: center; color: var(--suave); border: 1px dashed var(--borde); border-radius: var(--radio-tarjeta); margin: 0; }

/* ---------- Conversaciones y tickets: bandeja a la izquierda, conversación centrada ---------- */
.vista-hilos .lista { background: var(--superficie); padding: 16px; gap: .6rem; }
.vista-hilos .lista > a.btn { text-decoration: none; white-space: nowrap; }
.vista-hilos .lista li a { padding: 10px 12px; border-radius: 10px; font-weight: 600; }
.vista-hilos .lista small { font-weight: 400; }
.hilo-centro { background: var(--fondo); }
.hilo-centro .cabecera-proyecto { padding: 14px 24px; }
.hilo-centro .mensajes { padding: 24px max(24px, calc((100% - var(--ancho-lectura)) / 2)); gap: 14px; }
.hilo-centro .msg { max-width: 85%; padding: 12px 16px; border-radius: 16px; font-size: .95rem; }
.hilo-centro .msg.ed { background: var(--superficie); border: 1px solid var(--borde); border-top-left-radius: 6px; }
.hilo-centro .msg.usuario { border-top-right-radius: 6px; }
.hilo-centro .redactor { background: none; border-top: 0; padding: 0 max(24px, calc((100% - var(--ancho-lectura)) / 2)) 20px; }
.hilo-centro .redactor textarea { border-radius: var(--radio-tarjeta); padding: 14px 16px; background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra-suave); }
.hilo-centro .redactor textarea:focus-visible { border-color: var(--marca-azul); }

.vacio-hilo { margin: auto; max-width: 560px; text-align: center; display: grid; justify-items: center; gap: 10px; padding: 24px 0; }
.vacio-hilo h2 { margin: 0; font-family: var(--f-titulo); font-size: 1.4rem; }
.vacio-hilo p { margin: 0; }
.vacio-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--ed); color: var(--enlace); }
.vacio-ico .ico { width: 26px; height: 26px; }
.sugerencias { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; width: 100%; }
.sugerencia { width: 100%; min-height: 44px; padding: 10px 14px; text-align: left; font: inherit; font-size: .92rem; color: var(--texto); cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; }
.sugerencia:hover { border-color: var(--marca-azul); }

.ticket-nuevo { max-width: 860px; margin: 0 auto; padding: 28px 32px 40px; }
.ticket-nuevo h1 { font-size: 1.6rem; }
#form-ticket { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-suave); padding: 24px; }
.campo input, .campo select, .campo textarea, #filtro-tickets, .panel-ticket select { border-radius: 10px; }
.panel-ticket { background: var(--fondo); }

/* ---------- Mi cuenta y Administración ---------- */
.vista-pagina { max-width: 1100px; padding: 28px 32px 40px; gap: 20px; }
.vista-pagina h1 { font-size: 1.75rem; }
.vista-pagina .tarjeta { padding: 20px 24px; }
.vista-pagina table { font-size: .9rem; }
.vista-pagina thead th { text-align: left; padding: .6rem .6rem; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--suave); background: var(--fondo); border-bottom: 1px solid var(--borde); }
.vista-pagina tbody td, .vista-pagina tbody th { padding: .7rem .6rem; border-top: 1px solid var(--borde); }
.vista-pagina tbody tr:hover { background: var(--fondo); }

/* Rol de consulta: tampoco ve las acciones nuevas de escritura */
body.rol-consulta #gal-nuevo, body.rol-consulta .sugerencias { display: none !important; }

/* ---------- Pantallas medianas y celular ---------- */
@media (max-width: 1440px) { #vista-proyectos.panel-abierto:not(.en-galeria) { grid-template-columns: minmax(0, 1fr) 380px; } }
@media (max-width: 1250px) { .pasos-ed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) {  /* angosto: el panel se superpone al diagrama como cajón, con velo */
  #vista-proyectos.panel-abierto:not(.en-galeria) { grid-template-columns: minmax(0, 1fr); }
  #vista-proyectos.panel-abierto #panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); height: 100vh; height: 100dvh; z-index: 26;
    grid-column: auto; border-top: 0; overflow-y: auto; box-shadow: 0 0 40px rgba(0, 0, 0, .3); }
  #vista-proyectos.panel-abierto #panel .conversacion { min-height: 420px; }
  #vista-proyectos.panel-abierto::after { content: ""; position: fixed; inset: 0; z-index: 25; background: rgba(10, 20, 32, .45); }
}
@media (max-width: 1050px) { .paneles-inicio { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .kpis-inicio, .acciones-inicio { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .vista-inicio, .galeria, .ticket-nuevo, .vista-pagina { padding: 20px 16px 32px; }
  .inicio-cab h1, .pagina-cab h1, .vista-pagina h1 { font-size: 1.45rem; }
  .kpis-inicio { gap: 8px; }  /* indicadores compactos: una fila cada uno, sin el detalle */
  .kpi-card { grid-template-columns: auto auto 1fr; grid-template-areas: "ico cifra etiqueta"; padding: 10px 14px; gap: 0 12px; }
  .kpi-ico { width: 36px; height: 36px; border-radius: 10px; }
  .kpi-cifra { font-size: 1.4rem; }
  .kpi-detalle { display: none; }
  .pagina-acciones, #gal-buscar { width: 100%; min-width: 0; }
  #gal-buscar { flex: 1 1 200px; }
  .pasos-ed { grid-template-columns: minmax(0, 1fr); }
  .galeria-grid { grid-template-columns: minmax(0, 1fr); }
  .hilo-centro .mensajes { padding: 16px; }
  .hilo-centro .redactor { padding: 0 16px 16px; }
  .hilo-centro .msg { max-width: 100%; }
  #form-ticket { padding: 16px; }
  .cabecera-proyecto { padding: 10px 16px; }
}
@media (pointer: coarse) { #gal-buscar, .pagina-acciones .btn { height: 44px; } .volver { min-height: 44px; }
  #panel details > summary { min-height: 44px; display: flex; align-items: center; } }