/* =====================================================================
   LEADERSHIP S.A. — Global Logistics
   Hoja de estilos base. Paleta tomada del logo:
   azul marino, rojo y negro.
   ===================================================================== */

:root {
  /* Marca */
  --ld-navy:        #2A2B6B;
  --ld-navy-dark:   #1B1C48;
  --ld-navy-light:  #3A3C8F;
  --ld-red:         #E71713;
  --ld-red-dark:    #B31009;
  --ld-black:       #1E1E1C;

  /* Neutros */
  --ld-bg:          #F4F6FA;
  --ld-surface:     #FFFFFF;
  --ld-border:      #E3E7EF;
  --ld-text:        #1F2430;
  --ld-text-soft:   #6B7280;

  /* Estado */
  --ld-success:     #1E9E62;
  --ld-warning:     #E0A020;
  --ld-info:        #2F6FE0;

  /* Medidas */
  --ld-sidebar-w:   256px;
  --ld-topbar-h:    62px;
  --ld-radius:      12px;
  --ld-shadow:      0 1px 3px rgba(27, 28, 72, .08), 0 4px 16px rgba(27, 28, 72, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ld-bg);
  color: var(--ld-text);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: .925rem;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ld-navy); text-decoration: none; }
a:hover { color: var(--ld-red); }

/* =====================================================================
   SIDEBAR
   ===================================================================== */
.ld-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--ld-sidebar-w);
  background: linear-gradient(180deg, var(--ld-navy-dark) 0%, var(--ld-black) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 1040;
  transition: transform .25s ease;
}

.ld-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--ld-topbar-h);
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}

.ld-sidebar__mark {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ld-sidebar__mark img { height: 22px; width: auto; display: block; }

.ld-sidebar__brand-text { line-height: 1.1; }
.ld-sidebar__brand-text strong {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
}
.ld-sidebar__brand-text span {
  display: block;
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

.ld-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 14px 10px 24px;
}

.ld-sidebar__section {
  padding: 16px 10px 6px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
}

.ld-nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  margin-bottom: 2px;
  border-radius: 9px;
  color: rgba(255,255,255,.76);
  font-size: .875rem;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
  position: relative;
}

.ld-nav-link i { width: 18px; text-align: center; font-size: .95rem; }

.ld-nav-link:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
}

.ld-nav-link.active {
  background: var(--ld-navy);
  color: #fff;
}

.ld-nav-link.active::before {
  content: '';
  position: absolute;
  left: -10px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--ld-red);
}

.ld-nav-link.disabled {
  opacity: .38;
  pointer-events: none;
}

.ld-nav-badge {
  margin-left: auto;
  font-size: .6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 2px 8px;
}

.ld-sidebar__footer {
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .7rem;
  color: rgba(255,255,255,.4);
}

/* =====================================================================
   TOPBAR + CONTENIDO
   ===================================================================== */
.ld-main {
  margin-left: var(--ld-sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left .25s ease;
}

.ld-topbar {
  height: var(--ld-topbar-h);
  background: var(--ld-surface);
  border-bottom: 1px solid var(--ld-border);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.ld-topbar__title { line-height: 1.15; }
.ld-topbar__title h1 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--ld-black);
}
.ld-topbar__title small { color: var(--ld-text-soft); font-size: .74rem; }

.ld-icon-btn {
  border: 1px solid var(--ld-border);
  background: #fff;
  color: var(--ld-navy);
  border-radius: 9px;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}
.ld-icon-btn:hover { background: var(--ld-navy); border-color: var(--ld-navy); color: #fff; }

.ld-user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px 5px 6px;
  border-radius: 30px;
  border: 1px solid var(--ld-border);
  background: #fff;
  cursor: pointer;
}
.ld-user-chip:hover { border-color: var(--ld-navy); }

.ld-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ld-navy) 0%, var(--ld-red) 140%);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ld-user-chip__meta { line-height: 1.15; text-align: left; }
.ld-user-chip__meta strong { display: block; font-size: .8rem; color: var(--ld-black); }
.ld-user-chip__meta span { display: block; font-size: .68rem; color: var(--ld-text-soft); text-transform: capitalize; }

.ld-content { padding: 24px 22px 40px; flex: 1; }

.ld-footer {
  border-top: 1px solid var(--ld-border);
  background: var(--ld-surface);
  padding: 14px 22px;
  font-size: .76rem;
  color: var(--ld-text-soft);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* =====================================================================
   TARJETAS Y COMPONENTES
   ===================================================================== */
.ld-card {
  background: var(--ld-surface);
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius);
  box-shadow: var(--ld-shadow);
}

.ld-card__header {
  padding: 15px 18px;
  border-bottom: 1px solid var(--ld-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Envuelve: en un teléfono, un encabezado con dos botones al lado del
     título no entra en una línea y los botones le caían encima. */
  flex-wrap: wrap;
  gap: 10px;
}
.ld-card__header h2 {
  margin: 0;
  font-size: .92rem;
  font-weight: 650;
  color: var(--ld-black);
}
.ld-card__body { padding: 18px; }

/* KPI */
.ld-kpi {
  background: var(--ld-surface);
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius);
  box-shadow: var(--ld-shadow);
  padding: 16px 18px;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.ld-kpi::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ld-navy);
}
.ld-kpi--red::after    { background: var(--ld-red); }
.ld-kpi--black::after  { background: var(--ld-black); }
.ld-kpi--navy::after   { background: var(--ld-navy); }

.ld-kpi__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ld-kpi__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ld-text-soft);
}
.ld-kpi__icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  background: rgba(42,43,107,.08);
  color: var(--ld-navy);
}
.ld-kpi--red .ld-kpi__icon   { background: rgba(231,23,19,.09);  color: var(--ld-red); }
.ld-kpi--black .ld-kpi__icon { background: rgba(30,30,28,.07);   color: var(--ld-black); }

.ld-kpi__value {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ld-black);
  line-height: 1.1;
}
.ld-kpi__foot { margin-top: 6px; font-size: .74rem; color: var(--ld-text-soft); }
.ld-trend-up   { color: var(--ld-success); font-weight: 600; }
.ld-trend-down { color: var(--ld-red);     font-weight: 600; }

/* Badges de estado */
.ld-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: .02em;
}
.ld-badge--transito { background: rgba(47,111,224,.11); color: var(--ld-info); }
.ld-badge--aduana   { background: rgba(224,160,32,.14); color: #9A6C09; }
.ld-badge--entregado{ background: rgba(30,158,98,.12);  color: var(--ld-success); }
.ld-badge--demorado { background: rgba(231,23,19,.10);  color: var(--ld-red); }

/* Los cuatro de arriba nacieron con nombre de estado de embarque, y
   después los módulos de plata necesitaron lo mismo: una orden pagada
   no es "entregada". Estos cuatro dicen el color y no el significado,
   así los usa cualquier módulo sin que el nombre mienta.

   Los de arriba quedan porque los usa la pantalla de embarques. */
.ld-badge--ok    { background: rgba(30,158,98,.12);  color: var(--ld-success); }
.ld-badge--info  { background: rgba(47,111,224,.11); color: var(--ld-info); }
.ld-badge--aviso { background: rgba(224,160,32,.14); color: #9A6C09; }
.ld-badge--rojo  { background: rgba(231,23,19,.10);  color: var(--ld-red); }
.ld-badge--vencida { background: rgba(30,30,28,.08); color: var(--ld-text-soft); }

/* Botones */
.btn-ld-primary {
  background: var(--ld-navy);
  border: 1px solid var(--ld-navy);
  color: #fff;
  font-weight: 600;
  border-radius: 9px;
}
.btn-ld-primary:hover { background: var(--ld-navy-dark); border-color: var(--ld-navy-dark); color: #fff; }

.btn-ld-danger {
  background: var(--ld-red);
  border: 1px solid var(--ld-red);
  color: #fff;
  font-weight: 600;
  border-radius: 9px;
}
.btn-ld-danger:hover { background: var(--ld-red-dark); border-color: var(--ld-red-dark); color: #fff; }

.btn-ld-outline {
  background: #fff;
  border: 1px solid var(--ld-border);
  color: var(--ld-navy);
  font-weight: 600;
  border-radius: 9px;
}
.btn-ld-outline:hover { border-color: var(--ld-navy); background: var(--ld-navy); color: #fff; }

/* Tabla */
.ld-table { width: 100%; border-collapse: collapse; }
.ld-table thead th {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ld-text-soft);
  border-bottom: 1px solid var(--ld-border);
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
}
.ld-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ld-border);
  font-size: .85rem;
  vertical-align: middle;
}
.ld-table tbody tr:last-child td { border-bottom: 0; }
.ld-table tbody tr:hover { background: #FAFBFD; }
.ld-table .mono { font-family: 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .8rem; }

/* Estado vacío */
.ld-empty {
  text-align: center;
  padding: 46px 20px;
  color: var(--ld-text-soft);
}
.ld-empty i { font-size: 2rem; color: var(--ld-border); display: block; margin-bottom: 12px; }

/* =====================================================================
   LOGIN / PANTALLA DE ACCESO
   Tarjeta centrada sobre fondo de marca con trama y decoración.
   ===================================================================== */
.ld-auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 78% 4%,  rgba(231,23,19,.13) 0%, transparent 34%),
    radial-gradient(ellipse at 20% 12%, rgba(58,60,143,.38) 0%, transparent 52%),
    linear-gradient(160deg, #0C0D22 0%, #171A44 48%, #23265E 100%);
}

/* Viñeta suave: oscurece los bordes y concentra la vista en la tarjeta */
.ld-auth-body::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 34%, rgba(6,7,20,.55) 100%);
}

/* Marca de agua del isotipo */
.ld-watermark {
  position: absolute;
  right: -70px;
  bottom: -60px;
  width: 460px;
  opacity: .045;
  filter: brightness(0) invert(1);   /* silueta blanca */
  pointer-events: none;
  z-index: 0;
}

/* Anillos concéntricos muy tenues */
.ld-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.055);
  pointer-events: none;
  z-index: 0;
}
.ld-ring--1 { width: 660px; height: 660px; top: -260px; left: -230px; }
.ld-ring--2 { width: 430px; height: 430px; top: -145px; left: -115px; border-color: rgba(255,255,255,.035); }
.ld-ring--3 { width: 820px; height: 820px; bottom: -400px; right: -300px; border-color: rgba(255,255,255,.04); }

/* Línea horizontal de acento, referencia a la ruta origen-destino */
.ld-hairline {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10) 30%, rgba(231,23,19,.22) 50%, rgba(255,255,255,.10) 70%, transparent);
}
.ld-hairline--1 { top: 16%; }
.ld-hairline--2 { bottom: 18%; opacity: .55; }

.ld-auth__wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Tarjeta ─────────────────────────────────────────────────── */
.ld-auth__card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 22px;
  padding: 2.6rem 2.3rem 2.1rem;
  box-shadow: 0 30px 70px rgba(5,8,30,.45), 0 0 0 1px rgba(255,255,255,.06);
  animation: ldFadeIn .5s ease both;
}
@keyframes ldFadeIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ld-auth__glow {
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, transparent, var(--ld-navy), var(--ld-red), var(--ld-navy), transparent);
}

/* ── Marca ───────────────────────────────────────────────────── */
.ld-auth__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 1.6rem;
}
.ld-auth__brand-logo {
  width: 78px; height: 78px;
  background: linear-gradient(145deg, #F8F9FD, #ECEEF7);
  border: 1px solid var(--ld-border);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  margin-bottom: .9rem;
  box-shadow: 0 8px 20px rgba(42,43,107,.16);
  position: relative;
}
.ld-auth__brand-logo::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 19px;
  border: 1px solid rgba(42,43,107,.22);
  pointer-events: none;
}
.ld-auth__brand-logo img { width: 100%; height: 100%; object-fit: contain; }

.ld-auth__brand-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ld-black);
  letter-spacing: -.02em;
}
.ld-auth__brand-tag {
  font-size: .68rem;
  color: var(--ld-red);
  margin-top: .25rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.ld-auth__title {
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--ld-black);
  letter-spacing: -.02em;
  text-align: center;
  margin: 0 0 .3rem;
}
.ld-auth__subtitle {
  font-size: .82rem;
  color: var(--ld-text-soft);
  text-align: center;
  margin: 0 0 1.8rem;
}

/* ── Campos ──────────────────────────────────────────────────── */
.ld-fg { margin-bottom: 1.15rem; }
.ld-fg > label {
  display: block;
  font-size: .79rem;
  font-weight: 600;
  color: #4A5560;
  margin-bottom: .45rem;
}

.ld-shell { position: relative; }

.ld-shell input {
  width: 100%;
  background: var(--ld-bg);
  border: 1.5px solid var(--ld-border);
  border-radius: 10px;
  padding: .78rem 1rem .78rem 2.7rem;
  color: var(--ld-text);
  font-family: inherit;
  font-size: .9rem;
  outline: none;
  -webkit-appearance: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.ld-shell input::placeholder { color: #9AA3AD; }
.ld-shell input:hover:not(:focus) { border-color: #9AA3AD; }
.ld-shell input:focus {
  border-color: var(--ld-navy-light);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(42,43,107,.14);
}

.ld-shell > .ld-shell__icon {
  position: absolute;
  left: .9rem; top: 50%;
  transform: translateY(-50%);
  color: #9AA3AD;
  font-size: .8rem;
  pointer-events: none;
  transition: color .2s;
}
.ld-shell:focus-within > .ld-shell__icon { color: var(--ld-navy); }

.ld-shell--pass input { padding-right: 3rem; }

.ld-shell__toggle {
  position: absolute;
  right: .75rem; top: 50%;
  transform: translateY(-50%);
  background: none; border: 0;
  color: #9AA3AD;
  cursor: pointer;
  padding: .2rem;
  font-size: .8rem;
  line-height: 1;
  transition: color .2s;
}
.ld-shell__toggle:hover { color: var(--ld-navy); }

/* ── Botón principal ─────────────────────────────────────────── */
.ld-auth__submit {
  width: 100%;
  padding: .85rem 1.5rem;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ld-navy) 0%, #4547A5 100%);
  color: #fff;
  font-family: inherit;
  font-size: .91rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .4rem;
  box-shadow: 0 4px 14px rgba(42,43,107,.30);
  transition: opacity .2s, transform .15s, box-shadow .2s;
}
.ld-auth__submit:hover {
  opacity: .92;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(42,43,107,.38);
}
.ld-auth__submit:active { transform: translateY(0); opacity: 1; }
.ld-auth__submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.ld-spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ldSpin .65s linear infinite;
}
.ld-auth__submit.loading .ld-spinner { display: block; }
.ld-auth__submit.loading .ld-btn-label { opacity: .75; }
@keyframes ldSpin { to { transform: rotate(360deg); } }

/* ── Link de recuperación ────────────────────────────────────── */
.ld-forgot {
  display: block;
  width: 100%;
  text-align: right;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ld-navy);
  cursor: pointer;
  margin: -.45rem 0 1.1rem;
}
.ld-forgot:hover { color: var(--ld-red); text-decoration: underline; }

/* El tilde de "recordarme" y el enlace de la contraseña comparten
   renglón; en pantalla angosta se apilan y el enlace se va a la
   izquierda, porque alineado a la derecha él solo queda flotando. */
.ld-auth__fila { display: flex; align-items: center; justify-content: space-between;
                 gap: .9rem; flex-wrap: wrap; margin: -.45rem 0 1.1rem; }
.ld-auth__fila .ld-forgot { width: auto; margin: 0; white-space: nowrap; }

.ld-check { display: inline-flex; align-items: center; gap: .48rem;
            font-size: .78rem; font-weight: 500; color: var(--ld-text-soft);
            cursor: pointer; user-select: none; margin: 0; }
.ld-check input { width: 16px; height: 16px; margin: 0; cursor: pointer;
                  accent-color: var(--ld-navy); flex: 0 0 auto; }
.ld-check:hover { color: var(--ld-navy); }

@media (max-width: 380px) {
  .ld-auth__fila { justify-content: flex-start; }
}

/* ── Pie de la tarjeta ───────────────────────────────────────── */
.ld-auth__meta {
  margin-top: 1.7rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--ld-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ld-auth__secure {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .74rem;
  color: var(--ld-text-soft);
}
.ld-auth__secure i { color: var(--ld-success); }
.ld-auth__version { font-size: .7rem; font-weight: 500; color: #C7CCD9; }

.ld-auth__outside-foot {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 1.4rem;
  font-size: .72rem;
  color: rgba(255,255,255,.42);
}

/* ── Sacudida en validación fallida ──────────────────────────── */
@keyframes ldShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}
.ld-shake { animation: ldShake .35s ease; }

/* ── Modal de recuperación (sin depender de bootstrap.js) ────── */
.ld-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,11,32,.6);
  backdrop-filter: blur(2px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.ld-modal-overlay.open { display: flex; }

.ld-modal {
  width: 100%;
  max-width: 410px;
  background: #fff;
  border-radius: 18px;
  padding: 1.75rem;
  box-shadow: 0 20px 60px rgba(10,11,32,.4);
  animation: ldModalUp .3s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes ldModalUp {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ld-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: .4rem;
}
.ld-modal__title { font-size: 1.12rem; font-weight: 700; color: var(--ld-black); }
.ld-modal__close {
  background: none; border: 0;
  color: var(--ld-text-soft);
  font-size: 1rem;
  cursor: pointer;
  padding: .2rem;
  line-height: 1;
}
.ld-modal__close:hover { color: var(--ld-black); }
.ld-modal__desc {
  font-size: .82rem;
  color: var(--ld-text-soft);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}
.ld-modal__contact {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--ld-bg);
  border: 1px solid var(--ld-border);
  border-radius: 10px;
  padding: .8rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ld-navy);
  word-break: break-all;
}
.ld-modal__contact i { color: var(--ld-red); }

@media (max-width: 480px) {
  .ld-auth__card { padding: 2.1rem 1.4rem 1.7rem; border-radius: 18px; }
  .ld-shell input { font-size: 16px; }   /* evita el zoom automático en iOS */
  .ld-watermark { width: 300px; right: -60px; bottom: -40px; }
  .ld-ring--3 { display: none; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
.ld-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(27,28,72,.45);
  z-index: 1035;
}
.ld-backdrop.show { display: block; }

@media (max-width: 991.98px) {
  .ld-sidebar { transform: translateX(-100%); }
  .ld-sidebar.open { transform: translateX(0); }
  .ld-main { margin-left: 0; }
}

@media (max-width: 575.98px) {
  .ld-content { padding: 16px 14px 32px; }
  .ld-topbar { padding: 0 14px; }
  .ld-user-chip__meta { display: none; }
  .ld-kpi__value { font-size: 1.45rem; }
}

/* =====================================================================
   COMBOS — campo de texto con lista filtrada (ver LDCombo en app.js).
   Reemplazan a los <select> largos en los formularios.
   ===================================================================== */
.ld-combo { position: relative; }

.ld-combo input[data-combo-texto] { width: 100%; }

/* Un tilde discreto cuando hay una opción elegida de verdad */
.ld-combo--elegido input[data-combo-texto] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231E9E62'%3E%3Cpath d='M6.2 11.8 2.6 8.2l1.1-1.1 2.5 2.5 6.1-6.1 1.1 1.1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 14px;
  padding-right: 2.1rem;
}

/* Fixed y colgada del <body>: así no la recorta el scroll horizontal
   de .table-responsive ni la tapa la tarjeta de al lado. La posición
   la calcula LDCombo con getBoundingClientRect. */
.ld-combo__lista {
  position: fixed;
  z-index: 1060;              /* por encima de los modales de Bootstrap */
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1.5px solid var(--ld-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(30, 30, 28, .12);
  padding: 4px;
}

.ld-combo__op {
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: .86rem;
  line-height: 1.3;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.ld-combo__op small {
  font-size: .72rem;
  color: var(--ld-text-soft);
  white-space: nowrap;
}

.ld-combo__op:hover,
.ld-combo__op.marcada { background: var(--ld-bg); }
.ld-combo__op.marcada { box-shadow: inset 2px 0 0 var(--ld-navy); }

.ld-combo__vacio {
  padding: 10px;
  font-size: .82rem;
  color: var(--ld-text-soft);
  text-align: center;
}

/* Dato que el sistema completa solo y no se edita (ej. el vendedor
   del cliente en una cotización) */
.ld-dato-fijo {
  border: 1.5px dashed var(--ld-border);
  border-radius: 10px;
  padding: .7rem 1rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ld-black);
  background: var(--ld-bg);
}
.ld-dato-fijo.vacio { font-weight: 400; color: var(--ld-text-soft); }

/* Fila de "crear" al pie de un combo: aparece cuando la pantalla sabe
   dar de alta ese catálogo sin salir de donde está el usuario. */
.ld-combo__crear {
  margin-top: 4px;
  padding: 8px 10px;
  border-top: 1px solid var(--ld-border);
  border-radius: 0 0 7px 7px;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ld-navy);
  display: flex;
  align-items: center;
  gap: 7px;
}
.ld-combo__crear:hover { background: rgba(42, 43, 107, .07); }
.ld-combo__crear i { font-size: .72rem; }

/* =====================================================================
   Avisos
   El layout dibuja los mensajes flash con .ld-alert y hasta ahora no
   tenían estilo propio: salían como texto suelto arriba de la pantalla.
   ===================================================================== */
.ld-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 15px;
  border-radius: var(--ld-radius);
  border: 1px solid transparent;
  font-size: .87rem;
  line-height: 1.45;
  margin-bottom: 16px;
}

.ld-alert i { font-size: .95rem; flex: 0 0 auto; }

.ld-alert--success {
  background: rgba(30, 158, 98, .1);
  border-color: rgba(30, 158, 98, .22);
  color: #12603C;
}

.ld-alert--error {
  background: rgba(231, 23, 19, .07);
  border-color: rgba(231, 23, 19, .2);
  color: var(--ld-red);
}

.ld-alert--warning {
  background: rgba(224, 160, 32, .12);
  border-color: rgba(224, 160, 32, .26);
  color: #7A5406;
}

.ld-alert--info {
  background: rgba(47, 111, 224, .08);
  border-color: rgba(47, 111, 224, .2);
  color: #23539E;
}

/* Los mismos dos, con el nombre que usan los módulos nuevos. Un alias
   y no una copia: si mañana se cambia el verde, se cambia en un lugar. */
.ld-alert--ok    { background: rgba(30, 158, 98, .1);   border-color: rgba(30, 158, 98, .22);  color: #12603C; }
.ld-alert--aviso { background: rgba(224, 160, 32, .12); border-color: rgba(224, 160, 32, .26); color: #7A5406; }

/* Campo de formulario del sistema: mismo alto y radio en todas las
   pantallas, tanto en los input como en los select. */
.ld-input {
  border: 1.5px solid var(--ld-border);
  border-radius: 10px;
  padding: .55rem .8rem;
  font-size: .89rem;
  color: var(--ld-text);
  background: #fff;
}

.ld-input:focus {
  border-color: var(--ld-navy);
  box-shadow: 0 0 0 3px rgba(42, 43, 107, .1);
  outline: none;
}

.ld-input::placeholder { color: #A3AAB8; }
.ld-input[readonly], .ld-input:disabled { background: var(--ld-bg); color: var(--ld-text-soft); }

/* =====================================================================
   Modales: que el pie nunca quede fuera de pantalla

   Bootstrap hace que el cuerpo del modal scrollee con una cadena de
   flex entre .modal-content y sus hijos directos. Cuando un <form>
   envuelve el encabezado, el cuerpo y el pie —que es como guardamos
   todo junto— esa cadena se corta: el cuerpo no recibe una altura
   definida, no scrollea, el modal crece más que la ventana y con
   .modal-dialog-scrollable el recorte deja los botones de guardar
   fuera de la vista.

   Devolviéndole al form el comportamiento de columna flex, encabezado
   y pie quedan fijos y lo que scrollea es el medio. Sirve para
   cualquier modal del sistema, esté el form o no.
   ===================================================================== */
.modal-content > form {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

.modal-content > form > .modal-header,
.modal-content > form > .modal-footer { flex: 0 0 auto; }

.modal-content > form > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Ventana baja (notebook con las herramientas abiertas, teléfono con
   el teclado en pantalla): menos aire, así entra más formulario antes
   de tener que scrollear. */
@media (max-height: 700px) {
  .modal-header, .modal-footer { padding-top: 11px; padding-bottom: 11px; }
}

/* =====================================================================
   LOS CAMPOS DE LOS MODALES

   Rejilla propia y no columnas de Bootstrap. Con columnas hay que
   acertar el corte (md, lg) y el ancho del modal al mismo tiempo, y
   cuando no coinciden los campos quedan de 100px. Acá cada campo pide
   190px como mínimo y, si no entran, pasan solos al renglón de abajo:
   no hay corte que acertar ni min-width que desborde.

   align-items:end alinea los campos por abajo, así un rótulo que se
   parte en dos renglones no deja su campo más abajo que el de al lado
   —que es lo que los hacía encimarse.

   Vive acá y no dentro de cada pantalla porque lo usan los modales de
   la ficha del embarque y los de la lista del financiero: teniéndolo
   dos veces se arregla en una y queda mal en la otra.
   ===================================================================== */
.ld-campos { display: grid; gap: 14px;
             grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
             align-items: end; }
.ld-campos > .ld-fg { margin: 0; min-width: 0; }
.ld-campos > .ld-ancho { grid-column: 1 / -1; }
.ld-campos .ld-input, .ld-campos .form-select { width: 100%; }

/* El ancho del modal sin depender del corte de Bootstrap: .modal-lg
   recién ensancha en 992px, y entre 768 y 991 el formulario quedaba
   apretado en 500px. Así son 760px cuando la ventana da, y todo el
   ancho disponible cuando no.

   El tope va en .modal-dialog Y en .modal-content: ensanchar sólo el
   diálogo no alcanza si el contenido tiene su propio tope, que es lo
   que pasaba mientras estos modales llevaban la clase .ld-modal —la
   del modal propio del login, clavada en 410px— y por eso se seguían
   viendo apretados por más que el diálogo midiera lo que correspondía.

   800px es lo mismo que mide .modal-lg de Bootstrap en pantalla
   grande: así ninguna pantalla queda más angosta que antes, y las que
   estaban en 500px pasan a usar todo el ancho que haya. */
.ld-modal-ancho .modal-dialog,
.ld-modal-ancho .modal-content { max-width: min(800px, calc(100vw - 24px)); }

/* =====================================================================
   EL MODAL DE CARGA — gastos, ingresos, órdenes de pago y pagos
   ===================================================================== */
.ld-modal-mov { border: 0; border-radius: 16px; }
.ld-modal-mov .modal-header,
.ld-modal-mov .modal-footer { border-color: var(--ld-border); padding: 16px 26px; }
.ld-modal-mov .modal-body { padding: 22px 26px; }
.ld-modal-mov .modal-title { font-size: 1.04rem; font-weight: 700; color: var(--ld-black); }
.ld-modal-mov .ld-fg label { font-size: .72rem; text-transform: uppercase; letter-spacing: .4px;
                             color: var(--ld-text-soft); font-weight: 700; margin-bottom: 5px; }
.ld-modal-mov .ld-input { padding: .58rem .8rem; font-size: .88rem; }
.ld-modal-mov .ld-fijo { background: var(--ld-bg); color: var(--ld-text-soft); }

@media screen and (max-width: 575.98px) {
  .ld-modal-mov .modal-header, .ld-modal-mov .modal-footer { padding: 13px 18px; }
  .ld-modal-mov .modal-body { padding: 18px; }
}

/* =====================================================================
   ÓRDENES DE PAGO

   Las usan la ficha del embarque y la lista del financiero, así que
   viven acá y no dentro de una de las dos: cuando estaban duplicadas,
   cualquier arreglo entraba en una pantalla y no en la otra.
   ===================================================================== */

/* Los botones chicos de acción. El cuadradito es el de siempre; los
   que llevan texto (Pagar, Orden de pago) se estiran a su contenido. */
/* 32 px y no 28: a 28 con el ícono en .72rem no se distingue una lupa
   de una flecha, y en varias listas hay cuatro o cinco pegados. Sigue
   siendo un botón chico, pero se ve qué dice. */
/* inline-flex y centrado: un <button> centra su ícono solo, pero un
   <a class="ld-mini"> (imprimir, corregir) lo dejaba arriba a la
   izquierda, y en la misma fila se veían desparejos. */
.ld-mini { border: 1.5px solid var(--ld-border); background: #fff; border-radius: 7px;
           width: 32px; height: 32px; color: var(--ld-text-soft); font-size: .84rem;
           display: inline-flex; align-items: center; justify-content: center;
           text-decoration: none; vertical-align: middle; padding: 0;
           transition: .15s; }
.ld-mini:hover { border-color: var(--ld-navy); color: var(--ld-navy); }
.ld-mini--rojo:hover { border-color: var(--ld-red); color: var(--ld-red); }
/* El candado que ocupa el lugar de la papelera cuando el renglón está
   retenido por una orden pagada o por una factura emitida. Es un
   <span>, no un botón: no hay nada que apretar, y el title dice por
   dónde se deshace. Se ve apagado a propósito — tiene que leerse como
   "no va acá", no como un botón que no funciona. */
.ld-mini--trabado { display: inline-flex; align-items: center; justify-content: center;
                    border-style: dashed; background: var(--ld-bg);
                    color: var(--ld-text-soft); opacity: .65; cursor: default; }
.ld-mini--trabado:hover { border-color: var(--ld-border); color: var(--ld-text-soft); }
/* Traer al sistema un documento que sólo está en la SET. Va marcado
   porque en esa fila es la acción que falta: sin él no hay factura de
   este lado sobre la que hacer nada. */
.ld-mini--traer { border-color: var(--ld-navy); color: var(--ld-navy); }
.ld-mini--traer:hover { background: var(--ld-navy); color: #fff; }
/* En el teléfono las acciones bajan a una fila propia: va pegada a la
   de arriba, sin línea en el medio, para que se lea como una sola. */
.ld-fila-acciones > td { border-top: 0 !important; }

/* =====================================================================
   EL MENÚ DE ACCIONES DE UNA FILA

   Donde una fila tiene varias cosas para hacer, van acá adentro con su
   nombre escrito en vez de una hilera de cuadraditos. Un ícono de 28 px
   no se entiende, y en una lista de documentos electrónicos apretar el
   de al lado significa cancelar ante la SET en vez de consultar.
   ===================================================================== */
.ld-acciones {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1.5px solid var(--ld-border); background: #fff; border-radius: 8px;
  padding: 6px 11px; font-size: .78rem; font-weight: 600;
  color: var(--ld-text); white-space: nowrap; transition: .15s;
}
.ld-acciones:hover,
.ld-acciones[aria-expanded="true"] { border-color: var(--ld-navy); color: var(--ld-navy); }
.ld-acciones .fa-chevron-down { font-size: .62rem; opacity: .6; }

.ld-acciones__menu { --bs-dropdown-min-width: 13.5rem; padding: 5px;
                     border: 1px solid var(--ld-border); border-radius: 10px;
                     box-shadow: 0 10px 34px rgba(17,18,40,.14); }
.ld-acciones__menu .dropdown-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left; border: 0; background: none;
  border-radius: 7px; padding: 8px 10px; font-size: .82rem; color: var(--ld-text);
}
.ld-acciones__menu .dropdown-item:hover,
.ld-acciones__menu .dropdown-item:focus { background: var(--ld-bg); color: var(--ld-navy); }
.ld-acciones__menu .dropdown-item i { width: 16px; text-align: center; font-size: .82rem;
                                      color: var(--ld-text-soft); }
.ld-acciones__menu .dropdown-item:hover i { color: inherit; }
.ld-acciones__menu .ld-item--rojo,
.ld-acciones__menu .ld-item--rojo i { color: var(--ld-red); }
.ld-acciones__menu .ld-item--rojo:hover { background: rgba(200,30,40,.07); color: var(--ld-red); }
.ld-acciones__menu .dropdown-divider { margin: 4px 2px; }
.ld-mini--emitir, .ld-mini--pagar { width: auto; padding: 4px 9px; font-size: .72rem;
                                    white-space: nowrap; }

/* El de pagar es ancho y los de corregir/sacar son cuadraditos: juntos
   en una fila propia para que no se estiren al alto del más grande. */
.ld-orden-acciones { display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
                     margin-top: 5px; }

/* La cabecera gris de los modales: a qué gasto u orden pertenece lo
   que se está por guardar. */
.ld-op-cabeza { display: flex; justify-content: space-between; gap: 14px;
                padding: 10px 12px; border-radius: 9px;
                background: rgba(42, 43, 107, .045); }
.ld-op-cabeza strong { display: block; }

/* El aviso del modal cuando se está corrigiendo una orden ya emitida. */
.ld-aviso-op { display: flex; gap: 4px; align-items: flex-start;
               background: rgba(47, 111, 224, .07); border-radius: 9px;
               padding: 9px 12px; font-size: .78rem; color: var(--ld-text-soft); }
.ld-aviso-op.d-none { display: none; }

/* El detalle de cada orden con sus pagos, en la tarjeta de pagos de la
   ficha del embarque. */
.ld-ordenes { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.ld-orden { border: 1px solid var(--ld-border); border-radius: 10px; padding: 12px 14px; }
.ld-orden--anulada { opacity: .6; }
.ld-orden--anulada .ld-orden__quien strong { text-decoration: line-through; }
.ld-orden__cab { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.ld-orden__quien { flex: 1 1 240px; min-width: 0; }
.ld-orden__quien strong { display: block; font-size: .88rem; color: var(--ld-black); }
.ld-orden__num { font-size: .72rem; color: var(--ld-text-soft);
                 background: rgba(42, 43, 107, .07); border-radius: 5px; padding: 1px 6px; }
.ld-orden__plata { text-align: right; font-size: .84rem; margin-left: auto; }
.ld-orden__botones { display: flex; gap: 5px; align-items: center; }
.ld-orden__pagos { list-style: none; margin: 10px 0 0; padding: 10px 0 0;
                   border-top: 1px dashed var(--ld-border); }
.ld-orden__pagos li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
                      font-size: .8rem; padding: 3px 0; }
.ld-orden__pagos li > i { color: var(--ld-success); font-size: .72rem; }

/* =====================================================================
   PEDACITOS QUE USA TODO EL SISTEMA

   Estaban sueltos en el <style> de una pantalla y los fue necesitando
   el resto. Acá arriba están una vez y valen para todas: con una copia
   por pantalla, un arreglo entra en una y no en las otras.
   ===================================================================== */

/* El renglón chico y gris que acompaña a un dato. */
.ld-sub { font-size: .72rem; color: var(--ld-text-soft); }

/* Un número en rojo: un saldo negativo, una orden vencida. */
.ld-rojo { color: var(--ld-red, #c0392b); }
/* El saldo positivo de una cuenta con "resaltar el saldo" (setup/72) */
.ld-azul { color: #1D4ED8; }

/* Y en verde: lo que entró, lo que ya se cobró. */
.ld-verde { color: var(--ld-success); }

/* La aclaración debajo de un campo de formulario. */
.ld-ayuda { font-size: .72rem; color: var(--ld-text-soft); margin-top: 4px; }

/* Un checkbox que se pueda apretar sin apuntar con lupa. */
.ld-check-grande .form-check-input { width: 1.1rem; height: 1.1rem; margin-top: .1rem; }
.ld-check-grande .form-check-label { font-size: .85rem; margin-left: 4px; }

/* Un campo que se muestra pero no se edita. */
.ld-fijo { background: var(--ld-bg); color: var(--ld-text-soft); }

/* Los filtros arriba de una lista. Van en una rejilla que se acomoda
   sola: en el celular quedan uno abajo del otro sin cortar nada. */
.ld-filtros { display: grid; gap: 12px; align-items: end;
              grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
              padding: 14px 18px; border-bottom: 1px solid var(--ld-border); }
.ld-filtros .ld-fg { margin: 0; min-width: 0; }
.ld-filtros label { font-size: .7rem; text-transform: uppercase; letter-spacing: .4px;
                    color: var(--ld-text-soft); font-weight: 700; margin-bottom: 4px;
                    display: block; }
.ld-filtros .ld-input { padding: .5rem .7rem; font-size: .85rem; }
.ld-filtros .ld-fg--boton { display: flex; align-items: flex-end; }

/* La etiquetita que acompaña a una fecha o a un número: "vencida hace
   3 días", "en 2 días", "+12%". */
.ld-desvio { display: inline-block; font-size: .72rem; font-weight: 700;
             font-variant-numeric: tabular-nums;
             padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.ld-desvio--mal  { background: rgba(231, 23, 19, .1);  color: var(--ld-red); }
.ld-desvio--bien { background: rgba(30, 158, 98, .12); color: #12603C; }
.ld-desvio--ok   { background: rgba(30, 30, 28, .06);  color: var(--ld-text-soft); font-weight: 600; }
.ld-desvio--sd   { background: transparent; color: var(--ld-text-soft);
                   font-weight: 500; font-size: .68rem; }

/* Las tarjetas de saldo de arriba de la caja y de las cuentas. */
.ld-saldos { display: grid; gap: 12px;
             grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ld-saldo { background: var(--ld-surface); border: 1px solid var(--ld-border);
            border-radius: var(--ld-radius); box-shadow: var(--ld-shadow);
            padding: 14px 18px; display: flex; flex-direction: column; gap: 2px;
            color: inherit; text-decoration: none; transition: .15s; }
a.ld-saldo:hover { border-color: var(--ld-navy); color: inherit; }
.ld-saldo--on { border-color: var(--ld-navy); box-shadow: 0 0 0 2px rgba(42, 43, 107, .12); }
.ld-saldo--total { background: var(--ld-bg); }
.ld-saldo strong { font-size: 1.15rem; }
/* Ordenar las tarjetas arrastrándolas (Cajas y bancos) */
.ld-ordenar-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
                    gap: 8px; margin-bottom: 10px; }
.ld-ordenar-barra [data-ord="ayuda"] { margin-right: auto; }
.ld-saldos--ordenando [data-id-cuenta] { cursor: grab; border-style: dashed; border-color: var(--ld-navy); }
.ld-saldos--ordenando [data-id-cuenta]:active { cursor: grabbing; }
.ld-saldo--fantasma { opacity: .35; }

/* La ficha de datos de un documento: cliente, fechas, moneda. Misma
   rejilla que los campos de los modales. */
.ld-datos { display: grid; gap: 14px;
            grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.ld-datos > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ld-datos strong { font-size: .92rem; color: var(--ld-black); word-break: break-word; }

/* La caja de totales de un documento: facturado, cobrado, saldo. */
.ld-totales { border: 1px solid var(--ld-border); border-radius: 10px; padding: 10px 14px; }
.ld-totales__fila { display: flex; justify-content: space-between; align-items: baseline;
                    gap: 10px; padding: 4px 0; font-size: .85rem; }
.ld-totales__fila--total { border-top: 1px solid var(--ld-border); margin-top: 5px;
                           padding-top: 8px; font-size: .95rem; }
.ld-totales__fila--total strong { font-size: 1.08rem; }

/* La liquidación del IVA, abajo del detalle de la factura. */
.ld-liquidacion { margin: 16px 0 0 auto; max-width: 340px;
                  border: 1px solid var(--ld-border); border-radius: 10px;
                  padding: 10px 14px; background: var(--ld-bg); }
.ld-liq__fila { display: flex; justify-content: space-between; align-items: baseline;
                gap: 10px; padding: 2px 0; font-size: .83rem; }
.ld-liq__fila--total { border-top: 1px solid var(--ld-border); margin-top: 5px;
                       padding-top: 7px; font-weight: 700; font-size: .98rem; }

/* La barra de avance de un cobro. */
.ld-barra { height: 7px; border-radius: 99px; background: var(--ld-border);
            overflow: hidden; margin-top: 12px; }
.ld-barra__lleno { height: 100%; background: var(--ld-success); border-radius: 99px; }

/* Cada recibo imputado a una factura. */
.ld-recibo { border: 1px solid var(--ld-border); border-radius: 10px;
             padding: 10px 12px; margin-bottom: 8px; }
.ld-recibo__cab { display: flex; flex-wrap: wrap; gap: 8px;
                  justify-content: space-between; align-items: baseline; }

/* El renglón de un archivo adjunto: el ícono, el nombre, el tamaño y
   la cruz para sacarlo. Se usa en la factura, en el recibo y en la
   caja, que son los tres lugares donde un comprobante aparece al lado
   de algo y no en una lista propia. */
.ld-papel { display: flex; align-items: center; gap: 7px; margin-top: 6px;
            padding: 5px 8px; border: 1px solid var(--ld-border); border-radius: 8px;
            font-size: .78rem; background: var(--ld-bg); }
.ld-papel > i { color: var(--ld-text-soft); }
.ld-papel > a { flex: 1 1 auto; min-width: 0; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }
.ld-papel__x { flex: 0 0 auto; width: 24px; height: 24px; font-size: .7rem; }

/* El clip: "acá hay un archivo, apretá para verlo". Va al lado de la
   orden, del pago, del recibo — en cualquier fila donde el renglón
   completo con el nombre no entre. */
.ld-clips { display: inline-flex; gap: 4px; align-items: center; vertical-align: middle; }
.ld-clip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px;
  border: 1.5px solid var(--ld-border); background: #fff;
  color: var(--ld-navy); font-size: .74rem; text-decoration: none;
  transition: .15s;
}
.ld-clip:hover { border-color: var(--ld-navy); background: var(--ld-navy); color: #fff; }

/* =====================================================================
   LA COTIZACIÓN DEL DÍA, EN LA BARRA DE ARRIBA
   Va en todas las pantallas porque la usan todas: el que carga un
   gasto en guaraníes tiene que ver con qué número se va a convertir.
   ===================================================================== */
.ld-cotiz {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 12px; border-radius: 9px;
  border: 1px solid var(--ld-border); background: #fff; color: var(--ld-text);
  font-size: .8rem; white-space: nowrap; cursor: pointer; transition: .15s;
}
.ld-cotiz:hover { border-color: var(--ld-navy); }
.ld-cotiz > i { color: var(--ld-success); }
.ld-cotiz__rot { color: var(--ld-text-soft); font-size: .72rem; }
.ld-cotiz strong { font-size: .86rem; color: var(--ld-black); }
.ld-cotiz--falta { border-color: var(--ld-red); color: var(--ld-red); background: rgba(231,23,19,.06); }
.ld-cotiz--falta > i { color: var(--ld-red); }
/* En el celular la barra no da para todo: queda el número solo. */
@media (max-width: 575px) {
  .ld-cotiz__rot { display: none; }
  .ld-cotiz { padding: 0 9px; }
}

.ld-saldo--falta { border-color: rgba(231,23,19,.35); }

/* La cotización con la que se cargó algo, al lado del importe. */
.ld-tc { font-size: .72rem; color: var(--ld-text-soft); white-space: nowrap; }

/* Un KPI con un importe por moneda: USD y guaraníes no se suman. */
.ld-kpi__monedas { font-size: 1.12rem; display: flex; flex-direction: column; gap: 2px; }
.ld-kpi__linea { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-kpi__mon { font-size: .7rem; font-weight: 600; color: var(--ld-text-soft); letter-spacing: .02em; }
@media (max-width: 575px) { .ld-kpi__monedas { font-size: .95rem; } }

/* =====================================================================
   MENÚ EN ACORDEÓN (Ingresos / Egresos / Finanzas)
   ===================================================================== */
.ld-nav-grupo > summary { list-style: none; cursor: pointer; user-select: none; }
.ld-nav-grupo > summary::-webkit-details-marker { display: none; }
.ld-nav-grupo__flecha { margin-left: auto; width: auto !important; font-size: .7rem !important;
                        opacity: .6; transition: transform .2s ease; }
.ld-nav-grupo[open] > summary .ld-nav-grupo__flecha { transform: rotate(180deg); }
.ld-nav-link--padre { color: #fff; }
.ld-nav-grupo__hijos { padding: 2px 0 6px 14px; margin-left: 8px;
                       border-left: 1px solid rgba(255,255,255,.1); }
.ld-nav-grupo__hijos .ld-nav-link { padding: 8px 10px; font-size: .84rem; }
.ld-nav-grupo__hijos .ld-nav-link.active::before { left: -25px; }

/* Los totales de un período (caja, movimientos, otros ingresos/egresos) */
.ld-periodo { display: grid; gap: 12px; padding: 14px 18px;
              grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
              border-bottom: 1px solid var(--ld-border); background: var(--ld-bg); }
.ld-periodo > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ld-periodo strong { font-size: 1.02rem; display: flex; flex-wrap: wrap; gap: 0 10px; }
.ld-origen { font-size: .76rem; white-space: nowrap; }

/* Atajos de fecha (Hoy, Ayer, Esta semana...) */
.ld-rangos { display: flex; flex-wrap: wrap; gap: 6px; }
.ld-rango { padding: 5px 11px; border-radius: 20px; border: 1px solid var(--ld-border);
            font-size: .76rem; color: var(--ld-text); background: #fff; white-space: nowrap; }
.ld-rango:hover { border-color: var(--ld-navy); color: var(--ld-navy); }
.ld-rango--on { background: var(--ld-navy); border-color: var(--ld-navy); color: #fff; }
.ld-rango--on:hover { color: #fff; }

/* =====================================================================
   LISTAS: Excel, PDF e Imprimir
   ===================================================================== */
.ld-dt-top { row-gap: 8px; margin-bottom: 8px; }
.ld-dt-top .dataTables_length { margin: 0; }
.ld-dt-top .dt-buttons { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ld-dt-top .dt-buttons .btn.ld-dt-btn,
.dt-buttons .ld-dt-btn {
  border: 1px solid var(--ld-border); background: #fff; color: var(--ld-text);
  font-size: .78rem; padding: 5px 11px; border-radius: 8px !important; line-height: 1.3;
}
.dt-buttons .ld-dt-btn:hover { border-color: var(--ld-navy); background: var(--ld-navy); color: #fff; }
.dt-buttons .ld-dt-btn .fa-file-excel { color: #1D6F42; }
.dt-buttons .ld-dt-btn .fa-file-pdf { color: var(--ld-red); }
.dt-buttons .ld-dt-btn:hover i { color: #fff; }
@media (max-width: 767px) {
  .ld-dt-top .dataTables_filter { text-align: left; }
  .ld-dt-top .dataTables_filter input { width: 100%; margin-left: 0; }
  .ld-dt-top .dataTables_filter label { width: 100%; }
}

/* =====================================================================
   CRT y MIC/DTA: la hoja con los recuadros numerados como el papel
   ===================================================================== */
.ld-pestanas { display: flex; gap: 6px; flex-wrap: wrap; }
.ld-pestana { border: 1px solid var(--ld-border); background: #fff; color: var(--ld-text);
              border-radius: 9px; padding: 7px 13px; font-size: .85rem; font-weight: 600; }
.ld-pestana .ld-sub { font-weight: 400; }
.ld-pestana.on { background: var(--ld-navy); border-color: var(--ld-navy); color: #fff; }
.ld-pestana.on .ld-sub { color: rgba(255,255,255,.75); }

.ld-recs { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.ld-recs > * { min-width: 0; }
.ld-recs .ld-mitad { grid-column: span 2; }
.ld-recs .ld-todo  { grid-column: 1 / -1; }
.ld-recs--dentro { grid-template-columns: 1fr; gap: 14px; }
.ld-rec { margin: 0; }
.ld-rec label { display: block; font-size: .78rem; font-weight: 600; line-height: 1.25; margin-bottom: 4px; }
.ld-rec label small { display: block; font-weight: 400; font-size: .68rem; color: var(--ld-text-soft); }
.ld-rec__n { display: inline-block; min-width: 20px; padding: 0 5px; margin-right: 4px; border-radius: 5px;
             background: var(--ld-navy); color: #fff; font-size: .68rem; text-align: center; line-height: 17px; }
.ld-rec__txt { font-family: inherit; text-transform: uppercase; font-size: .84rem; }
.ld-gastos-crt td { padding: 4px !important; }
.ld-gastos-crt .ld-input { padding: .38rem .55rem; font-size: .82rem; }
@media (max-width: 991px) { .ld-recs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) {
  .ld-recs { grid-template-columns: minmax(0, 1fr); }
  .ld-recs .ld-mitad { grid-column: 1 / -1; }
}

/* Los filtros de estado (Todas, Pendiente, Aprobada...) bajan de renglón
   en el celular en vez de salirse de la pantalla. */
@media (max-width: 575px) {
  .ld-card .btn-group { flex-wrap: wrap; max-width: 100%; }
}

/* =====================================================================
   LA PLANILLA DE COMISIONES
   Imita el cuadro que se venía llevando en Excel: franja azul con el
   título, el recuadro de resultados y la tabla con su fila de totales.
   Se usa en la pantalla y en la hoja impresa sin cambiar nada.
   ===================================================================== */
.ld-planilla {
  border: 1px solid var(--ld-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.ld-planilla__titulo {
  background: #2A2B6B;
  color: #fff;
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .02em;
  text-align: center;
  padding: 8px 12px;
}

.ld-planilla__cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px;
  border-bottom: 1px solid var(--ld-border);
}

.ld-planilla__profit { border-collapse: collapse; font-size: .78rem; }
.ld-planilla__profit th {
  background: #2A2B6B;
  color: #fff;
  text-align: center;
  padding: 5px 10px;
  font-weight: 650;
  letter-spacing: .02em;
}
.ld-planilla__profit td {
  border: 1px solid var(--ld-border);
  padding: 5px 10px;
  white-space: nowrap;
}
.ld-planilla__profit td:first-child { font-weight: 600; }

.ld-planilla__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: .8rem;
}
.ld-planilla__datos > div { white-space: nowrap; }
.ld-planilla__datos span { color: var(--ld-text-soft); margin-right: 5px; }

.ld-planilla__tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .76rem;
}
.ld-planilla__tabla thead th {
  background: #2A2B6B;
  color: #fff;
  padding: 7px 8px;
  font-weight: 650;
  font-size: .7rem;
  letter-spacing: .02em;
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, .18);
}
.ld-planilla__tabla thead th:last-child { border-right: 0; }
.ld-planilla__tabla tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--ld-border);
  border-right: 1px solid var(--ld-border);
  white-space: nowrap;
}
.ld-planilla__tabla tbody td:last-child { border-right: 0; }
.ld-planilla__tabla tbody tr:hover { background: #FAFBFD; }
.ld-planilla__tabla tfoot td {
  background: #EDF0F7;
  font-weight: 650;
  padding: 8px;
  border-top: 2px solid #2A2B6B;
  white-space: nowrap;
}
.ld-planilla__tabla .mono {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .73rem;
}

/* En el teléfono la planilla se desliza de costado en vez de romperse:
   son catorce columnas de números y achicarlas no las hace legibles. */
@media (max-width: 991.98px) {
  .ld-planilla .table-responsive { -webkit-overflow-scrolling: touch; }
  .ld-planilla__cabecera { flex-direction: column; gap: 12px; }
}

/* =====================================================================
   EL AVISO DE CONVERSIÓN
   Cuando un embarque no se movió en dólares, sus totales son una
   conversión. Se dice en voz baja —no es un error, es un dato— pero
   se dice.
   ===================================================================== */
.ld-conversion {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: 8px;
  background: #F4F6FB;
  border: 1px solid var(--ld-border);
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ld-text-soft);
}
.ld-conversion i { margin-top: 3px; opacity: .65; }
.ld-conversion strong { color: var(--ld-text); font-weight: 600; }

/* =====================================================================
   MEDIOS DE PAGO DE UN COBRO (views/layouts/_medios_cobro.php)
   Una fila por medio: cuenta, forma, importe, lo que entra a la cuenta
   (sólo si es de otra moneda), referencia y la cruz para quitarla. En
   el teléfono bajan de a dos por renglón.
   ===================================================================== */
.ld-mc { border: 1.5px solid var(--ld-border); border-radius: 10px; padding: 10px 12px 12px; }
.ld-mc__titulo { display: flex; justify-content: space-between; align-items: center; gap: 10px;
                 font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
                 color: var(--ld-text-soft); }
.ld-mc__resumen { text-transform: none; letter-spacing: 0; font-weight: 600; }
.ld-mc-fila { display: grid; gap: 10px; align-items: end; padding: 10px 0;
              grid-template-columns: minmax(0,2fr) minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1.6fr) 34px; }
.ld-mc-fila + .ld-mc-fila { border-top: 1px dashed var(--ld-border); }
.ld-mc-fila > .ld-fg { margin: 0; min-width: 0; }
.ld-mc-fila .ld-input, .ld-mc-fila .form-select { width: 100%; }
.ld-mc-quitar { padding-bottom: 4px; }
/* "Entra a la cuenta" sólo con otra moneda: guarda su lugar para que
   las filas no se corran */
.ld-mc-oculto { visibility: hidden; }
@media (max-width: 767.98px) {
  .ld-mc-oculto { display: none; }
  .ld-mc-fila { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .ld-mc-fila > .ld-fg:first-child { grid-column: 1 / -1; }
  .ld-mc-quitar { grid-column: 1 / -1; text-align: right; padding-bottom: 0; }
}

/* ── Los documentos elegidos en un campo de archivos ──────────────
   Se ven debajo del campo, con su peso y una X para sacarlos antes
   de guardar. Los arma LDArchivos (app.js). */
.ld-archivos { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.ld-archivos:empty { display: none; }

.ld-archivo {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 9px;
  border: 1px solid var(--ld-border);
  border-radius: 8px;
  background: var(--ld-bg-suave, transparent);
  font-size: .8rem;
}
.ld-archivo__nombre {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ld-archivo__peso { flex: 0 0 auto; font-size: .74rem; color: var(--ld-text-soft); }
.ld-archivo__x {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer;
  color: var(--ld-red, #C0392B); padding: 2px 4px; line-height: 1;
}
.ld-archivo__x:hover { opacity: .7; }