:root {
  --bg: #eef1f6;
  --card: #ffffff;
  --ink: #16191f;
  --muted: #667085;
  --line: #e3e6ea;
  --brand: #1e40af;
  --brand-2: #3b82f6;
  --brand-soft: #eef2ff;
  --amber: #f59e0b;
  --amber-soft: #fffbeb;
  --green: #059669;
  --green-soft: #ecfdf5;
  --red: #dc2626;
  --red-soft: #fef2f2;
  --violet: #7c3aed;
  --violet-soft: #f5f3ff;
  --teal: #0d9488;
  --teal-soft: #f0fdfa;
  --radius: 12px;
  --sombra: 0 1px 2px rgba(16,24,40,.05);
  --sombra-alta: 0 8px 22px rgba(16,24,40,.10);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(900px 400px at 12% -8%, #dbe6ff 0%, transparent 60%),
    radial-gradient(800px 380px at 92% -12%, #e6dcff 0%, transparent 62%);
  background-attachment: fixed;
  color: var(--ink);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
}
a { transition: color .14s; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- barra lateral ----------
   La navegacion vive aqui. Antes iba toda en una barra horizontal arriba, que
   se quedaba sin sitio cada vez que se agregaba una pantalla. En vertical hay
   sitio de sobra y el nombre de cada seccion se lee entero.

   El ancho es una variable para que el contenido sepa cuanto correrse: al
   plegar solo cambia --lat y todo lo demas se acomoda. */
:root { --lat: 220px; --lat-min: 64px; --superior: 0px; }

.lateral {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--lat);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%);
  border-right: 1px solid #16308a;
  box-shadow: 2px 0 10px rgba(16,24,40,.13);
  z-index: 30;
  transition: width .16s ease;
}

/* El nombre del despacho, arriba del todo */
.lateral .marca {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 14px 13px; min-height: 58px;
  color: #fff; font-weight: 700; font-size: 15.5px; line-height: 1.2;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.lateral .marca:hover { text-decoration: none; opacity: .9; }
.marca-logo {
  height: 32px; width: 32px; flex: none; object-fit: contain;
  border-radius: 7px; background: #fff; padding: 2px;
}

/* Los enlaces */
.lateral .menu { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; }
.lateral .menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 10px;
  color: #c3d4ff; font-weight: 500; font-size: 14.5px;
  white-space: nowrap; overflow: hidden;
  transition: background .15s, color .15s;
}
.lateral .menu a:hover { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.lateral .menu a.on { background: #fff; color: var(--brand); font-weight: 600; }
/* El emoji va dentro de una cajita redondeada, como un icono de app */
.lateral .menu .ic {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 8px;
  font-size: 15px; line-height: 1;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  transition: background .15s, border-color .15s;
}
.lateral .menu a:hover .ic { background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.26); }
.lateral .menu a.on .ic { background: var(--brand-soft); border-color: rgba(30,64,175,.18); box-shadow: none; }
.lateral .menu .tx { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* El contador de novedades */
.lateral .menu .pill {
  min-width: 19px; padding: 1px 6px; border-radius: 20px;
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; text-align: center; flex: none;
}

/* Pie de la barra: nombre de la app y derechos, apagado */
.lateral-pie {
  margin-top: auto; padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.42); font-size: 11px; line-height: 1.45;
  display: flex; flex-direction: column; gap: 1px;
}
.lateral-pie strong { color: rgba(255,255,255,.58); font-weight: 600; font-size: 11.5px; }
.pie-marca { display: flex; align-items: center; gap: 7px; }
.pie-marca img { width: 22px; height: 22px; border-radius: 5px; }
/* El emblema de la app ya trae su fondo negro: sin el marco blanco */
.marca-logo.marca-app { background: #000; padding: 0; }

/* Cupo de expedientes que dio el admin, al pie de la barra */
.lateral-cupo {
  margin: auto 12px 0; padding: 9px 11px; border-radius: 10px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); font-size: 12px;
}
.lateral-cupo + .lateral-pie { margin-top: 10px; }
.cupo-txt { display: flex; justify-content: space-between; margin-bottom: 5px; }
.cupo-txt strong { color: #fff; }
.cupo-barra { height: 5px; border-radius: 5px; background: rgba(255,255,255,.18); overflow: hidden; }
.cupo-barra span { display: block; height: 100%; background: #34d399; border-radius: 5px; }
.lateral-cupo.casi .cupo-barra span { background: #fbbf24; }
.lateral-cupo.lleno .cupo-barra span { background: #f87171; }
.lateral-plegada .lateral-cupo { display: none; }

/* Plegar: el boton flota en el borde derecho de la barra */
.plegar {
  position: absolute; top: 18px; right: -11px;
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--brand);
  font-size: 13px; line-height: 1; cursor: pointer;
  box-shadow: var(--sombra); transition: transform .16s;
}
.plegar:hover { background: var(--brand-soft); }

/* ---------- plegada: solo iconos ---------- */
.lateral-plegada { --lat: var(--lat-min); }
.lateral-plegada .marca-txt,
.lateral-plegada .menu .tx,
.lateral-plegada .lateral-pie { display: none; }
.lateral-plegada .lateral .marca { justify-content: center; padding-left: 0; padding-right: 0; }
.lateral-plegada .lateral .menu a { justify-content: center; padding-left: 0; padding-right: 0; }
.lateral-plegada .plegar { transform: rotate(180deg); }
/* Plegada, el contador no cabe al lado del texto: va de punto sobre el icono */
.lateral-plegada .menu .pill {
  position: absolute; margin-left: 17px; margin-top: -12px;
  min-width: 8px; height: 8px; padding: 0; font-size: 0;
}
.lateral-plegada .menu a { position: relative; }

/* ---------- contenido ---------- */
.conten { margin-left: var(--lat); transition: margin-left .16s ease; }

/* Barra de arriba: titulo a la izquierda, perfil a la derecha. Sin enlaces:
   navegar es cosa de la lateral (y en movil trae el boton que la abre). */
.superior {
  display: flex; align-items: center; gap: 12px;
  /* Mismo azul que la lateral y mismo alto que su .marca (58px): las dos
     barras se leen como una sola pieza en forma de L. */
  height: 58px; padding: 0 24px;
  background: #1e3a8a;
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 2px 10px rgba(16,24,40,.13);
  position: sticky; top: 0; z-index: 20;
}
.superior-tit {
  font-weight: 600; font-size: 15px; color: #fff;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hamb {
  display: none; width: 34px; height: 34px; padding: 0;
  border: 1px solid rgba(255,255,255,.22); border-radius: 9px;
  background: rgba(255,255,255,.13); color: #fff; font-size: 16px; cursor: pointer;
}
.hamb:hover { background: rgba(255,255,255,.22); }

.lateral-tapa {
  position: fixed; inset: 0; background: rgba(16,24,40,.45);
  z-index: 25;
}
.lateral-tapa[hidden] { display: none; }

.wrap { max-width: 1760px; margin: 0 auto; padding: 14px 20px 32px; }

/* ---------- movil: la barra se abre encima ---------- */
@media (max-width: 900px) {
  .lateral { transform: translateX(-100%); transition: transform .18s ease; width: 248px; }
  .lateral-abierta .lateral { transform: none; }
  .conten { margin-left: 0; }
  .hamb { display: block; }
  .plegar { display: none; }
  /* En movil no aplica plegar: si quedo guardado, se ignora */
  .lateral-plegada .lateral { width: 248px; }
  .lateral-plegada .marca-txt,
  .lateral-plegada .menu .tx { display: initial; }
  .lateral-plegada .lateral-pie { display: flex; }
  .lateral-plegada .lateral .marca,
  .lateral-plegada .lateral .menu a { justify-content: flex-start; padding-left: 10px; }
  .lateral-plegada .menu .pill {
    position: static; margin: 0; min-width: 19px; height: auto;
    padding: 1px 6px; font-size: 11px;
  }
}

/* ---------- header de pagina ---------- */
.page-head {
  display: flex; align-items: flex-start; gap: 16px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.page-head h1 { margin: 0; font-size: 20px; display: flex; align-items: center; gap: 9px; }
.page-head h1 .ico {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-size: 17px;
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid #c7d2fe;
}
.page-head .sub { color: var(--muted); font-size: 14px; margin-top: 3px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.crumb { font-size: 13px; color: var(--muted); margin-bottom: 6px; }

/* ---------- cards / stats ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px;
  box-shadow: var(--sombra);
  transition: box-shadow .18s, border-color .18s;
}
.card:hover { box-shadow: var(--sombra-alta); border-color: #d3dae6; }
.card > h2 {
  margin: 0 0 10px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--brand);
  display: flex; align-items: center; gap: 7px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.card > h2 .ico { font-size: 14px; }
.grid { display: grid; gap: 10px; }
.stats { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); margin-bottom: 14px; }
.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 10px 12px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: var(--sombra);
  position: relative; overflow: hidden;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
/* franja de color arriba, cambia segun el tono de la tarjeta */
.stat::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-2);
}
.stat:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: #cfd8e8; }
.stat .ico {
  width: 32px; height: 32px; border-radius: 9px; margin-bottom: 7px;
  display: grid; place-items: center; font-size: 16px;
  background: var(--brand-soft); color: var(--brand);
}
.stat .k {
  color: var(--muted); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; line-height: 1.3; font-weight: 600;
}
.stat .v { font-size: 24px; font-weight: 700; margin-top: 3px; line-height: 1.1; }
.stat .v.sm { font-size: 15px; }
.stat a { color: inherit; }

/* variantes de color */
.stat.c-azul::before   { background: var(--brand-2); }
.stat.c-azul .ico      { background: #e0ecff; color: #1d4ed8; }
.stat.c-verde::before  { background: var(--green); }
.stat.c-verde .ico     { background: var(--green-soft); color: var(--green); }
.stat.c-violeta::before{ background: var(--violet); }
.stat.c-violeta .ico   { background: var(--violet-soft); color: var(--violet); }
.stat.c-teal::before   { background: var(--teal); }
.stat.c-teal .ico      { background: var(--teal-soft); color: var(--teal); }
.stat.c-ambar::before  { background: var(--amber); }
.stat.c-ambar .ico     { background: var(--amber-soft); color: #b45309; }
.stat.c-rojo::before   { background: var(--red); }
.stat.c-rojo .ico      { background: var(--red-soft); color: var(--red); }

/* warn: la tarjeta entera se tine cuando hay algo que atender */
.stat.warn { background: var(--amber-soft); border-color: #fcd34d; }
.stat.warn::before { background: var(--amber); }
.stat.warn .v { color: #b45309; }
.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 880px) { .two { grid-template-columns: 1fr; } }

/* ---------- panel de control compacto ---------- */
/* Todo el ancho, tarjetas en rejilla de 12 columnas y tablas largas con
   scroll interno para que la pagina no crezca hacia abajo. */
.panel .page-head { margin-bottom: 10px; align-items: center; }
.panel .page-head .sub { font-size: 13px; margin-top: 1px; }

/* Stats: icono a la izquierda y texto al lado, una sola fila baja */
.panel .stats {
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 8px; margin-bottom: 10px;
}
.panel .stat {
  flex-direction: row; justify-content: flex-start; gap: 10px;
  text-align: left; padding: 9px 11px 8px;
}
.panel .stat .ico { margin-bottom: 0; width: 34px; height: 34px; flex: none; }
.panel .stat .txt { min-width: 0; }
.panel .stat .k { font-size: 10px; }
.panel .stat .v { font-size: 21px; margin-top: 1px; }
.panel .stat .v.sm { font-size: 15px; white-space: nowrap; }

.panel-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px; align-items: start; grid-auto-flow: row dense;
}
.panel-grid .card { margin-bottom: 0; padding: 10px 12px; }
.panel-grid .card > h2 { margin-bottom: 6px; padding-bottom: 6px; }
.panel-grid .card > h2 .cuenta {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted);
  background: #f1f3f7; border: 1px solid var(--line);
  border-radius: 20px; padding: 1px 8px; letter-spacing: 0;
}
/* Columna principal: quietos y, debajo, clientes (llena el hueco junto a p-lado) */
.p-principal  { grid-column: span 8; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.p-lado       { grid-column: span 4; display: flex; flex-direction: column; gap: 10px; }
.p-pendientes { grid-column: span 12; }

/* tablas mas apretadas dentro del panel */
.panel-grid table { font-size: 13px; }
.panel-grid th { padding: 5px 8px; font-size: 10.5px; }
.panel-grid td { padding: 4px 8px; }
.panel-grid td.rad { font-size: 12px; white-space: nowrap; }
.panel-grid .badge { padding: 2px 8px; font-size: 11px; }
.panel-grid .btn-sm { padding-top: 2px; padding-bottom: 2px; }

/* scroll interno con cabecera fija: no se pierde ningun registro */
.panel-grid .table-scroll.alto { max-height: 440px; overflow: auto; }
.panel-grid .table-scroll.alto thead th { position: sticky; top: 0; z-index: 1; }
/* Procesos sin movimiento: 10 renglones a la vista (encabezado + 10 x 33px) */
.p-quietos .table-scroll.alto { max-height: 362px; }
.panel-grid td.n, .panel-grid th.n { width: 1%; white-space: nowrap; padding-right: 4px; }

@media (max-width: 1280px) {
  .p-principal, .p-lado { grid-column: span 12; }
  .p-lado { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .p-lado { grid-template-columns: 1fr; }
}

/* ---------- tablas ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-scroll { overflow-x: auto; }

/* ---------- paginacion ---------- */
/* Va debajo de la tabla. Se esconde sola cuando todo cabe en una pagina. */
.paginacion {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--line);
}
.paginacion #paginas { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.paginacion .btn { min-width: 34px; }
.paginacion .btn:disabled { opacity: .45; cursor: default; }
.paginacion .btn:disabled:hover { background: inherit; }
th {
  text-align: left; padding: 7px 10px; color: #4b5b7a;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  background: #f6f8fc;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
thead tr:first-child th:first-child { border-top-left-radius: 8px; }
thead tr:first-child th:last-child  { border-top-right-radius: 8px; }
td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .13s; }
tbody tr:hover { background: #f2f6ff; }
tbody tr:hover td.strong a { color: var(--brand); text-decoration: underline; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.strong { font-weight: 600; }

/* ---------- badges ---------- */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: #f1f3f7; color: var(--muted); border: 1px solid var(--line);
  transition: transform .12s, box-shadow .12s;
}
a .badge:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(16,24,40,.14); }
.badge.cliente { background: var(--amber-soft); color: #92400e; border-color: #fcd34d; }
.badge.ok { background: #ecfdf5; color: var(--green); border-color: #a7f3d0; }
.badge.no { background: #fef2f2; color: var(--red); border-color: #fecaca; }
.badge.info { background: var(--brand-soft); color: var(--brand); border-color: #c7d2fe; }

.est-preparacion { background: #fffbeb; color: #92400e; border-color: #fcd34d; }
.est-radicado    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.est-admitida    { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.est-notificado  { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.est-embargo     { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.est-sentencia   { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.est-terminado   { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.est-archivado   { background: #f3f4f6; color: #4b5563; border-color: #d1d5db; }

/* ---------- checklist ---------- */
.docs { display: flex; gap: 4px; flex-wrap: wrap; }
.doc {
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; border: 1px solid #fecaca;
  background: var(--red-soft); color: #b91c1c;
  transition: transform .12s, box-shadow .12s;
}
.doc:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 3px 8px rgba(16,24,40,.16); }
.doc.si { background: var(--green-soft); color: var(--green); border-color: #a7f3d0; }

/* ---------- botones ---------- */
.btn {
  display: inline-block; padding: 8px 14px; border-radius: 9px; font-size: 14px;
  font-weight: 600; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); cursor: pointer; text-decoration: none; line-height: 1.4;
  box-shadow: var(--sombra);
  transition: background .15s, box-shadow .15s, transform .12s, border-color .15s, color .15s;
}
.btn:hover {
  background: #f7f9fd; border-color: #c3cede; color: var(--brand);
  text-decoration: none; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16,24,40,.12);
}
.btn:active { transform: translateY(0); box-shadow: var(--sombra); }
.btn-primary {
  background: linear-gradient(180deg, var(--brand-2) 0%, var(--brand) 100%);
  border-color: var(--brand); color: #fff;
}
.btn-primary:hover {
  background: linear-gradient(180deg, #2f78f6 0%, #1b389c 100%);
  color: #fff; border-color: #1b389c;
  box-shadow: 0 5px 14px rgba(30,64,175,.34);
}
.btn-danger { background: var(--card); border-color: #fca5a5; color: var(--red); }
.btn-danger:hover {
  background: var(--red-soft); color: var(--red); border-color: var(--red);
  box-shadow: 0 4px 12px rgba(220,38,38,.20);
}
.btn-sm { padding: 5px 10px; font-size: 13px; }

/* ---------- formularios ---------- */
form .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
form label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 5px; }
.check { border-radius: 8px; padding: 5px 8px; transition: background .13s; }
.check:hover { background: var(--brand-soft); cursor: pointer; }
form .hint { font-weight: 400; color: var(--muted); font-size: 12px; }
input[type=text], input[type=email], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid #d7dce5; border-radius: 9px;
  font: inherit; background: #fff; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
input[type=text]:hover, input[type=email]:hover, input[type=date]:hover,
input[type=number]:hover, select:hover, textarea:hover { border-color: #b9c3d4; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
textarea { min-height: 92px; resize: vertical; }
.field-wide { grid-column: 1 / -1; }
.checks { display: flex; gap: 18px; flex-wrap: wrap; }
.check { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; }
.check input { width: 17px; height: 17px; margin: 0; accent-color: var(--brand); }
.form-actions {
  display: flex; gap: 10px; align-items: center;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
}
.form-actions .spacer { margin-left: auto; }

/* ---------- varios ---------- */
.muted { color: var(--muted); }
.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty p { margin: 0 0 14px; }
.searchbar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.searchbar input, .searchbar select { width: auto; min-width: 220px; }
.dl { display: grid; grid-template-columns: 190px 1fr; gap: 1px 16px; font-size: 14px; }
.dl dt { color: var(--muted); padding: 8px 0; font-weight: 600; }
.dl dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
.dl dt { border-bottom: 1px solid var(--line); }
/* Documentos del expediente: estado, el Word anexado y sus botones en un renglon */
.dl.docs { grid-template-columns: 190px minmax(0, 1fr); }
.dl.docs dd { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dl.docs .btn-sm { padding: 3px 9px; font-size: 12.5px; }
.doc-fecha { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--muted); }
.doc-anexo { display: inline-flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0;
  font-size: 12.5px; color: var(--brand); text-decoration: none; }
.doc-anexo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-acciones { display: inline-flex; gap: 6px; margin-left: auto; flex: none; }
.doc-acciones form { margin: 0; }
.btn-quitar:hover { color: var(--red); border-color: #fecaca; background: var(--red-soft); }
.doc-anexo:hover span { text-decoration: underline; }
/* SweetAlert del contrato: objeto, alcance y % */
.swal-contrato { text-align: left; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.swal-contrato label { font-weight: 700; color: var(--ink); margin-top: 8px; }
.swal-contrato label small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.swal-contrato textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; line-height: 1.5;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.swal-contrato .ct-pct { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.swal-contrato .ct-pct input { width: 80px; font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.swal-contrato .ct-aviso { margin: 8px 0 0; color: #92400e; font-size: 13px; }
.obs { white-space: pre-wrap; font-size: 13.5px; line-height: 1.6; margin: 0; font-family: inherit; }

/* ---------- partes de un expediente ---------- */
/* Titulo de la tarjeta con el boton "Agregar parte" a la derecha, a la
   altura de los botones de cada parte. */
.partes-card > h2 { flex-wrap: wrap; }
.btn-agregar { color: var(--brand); }
.partes-card > h2 .partes-agregar {
  margin-left: auto; text-transform: none; letter-spacing: 0;
  color: var(--brand);
}
.ico-svg { display: inline-flex; color: var(--brand); }
.ico-svg svg { width: 18px; height: 18px; }

/* Botones con icono SVG */
.btn-ico { display: inline-flex; align-items: center; gap: 6px; }
.btn-ico svg { width: 16px; height: 16px; flex: none; }
.btn-editar { color: var(--red); padding-left: 8px; padding-right: 8px; }
.btn-editar:hover { background: var(--red-soft); border-color: #fecaca; }

/* Cada parte es un bloque dentro de la tarjeta. Cuando hay varias, la linea
   las separa; la primera no la necesita. */
.parte + .parte { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--line); }
.parte-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 2px 0 8px; border-bottom: 1px solid var(--line);
}
.parte-quien { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.parte-avatar { display: inline-flex; color: #1e3a8a; }
.parte-avatar svg { width: 24px; height: 24px; }
.parte-nombre { font-size: 16px; color: var(--ink); }
.badge.rol { background: var(--brand-soft); color: var(--brand); border-color: #c7d2fe; font-weight: 600; }
.parte-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Los datos: rejilla compacta de cuatro columnas, cada dato con su icono, la
   etiqueta arriba y el valor debajo. Ningun dato se esconde: lo vacio
   muestra "—". */
.parte-datos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 20px; row-gap: 2px; padding-top: 6px;
}
.dato {
  display: flex; align-items: flex-start; gap: 9px; min-width: 0;
  padding: 7px 0;
}
/* Los campos largos (inmuebles, notas) ocupan el renglon entero */
.dato.ancho { grid-column: 1 / -1; }
.dato > div { min-width: 0; }
.dato-ico { display: inline-flex; flex: none; width: 18px; justify-content: center; color: #64748b; padding-top: 1px; }
.dato-ico svg { width: 17px; height: 17px; }
/* Contratos vigentes: el numero hace de icono */
.dato-ico.cuenta {
  width: 18px; height: 18px; border-radius: 50%; align-items: center;
  font-size: 11px; font-weight: 700; background: var(--line); color: var(--muted); padding: 0;
}
.dato-ico.cuenta.ok { background: var(--green); color: #fff; }
.dato-k { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 1px; text-transform: uppercase; letter-spacing: .02em; }
.dato-v { font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; line-height: 1.4; }
.dato-v.mono { font-size: 13.5px; }
/* Inmuebles y notas a lo ancho, separados por una linea fina */
.dato.ancho { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 9px; }
.dato-v a { color: var(--brand); text-decoration: none; }
.dato-v a:hover { text-decoration: underline; }
.pre { white-space: pre-line; }
.dato-lista { margin: 3px 0 0; padding-left: 18px; }
.dato-lista li { margin-bottom: 1px; }

@media (max-width: 1200px) {
  .parte-datos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .parte-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .parte-datos { grid-template-columns: 1fr; }
  .parte-head .actions { margin-left: 0; }
  .partes-card > h2 .partes-agregar { margin-left: 0; }
}

/* ================= ACTUACIONES ================= */

/* Linea de tiempo de actuaciones */
.tl { list-style: none; margin: 0; padding: 0; }
.tl li {
  position: relative; padding: 14px 0 14px 20px;
  border-bottom: 1px solid var(--line);
}
.tl li:last-child { border-bottom: none; }
.tl li::before {
  content: ''; position: absolute; left: 0; top: 21px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); border: 2px solid var(--card);
}
.tl li.nueva::before { background: var(--red); box-shadow: 0 0 0 3px #fee2e2; }
.tl li.nueva { background: #fffdf7; margin: 0 -18px; padding-left: 38px; padding-right: 18px; }
.tl .f {
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tl .t { font-weight: 600; margin-top: 3px; font-size: 14.5px; }
.tl .a { color: #4b5563; font-size: 13.5px; margin-top: 3px; white-space: pre-wrap; }
.badge.nueva { background: var(--red); color: #fff; border-color: var(--red); }

/* Avisos */
.aviso {
  padding: 12px 14px; border-radius: var(--radius); margin-bottom: 18px;
  border: 1px solid var(--line); border-left: 4px solid var(--muted);
  background: var(--card); font-size: 14px; box-shadow: var(--sombra);
}
.aviso.ok   { background: var(--green-soft); border-color: #a7f3d0; border-left-color: var(--green); color: #065f46; }
.aviso.err  { background: var(--red-soft); border-color: #fecaca; border-left-color: var(--red); color: #991b1b; }
.aviso.info { background: var(--brand-soft); border-color: #c7d2fe; border-left-color: var(--brand-2); color: #3730a3; }
.aviso.nuevo{ background: var(--amber-soft); border-color: #fcd34d; border-left-color: var(--amber); color: #92400e; font-weight: 600; }
.aviso strong { font-weight: 700; }

.mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; letter-spacing: -.02em; }
.spin { display: inline-block; animation: giro 1s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

/* ============ CARDS DE ACTUACIONES (horizontales, ancho completo) ============ */
.acts { display: flex; flex-direction: column; gap: 8px; }

.act {
  display: grid;
  grid-template-columns: 92px 1fr 210px;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow .12s, border-color .12s;
}
.act:hover { box-shadow: var(--sombra-alta); border-color: #cdd6e6; transform: translateX(2px); }
.act.nueva { border-left-color: var(--red); background: #fffdf8; }
.act.nueva:hover { box-shadow: 0 1px 8px rgba(220,38,38,.13); }

/* --- columna 1: fecha grande --- */
.act .fecha {
  padding: 10px 8px; text-align: center;
  background: #fafbfc; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.act.nueva .fecha { background: #fff7ed; border-right-color: #fde3c0; }
.act .fecha .d { font-size: 21px; font-weight: 700; line-height: 1; }
.act .fecha .m { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 2px; }
.act .fecha .y { font-size: 11px; color: var(--muted); }

/* --- columna 2: contenido --- */
.act .cuerpo { padding: 9px 13px; min-width: 0; }
.act .titulo {
  font-weight: 650; font-size: 14.5px; line-height: 1.3;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.act .nota {
  font-size: 13px; color: #4b5563; line-height: 1.5; margin-top: 4px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Anotaciones largas: se recortan a 3 lineas con un boton para abrir */
.act .nota.corta {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.act .vermas {
  background: none; border: none; padding: 2px 0; margin-top: 2px;
  color: var(--brand); font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.act .vermas:hover { text-decoration: underline; }

/* --- columna 3: metadatos --- */
.act .meta {
  padding: 9px 12px; border-left: 1px dashed var(--line);
  background: #fcfcfd; font-size: 11.5px; color: var(--muted);
  display: flex; flex-direction: column; gap: 3px; justify-content: center;
}
.act.nueva .meta { background: #fffbf5; }
.act .meta .r { display: flex; gap: 6px; align-items: baseline; }
.act .meta .r b {
  min-width: 62px; font-weight: 600; color: #9ca3af;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em;
}
.act .meta .r span { color: #4b5563; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.act .meta .plazo { color: #c2410c; font-weight: 600; }

.badge.doc-si { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.badge.mini { padding: 1px 7px; font-size: 10.5px; }

/* Barra de filtros de la lista de actuaciones */
.acts-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 12px;
}
.acts-bar input { min-width: 240px; width: auto; }
.acts-bar .cuenta { color: var(--muted); font-size: 13px; margin-left: auto; }

@media (max-width: 900px) {
  .act { grid-template-columns: 76px 1fr; }
  .act .meta {
    grid-column: 1 / -1; border-left: none; border-top: 1px dashed var(--line);
    flex-direction: row; flex-wrap: wrap; gap: 4px 16px;
  }
  .act .meta .r b { min-width: auto; }
}

/* Columna de numeracion en los listados */
th.num:first-child, td.num-fila { width: 38px; padding-right: 6px; }
td.num-fila { font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ================= MODALES ================= */
.modal-fondo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16,24,40,.52); backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: 18px 16px;
  overflow-y: auto;
  animation: fundido .16s ease-out;
}
.modal-fondo[hidden] { display: none; }
@keyframes fundido { from { opacity: 0 } to { opacity: 1 } }

.modal {
  background: var(--card); border-radius: 14px; width: 100%; max-width: 560px;
  box-shadow: 0 22px 50px rgba(16,24,40,.30);
  animation: sube .18s cubic-bezier(.2,.8,.3,1);
  overflow: hidden;
  /* Nunca mas alto que la ventana: el cuerpo rueda por dentro y la cabecera
     y los botones quedan siempre visibles. Sin esto el modal de expediente
     medía 932px en una pantalla de 768 y el boton de guardar caia fuera. */
  display: flex; flex-direction: column;
  max-height: calc(100vh - 36px);
}
/* El contenido del modal cuelga de un <form>, no del .modal. Sin esto la
   columna flexible se corta en el form y el pie con los botones se sale por
   debajo del modal: medido, el pie quedaba en 785px con el modal terminando
   en 750px. */
.modal > form {
  display: flex; flex-direction: column;
  min-height: 0; flex: 1;
}
/* Anchos de modal. Por defecto 560px; el de demandado usa xl porque tiene el
   doble de campos que el de cliente (SECOP, VUR, bienes) y a 560px quedaba todo
   apretado en una columna.
   Ojo: `.modal.ancho` (640px, mas abajo) es lo mismo para el modal de edicion.
   Se conserva para no tocar esa pantalla; en modales nuevos use lg o xl. */
.modal.lg { max-width: 720px; }
.modal.xl { max-width: 940px; }
@keyframes sube { from { opacity: 0; transform: translateY(14px) scale(.98) } to { opacity: 1; transform: none } }

.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #f8faff 0%, #fff 100%);
}
.modal-head h3 { margin: 0; font-size: 16px; flex: 1; }
.modal-head .ico {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; font-size: 15px;
  background: var(--brand-soft); color: var(--brand); border: 1px solid #c7d2fe;
}
.modal-head .sub { font-size: 12.5px; color: var(--muted); font-weight: 400; margin-top: 1px; }
.modal-x {
  border: none; background: none; font-size: 22px; line-height: 1; color: var(--muted);
  cursor: pointer; padding: 2px 6px; border-radius: 7px; transition: background .13s, color .13s;
}
.modal-x:hover { background: var(--red-soft); color: var(--red); }

.modal-body { padding: 12px 16px; overflow-y: auto; flex: 1; min-height: 0; }
.modal-body .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 11px; }
.modal-body .fields .field-wide { grid-column: 1 / -1; }
/* display:grid le gana al hidden del navegador: hay que decirlo aparte */
.modal-body .fields[hidden] { display: none; }
/* En xl caben tres columnas: a 940px con dos, cada campo queda absurdamente
   ancho y hay que bajar para ver el resto. `field-wide` sigue ocupando la fila. */
.modal.xl .modal-body .fields { grid-template-columns: repeat(3, 1fr); }
.modal.xl .modal-body .fields .field-medio { grid-column: span 2; }
.modal-body label { display: block; font-size: 12.5px; font-weight: 600; color: #374151; margin-bottom: 3px; }
.modal-body input, .modal-body select, .modal-body textarea { padding: 6px 10px; font-size: 14px; }
.modal-body textarea { min-height: 52px; }
/* Las dos textareas de bienes traian min-height:96px en linea, que es lo que
   mas alargaba el modal. 64px siguen mostrando tres renglones y crecen solas
   con el contenido. */
.modal-body .fields textarea[id$="-trabajo"],
.modal-body .fields textarea[id$="-casa"] { min-height: 64px !important; }
/* En pantallas medianas el xl no cabe a tres columnas: baja a dos, y el campo
   que ocupaba dos de tres pasa a ocupar la fila entera. */
@media (max-width: 900px) {
  .modal.xl .modal-body .fields { grid-template-columns: 1fr 1fr; }
  .modal.xl .modal-body .fields .field-medio { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .modal-body .fields,
  .modal.xl .modal-body .fields { grid-template-columns: 1fr; }
}

.modal-pie {
  display: flex; gap: 9px; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--line); background: #fafbfd;
}
.modal-pie .spacer { margin-left: auto; }
.modal-pie .mas { font-size: 12.5px; color: var(--muted); }

/* ---------- pestanas dentro de un modal ---------- */
.tabs {
  display: flex; gap: 2px; padding: 0 16px;
  border-bottom: 1px solid var(--line); background: #f8faff;
}
.tab {
  border: none; background: none; cursor: pointer;
  padding: 9px 12px 8px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--muted); border-bottom: 2px solid transparent;
  display: flex; align-items: center; gap: 5px;
  transition: color .14s, border-color .14s, background .14s;
}
.tab:hover { color: var(--brand); background: rgba(30,64,175,.05); }
.tab.on { color: var(--brand); border-bottom-color: var(--brand); }
.tab .n {
  min-width: 16px; padding: 0 5px; border-radius: 20px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 10.5px; font-weight: 700;
}
.tab-panel[hidden] { display: none; }

/* el modal ancho de edicion */
.modal.ancho { max-width: 640px; }
.modal-body.alto { max-height: 62vh; overflow-y: auto; }

/* boton de borrar dentro de una fila de tabla */
.btn-borrar {
  border: 1px solid transparent; background: none; cursor: pointer;
  padding: 3px 7px; border-radius: 7px; font-size: 14px; line-height: 1;
  opacity: .35; transition: opacity .13s, background .13s, border-color .13s;
}
tbody tr:hover .btn-borrar { opacity: 1; }
.btn-borrar:hover { background: var(--red-soft); border-color: #fecaca; }


/* ==================================================================
   ENTRAR Y REGISTRARSE

   Dos paneles: a la izquierda una imagen general del sistema, a la
   derecha el formulario. El logo del despacho NO va aqui — es de cada
   usuario y solo aparece una vez dentro.
   ================================================================== */
.auth-body { min-height: 100vh; margin: 0; background: #0f172a; }

.auth-split {
  min-height: 100vh;
  display: grid; grid-template-columns: 1.15fr 1fr;
}

/* ---------- panel de la imagen ---------- */
.auth-arte {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 44px 42px;
  /* Imagen general del sistema (balanza + acordeon). */
  background: #0f172a url('/img/portada-general.jpg') center / cover no-repeat;
}

/* Velo oscuro de abajo hacia arriba: sin el, el texto blanco se pierde
   sobre las partes claras de la foto. */
.auth-arte::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(10,16,32,.30) 0%, rgba(10,16,32,.55) 45%, rgba(10,16,32,.88) 100%);
}
.auth-arte-texto { position: relative; z-index: 2; color: #fff; max-width: 440px; }
.auth-arte-texto h2 {
  margin: 0 0 10px; font-size: 30px; line-height: 1.22; letter-spacing: -.01em;
}
.auth-arte-texto p { margin: 0 0 20px; font-size: 15px; color: #cfdaf0; line-height: 1.6; }

.auth-puntos { list-style: none; margin: 0; padding: 0; }
.auth-puntos li {
  position: relative; padding-left: 26px; margin-bottom: 9px;
  font-size: 14px; color: #e2e9f7;
}
.auth-puntos li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.16); color: #fff; font-size: 10px; font-weight: 700;
}

/* ---------- panel del formulario ---------- */
.auth-forma {
  display: grid; place-items: center;
  padding: 32px 24px; background: #f6f8fc;
  overflow-y: auto;
}
.auth-tarjeta { width: 100%; max-width: 396px; animation: authSube .24s cubic-bezier(.2,.8,.3,1); }
.auth-tarjeta.ancha { max-width: 486px; }
@keyframes authSube { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

/* Marca del sistema, sin logo: un sello con la balanza y el nombre. */
.auth-titulo { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; }
img.auth-sello { width: 52px; height: 52px; background: #000; object-fit: cover; }
.auth-sello {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: grid; place-items: center; font-size: 20px;
  background: linear-gradient(140deg, #1e40af 0%, #3b82f6 100%);
  color: #fff; box-shadow: 0 3px 10px rgba(30,64,175,.30);
}
.auth-titulo h1 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.auth-titulo p { margin: 1px 0 0; font-size: 12.5px; color: var(--muted); }

.auth-tarjeta h2 { margin: 0 0 3px; font-size: 23px; letter-spacing: -.01em; }
.auth-sub { margin: 0 0 20px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }

.auth-tarjeta label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: #374151; margin: 0 0 5px;
}
.auth-tarjeta input {
  width: 100%; padding: 11.5px 13px; font-size: 14.5px;
  border: 1px solid #dde3ec; border-radius: 10px; background: #fff;
  margin-bottom: 15px; transition: border-color .14s, box-shadow .14s;
}
.auth-tarjeta input:focus {
  outline: none; border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.auth-tarjeta input::placeholder { color: #a9b4c6; }

.auth-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 13px; }

.auth-clave { position: relative; }
.auth-clave input { padding-right: 42px; }
.auth-ojo {
  position: absolute; right: 6px; top: 7px;
  border: none; background: none; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 6px 7px; border-radius: 7px;
  transition: background .13s;
}
.auth-ojo:hover { background: var(--brand-soft); }

.auth-btn {
  width: 100%; margin-top: 6px; padding: 11.5px 16px;
  border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff; font-size: 15px; font-weight: 600; font-family: inherit;
  transition: filter .14s, transform .08s, box-shadow .14s;
  box-shadow: 0 3px 10px rgba(29,78,216,.26);
}
.auth-btn:hover { filter: brightness(1.08); box-shadow: 0 5px 15px rgba(29,78,216,.32); }
.auth-btn:active { transform: translateY(1px); }

.auth-error, .auth-ok {
  border-radius: 10px; padding: 10px 13px; margin-bottom: 16px;
  font-size: 13.5px; line-height: 1.55;
}
.auth-error { background: var(--red-soft); border: 1px solid #fecaca; color: #991b1b; }
.auth-ok    { background: var(--green-soft); border: 1px solid #a7f3d0; color: #065f46; }

/* Toast: aviso corto en la esquina, se va solo */
.toast {
  position: fixed; top: 18px; right: 18px; z-index: 100;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  background: #0f172a; color: #fff; font-size: 13.5px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(12,20,50,.22);
  animation: toast-entra .25s ease-out;
  transition: opacity .4s, transform .4s;
}
.toast-ic {
  display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; background: #10b981; font-size: 11px; font-weight: 700;
}
.toast.fuera { opacity: 0; transform: translateY(-8px); }
@keyframes toast-entra { from { opacity: 0; transform: translateY(-8px); } }

.auth-pie {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #e5eaf2;
  font-size: 13.5px; color: var(--muted); text-align: center;
}

/* Medidor de la contraseña */
.auth-fuerza { display: flex; align-items: center; gap: 9px; margin: -9px 0 14px; font-size: 12px; }
.auth-fuerza .barra { flex: 1; height: 4px; background: #e8ecf3; border-radius: 3px; overflow: hidden; }
.auth-fuerza .barra .col { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .2s, background .2s; }

.auth-aviso { font-size: 12px; margin: -9px 0 14px; }
.auth-aviso.bien { color: var(--green); }
.auth-aviso.mal  { color: var(--red); }

/* En pantalla angosta la imagen estorba: se va y queda solo el formulario,
   con una franja de color arriba para que no quede desnudo. */
@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-arte { display: none; }
  .auth-forma {
    align-items: start; padding-top: 42px;
    background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 180px, #f6f8fc 180px);
  }
  .auth-tarjeta {
    background: #fff; border-radius: 16px; padding: 24px 22px;
    box-shadow: 0 16px 38px rgba(12,20,50,.20);
  }
}
@media (max-width: 480px) {
  .auth-fila { grid-template-columns: 1fr; }
}

/* ==================================================================
   USUARIO EN LA BARRA DE NAVEGACION
   ================================================================== */
.usuario-menu { position: relative; margin-left: auto; flex: none; }
.usuario-btn {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22);
  border-radius: 24px; padding: 3px 11px 3px 3px; cursor: pointer;
  color: #fff; font-size: 13.5px; font-family: inherit; text-align: left;
  transition: background .14s, border-color .14s;
}
.usuario-btn:hover, .usuario-btn[aria-expanded="true"] { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.34); }
.usuario-ini {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #60a5fa 0%, #2563eb 100%);
  color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
}
.usuario-nom { font-weight: 500; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-flecha { font-size: 9px; opacity: .8; }

/* El boton vive a la derecha de la barra de arriba: el panel baja y se alinea
   al borde derecho para no salirse de la pantalla. */
.usuario-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 232px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 14px 34px rgba(16,24,40,.20);
  padding: 6px; animation: authSube .14s ease-out;
}
.usuario-panel[hidden] { display: none; }
.usuario-cab { padding: 10px 11px 11px; border-bottom: 1px solid var(--line); margin-bottom: 5px; text-align: center; }
.usuario-cab .nom { font-weight: 600; font-size: 14px; }
.usuario-cab .dato { font-size: 12.5px; color: var(--muted); margin-top: 2px; word-break: break-all; }
.usuario-panel a, .usuario-panel button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 11px; border: none; background: none; border-radius: 8px;
  font-size: 13.5px; color: var(--ink); text-align: left; cursor: pointer;
  font-family: inherit; transition: background .12s;
}
.usuario-panel a:hover, .usuario-panel button:hover { background: var(--brand-soft); text-decoration: none; }
.usuario-panel button.salir { color: var(--red); }
.usuario-panel button.salir:hover { background: var(--red-soft); }

/* ---------- logo del despacho, en Mi cuenta ---------- */
.logo-caja { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }

/* Cuadro fijo: asi se ve el logo tal como quedara en la barra, sin que la
   pagina salte segun el tamaño de la imagen. */
.logo-vista {
  width: 132px; height: 132px; flex: none;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; display: grid; place-items: center; padding: 10px;
  background-image:
    linear-gradient(45deg, #f2f5fa 25%, transparent 25%, transparent 75%, #f2f5fa 75%),
    linear-gradient(45deg, #f2f5fa 25%, transparent 25%, transparent 75%, #f2f5fa 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}
/* La cuadricula de fondo deja ver si el PNG tiene fondo transparente */
.logo-vista img { max-width: 100%; max-height: 100%; object-fit: contain; }

.logo-vacio { text-align: center; }
.logo-vacio span {
  display: grid; place-items: center;
  width: 54px; height: 54px; margin: 0 auto 7px; border-radius: 50%;
  background: linear-gradient(140deg, #60a5fa 0%, #2563eb 100%);
  color: #fff; font-weight: 700; font-size: 18px;
}
.logo-vacio p { margin: 0; font-size: 12px; }

.logo-acciones { flex: 1; min-width: 240px; }
.logo-acciones form { display: inline-block; margin: 0 7px 10px 0; }
.logo-acciones .mas { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }

@media (max-width: 560px) {
  .logo-caja { flex-direction: column; }
}

/* ---------- SweetAlert2: que la libreria mande en sus propios campos ----------
   La regla de arriba apunta a `input[type=text]` sin filtrar por contenedor, asi
   que tambien le caia al input de los dialogos y peleaba con el estilo propio de
   SweetAlert2: el campo salia desbordado y mas alto que la caja. Aqui se le
   devuelve el ancho que la libreria calcula (no 100%) y se le da el mismo aire
   visual que el resto de campos de la app, para que no parezca de otra parte. */
.swal2-container .swal2-input,
.swal2-container .swal2-textarea,
.swal2-container .swal2-select {
  width: auto;
  box-sizing: border-box;
  font: inherit;
  font-size: 15px;
  padding: 9px 12px;
  border: 1px solid #d7dce5;
  border-radius: 9px;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.swal2-container .swal2-input:focus,
.swal2-container .swal2-textarea:focus,
.swal2-container .swal2-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
/* El margen por defecto de la libreria es 1em auto: deja el campo muy separado
   del texto que lo explica. */
.swal2-container .swal2-input { margin: 12px auto 4px; height: auto; }
/* El aviso de validacion se veia como un bloque gris suelto; aqui va en rojo,
   alineado con el aviso rojo que ya trae el dialogo. */
.swal2-container .swal2-validation-message {
  font-size: 13px;
  background: #fef2f2;
  color: #991b1b;
  border-radius: 8px;
}

/* La firma es apaisada (va sobre una raya), no cuadrada como el logo: el
   cuadro de 132x132 la dejaria diminuta. Se reutiliza todo lo demas de
   .logo-vista, incluida la cuadricula que delata el fondo transparente. */
.logo-vista.firma-vista { width: 100%; max-width: 236px; height: 104px; }

/* Logo y firma comparten fila, asi que cada tarjeta vive en media pagina. A
   ese ancho la vista previa y los botones ya no caben uno al lado del otro:
   se apilan, y la previa pasa a ocupar el ancho de la tarjeta.

   POR QUE FLEX Y NO EL GRID DE .logo-vista
   ----------------------------------------
   El cuadro base centra con `display:grid` + `place-items:center` y tiene
   `padding:10px`. En un grid, el `max-height:100%` del hijo se resuelve contra
   la CELDA, que incluye el area del padding: con el cuadro de 132x132 no se
   notaba, pero al ensancharlo la imagen salia mas alta que el recuadro y
   quedaba cortada por la mitad. En flex, `max-height` se mide contra la caja
   de contenido, que es lo que aqui se quiere. `box-sizing:border-box` deja el
   padding dentro del alto declarado en vez de sumarselo. */
.two .logo-caja { flex-direction: column; gap: 14px; align-items: stretch; }
.two .logo-caja .logo-vista {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 148px;
  flex: none;
}
/* Mismo alto que el logo: los dos cuadros van uno al lado del otro y con
   alturas distintas la fila se ve descuadrada. La imagen de adentro se sigue
   ajustando sola con object-fit, asi que la firma no se deforma por esto. */
.two .logo-caja .logo-vista.firma-vista { max-width: none; height: 148px; }
.two .logo-caja .logo-vista img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.two .logo-acciones { min-width: 0; width: 100%; }

/* En pantallas chicas el perfil se queda solo con las iniciales */
@media (max-width: 560px) {
  .usuario-nom, .usuario-flecha { display: none; }
  .usuario-btn { padding: 3px; }
}

/* Emoji de titulo que es enlace (la lupa de Consultar radicado) */
.ico-link { text-decoration: none; cursor: pointer; transition: transform .14s; display: inline-block; }
.ico-link:hover { text-decoration: none; transform: scale(1.15); }

/* ---------- PDF de la notificacion por estado ---------- */
.act .btn-pub {
  display: inline-block; margin-top: 7px; text-decoration: none; padding: 4px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8;
  font: inherit; font-size: 12.5px; font-weight: 600;
  transition: background .14s, border-color .14s;
}
.act .btn-pub:hover { text-decoration: none; background: #dbeafe; border-color: #93c5fd; }

.pub-lista { margin: 10px 0 14px; padding-left: 20px; line-height: 1.8; }
.pub-lista .mas { color: var(--muted); font-size: 12.5px; }

/* ---------- expediente: titulo valor + Justicia XXI lado a lado ---------- */
/* Las dos cards quedan del mismo alto (el grid las estira). La de Justicia
   XXI no empuja la fila: su contenido va en una capa absoluta con scroll,
   asi que la altura la pone la card de la letra. */
.fila-letra {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 14px; margin-bottom: 14px;
}
.fila-letra > .card { margin-bottom: 0; }
.fila-letra.sin-letra { grid-template-columns: 1fr; }
.j21 { display: flex; flex-direction: column; min-width: 0; }
/* Plegable: el titulo abre y cierra */
.j21-titulo { cursor: pointer; user-select: none; }
.j21-flecha { display: inline-block; font-size: 12px; color: var(--muted); transition: transform .15s; }
.j21:not(.plegada) .j21-flecha { transform: rotate(90deg); }
.j21.plegada .j21-contenido { display: none; }
.j21.plegada > h2 { margin-bottom: 0; }
.j21 > h2 .j21-fuente {
  margin-left: auto; font-size: 11.5px; font-weight: 500;
  text-transform: none; letter-spacing: 0;
}
.j21-cuerpo { position: relative; flex: 1; min-height: 240px; }
.j21-scroll { position: absolute; inset: 0; overflow: auto; }
/* Sola (sin letra) no hay con quien igualar: tope fijo y scroll */
.sin-letra .j21-cuerpo { min-height: 0; }
.sin-letra .j21-scroll { position: static; max-height: 380px; }

.j21-parte + .j21-parte { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.j21-cab {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; margin-bottom: 6px;
}
.j21-cab .mas { font-size: 12px; color: var(--muted); }
.j21-cab form, .j21-cab .j21-btn { flex: none; }
.j21 table { font-size: 12.5px; }
.j21 th { padding: 5px 8px; font-size: 10.5px; position: sticky; top: 0; z-index: 1; }
.j21 td { padding: 4px 8px; }
.j21 td.rad { font-size: 11.5px; white-space: nowrap; }
.j21-aviso { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

@media (max-width: 1000px) {
  .fila-letra { grid-template-columns: 1fr; }
  .j21-cuerpo { min-height: 0; }
  .j21-scroll { position: static; max-height: 380px; }
}
.j21-err { color: var(--red); }
.j21-girando {
  display: inline-block; width: 10px; height: 10px; vertical-align: -1px;
  border: 2px solid var(--line); border-top-color: var(--brand-2);
  border-radius: 50%; animation: j21-gira .8s linear infinite;
}
@keyframes j21-gira { to { transform: rotate(360deg); } }

/* Tabla de Justicia XXI con borde negro en todas las celdas. Va con
   border-collapse: separate porque con collapse el borde de la cabecera fija
   (sticky) se pierde al hacer scroll. */
.j21 table {
  border-collapse: separate; border-spacing: 0;
  border-top: 1px solid #000; border-left: 1px solid #000;
}
.j21 th, .j21 td { border-right: 1px solid #000; border-bottom: 1px solid #000; }
.j21 tbody tr:last-child td { border-bottom: 1px solid #000; }
.j21 thead tr:first-child th:first-child,
.j21 thead tr:first-child th:last-child { border-radius: 0; }

/* ================= CALENDARIO =================
   Parecido al de Teams: barra con Hoy / flechas / rango, cuadricula de horas
   con la raya roja de "ahora", y los eventos con su color por tipo. */
.cal { display: flex; flex-direction: column; gap: 10px; }

/* Color por tipo: --c la raya y el punto, --cs el fondo claro */
.t-audiencia   { --c: #7c3aed; --cs: #f1ebfe; }
.t-reunion     { --c: #1e40af; --cs: #e8eefc; }
.t-vencimiento { --c: #dc2626; --cs: #fdecec; }
.t-diligencia  { --c: #0d9488; --cs: #e3f6f3; }
.t-otro        { --c: #b45309; --cs: #fdf3e2; }

.cal-barra { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.cal-tit { margin: 0; font-size: 20px; display: flex; align-items: center; gap: 9px; }
.cal-tit .ico {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-size: 17px; background: var(--brand-soft); border: 1px solid #c7d2fe;
}
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-flecha {
  width: 30px; height: 30px; border: none; background: none; border-radius: 8px;
  font-size: 20px; line-height: 1; color: var(--ink); cursor: pointer;
}
.cal-flecha:hover { background: rgba(30,64,175,.08); color: var(--brand); }
.cal-rango {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 8px; cursor: pointer;
  font-size: 16px; font-weight: 600;
}
.cal-rango:hover { background: rgba(30,64,175,.08); }
.cal-rango #cal-rango::first-letter { text-transform: uppercase; }
.cal-rango .flecha { font-size: 11px; color: var(--muted); }
/* El input de fecha solo sirve para abrir el selector nativo */
.cal-rango input { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; }

.cal-der { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-vistas {
  display: flex; background: #fff; border: 1px solid var(--line); border-radius: 9px;
  padding: 2px; box-shadow: var(--sombra);
}
.cal-vistas button {
  border: none; background: none; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--muted); padding: 5px 11px; border-radius: 7px; cursor: pointer;
}
.cal-vistas button:hover { color: var(--brand); }
.cal-vistas button.on { background: var(--brand-soft); color: var(--brand); }

.cal-leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.cal-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.cal-leyenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }

.cal-caja {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--sombra); overflow: hidden;
}

/* ---------- semana / dia ---------- */
.cal-sem { --gut: 64px; display: flex; flex-direction: column; }
.cal-cab, .cal-todo, .cal-grid {
  display: grid; grid-template-columns: var(--gut) repeat(var(--dias), minmax(0, 1fr));
}
.cal-cab { border-bottom: 1px solid var(--line); }
.cal-dcab {
  display: flex; align-items: baseline; gap: 6px; padding: 8px 10px 6px;
  cursor: pointer; border-left: 1px solid transparent;
}
.cal-dcab .n { font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--ink); }
.cal-dcab .s { font-size: 13px; color: var(--muted); text-transform: capitalize; }
.cal-dcab:hover .n { color: var(--brand); }
.cal-dcab.hoy { box-shadow: inset 0 3px 0 var(--brand); }
.cal-dcab.hoy .n, .cal-dcab.hoy .s { color: var(--brand); font-weight: 700; }

.cal-gut { font-size: 11px; color: var(--muted); padding: 4px 6px; text-align: right; }
.cal-todo { border-bottom: 1px solid var(--line); min-height: 30px; }
.cal-tcel {
  border-left: 1px solid #edeff3; padding: 3px; display: flex; flex-direction: column; gap: 2px;
  cursor: pointer; min-width: 0;
}
.cal-tcel:hover { background: #f8faff; }

.cal-cuerpo {
  overflow-y: auto; height: calc(100vh - 250px); min-height: 380px;
  scrollbar-width: thin;
}
.cal-horas > div { position: relative; }
.cal-horas span {
  position: absolute; top: -8px; right: 8px; font-size: 11px; color: var(--muted);
  white-space: nowrap; background: var(--card); padding: 0 2px;
}
.cal-col {
  position: relative; border-left: 1px solid #edeff3; cursor: cell; touch-action: none;
  /* Rayas: continua cada hora, clarita cada media. 48px = H en el script */
  background-image:
    linear-gradient(to bottom, #e6e9ef 1px, transparent 1px),
    linear-gradient(to bottom, transparent 24px, #f1f3f6 24px, #f1f3f6 25px, transparent 25px);
  background-size: 100% 48px;
}
.cal-col.hoy { background-color: #fafbff; }

.cal-ev {
  position: absolute; box-sizing: border-box; overflow: hidden; z-index: 2;
  background: var(--cs); color: #1f2937; border-left: 3px solid var(--c);
  border-radius: 4px; padding: 3px 6px; font-size: 12px; line-height: 1.3;
  cursor: pointer; user-select: none; touch-action: none;
  box-shadow: 0 0 0 1px #fff;
  transition: box-shadow .12s;
}
.cal-ev:hover { box-shadow: 0 0 0 1px #fff, 0 3px 10px rgba(16,24,40,.16); z-index: 3; }
.cal-ev .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev .h { color: #4b5563; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev.corto { display: flex; gap: 6px; align-items: center; padding-top: 1px; padding-bottom: 1px; }
.cal-ev.corto .t { flex: none; max-width: 60%; }
.cal-ev.arrastra { opacity: .85; z-index: 5; cursor: grabbing; box-shadow: 0 8px 20px rgba(16,24,40,.25); }
.cal-res { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }

.cal-fantasma {
  position: absolute; left: 1px; right: 3px; z-index: 4; pointer-events: none;
  background: rgba(59,130,246,.18); border: 1.5px solid var(--brand-2); border-radius: 4px;
}
.cal-ahora {
  position: absolute; left: -1px; right: 0; height: 2px; background: #c4314b; z-index: 4;
  pointer-events: none;
}
.cal-ahora::before {
  content: ""; position: absolute; left: -5px; top: -4px;
  width: 10px; height: 10px; border-radius: 50%; background: #c4314b;
}

/* Chips: fila de todo el dia y vista de mes */
/* Dos renglones: arriba hora + que es; abajo la persona, que puede partirse
   en dos lineas antes de cortarse con "…". */
.cal-chip {
  display: flex; flex-direction: column; align-items: stretch; gap: 1px;
  width: 100%; min-width: 0;
  border: none; border-radius: 4px; padding: 3px 6px; cursor: pointer;
  background: var(--cs); color: #1f2937; font: inherit; font-size: 12px; line-height: 1.3; text-align: left;
  border-left: 3px solid var(--c);
}
.cal-chip:hover { filter: brightness(.96); }
.cal-chip .l1 { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
.cal-chip .l1 .q { overflow: hidden; text-overflow: ellipsis; }
.cal-chip .l2 {
  font-size: 11.5px; font-weight: 600; color: #374151; padding-left: 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.cal-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.cal-chip b { font-weight: 600; flex: none; }
/* Semana/dia: el nombre en su propio renglon, debajo de que es */
.cal-ev .p { font-weight: 600; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev.corto .p { display: none; }

/* ---------- mes ---------- */
.cal-mcab { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.cal-mcab div {
  padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: capitalize;
}
.cal-mgrid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(110px, 1fr);
}
.cal-mcel {
  border-right: 1px solid #edeff3; border-bottom: 1px solid #edeff3;
  padding: 4px 5px; display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: pointer;
}
.cal-mcel:nth-child(7n) { border-right: none; }
.cal-mcel:hover { background: #f8faff; }
.cal-mcel.fuera { background: #fafbfc; }
.cal-mcel.fuera .cal-mnum { color: #a3aab8; }
.cal-mnum {
  align-self: flex-start; border: none; background: none; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--ink); padding: 1px 6px; border-radius: 12px; cursor: pointer;
}
.cal-mnum:hover { background: var(--brand-soft); color: var(--brand); }
.cal-mcel.hoy .cal-mnum { background: var(--brand); color: #fff; }
.cal-mas {
  border: none; background: none; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--brand); text-align: left; padding: 1px 6px; cursor: pointer;
}
.cal-mas:hover { text-decoration: underline; }

/* ---------- modal del evento ---------- */
.ev-fh { display: flex; gap: 6px; }
.ev-fh input[type=date] { flex: 1.4; }
.ev-fh input[type=time] { flex: 1; }
.ev-fh input[hidden] { display: none; }
.ev-tododia { display: flex; align-items: flex-end; }
input[type=time] {
  width: 100%; border: 1px solid #d7dce5; border-radius: 9px; font: inherit;
  background: #fff; color: var(--ink);
}

@media (max-width: 760px) {
  .cal-der { margin-left: 0; width: 100%; justify-content: space-between; }
  .cal-vistas button { padding: 5px 8px; }
  .cal-sem { --gut: 46px; }
  .cal-dcab { flex-direction: column; align-items: center; gap: 0; padding: 6px 2px; }
  .cal-dcab .n { font-size: 17px; }
  .cal-mgrid { grid-auto-rows: minmax(76px, 1fr); }
  .cal-mcel .cal-chip b { display: none; }
}

/* Audiencias que un auto posterior reprogramo o dejo sin efecto */
.cal-ev.anulado, .cal-chip.anulado { opacity: .55; background: #f3f4f6; border-left-color: #9ca3af; }
.cal-ev.anulado .t, .cal-chip.anulado { text-decoration: line-through; }
.cal-chip.anulado i { background: #9ca3af; }

/* Aviso en el modal: el evento salio de una actuacion */
.ev-origen {
  margin-bottom: 10px; padding: 8px 11px; border-radius: 9px; font-size: 13px;
  background: var(--violet-soft); color: #4c1d95; border: 1px solid #ddd6fe;
}
.ev-origen[hidden] { display: none; }

/* Boton en la tarjeta de la actuacion */
.btn-cal {
  display: inline-flex; align-items: center; gap: 5px; margin: 4px 0 2px;
  padding: 3px 10px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
  background: var(--violet-soft); color: var(--violet); border: 1px solid #ddd6fe;
}
.btn-cal:hover { background: #ede9fe; text-decoration: none; }
.btn-cal.off { background: #f3f4f6; color: var(--muted); border-color: var(--line); text-decoration: line-through; }

/* ================= VIGIA (revision automatica) ================= */
.vigia {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 14px; box-shadow: var(--sombra);
}
.vigia-txt { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.vigia-txt .muted { font-size: 12.5px; }
.vigia-punto { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--muted); }
.vigia-punto.ok { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); animation: latido 2.4s ease-in-out infinite; }
.vigia-punto.gira { background: var(--brand-2); box-shadow: 0 0 0 4px var(--brand-soft); animation: latido .9s ease-in-out infinite; }
.vigia-punto.off { background: #9ca3af; }
@keyframes latido { 50% { transform: scale(.7); opacity: .6; } }
.vigia-barra { height: 4px; border-radius: 4px; background: var(--brand-soft); overflow: hidden; margin-top: 4px; max-width: 420px; }
.vigia-barra[hidden] { display: none; }
.vigia-barra i { display: block; height: 100%; width: 0; background: var(--brand-2); transition: width .4s; }
.lateral .menu .pill[hidden],
.lateral .menu a[hidden] { display: none; }

/* Contador de audiencias de la semana en el menu (morado, como las audiencias) */
.lateral .menu .pill.semana { background: var(--violet); }


/* ---------- Admin ---------- */
.tabla-admin td { vertical-align: middle; }
.tabla-admin .uso { min-width: 130px; }
.uso-txt { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.uso-barra { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; max-width: 160px; }
.uso-barra span { display: block; height: 100%; background: var(--green); border-radius: 6px; }
.uso-barra.casi span { background: #f59e0b; }
.uso-barra.lleno span { background: var(--red); }
.stat .uso-barra { margin-top: 8px; }
.fila-apagada td { opacity: .55; }
.auth-ayuda { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }

/* ---------- Pagina de error 500 ---------- */
.error-pagina {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; background: radial-gradient(circle at 30% 20%, #1e3a8a 0%, #0f172a 60%);
}
.error-caja {
  max-width: 460px; width: 100%; background: #fff; border-radius: 18px; padding: 34px 30px;
  text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.error-ico { font-size: 42px; margin-bottom: 6px; }
.error-caja h1 { margin: 0 0 10px; font-size: 24px; color: var(--ink); }
.error-caja p { margin: 0 0 12px; color: #475569; line-height: 1.55; font-size: 14.5px; }
.error-sub { font-size: 13px !important; color: var(--muted) !important; }
.error-botones { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.error-botones .auth-btn { display: block; text-decoration: none; text-align: center; }
.error-inicio { font-size: 13.5px; color: var(--brand); }
.error-pie { margin-top: 18px; color: rgba(255,255,255,.4); font-size: 12px; }

/* ---------- Suscripcion ---------- */
.aviso-vencida { background: var(--red-soft); border-color: #fecaca; color: #991b1b; }
.aviso-porvencer { background: var(--amber-soft); border-color: #fcd34d; color: #92400e; }
.badge.aviso-b { background: var(--amber-soft); color: #92400e; border-color: #fcd34d; }
.sub-caja { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0; background: #fafbff; }
.sub-caja h3 { margin: 0 0 10px; font-size: 14.5px; }

/* ---------- Terminos y alertas ---------- */
.act .btn-term { margin-right: 6px; }
.mt-resultado {
  margin-top: 14px; padding: 14px 16px; border-radius: 12px;
  background: var(--brand-soft); border: 1px solid #c7d2fe;
}
.mt-vence { font-size: 17px; margin-bottom: 4px; }
.mt-vence strong { color: var(--brand); text-transform: capitalize; }
.mt-saltados { margin-top: 8px; font-size: 13px; }
.mt-saltados summary { cursor: pointer; color: var(--muted); }
.mt-saltados ul { margin: 6px 0 0; padding-left: 18px; color: #475569; }

.proximos .prox-lista { list-style: none; margin: 0; padding: 0; }
.prox { display: flex; gap: 14px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.prox:last-child { border-bottom: 0; }
.prox-cuando { flex: none; width: 92px; font-weight: 700; font-size: 13px; color: var(--brand); }
.prox-cuando small { display: block; font-weight: 500; color: var(--muted); }
.prox.urgente .prox-cuando { color: #b91c1c; }
.prox-que { font-size: 14px; line-height: 1.45; }
.badge.mini { font-size: 10.5px; padding: 1px 6px; }

/* ---------- Semaforo de actividad ---------- */
.luz { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  padding: 2px 9px 2px 7px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.luz i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.luz-verde { background: #ecfdf5; color: #047857; } .luz-verde i { background: #10b981; }
.luz-amarillo { background: #fffbeb; color: #b45309; } .luz-amarillo i { background: #f59e0b; }
.luz-rojo { background: #fef2f2; color: #b91c1c; } .luz-rojo i { background: #ef4444; }
.luz-gris { background: #f1f5f9; color: #64748b; } .luz-gris i { background: #cbd5e1; }
.luz.luz-riesgo { box-shadow: 0 0 0 2px #fca5a5; }
h1 .luz { font-size: 12.5px; margin-left: 6px; }
.riesgo-card { border-color: #fecaca; background: #fffafa; }

/* ---------- Anuncios del admin ---------- */
.anuncio { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-bottom: 14px;
  border-radius: 12px; border: 1px solid #bfdbfe; background: #eff6ff; color: #1e3a8a; }
.anuncio-aviso { border-color: #fcd34d; background: var(--amber-soft); color: #92400e; }
.anuncio-importante { border-color: #fecaca; background: var(--red-soft); color: #991b1b; }
.anuncio-ico { font-size: 18px; line-height: 1.2; }
.anuncio-txt { flex: 1; font-size: 14px; line-height: 1.5; }
.anuncio-x { border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: inherit; opacity: .6; }
.anuncio-x:hover { opacity: 1; }

/* ---------- Soporte ---------- */
.chat { display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 78%; padding: 10px 13px; border-radius: 12px; font-size: 14px; line-height: 1.5; background: #f1f5f9; }
.msg.yo { align-self: flex-end; background: var(--brand-soft); }
.msg .quien { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }

/* ---------- Ingresos: barras ---------- */
.barras { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; align-items: end; height: 220px;
  padding: 0 4px; border-bottom: 1px solid var(--line); position: relative; }
.barra { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.barra .col { display: block; width: 62%; max-width: 34px; min-height: 2px; background: #1e40af;
  border-radius: 4px 4px 0 0; transition: opacity .15s; }
.barra.actual .col { background: #3b82f6; }
.barras:hover .barra .col { opacity: .45; }
.barras .barra:hover .col { opacity: 1; }
.barra .etq { position: absolute; bottom: calc(var(--h) + 4px); font-size: 11px; color: var(--ink); white-space: nowrap; font-weight: 600; }
.barra .tip { position: absolute; bottom: calc(var(--h) + 6px); z-index: 2; background: #0f172a; color: #fff;
  font-size: 12px; padding: 6px 9px; border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 0;
  transform: translateY(4px); transition: opacity .12s, transform .12s; }
.barra:hover .tip { opacity: 1; transform: none; }
.barra:hover .etq { opacity: 0; }
.meses { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; padding: 6px 4px 0; font-size: 11px; color: var(--muted); text-align: center; }

/* ---------- 2 pasos ---------- */
.qr-caja { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.qr-caja img { border: 1px solid var(--line); border-radius: 12px; padding: 6px; background: #fff; }
.respaldo { display: grid; grid-template-columns: repeat(2, minmax(0, 140px)); gap: 6px 18px; font-family: ui-monospace, Consolas, monospace; font-size: 15px; }

/* ---------- Planes ---------- */
.planes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 14px; }
.plan { margin: 0; }
.plan-off { opacity: .6; }
.plan-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.plan-nombre { font-weight: 700; font-size: 16px; border: 0; padding: 0; background: transparent; width: 60%; }
.plan-precio { font-size: 24px; font-weight: 700; color: var(--brand); margin-bottom: 10px; }
.plan-precio small { font-size: 13px; color: var(--muted); font-weight: 500; }
.plan-nuevo { border-style: dashed; }

/* ---------- Escritos rapidos ---------- */
.escritos-botones { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.escrito-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: inherit; color: var(--ink);
  transition: border-color .15s, box-shadow .15s; }
.escrito-btn:hover { border-color: #93c5fd; box-shadow: 0 4px 14px rgba(30,64,175,.10); }
.escrito-btn[hidden] { display: none; }
.escrito-btn .e-ico { font-size: 20px; }
.escrito-btn .mas { font-size: 12.5px; }
.modal.modal-ancho { max-width: 760px; width: 100%; }
.lq-abono { display: flex; gap: 8px; margin-bottom: 6px; }
.lq-abono input { flex: 1; }
.lq-res { margin-top: 14px; }
.lq-totales { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.lq-totales div { background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.lq-totales span { display: block; font-size: 11.5px; color: var(--muted); }
.lq-totales strong { font-size: 15px; }
.lq-totales .total { background: var(--brand-soft); border-color: #c7d2fe; }
.lq-totales .total strong { color: var(--brand); }
.of-bancos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 12px; max-height: 210px; overflow: auto;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.of-check { display: flex; gap: 7px; align-items: center; font-size: 13.5px; font-weight: 400; margin: 3px 0; }
@media (max-width: 640px) { .lq-totales { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Pendientes ---------- */
.avance-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.avance-cab strong { font-size: 20px; color: var(--brand); }
.avance-barra { max-width: none; height: 10px; }
.pend-area { margin: 16px 0 6px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.pend-lista { list-style: none; margin: 0; padding: 0; }
.pend { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.pend:last-child { border-bottom: 0; }
.pend-estado { flex: none; width: 92px; }
.pend-que { flex: 1; font-size: 14px; line-height: 1.45; }
.pend-accion { flex: none; margin: 0; }
.pend.recibido { background: #f0fdf4; border-radius: 8px; padding-left: 8px; }
.ya-lista { margin: 0; padding-left: 18px; line-height: 1.8; font-size: 14px; }
.btn-link { border: 0; background: none; cursor: pointer; padding: 0 4px; text-decoration: underline; }

/* ---------- Recursos del servidor ---------- */
.recursos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.recurso { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.recurso-cab { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.recurso-cab span { color: var(--muted); }

/* pestanas sueltas en una pagina (Notificaciones) */
.tabs-pagina { background: none; padding: 0; margin: 0 0 14px; }
.tab .n.rojo { background: var(--red-soft); color: #b91c1c; }
.riesgo-card .prox { align-items: center; }
.riesgo-btn { margin-left: auto; flex-shrink: 0; }
.riesgo-card [data-oculto] { opacity: .55; }
.j21-acciones { display: flex; gap: 6px; flex: none; }

/* ---------- Documentos legales (/legal/...) ---------- */
.legal-body { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }
.legal-cab {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 24px; background: #0b0d12; color: #fff;
}
.legal-marca { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 16px; }
.legal-marca:hover { text-decoration: none; }
.legal-marca img { width: 36px; height: 36px; border-radius: 8px; }
.legal-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-right: auto; }
.legal-nav a { color: #cfd6e4; padding: 6px 10px; border-radius: 8px; font-size: 14px; }
.legal-nav a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.legal-nav a.on { background: rgba(212,175,55,.18); color: #f3d77a; }
.legal-main { flex: 1; padding: 28px 16px 40px; }
.legal-doc {
  max-width: 820px; margin: 0 auto; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 32px 40px; box-shadow: var(--sombra); line-height: 1.65; font-size: 15px;
}
.legal-doc h1 { margin: 0 0 4px; font-size: 26px; letter-spacing: -.01em; }
.legal-doc h2 { margin: 26px 0 8px; font-size: 18px; color: var(--brand); }
.legal-doc h3 { margin: 16px 0 6px; font-size: 15.5px; }
.legal-doc ul, .legal-doc ol { padding-left: 22px; }
.legal-doc li { margin-bottom: 6px; }
.legal-version { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.legal-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 18px 0; }
.legal-tarjetas section { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fafbfd; }
.legal-tarjetas h3 { margin: 0 0 4px; font-size: 14.5px; }
.legal-tarjetas p { margin: 0; font-size: 13.5px; color: #475467; line-height: 1.5; }
.legal-lista { list-style: none; padding: 0 !important; }
.legal-lista li { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.legal-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; margin-top: 14px; cursor: pointer; }
.legal-check input { margin-top: 5px; width: 18px; height: 18px; flex: none; }
.legal-pie { text-align: center; color: var(--muted); font-size: 12.5px; padding: 0 16px 20px; }
.auth-legal { text-align: center; font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.auth-legal a { color: var(--muted); }
.pie-legal { color: rgba(255,255,255,.55); font-size: 11px; margin-top: 3px; }
.pie-legal:hover { color: #fff; }
@media (max-width: 640px) {
  .legal-doc { padding: 22px 18px; font-size: 14.5px; }
  .legal-cab { padding: 10px 16px; }
}