/* ---------------------------------------------------------------------------
   Juridico: la base de Expedientes leida como una lista de casos.

   Un renglon por trabajador, porque el caso ES su expediente. Lo que se hace
   aqui es BUSCAR y CONSULTAR -no se captura nada-, asi que la pantalla no tiene
   mas que tres cosas: el buscador, la tabla y, en cada renglon, la carpeta con
   sus papeles.

   La tabla es de verdad una rejilla, no una <table>: las mismas columnas tienen
   que poder plegarse en el telefono sin que se rompa la fila, y con celdas de
   tabla eso obliga a repintar la lista entera en otra forma.
   --------------------------------------------------------------------------- */

/* ------------------------- la tarjeta del catalogo ------------------------
   Los tonos de cada tarjeta se pasan por estas tres variables; el resto de la
   tarjeta (tamanos, bordes, el recorte del titulo) ya lo pone styles.css.
   Azul de expediente, para que se lea como vecina de Expedientes sin
   confundirse con ella. */
.application-card--juridico {
  --app-accent: #3b5bb0;
  --app-soft: #eef2fd;
  --app-ink: #2f4fa0;
}

.application-card-chip--juridico {
  border-color: #c7d3f2;
  background: #eef2fd;
  color: #2f4fa0;
}

.applications-workspace.is-juridico-open {
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr);
  padding: 0;
  gap: 0;
}

.applications-workspace.is-juridico-open .applications-hero,
.applications-workspace.is-juridico-open .applications-board {
  display: none;
}

.juridico-panel {
  min-height: 0;
  /* El fondo separa la tarjeta de la lista del resto; sobre blanco la tarjeta no
     se ve como tal. El tono es el azul de Juridico muy lavado -entre el gris de
     antes y el #eef2fd de su tarjeta en Aplicaciones-, con una luz apenas
     marcada arriba a la izquierda para que el papel no sea un plano muerto
     detras del titulo. El color va FUERA: la lista por dentro sigue blanca. */
  background:
    radial-gradient(1200px 460px at 10% -14%, rgba(59, 91, 176, 0.11), rgba(59, 91, 176, 0) 64%),
    #eef1f9;
  position: relative;
}

.applications-workspace.is-juridico-open .juridico-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  box-shadow: none;
}

/* Con el panel abierto se apagan las columnas laterales: la tabla necesita el
   ancho entero para que Area y Responsable no acaben partidas en dos renglones.
   Es lo mismo que hacen Expedientes y Project Management. */
.app-shell.juridico-central-lock {
  --assistant-side-size: 0px;
  --inbox-side-size: 0px;
  --swap-rail-size: 0px;
}

.app-shell.juridico-central-lock .workspace-slot[data-slot="side"],
.app-shell.juridico-central-lock .workspace-swap-rail,
.app-shell.juridico-central-lock .panel-swap-button,
.app-shell.juridico-central-lock .side-panel-collapse-button,
.app-shell.juridico-central-lock .assistant-float-toggle {
  display: none !important;
}

.juridico-scroll {
  min-height: 0;
  overflow-y: auto;
  padding: 26px 30px 40px;
  /* Lo que decide si la tabla se pliega es el ancho QUE QUEDA aqui, no el de la
     ventana: el panel vive dentro del area de aplicaciones y no la ocupa
     entera, asi que medir la ventana pliega de menos. */
  container-type: inline-size;
  container-name: juridico;
}

/* --------------------------------- cabecera ------------------------------ */

/* Todo en un renglon: el titulo a la izquierda y, en el hueco que quedaba vacio
   a su derecha, el buscador. Antes se llevaba una franja entera a lo ancho y se
   comia el alto de la lista, que es lo unico que se viene a ver aqui. */
.juridico-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.juridico-hero-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: #e1e8fa;
  color: #1e3a8a;
}

.juridico-hero-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Base 0, no "auto": con base automatica el ancho de partida es el del subtitulo
   ENTERO en una linea, y eso rompia el renglon antes de dejar que encogiera, asi
   que el aspa de cerrar se caia a una fila para ella sola. Con base 0 se queda
   con el hueco que sobra y nunca fuerza el salto. */
.juridico-hero-copy {
  min-width: 0;
  flex: 1 1 0;
  padding-top: 2px;
}

.juridico-hero-copy h3 {
  margin: 0 0 4px;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #17203a;
}

.juridico-hero-copy p {
  margin: 0;
  font-size: 0.92rem;
  color: #6b7689;
}

/* "Jurídico pruebas": la misma pantalla contra el registro de pruebas. El sello
   evita el error de creer que se está trabajando sobre lo real. */
.juridico-panel.is-pruebas .juridico-hero-copy h3::after {
  content: "PRUEBAS";
  margin-left: 10px;
  border-radius: 999px;
  background: #fdeeee;
  color: #a33a3a;
  padding: 3px 10px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  vertical-align: middle;
}

.juridico-panel .juridico-close-button {
  position: static;
  flex: 0 0 auto;
}

/* El buscador, a la derecha del titulo. Se queda como grupo propio -y no suelto
   en la cabecera- para que al plegar baje entero de un renglon. */
.juridico-hero-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 0;
}

/* --------------------------------- buscador ------------------------------ */

/* Ancho fijo y no elastico: quien encoge al faltar sitio es el titulo, que se
   puede recortar sin perder nada. Un buscador que mengua acaba en una caja
   donde no se lee lo que se escribe. */
.juridico-search {
  position: relative;
  display: block;
  flex: 0 0 340px;
  min-width: 0;
}

.juridico-search > i {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: #9aa4b6;
  font-size: 1rem;
  pointer-events: none;
}

.juridico-search input {
  width: 100%;
  /* A la altura del resto del renglon: con 48px quedaba mas alto que el titulo
     y el aspa y desnivelaba la cabecera. */
  height: 40px;
  /* El derecho le guarda su hueco a la X de borrar: sin el, lo escrito se metia
     debajo de ella. */
  padding: 0 40px 0 40px;
  border: 1px solid #e0e6f3;
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(23, 32, 58, 0.04);
  font: inherit;
  font-size: 0.92rem;
  color: #17203a;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.juridico-search input::placeholder { color: #9aa4b6; }

.juridico-search input:focus {
  border-color: #b9c4e8;
  box-shadow: 0 0 0 3px rgba(59, 91, 176, 0.12);
}

/* El aspa que el navegador mete en los <input type="search"> pisaba el borde
   redondeado; se quita y en su lugar va la X propia (y Escape tambien borra). */
.juridico-search input::-webkit-search-cancel-button { display: none; }

/* La X propia: redonda, dentro de la caja y a la derecha. Sale en cuanto hay
   una letra escrita y borra todo de un clic. */
.juridico-search-borrar {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: #eef1f7;
  color: #5b6680;
  padding: 0;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.juridico-search-borrar:hover { background: #dfe5f1; color: #17203a; }
.juridico-search-borrar:focus-visible { outline: 2px solid #3b5bb0; outline-offset: 2px; }

/* -------------------------------- la tarjeta ----------------------------- */

.juridico-card {
  border: 1px solid #e4e9f5;
  border-radius: 16px;
  background: #ffffff;
  /* --shadow-soft de styles.css, tenida del azul del apartado en vez de gris
     puro: es lo que separa la lista del fondo. */
  box-shadow: 0 1px 2px rgba(23, 32, 58, 0.04), 0 14px 34px rgba(35, 64, 127, 0.07);
  overflow: hidden;
}

.juridico-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
}

.juridico-card-head h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  color: #17203a;
}

.juridico-card-head small {
  font-size: 0.82rem;
  color: #939db1;
}

/* --------------------------------- la tabla ------------------------------ */

.juridico-tabla { display: block; }

/* Las mismas columnas para el encabezado y para cada fila. La ultima es la
   carpeta, que mide lo que mide y no se estira. */
.juridico-fila {
  display: grid;
  /* Caso · Área · Sucursal · Documentos en proceso · Ingreso · carpeta. */
  grid-template-columns:
    minmax(0, 2.3fr) minmax(0, 1.1fr) minmax(0, 1.15fr) minmax(0, 1.5fr) 138px 52px;
  align-items: center;
  gap: 16px;
  padding: 0 22px;
}

.juridico-encabezado {
  border-top: 1px solid #eef0f6;
  border-bottom: 1px solid #eef0f6;
  background: #fafbfd;
  min-height: 42px;
}

.juridico-encabezado button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  color: #6b7689;
  text-align: left;
  cursor: pointer;
}

.juridico-encabezado button:hover { color: #17203a; }
.juridico-encabezado button.is-on { color: #17203a; font-weight: 600; }

/* La flecha solo existe en la columna por la que se esta ordenando: una flecha
   gris en cada columna no dice cual manda. */
.juridico-encabezado button i {
  font-size: 0.72rem;
  opacity: 0;
  transition: opacity 0.14s ease;
}

.juridico-encabezado button.is-on i { opacity: 1; }

/* La columna de papeles no se ordena, pero su titulo tiene que leerse igual que
   los demas: sin esto quedaba con otro tono y parecia deshabilitada. */
.juridico-encabezado .juridico-celda--papeles span {
  font-size: 0.8rem;
  font-weight: 500;
  color: #6b7689;
}

/* El ingreso, a la derecha y con hueco antes de la carpeta. */
.juridico-celda--fecha {
  text-align: right;
  padding-right: 20px;
  font-variant-numeric: tabular-nums;
}

.juridico-cuerpo .juridico-fila {
  /* 48 y no 54: con seis columnas el renglon ya se lee solo, y a 48 entran
     cuatro casos mas por pantalla, que es lo que se venia a mejorar. */
  min-height: 48px;
  border-bottom: 1px solid #f2f4f9;
  transition: background 0.12s ease;
  cursor: pointer;
}

.juridico-cuerpo .juridico-fila:last-child { border-bottom: 0; }
.juridico-cuerpo .juridico-fila:hover { background: #fafbfd; }

.juridico-cuerpo .juridico-fila:focus-visible {
  outline: 2px solid #4c6ef5;
  outline-offset: -2px;
}

/* Rojo tenue: SOLO la baja que todavia debe un papel. Una baja con todo
   entregado ya no es asunto de Juridico, y pintarlas todas igual deja el rojo
   sin significado a los dos dias. Va despues del :hover a proposito, para que
   el renglon no pierda el aviso al pasar el raton por encima. */
.juridico-cuerpo .juridico-fila.is-debe {
  background: #fdf5f5;
  box-shadow: inset 3px 0 0 #d97070;
}

.juridico-cuerpo .juridico-fila.is-debe:hover { background: #fbecec; }

/* La sucursal, en pastilla: en texto suelto y en el mismo gris azulado que el
   resto parecia un enlace. */
.juridico-sucursal {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #e7eaf2;
  border-radius: 999px;
  padding: 2px 10px;
  background: #f7f8fc;
  color: #5a6480;
  font-size: 0.79rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------- documentos en proceso -------------------------
   Dice lo que FALTA hacer, no en que estado esta: "generado" quiere decir que
   le falta la firma y "firmado" que le falta entregarse. Los rellenos son los
   mismos que .juridico-estado usa en la bitacora, para no inventar un
   vocabulario de color nuevo; el punto es el color del apartado. */

.juridico-pendientes {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.juridico-pend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  border-radius: 999px;
  padding: 3px 10px 3px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

/* El titulo del papel es lo unico que se recorta: el "por firmar" o "por
   entregar" tiene que verse SIEMPRE, que es la parte que dice que hacer. */
.juridico-pend b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.juridico-pend > span { flex: 0 0 auto; }

.juridico-pend i {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tono, #94a3b8);
}

.juridico-pend.is-firmar { background: #f1f5f9; color: #475569; }
.juridico-pend.is-entregar { background: #fef3c7; color: #92400e; }

.juridico-pend-mas {
  flex: 0 0 auto;
  color: #939db1;
  font-size: 0.72rem;
  font-weight: 600;
}

/* Cada celda se corta con puntos suspensivos en vez de partirse: una fila de
   dos renglones en mitad de la lista rompe el barrido de arriba abajo. */
.juridico-celda {
  min-width: 0;
  font-size: 0.88rem;
  color: #47536b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.juridico-caso {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.juridico-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--juridico-avatar-bg, #e8ecfb);
  color: var(--juridico-avatar-ink, #1e3a8a);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.juridico-caso-nombre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.89rem;
  font-weight: 500;
  color: #17203a;
}

/* Dado de baja: se dice en el renglon, porque de eso depende que papeles tiene
   sentido pedirle (la constancia laboral es de quien ya salio, la carta
   patronal de quien sigue). */
.juridico-baja-chip {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 2px 8px;
  background: #fdeeee;
  color: #a33a3a;
  font-size: 0.68rem;
  font-weight: 600;
}

.juridico-fecha {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

/* En su columna, pegada a la derecha como el titulo "Ingreso" y el "Sin fecha":
   al ser flex, el text-align de la celda no la movia y la fecha quedaba corrida
   a la izquierda del titulo. */
.juridico-celda--fecha .juridico-fecha { justify-content: flex-end; }

/* Lo que la ficha no tiene puesto se dice, en gris claro y en cursiva: una
   casilla en blanco parece un fallo de la pantalla. */
.juridico-vacio {
  color: #aab2c2;
  font-style: italic;
}

/* La carpeta: el mismo boton que en Expedientes, con el numero de contratos
   encima. Es la unica accion del renglon, asi que no se esconde tras un menu. */
.juridico-carpeta {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  /* En el azul del apartado, el mismo trio que el boton "Volver" del popup. Es
     la unica accion del renglon y en gris sobre blanco no se veia que lo fuera. */
  border: 1px solid #c7d3f2;
  border-radius: 10px;
  background: #eef2fd;
  color: #2f4fa0;
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}

/* Un tono mas hondo al pasar por encima: sobre el azul en reposo, el
   #f7f9ff de antes no se notaba. */
.juridico-carpeta:hover {
  border-color: #3b5bb0;
  background: #dfe7fb;
  color: #23407f;
}

.juridico-carpeta:focus-visible {
  outline: 2px solid #3b5bb0;
  outline-offset: 2px;
}

.juridico-carpeta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------ pie de la lista -------------------------- */

.juridico-pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #f2f4f9;
}

.juridico-pie button {
  border: 1px solid #e7eaf2;
  border-radius: 10px;
  padding: 8px 18px;
  background: #ffffff;
  font: inherit;
  font-size: 0.84rem;
  color: #47536b;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.juridico-pie button:hover { border-color: #c9d2e8; background: #f7f9ff; }
.juridico-pie button[disabled] { opacity: 0.55; cursor: default; }

.juridico-mensaje {
  padding: 44px 20px;
  text-align: center;
  font-size: 0.9rem;
  color: #7b8497;
}

.juridico-mensaje button {
  margin-left: 8px;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: #3b5bb0;
  text-decoration: underline;
  cursor: pointer;
}

/* ------------------------------ popup de papeles -------------------------
   El popup NO tiene estilos propios: se pinta con las clases de Expedientes
   (.ct-modal, .ct-docmenu, .ct-docgrupo, .ct-docext...), que viven en
   styles.css y no estan atadas a su panel. Son los MISMOS documentos, asi que
   con una hoja aparte el dia que alli se retoquen los colores esto se quedaria
   atras sin que nadie lo notara.

   Aqui solo queda lo que el host necesita para colocar esa capa.

   El host cuelga del .app-shell, NO del panel de Juridico (ver index.html). En
   Expedientes la .ct-modal va en position:absolute contra su panel, y de ahi
   que el velo tape solo el area de trabajo: la barra lateral se quedaba nitida
   al lado de un popup modal, que es justo lo que un modal no hace. Dentro del
   panel no habia arreglo posible, porque .applications-workspace lleva
   container-type -y eso lo convierte en el bloque contenedor de cualquier
   position:fixed de dentro- ademas de overflow:hidden.

   Por debajo del visor de PDF (3200) a proposito: al generar un papel el visor
   tiene que salir ENCIMA de la carpeta que lo pidio. */
.juridico-modal-host:empty { display: none; }

.juridico-modal-host .ct-modal {
  position: fixed;
  z-index: 3000;
}


/* --------------------------------- avisos -------------------------------- */

.juridico-toast-host {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.juridico-toast {
  border-radius: 11px;
  padding: 10px 14px;
  background: #17203a;
  color: #ffffff;
  font-size: 0.84rem;
  box-shadow: 0 10px 24px rgba(23, 32, 58, 0.24);
}

.juridico-toast.is-error { background: #9d3535; }

/* ------------------------------- plegado -------------------------------- */

/* El renglon de resumen solo existe plegado: en ancho completo cada dato tiene
   su columna y repetirlos debajo seria decir dos veces lo mismo. */
.juridico-celda--meta { display: none; }

/* Por debajo de este ancho Area y Responsable no caben en su columna sin
   partirse, asi que las tres columnas de detras se juntan en un renglon de
   resumen debajo del nombre. La tabla deja de ser tabla y pasa a ser una lista,
   que es como se lee en un telefono. */
@container juridico (max-width: 760px) {
  .juridico-fila {
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 10px;
  }

  /* Plegado no hay columnas que ordenar, solo una lista: el encabezado deja de
     tener sentido y se retira entero. La lista se queda con el orden por fecha,
     que es el que trae de fabrica; aqui se busca por el nombre, no se reordena. */
  .juridico-encabezado { display: none; }

  .juridico-cuerpo .juridico-fila {
    grid-template-areas:
      "caso carpeta"
      "meta carpeta";
    align-items: start;
    padding-top: 11px;
    padding-bottom: 11px;
    row-gap: 5px;
  }

  .juridico-cuerpo .juridico-celda--caso { grid-area: caso; }

  .juridico-cuerpo .juridico-celda--carpeta {
    grid-area: carpeta;
    align-self: center;
  }

  .juridico-cuerpo .juridico-celda--area,
  .juridico-cuerpo .juridico-celda--sucursal,
  .juridico-cuerpo .juridico-celda--papeles,
  .juridico-cuerpo .juridico-celda--fecha { display: none; }

  /* Alineado con el nombre, no con el avatar: los dos renglones tienen que
     arrancar en la misma vertical para que se lean como uno solo. */
  .juridico-cuerpo .juridico-celda--meta {
    display: block;
    grid-area: meta;
    padding-left: 41px;
    font-size: 0.8rem;
    color: #7b8497;
  }
}

/* Entre este ancho y el del plegado, la columna de papeles se queda tan
   estrecha que la pastilla no ensena ni el titulo del papel. Antes de llegar a
   eso se retira ella sola: el dato sigue en la carpeta, y las otras cinco
   columnas recuperan el sitio en vez de quedar todas a medias. */
@container juridico (max-width: 1040px) {
  .juridico-fila {
    grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.2fr) minmax(0, 1.25fr) 138px 52px;
  }

  .juridico-celda--papeles { display: none; }
}

/* Cuando el titulo y las herramientas dejan de caber en el mismo renglon, estas
   bajan a uno propio y lo ocupan entero: partidas a medias, el buscador se
   quedaba en un canto con dos palabras de ancho. */
@container juridico (max-width: 860px) {
  .juridico-hero-tools {
    flex: 1 1 100%;
    margin-left: 0;
    /* Detras del boton de cerrar, que asi se queda arriba con el titulo. Sin
       esto las herramientas se metian en medio y empujaban el aspa a un
       renglon para ella sola. */
    order: 1;
  }

  .juridico-search { flex: 1 1 auto; }
}

@container juridico (max-width: 520px) {
  .juridico-scroll { padding: 18px 16px 32px; }
  .juridico-hero-copy h3 { font-size: 1.35rem; }

  /* Mas justo, para que el icono, el titulo y el aspa quepan en el mismo
     renglon: con el hueco de escritorio el titulo se caia debajo del icono. */
  .juridico-hero { gap: 12px; }
  .juridico-hero-icon { width: 44px; height: 44px; border-radius: 13px; }
  .juridico-hero-icon svg { width: 24px; height: 24px; }
  .juridico-card-head { padding: 14px 16px; }
  .juridico-fila { padding-left: 14px; padding-right: 14px; }

  .juridico-hero-tools { flex-wrap: wrap; }
  .juridico-search { flex: 1 1 100%; }
}

/* El tono del apartado nuevo. Los otros tres lo traen de styles.css; sin esto
   heredaba el azul de Contratos y los dos iconos se veian iguales. Granate,
   que es lo que aqui se levanta: disciplina, no papeleo de alta. */
.ct-docgrupo[data-grupo="actas"],
.juridico-pend[data-grupo="actas"],
.ct-docext[data-grupo="actas"] { --tono: #be123c; --tono-suave: #fff1f2; }
.ct-docgrupo[data-grupo="terminacion"],
.juridico-pend[data-grupo="terminacion"],
.ct-docext[data-grupo="terminacion"] { --tono: #b45309; --tono-suave: #fffbeb; }
.ct-docgrupo[data-grupo="conciliacion"],
.juridico-pend[data-grupo="conciliacion"],
.ct-docext[data-grupo="conciliacion"] { --tono: #1d4ed8; --tono-suave: #eff6ff; }
.ct-docgrupo[data-grupo="solicitudes"],
.juridico-pend[data-grupo="solicitudes"],
.ct-docext[data-grupo="solicitudes"] { --tono: #0f766e; --tono-suave: #ecfdf5; }

/* ------------------------ Actas compromiso: la captura -------------------
   Las celdas del calendario son LAS DE EXPEDIENTES (.contracts-cal-dia,
   .contracts-cal-semana, .contracts-cal-rejilla): mismo ámbar, mismo tamaño,
   mismo redondeo. Aquí solo se le pone el marco, porque el de allí es un
   popover flotante para UNA fecha y este va dentro del panel y admite muchas. */

.juridico-cal { display: grid; gap: 9px; }

/* Una pestaña por familia de incidencia. Con su contador, que es lo que dice
   si falta capturar alguna. */
.juridico-cal-familias { display: flex; flex-wrap: wrap; gap: 4px; }

.juridico-cal-familia {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #ffffff;
  color: #64748b;
  padding: 4px 10px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.juridico-cal-familia:hover { border-color: #cbd5e1; background: #f8fafc; color: #0f172a; }
.juridico-cal-familia.is-on { border-color: #b45309; background: #fffbeb; color: #92400e; }

.juridico-cal-familia b {
  border-radius: 999px;
  background: #b45309;
  color: #ffffff;
  padding: 0 5px;
  font-size: 0.68rem;
  line-height: 15px;
}

.juridico-cal-head { padding: 0 2px; }
.juridico-cal-head strong { text-align: center; color: #0f172a; font-size: 0.82rem; font-weight: 650; }

/* El hueco de los días del mes anterior: la rejilla necesita la casilla, pero
   no se puede pulsar. */
.juridico-cal-hueco { min-height: 30px; }

.juridico-cal-ayuda { margin: 0; color: #94a3b8; font-size: 0.72rem; line-height: 1.4; }
.juridico-cal-ayuda b { color: #64748b; }

.juridico-cal-pie,
.juridico-resumen-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid #f1f5f9;
  padding-top: 9px;
}

.juridico-cal-limpiar {
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #64748b;
  padding: 5px 8px;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.juridico-cal-limpiar:hover { background: #f1f5f9; color: #0f172a; }

/* El botón que cierra el calendario y el que genera: los dos en el ámbar del
   grupo, que es el color con el que Expedientes marca lo que confirma. */
.juridico-cal-guardar {
  border: 1px solid #b45309;
  border-radius: 8px;
  background: #b45309;
  color: #ffffff;
  padding: 6px 13px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
}

.juridico-cal-guardar:hover { background: #92400e; border-color: #92400e; }
.juridico-cal-guardar:focus-visible { outline: 2px solid #fcd34d; outline-offset: 2px; }

/* ------------------------------- el resumen ------------------------------ */

.juridico-resumen { display: grid; gap: 11px; }

.juridico-resumen-titulo {
  margin: 0;
  color: #0f172a;
  font-size: 0.88rem;
  font-weight: 650;
}

.juridico-resumen-titulo small {
  display: block;
  margin-top: 1px;
  color: #94a3b8;
  font-size: 0.76rem;
  font-weight: 400;
}

/* El rótulo a la izquierda y su botón a la derecha; los días (o "Sin días
   marcados") debajo, a todo lo ancho. */
.juridico-resumen-familia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
}

.juridico-resumen-familia > .juridico-resumen-dias,
.juridico-resumen-familia > .juridico-resumen-vacio { grid-column: 1 / -1; }

/* El botón de cada lista: pequeño y en el ámbar de las fechas, para que se lea
   como "esto se marca aquí" sin competir con el de generar. */
.juridico-resumen-marcar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #fcd34d;
  border-radius: 999px;
  background: #ffffff;
  color: #b45309;
  padding: 3px 10px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.juridico-resumen-marcar:hover { border-color: #b45309; background: #fffbeb; color: #92400e; }
.juridico-resumen-marcar:focus-visible { outline: 2px solid #fcd34d; outline-offset: 2px; }

/* "Modificar fechas" en el pie. Antes era texto gris sin borde y se perdía al
   lado del botón ámbar; ahora es botón con borde, fondo e icono, en el mismo
   ámbar pero claro, para que el sólido siga siendo el de generar. */
.juridico-modificar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid #f59e0b;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  padding: 5px 11px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.juridico-modificar:hover { border-color: #b45309; background: #fef3c7; color: #78350f; }
.juridico-modificar:focus-visible { outline: 2px solid #fcd34d; outline-offset: 2px; }

.juridico-resumen-familia > strong {
  color: #475569;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Cada día elegido, en su pastilla. Se ven TODOS a propósito: es lo último
   que se mira antes de que el papel salga con esas fechas dentro. */
.juridico-resumen-dias { display: flex; flex-wrap: wrap; gap: 4px; }

.juridico-resumen-dias i {
  border-radius: 999px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.juridico-resumen-vacio { color: #94a3b8; font-size: 0.76rem; font-style: italic; }

.juridico-resumen-campo { display: grid; gap: 4px; }

.juridico-resumen-campo > span {
  color: #475569;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.juridico-opciones { display: flex; flex-wrap: wrap; gap: 4px; }

.juridico-opcion {
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #ffffff;
  color: #64748b;
  padding: 4px 11px;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.juridico-opcion:hover { border-color: #cbd5e1; background: #f8fafc; color: #0f172a; }
.juridico-opcion.is-on { border-color: #b45309; background: #fffbeb; color: #92400e; }

/* ------------------------------- la bitácora ----------------------------- */

.juridico-formato { display: grid; gap: 3px; }
.juridico-formato + .juridico-formato { margin-top: 6px; }

.juridico-estado {
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.juridico-estado.is-generado { background: #f1f5f9; color: #475569; }
.juridico-estado.is-firmado { background: #fef3c7; color: #92400e; }
/* Igual que "generado", porque ahora se LLAMA igual: dos pastillas con el mismo
   rotulo y distinto color se leen como dos cosas distintas. El estado guardado
   sigue siendo "entregado"; lo que se unifica es como se ve. */
.juridico-estado.is-entregado { background: #f1f5f9; color: #475569; }

.juridico-avanza {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #3b5bb0;
  padding: 1px 5px;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.juridico-avanza:hover { background: #eef2fd; }

.ct-docmenu-vacio.is-error { color: #b3413f; }

/* Los campos de captura que declara cada formato (fechas, textos y listas).
   Las pastillas de las listas cerradas ya las pone .juridico-opcion. */
.juridico-campo input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  padding: 6px 9px;
  font: inherit;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.juridico-campo input:focus {
  outline: 2px solid #fcd34d;
  border-color: #b45309;
}

.juridico-campo input::placeholder { color: #aab2c2; }

/* Un día ya marcado en OTRA familia de incidencias. Se señala en hueco -el
   ámbar entero es para el apartado en el que estás- para que al cambiar de
   pestaña se vea que ese día ya está cogido: el mismo día no puede ser falta
   y retardo a la vez. */
.contracts-cal-dia.juridico-dia-otra {
  box-shadow: inset 0 0 0 1.5px #fcd34d;
  color: #92400e;
}

/* Los días que no se pueden elegir: los que todavía no llegan y, en las
   incidencias, los que ya están en otra pestaña. Se siguen viendo -sin ellos
   el mes pierde la forma-, pero apagados y sin reaccionar al ratón. El ya
   marcado en otra pestaña conserva su aro para que se entienda POR QUÉ no se
   deja. */
.juridico-modal-host .contracts-cal-dia:disabled {
  background: transparent;
  color: #cbd5e1;
  cursor: not-allowed;
}

.juridico-modal-host .contracts-cal-dia.juridico-dia-otra:disabled {
  box-shadow: inset 0 0 0 1.5px #fcd34d;
  color: #b45309;
  opacity: 0.7;
}

.juridico-modal-host .contracts-cal-head button:disabled,
.juridico-modal-host .contracts-cal-pie button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ------------------- la fila del formato, con su estado ------------------
   La fila deja de ser un botón entero: lo es solo la parte que abre el
   formato, porque un botón no puede envolver a otro y el de avanzar el
   estado vive aquí dentro. */
.juridico-formato-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: default;
  padding: 0;
}

.juridico-formato-abrir {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 9px 0 9px 12px;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

/* El estado y su botón, pegados al canto derecho de la fila. */
.juridico-formato-estado {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding-right: 10px;
}

/* Ahora que vive en la fila y no en una nota al pie, el botón se ve como lo
   que es: la acción que se hace con un papel ya generado. */
.juridico-avanza {
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  padding: 3px 11px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  text-transform: capitalize;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.juridico-avanza:hover { border-color: #b45309; background: #fffbeb; color: #92400e; }
.juridico-avanza:focus-visible { outline: 2px solid #fcd34d; outline-offset: 1px; }

/* ------------------------------- el pie ---------------------------------
   "Volver" en la esquina inferior izquierda y las acciones a la derecha, con
   el hueco entero entre medias: pegado a "Generar documento" se pulsaría por
   error justo cuando no toca. */
.juridico-cal-pie,
.juridico-resumen-pie { justify-content: space-between; }

.juridico-pie-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* En el azul de Jurídico, que es el suyo. En gris sobre blanco no se veía, y
   es la única salida cuando te has equivocado de formato: tiene que cantar.
   Pastilla y no botón sólido a propósito: el relleno entero es del de generar,
   y dos botones sólidos en el mismo pie se disputan la mirada. */
.juridico-volver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  border: 1.5px solid #c7d3f2;
  border-radius: 999px;
  background: #eef2fd;
  color: #2f4fa0;
  padding: 5px 14px 5px 11px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.juridico-volver i { font-size: 0.82rem; }

.juridico-volver:hover {
  border-color: #3b5bb0;
  background: #dfe7fb;
  color: #23407f;
}

.juridico-volver:focus-visible { outline: 2px solid #3b5bb0; outline-offset: 2px; }

/* La extensión de Jurídico es más ancha que la de Expedientes: allí cada
   renglón es solo un PDF, y aquí lleva además su estado y el botón que lo
   avanza. Con 352px el título se partía en dos. */
.juridico-modal-host .ct-docext.is-flotante { width: 430px; }

/* "Volver" y "Modificar fechas" en un renglón: partidos en dos se leen como si
   fueran cuatro botones. El de generar sí puede partirse, que su texto es
   largo a propósito. */
.juridico-volver,
.juridico-cal-limpiar { white-space: nowrap; }

/* --------------------------- el area segura ------------------------------
   Todo lo de dentro del popup respira lo mismo por los cuatro costados. Los
   valores de Expedientes (10px de lista y 12px de item) se le quedan justos a
   esta extension, que lleva titulos mucho mas largos -"Convenio de termino de
   contrato por tiempo determinado"- y el texto acababa lamiendo el borde.

   Va acotado a .juridico-modal-host a proposito: son las clases de Expedientes
   y alli sus medidas estan bien. */

/* El aire justo: lo suficiente para que el texto no lama el borde, y ni un
   punto mas. La primera version se paso -las fichas de documento quedaban
   enormes y en una pantalla de portatil apenas cabian tres-, asi que todo esto
   bajo un 15%: menos relleno, tipo un punto mas chica y la extension mas
   estrecha. El area segura se nota igual, pero ya no domina la pantalla. */
.juridico-modal-host .ct-docext.is-flotante { width: 408px; }

.juridico-modal-host .ct-docext > .ct-docmenu-lista { padding: 9px; gap: 5px; }
.juridico-modal-host .ct-docext-head { padding: 9px 11px; }
.juridico-modal-host .ct-docmenu-item { padding: 8px 11px; gap: 9px; }
.juridico-modal-host .ct-docfecha { padding: 8px 11px; }

/* El titulo y su pie, un punto mas chicos. Siguen por encima del minimo comodo
   de lectura; lo que se recorta es el bulto de la ficha, no la letra. */
.juridico-modal-host .ct-docmenu-copy b { font-size: 0.81rem; line-height: 1.32; }
.juridico-modal-host .ct-docmenu-copy small { font-size: 0.715rem; line-height: 1.3; }


/* Los titulos se parten en vez de estirarse hasta el canto: lo que pidio el
   usuario es verlos ENTEROS, no recortados con puntos suspensivos. */
.juridico-modal-host .ct-docmenu-copy b,
.juridico-modal-host .ct-docmenu-copy small {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* La fila del formato: el boton que lo abre traia el relleno pegado al canto
   izquierdo (padding: 9px 0 9px 12px) para que el icono no se despegara. Con
   el area segura, el mismo hueco por los dos lados. */
.juridico-modal-host .juridico-formato-abrir { padding: 8px 0 8px 11px; gap: 9px; }
.juridico-modal-host .juridico-formato-estado { padding-right: 11px; }

/* La captura (calendario y resumen) cuelga de la misma lista, asi que ya hereda
   los 12px. Lo que le faltaba era aire ARRIBA y ABAJO: el pie con "Volver" y
   "Generar documento" quedaba pegado al borde de abajo. */
.juridico-modal-host .juridico-resumen,
.juridico-modal-host .juridico-cal { padding: 1px 1px 3px; gap: 9px; }

.juridico-modal-host .juridico-cal-pie,
.juridico-modal-host .juridico-resumen-pie { padding-top: 9px; margin-top: 1px; }

/* Y el cuerpo del popup, que en movil se queda sin la extension flotante y
   entonces la lista toca los cantos de la tarjeta. */
.juridico-modal-host .ct-modal-body { padding: 15px 18px 19px; }

/* ------------------------- los filtros de la cabecera ---------------------
   Area y sucursal, cada uno con su desplegable. Van en la cabecera junto al
   buscador -no en una franja propia- para no volver a comerle alto a la lista,
   que es lo que se pidio al quitar los botones de Activos/Bajas/Todos. */

.juridico-filtros {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.juridico-filtro { position: relative; }

.juridico-filtro-boton,
.juridico-filtro-todo,
.juridico-historial-boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  border: 1px solid #e3e7f0;
  border-radius: 13px;
  background: #ffffff;
  color: #47536b;
  padding: 0 12px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(23, 32, 58, 0.04);
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.juridico-filtro-boton i,
.juridico-historial-boton i { color: #9aa4b6; font-size: 0.95rem; }

.juridico-filtro-boton:hover,
.juridico-filtro-todo:hover,
.juridico-historial-boton:hover { border-color: #c9d2e8; background: #f7f9ff; color: #17203a; }

.juridico-filtro-boton:focus-visible,
.juridico-filtro-todo:focus-visible,
.juridico-historial-boton:focus-visible { outline: 2px solid #3b5bb0; outline-offset: 2px; }

/* Con algo marcado, el boton se pinta del azul del apartado y dice cuantas. */
.juridico-filtro.is-on .juridico-filtro-boton {
  border-color: #c7d3f2;
  background: #eef2fd;
  color: #2f4fa0;
}

.juridico-filtro.is-on .juridico-filtro-boton i { color: #3b5bb0; }

.juridico-filtro-boton b {
  border-radius: 999px;
  background: #3b5bb0;
  color: #ffffff;
  padding: 0 6px;
  font-size: 0.7rem;
  line-height: 17px;
}

.juridico-filtro-todo { color: #6b7689; }

/* El desplegable. Va en absolute sobre la cabecera; su tope de alto deja ver
   unas ocho opciones y el resto rueda, que con seis sucursales sobra y con
   treinta departamentos no se sale de la pantalla. */
.juridico-filtro-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 232px;
  max-height: 320px;
  overflow-y: auto;
  display: grid;
  gap: 1px;
  border: 1px solid #e3e7f0;
  border-radius: 13px;
  background: #ffffff;
  padding: 6px;
  box-shadow: 0 18px 38px rgba(23, 32, 58, 0.16);
}

.juridico-filtro-opcion {
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 9px;
  padding: 7px 9px;
  font-size: 0.84rem;
  color: #47536b;
  cursor: pointer;
}

.juridico-filtro-opcion:hover { background: #f7f9ff; }
.juridico-filtro-opcion input { accent-color: #3b5bb0; cursor: pointer; }
.juridico-filtro-opcion span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.juridico-filtro-opcion i { flex: 0 0 auto; color: #939db1; font-size: 0.75rem; font-style: normal; font-variant-numeric: tabular-nums; }

/* Marcada, pero con lo marcado en el otro filtro ya no queda nadie (en 0): sigue
   en la lista para poder desmarcarla, apagada para que se note. */
.juridico-filtro-opcion.is-sin span,
.juridico-filtro-opcion.is-sin i { color: #b3bac8; }

.juridico-filtro-vacio { margin: 0; padding: 10px; color: #939db1; font-size: 0.82rem; }

.juridico-filtro-limpiar {
  margin-top: 4px;
  border: 0;
  border-top: 1px solid #f1f5f9;
  border-radius: 0 0 9px 9px;
  background: transparent;
  color: #6b7689;
  padding: 8px 9px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.juridico-filtro-limpiar:hover { color: #17203a; background: #f7f9ff; }

/* ------------------------------ el historial ----------------------------- */

.juridico-historial {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.juridico-historial li {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  border-bottom: 1px solid #f5f6fa;
  padding: 9px 2px;
}

.juridico-historial li:last-child { border-bottom: 0; }

/* ---------------- el firmado de vuelta y el historial de cada papel --------
   A la derecha de cada formato ya generado: el reloj (quién y cuándo lo generó,
   solo de ESE papel), el firmado subido y el botón para subirlo. */
/* En su propio renglón, debajo del título y alineados a la derecha. En la fila
   no caben: el popup es angosto y con ellos dentro el título se partía en
   cuatro líneas y la fila se desbordaba. */
.juridico-formato-acciones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 10px 50px;
}

.juridico-formato-icono {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #dbe3f4;
  border-radius: 9px;
  background: #ffffff;
  color: #47536b;
  padding: 0;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.juridico-formato-icono:hover { border-color: #b9c4e8; background: #f4f7ff; color: #17203a; }
.juridico-formato-icono:focus-visible { outline: 2px solid #3b5bb0; outline-offset: 2px; }
.juridico-formato-icono.is-on { border-color: #b9c4e8; background: #eef2fd; color: #2f4fa0; }

.juridico-formato-subir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  padding: 4px 11px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.juridico-formato-subir:hover { border-color: #b9c4e8; background: #f4f7ff; color: #17203a; }
.juridico-formato-subir:focus-visible { outline: 2px solid #3b5bb0; outline-offset: 2px; }
.juridico-formato-subir[disabled] { opacity: 0.6; cursor: progress; }

/* La fecha en la que se generó, junto a su estado: "Generado · 16 Sep 2026". */
.juridico-formato-fecha {
  color: #939db1;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Cómo le fue al aviso que se le manda al trabajador. */
.juridico-aviso-chip {
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.64rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.juridico-aviso-chip.is-ok { background: #eef6ee; color: #2f6f3e; }
.juridico-aviso-chip.is-error { background: #fdeeee; color: #a33a3a; }
.juridico-aviso-chip.is-enterado { background: #eef2fd; color: #2f4fa0; }

/* El historial de UN papel, desplegado bajo su fila. El de arriba, junto a los
   filtros, es el registro general de Jurídico; este es solo de este documento. */
.juridico-doc-historial {
  list-style: none;
  margin: 0;
  display: grid;
  gap: 8px;
  border-top: 1px dashed #e6eaf4;
  background: #fafbfd;
  padding: 10px 14px 12px 50px;
}

.juridico-doc-historial li {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font-size: 0.8rem;
  color: #47536b;
}

.juridico-doc-historial-cuando { color: #939db1; font-variant-numeric: tabular-nums; }

/* ------------- el popup que pregunta a qué correo avisarle ----------------
   Sale cuando Lark no encuentra al trabajador o rechaza el envío: Jurídico
   escribe el correo de su cuenta y, si funciona, queda guardado. */
.juridico-correo-por-que { margin: 0 0 6px; color: #a33a3a; font-size: 0.86rem; }
.juridico-correo-quien { margin: 0 0 14px; color: #47536b; font-size: 0.9rem; }
.juridico-correo-campo { display: grid; gap: 6px; }

.juridico-correo-campo span {
  color: #475569;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.juridico-correo-campo input {
  height: 40px;
  border: 1px solid #e0e6f3;
  border-radius: 11px;
  background: #ffffff;
  padding: 0 12px;
  font: inherit;
  font-size: 0.92rem;
  color: #17203a;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.juridico-correo-campo input:focus { border-color: #b9c4e8; box-shadow: 0 0 0 3px rgba(59, 91, 176, 0.12); }
.juridico-correo-aviso { margin: 10px 0 0; color: #a33a3a; font-size: 0.82rem; }
.juridico-correo-botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

.juridico-correo-enviar {
  border: 0;
  border-radius: 999px;
  background: #b45309;
  color: #ffffff;
  padding: 7px 16px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s ease;
}

.juridico-correo-enviar:hover { background: #92400e; }
.juridico-correo-enviar:focus-visible { outline: 2px solid #3b5bb0; outline-offset: 2px; }
.juridico-correo-enviar[disabled] { opacity: 0.65; cursor: progress; }
.juridico-doc-historial-extra { display: block; color: #7b8497; font-size: 0.76rem; }

@container juridico (max-width: 760px) {
  .juridico-doc-historial { padding-left: 16px; }
  .juridico-doc-historial li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

.juridico-historial-cuando {
  color: #939db1;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

.juridico-historial-que { color: #47536b; font-size: 0.84rem; line-height: 1.45; }
.juridico-historial-que b { color: #17203a; font-weight: 600; }
.juridico-historial-que i { color: #2f4fa0; font-style: normal; font-weight: 500; }

.juridico-historial-que em {
  margin-left: 4px;
  font-style: normal;
}

/* ---------------------------- el acuse de generado -----------------------
   Sale al generar y se va solo a los 3 segundos: es un acuse, no una etiqueta.
   Entra con una transicion corta para que se note que apareció. */
.juridico-formato-estado.is-acuse { animation: juridico-acuse 0.18s ease-out; }

@keyframes juridico-acuse {
  from { opacity: 0; transform: translateX(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .juridico-formato-estado.is-acuse { animation: none; }
}

/* Plegado, los filtros bajan con el buscador y se reparten el renglon. */
@container juridico (max-width: 860px) {
  .juridico-filtros { flex: 1 1 auto; flex-wrap: wrap; }
}

/* ------------------------ el desplegable de direcciones -------------------
   "Dónde se paga" se elige de los domicilios del grupo en vez de escribirse: un
   domicilio fiscal tecleado a mano en un convenio es una errata esperando. La
   ultima opcion, "Otra dirección…", abre debajo el campo libre. */
.juridico-campo select {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  padding: 6px 9px;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.juridico-campo select:focus {
  outline: 2px solid #fcd34d;
  border-color: #b45309;
}

/* Con el campo libre abierto, los dos van uno debajo del otro. */
.juridico-campo select + input { margin-top: 5px; }

/* La última persona marcada no se puede quitar: se ve que no responde en vez de
   parecer que el clic no llegó. */
.juridico-opcion[data-ultimo] { cursor: default; }
.juridico-opcion[data-ultimo]:hover { border-color: #b45309; background: #fffbeb; color: #92400e; }

/* El repaso de a quién se le puede avisar. Lo importante es el número de arriba
   y la lista de los que faltan: lo demás es contexto. */
.juridico-cobertura-resumen {
  margin: 0 0 12px; padding: 12px 14px; border-radius: 10px;
  background: #eff6ff; color: #1e3a8a; font-size: 15px;
}
.juridico-cobertura-detalle { margin: 0 0 14px; padding-left: 18px; color: #475569; font-size: 13px; }
.juridico-cobertura-detalle li { margin: 2px 0; }
.juridico-cobertura-titulo { margin: 0 0 6px; font-weight: 600; color: #92400e; }
.juridico-cobertura-bien { margin: 0; color: #166534; font-weight: 600; }
.juridico-cobertura-faltan { margin: 0; padding-left: 18px; color: #334155; font-size: 13px; }
.juridico-cobertura-faltan li { margin: 6px 0; }
.juridico-cobertura-faltan span { display: block; color: #64748b; }
.juridico-cobertura-baja {
  display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px;
  background: #fee2e2; color: #991b1b; font-size: 11px; font-style: normal;
}
.juridico-cobertura-nota { margin: 14px 0 0; color: #64748b; font-size: 12px; }


/* Rehacer el repaso: va dentro de la nota, sin peso visual, porque casi siempre
   vale el de hace un momento. */
.juridico-cobertura-rehacer {
  margin-left: 6px; padding: 2px 8px; border: 1px solid #cbd5f5; border-radius: 999px;
  background: #fff; color: #1d4ed8; font: inherit; font-size: 12px; cursor: pointer;
}
.juridico-cobertura-rehacer:hover { background: #eff6ff; }

/* El historial: por qué vez va una corrección, y cuántos movimientos hay
   detrás de los que caben en pantalla. */
.juridico-historial-veces {
  display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px;
  background: #fef3c7; color: #92400e; font-size: 11px; font-style: normal; font-weight: 600;
}
.juridico-historial-pie {
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #e2e8f0;
  color: #64748b; font-size: 12px; text-align: center;
}