/* Temis Legal — layout del despacho (app.html).
   El despacho es una mesa de trabajo: barra oscura a la izquierda (el archivo),
   papel a la derecha (el expediente abierto). Densidad alta, sin ruido. */

.despacho { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }

/* ============================================================ lateral */
.lateral {
  background: var(--tinta); color: var(--papel);
  display: flex; flex-direction: column; padding: 1.4rem 1rem 1.1rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  border-right: 2px solid var(--linea);
  box-shadow: inset -1px 0 0 #ffffff0f;
}
.lateral::-webkit-scrollbar-thumb { background: #3A4354; border-color: var(--tinta); }

.marca-app {
  font-family: var(--serif); font-weight: 900; font-size: 1.32rem; line-height: 1.02;
  letter-spacing: -.035em; margin-bottom: 1.5rem; color: var(--hoja);
  padding-bottom: 1.1rem; border-bottom: 1px solid #ffffff1c;
}
.marca-app small {
  display: block; font-family: var(--mono); font-weight: 500; font-size: .55rem;
  letter-spacing: .24em; color: var(--sello-3); margin-top: .45rem;
}

.lateral nav { display: flex; flex-direction: column; gap: .1rem; flex: 1; }
.nav-grupo {
  font-family: var(--mono); font-size: .58rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: #6B7488;
  margin: 1.05rem 0 .35rem; padding-left: .68rem;
}
.nav-grupo:first-of-type { margin-top: .85rem; }
.lateral nav a {
  position: relative;
  color: #AEB4C2; text-decoration: none; font-size: .89rem; font-weight: 500;
  padding: .46rem .68rem; border-radius: var(--r-chico);
  transition: color .14s var(--sale), background-color .14s var(--sale);
}
/* El filete del activo crece desde el centro — el único gesto animado de acá. */
.lateral nav a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0;
  background: var(--sello-2); border-radius: 0 2px 2px 0;
  transform: translateY(-50%);
  transition: height .18s var(--sale);
}
.lateral nav a:hover { color: var(--hoja); background: #ffffff0f; }
.lateral nav a.activa { color: var(--hoja); background: #ffffff17; font-weight: 600; }
.lateral nav a.activa::before { height: 62%; }

.usuario { border-top: 1px solid #ffffff1c; padding-top: .95rem; margin-top: 1.1rem; }
.usuario .chico { color: #8A92A3; }

/* ============================================================ principal */
.principal { padding: 1.6rem 2.2rem 4rem; max-width: 1180px; min-width: 0; }

.cabecera {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--linea); padding-bottom: .85rem; margin-bottom: 1.6rem;
  position: relative;
}
/* Doble filete: el de abajo, fino y corrido, imita el rayado del formulario. */
.cabecera::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px;
  border-bottom: 1px solid var(--borde-2);
}
.cabecera h1 { font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; }
.estado-linea { display: flex; gap: .5rem; flex-wrap: wrap; }

#aviso-membresia .paywall {
  background: var(--sello); color: var(--hoja); padding: .7rem 1.1rem; border-radius: var(--r);
  margin-bottom: 1.2rem; display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap; font-size: .92rem;
  box-shadow: var(--dura-chica);
}

/* ============================================================ inicio */
.saludo { font-size: 1.06rem; margin-bottom: 1.3rem; color: var(--tinta-2); }
.saludo b { color: var(--tinta); }

.accesos { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.7rem; }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.6rem; }
.kpi { position: relative; overflow: hidden; padding: 1.15rem 1.25rem; }
/* Filete superior de color: distingue los tres de un vistazo. */
.kpi::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--tinta-4);
}
.kpi:nth-child(2)::before { background: var(--tribunal); }
.kpi:nth-child(3)::before { background: var(--sello); }
.kpi .cifra {
  font-family: var(--serif); font-weight: 900; font-size: 2.4rem; line-height: 1;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin-bottom: .35rem;
}
.kpi .chico { font-size: .8rem; }

/* Estado vacío: cuando no hay nada, que se vea deliberado y no roto. */
.vacio {
  border: 2px dashed var(--borde-2); border-radius: var(--r);
  background: #ffffff5c; padding: 2.2rem 1.6rem; text-align: center;
}
.vacio h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.vacio p { font-size: .9rem; color: var(--tinta-2); max-width: 34rem; margin: 0 auto 1.1rem; }

/* ============================================================ tablas */
table.lista {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--hoja); border: 2px solid var(--linea);
  border-radius: var(--r); overflow: hidden;
}
table.lista th {
  font-family: var(--mono); font-size: .64rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; text-align: left;
  padding: .6rem .85rem; border-bottom: 2px solid var(--linea);
  background: var(--papel-2); color: var(--tinta-2);
}
table.lista td { padding: .65rem .85rem; border-bottom: 1px solid var(--borde); font-size: .9rem; vertical-align: top; }
table.lista tbody tr:last-child td { border-bottom: none; }
table.lista tbody tr { transition: background-color .12s var(--sale); }
table.lista tbody tr:hover td { background: var(--papel); cursor: pointer; }

/* ============================================================ wizard redactor */
.migas { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 1.1rem; }
.migas a { color: var(--tinta-2); text-decoration: none; }
.migas a:hover { color: var(--sello); text-decoration: underline; }
.migas b { color: var(--sello); }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1rem; }
.tarjeta-elegir {
  text-align: left; background: var(--hoja); border: 2px solid var(--linea);
  border-radius: var(--r); padding: 1.1rem; cursor: pointer; font-family: var(--sans);
  color: var(--tinta); box-shadow: var(--dura-chica);
  transition: transform .14s var(--sale), box-shadow .14s var(--sale);
}
.tarjeta-elegir:hover { transform: translate(-2px, -2px); box-shadow: var(--dura); }
.tarjeta-elegir:active { transform: translate(1px, 1px); box-shadow: none; }
.tarjeta-elegir h3 { font-size: 1.03rem; margin-bottom: .3rem; }
.tarjeta-elegir p { font-size: .83rem; color: var(--tinta-2); line-height: 1.5; }

.form-doc { max-width: 720px; }
.aviso-previo {
  background: var(--ambar-velo); border: 1.5px solid #A0742A55; border-left: 3px solid var(--ambar);
  border-radius: var(--r-chico); padding: .85rem 1rem; font-size: .855rem; margin-bottom: 1.2rem;
  line-height: 1.55;
}

.generando { text-align: center; padding: 4.5rem 1rem; }
.generando .sello-goma { font-size: 1rem; }
.generando p { margin-top: 1.3rem; font-family: var(--mono); font-size: .84rem; color: var(--tinta-2); letter-spacing: .04em; }

/* ============================================================ vista documento */
.doc-layout { display: grid; grid-template-columns: 1.38fr .62fr; gap: 1.4rem; align-items: start; }

.stepper {
  display: flex; margin-bottom: 1.2rem; border: 2px solid var(--linea);
  border-radius: var(--r); overflow: hidden; background: var(--hoja);
}
.stepper .paso-f {
  flex: 1; text-align: center; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  padding: .55rem .3rem; border-right: 1px solid var(--borde); color: var(--tinta-3);
}
.stepper .paso-f:last-child { border-right: none; }
.stepper .paso-f.hecho { background: var(--tribunal); color: var(--hoja); font-weight: 600; }
.stepper .paso-f.actual { background: var(--papel-2); color: var(--tinta); font-weight: 700; box-shadow: inset 0 -2px 0 var(--sello); }

/* La hoja: márgenes de memorial y filete de margen a la izquierda. */
.papel-doc {
  position: relative;
  background: var(--hoja); border: 2px solid var(--linea); box-shadow: var(--dura);
  border-radius: var(--r); padding: 2.4rem 2.4rem 2.4rem 3rem;
  font-family: var(--serif); font-size: .93rem; line-height: 1.9;
  text-align: justify; white-space: pre-wrap; min-height: 480px;
  hyphens: auto;
}
.papel-doc::before {
  content: ""; position: absolute; left: 2rem; top: 1rem; bottom: 1rem;
  width: 1.5px; background: var(--sello); opacity: .22;
}
.papel-doc textarea {
  font-family: var(--serif); font-size: .93rem; line-height: 1.85;
  min-height: 480px; border: none; background: transparent; padding: 0;
  text-align: justify;
}
.papel-doc textarea:focus { box-shadow: none; }
.doc-acciones { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.1rem 0; }

.panel-filtro { margin-bottom: 1.1rem; }
.panel-filtro h3 { font-size: 1.02rem; display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; padding-bottom: .5rem; border-bottom: 1.5px solid var(--borde-2); }
.check-item { display: flex; gap: .55rem; font-size: .82rem; padding: .4rem 0; border-bottom: 1px dashed var(--borde); line-height: 1.5; }
.check-item:last-child { border-bottom: none; }
.check-item .tilde { font-weight: 700; flex: none; width: 1.1rem; }

.obs {
  border-left: 3px solid var(--tinta-3); padding: .5rem .75rem; margin: .5rem 0;
  font-size: .82rem; background: var(--papel-2); border-radius: 0 var(--r-chico) var(--r-chico) 0;
  line-height: 1.5;
}
.obs.error { border-left-color: var(--sello); background: #F9EFEF; }
.obs.advertencia { border-left-color: var(--ambar); background: #F8F2E4; }
.obs .como { color: var(--tinta-2); display: block; margin-top: .25rem; }

.cita-v { display: flex; gap: .55rem; align-items: baseline; font-size: .8rem; padding: .35rem 0; border-bottom: 1px dashed var(--borde); line-height: 1.5; }
.cita-v:last-child { border-bottom: none; }

/* ============================================================ casos */
.informe h3 { margin: 1.3rem 0 .5rem; font-size: 1.06rem; border-bottom: 2px solid var(--linea); padding-bottom: .3rem; }
.informe ul { margin-left: 1.25rem; font-size: .9rem; line-height: 1.6; }
.informe li { padding: .12rem 0; }
.informe .via {
  background: var(--hoja); border: 2px solid var(--linea); border-radius: var(--r);
  padding:1rem 1.15rem; margin: .65rem 0; box-shadow: var(--dura-chica);
}

/* ============================================================ guías */
.guia-paso { display: grid; grid-template-columns: 2.6rem 1fr; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid var(--borde); }
.guia-paso:last-child { border-bottom: none; }
.guia-paso .n { font-family: var(--serif); font-weight: 900; font-size: 1.6rem; color: var(--sello); line-height: 1.1; letter-spacing: -.04em; }
.guia-paso .meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }

/* ============================================================ directorio */
.dir-filtros { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; align-items: center; }
.dir-filtros select, .dir-filtros input { width: auto; min-width: 13rem; }
.chips-tipo { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.1rem; }
.chip-t {
  font-family: var(--mono); font-size: .65rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .07em; padding: .32rem .6rem; border: 1.5px solid var(--borde-2);
  background: var(--hoja); border-radius: var(--r-chico); cursor: pointer; color: var(--tinta-2);
  transition: border-color .13s var(--sale), color .13s var(--sale), background-color .13s var(--sale);
}
.chip-t:hover { border-color: var(--tinta-3); color: var(--tinta); }
.chip-t.activo { background: var(--tinta); color: var(--hoja); border-color: var(--tinta); font-weight: 600; }

.dir-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.1rem; align-items: start; }
#mapa { height: 505px; border: 2px solid var(--linea); border-radius: var(--r); background: var(--papel-2); box-shadow: var(--dura-chica); }
/* Los tiles se viran a papel para que el mapa no sea una postal ajena.
   Solo los tiles: marcadores, popups y controles quedan intactos. */
#mapa .leaflet-tile { filter: sepia(.42) saturate(.62) contrast(1.04) brightness(1.03); }
#mapa .leaflet-container { background: var(--papel-2); font-family: var(--sans); }
#mapa .leaflet-popup-content-wrapper { border-radius: var(--r); box-shadow: var(--dura-chica); border: 1.5px solid var(--linea); }
#mapa .leaflet-bar a { color: var(--tinta); }

.dir-lista { max-height: 505px; overflow-y: auto; display: flex; flex-direction: column; gap: .55rem; padding-right: .25rem; }
.ent {
  background: var(--hoja); border: 1.5px solid var(--borde-2); border-left: 3px solid var(--borde-2);
  border-radius: var(--r-chico); padding: .75rem .9rem; font-size: .85rem; cursor: pointer;
  transition: border-left-color .13s var(--sale), background-color .13s var(--sale);
}
.ent:hover { background: var(--papel); border-left-color: var(--sello); }
.ent h4 { font-size: .93rem; margin-bottom: .25rem; }

/* ============================================================ chat / consultas */
.chat { display: flex; flex-direction: column; height: calc(100vh - 215px); min-height: 420px; }
.chat-hilo { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .75rem; padding: .3rem .3rem 1rem; }
.burbuja {
  max-width: 72%; padding: .68rem .95rem; border-radius: var(--r);
  border: 2px solid var(--linea); font-size: .92rem; line-height: 1.55;
  animation: burbuja-entra .28s var(--sale);
}
@keyframes burbuja-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.burbuja.yo { align-self: flex-end; background: var(--tinta); color: var(--hoja); border-color: var(--tinta); border-bottom-right-radius: 2px; }
.burbuja.temis { align-self: flex-start; background: var(--hoja); box-shadow: var(--dura-chica); border-bottom-left-radius: 2px; }
.burbuja.pensando { color: var(--tinta-3); font-family: var(--mono); font-size: .8rem; box-shadow: none; border-style: dashed; border-color: var(--borde-2); }
.chips-chat { display: flex; flex-wrap: wrap; gap: .4rem; padding: .55rem 0; }
.chat-input { display: flex; gap: .6rem; border-top: 2px solid var(--linea); padding-top: .85rem; }
.chat-input input { flex: 1; }

/* ============================================================ investigación */
#inv-hilo { display: flex; flex-direction: column; gap: .85rem; max-height: 58vh; overflow-y: auto; padding-right: .25rem; }
.inv-pregunta {
  align-self: flex-end; max-width: 88%; background: var(--tinta); color: var(--hoja);
  padding: .55rem .85rem; border-radius: var(--r) var(--r) 2px var(--r); font-size: .92rem; line-height: 1.5;
}
.inv-respuesta {
  align-self: flex-start; max-width: 94%; background: var(--hoja);
  border: 1.5px solid var(--borde-2); border-left: 3px solid var(--sello);
  padding: .7rem .95rem; border-radius: 2px var(--r) var(--r) var(--r); line-height: 1.6;
}
.inv-follow { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.inv-fuentes { margin-top: .6rem; }
.inv-fuentes summary { cursor: pointer; color: var(--sello); font-size: .84rem; font-weight: 500; }
.inv-fuentes summary:hover { text-decoration: underline; }
.inv-fuentes .carta-plana { font-size: .85rem; margin-top: .45rem; }

.inv-tabs {
  display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.1rem;
  border-bottom: 2px solid var(--linea); padding-bottom: 0;
}
.tab {
  background: none; border: none; cursor: pointer; font: inherit; font-size: .89rem;
  padding: .45rem .8rem; margin-bottom: -2px; border-radius: var(--r-chico) var(--r-chico) 0 0;
  color: var(--tinta-2); border-bottom: 2px solid transparent;
  transition: color .13s var(--sale), border-color .13s var(--sale), background-color .13s var(--sale);
}
.tab:hover { color: var(--tinta); background: #ffffff66; }
.tab.activa { color: var(--sello); font-weight: 600; border-bottom-color: var(--sello); }
.tab.vacio { opacity: .45; }
.inv-pane[hidden] { display: none; }
.tabs-jur .tab { margin-bottom: -1px; }

/* ============================================================ campo lista repetible */
.lista-campo { display: flex; flex-direction: column; gap: .4rem; }
.lista-fila { display: flex; gap: .4rem; align-items: center; }
.lista-fila .lista-sub { flex: 1; min-width: 0; }
.lista-quitar {
  flex: 0 0 auto; width: 2rem; height: 2rem; border: 1.5px solid var(--borde-2);
  background: var(--hoja); color: var(--sello); cursor: pointer; border-radius: var(--r-chico);
  font-size: 1.1rem; line-height: 1;
  transition: background-color .13s var(--sale), color .13s var(--sale), border-color .13s var(--sale);
}
.lista-quitar:hover { background: var(--sello); color: var(--hoja); border-color: var(--sello); }
.lista-agregar { align-self: flex-start; margin-top: .35rem; }

/* ============================================================ membresía */
.planes-app { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.1rem 0; }

/* El área de impresión vive oculta en pantalla; print.css la muestra al imprimir.
   (No puede ir en print.css porque esa hoja se carga con media="print".) */
#print-area { display: none; }

/* ============================================================ responsive */
@media (max-width: 1080px) {
  .despacho { grid-template-columns: 210px 1fr; }
  .doc-layout, .dir-layout { grid-template-columns: 1fr; }
  .principal { padding: 1.4rem 1.5rem 3rem; }
}

@media (max-width: 860px) {
  .despacho { grid-template-columns: 1fr; }
  .lateral {
    position: sticky; top: 0; z-index: 30; height: auto;
    flex-direction: row; align-items: center; gap: .8rem;
    padding: .7rem 1rem; border-right: none; border-bottom: 2px solid var(--linea);
    overflow: visible;
    /* Como grid item, min-width:auto lo estiraría al ancho de los 12 enlaces
       y desbordaría la página entera. */
    min-width: 0;
  }
  .marca-app { margin-bottom: 0; padding-bottom: 0; border-bottom: none; font-size: 1rem; flex: none; }
  .marca-app small { display: none; }
  /* El nav se vuelve una cinta que se desliza. El min-width:0 es obligatorio:
     sin él, el flex item se estira al ancho de los 12 enlaces y desborda la página
     en vez de scrollear por dentro. */
  .lateral nav {
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: .3rem;
    min-width: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .lateral nav::-webkit-scrollbar { display: none; }
  .lateral nav a { white-space: nowrap; padding: .4rem .7rem; font-size: .84rem; }
  .lateral nav a::before { display: none; }
  .lateral nav a.activa { box-shadow: inset 0 -2px 0 var(--sello-2); }
  .nav-grupo { display: none; }
  /* El nombre y el plan se comen el ancho que necesita la cinta del nav. */
  .usuario { border-top: none; margin-top: 0; padding-top: 0; flex: none; display: flex; align-items: center; gap: .6rem; }
  .usuario #u-plan, .usuario #u-nombre { display: none; }
  .usuario .btn { margin-top: 0 !important; }
  .principal { padding: 1.1rem 1rem 3rem; }
  .cabecera h1 { font-size: 1.45rem; }
  .kpis, .planes-app { grid-template-columns: 1fr; }
  .burbuja { max-width: 92%; }
  .papel-doc { padding: 1.5rem 1.3rem 1.5rem 2rem; }
  .papel-doc::before { left: 1.15rem; }
  .chat { height: calc(100vh - 260px); }
}