/* ============================================================
   SURE — Diseño de la app, sacado del Figma SURE-ENTREGA
   (mesas "APP — 02 Dashboard" 150:493 y "APP — 03 Mis Facturas" 157:547)

   Las medidas de aqui son las del Figma, no aproximadas:
     pagina  fondo #F7F8FA con 20 de margen · armazon redondeado 24
     menu    256 de ancho · 26 arriba / 18 a los lados / 22 abajo
     renglon del menu  radio 12 · relleno 12 · separacion 12 · letra 13
     empresa radio 14 · relleno 14 · separacion 6
     tarjeta radio 16 · 20 a los lados / 18 arriba y abajo · separacion 14
     KPI     radio 16 · 20 a los lados / 16 arriba y abajo · cifra 28 negrita
     cuadro del icono  34x34 · radio 10 · fondo #F7F8FA · icono 16
   Sin sombras: todo se separa con una linea de 1px #E5E8EC.

   Mientras dure la mudanza esto solo pinta las pantallas marcadas con la
   clase .ds2, para no tocar las que todavia no se han pasado.
   ============================================================ */

:root {
    --s-ink:        #0B1118;   /* texto fuerte, menu lateral */
    --s-ink-2:      #4B5563;   /* texto secundario */
    --s-ink-3:      #6B7280;   /* rotulos, letra chica */
    --s-on-dark:    #9CA6B0;   /* texto sobre fondo oscuro */
    --s-bg:         #F7F8FA;   /* fondo de la pantalla */
    --s-card:       #FFFFFF;
    --s-line:       #E5E8EC;   /* bordes: no hay sombras, hay lineas */
    --s-soft:       #EDF1F4;   /* relleno suave (barras, avisos) */
    --s-panel-dark: #22272E;   /* panel dentro del negro */
    --s-cyan:       #00D4FF;
    --s-cyan-deep:  #007E99;
    --s-green:      #22B95C;   /* verde de la marca */
    --s-green-h:    #1C9C4D;
    --s-line-suave: #DCE3E8;   /* linea mas tenue que --s-line */
    --s-green-tx: #187D40;  --s-green-bg: #E4F6EC;
    --s-amber-tx: #916500;  --s-amber-bg: #FDF1D8;  --s-amber: #E8A317;
    --s-blue-tx:  #0B6BB5;  --s-blue-bg:  #E3F0FB;
    --s-red-tx:   #C0392B;  --s-red-bg:   #FBEAEA;  --s-red: #E5484D;
    --s-r-chip: 8px; --s-r-ico: 10px; --s-r-field: 12px; --s-r-emp: 14px;
    --s-r-card: 16px; --s-r-pill: 20px; --s-r-shell: 24px; --s-r-btn: 30px;
    --s-menu: 256px; --s-margen: 20px;
}

/* ---------- La pagina y el armazon redondeado ---------- */
body.ds2-pagina {
    background: var(--s-bg);
    padding: var(--s-margen);
    min-height: 100vh;
}
.ds2 { min-height: calc(100vh - var(--s-margen) * 2); background: transparent; }

/* ---------- Menu lateral ---------- */
.ds2 .sidebar {
    width: var(--s-menu);
    top: var(--s-margen); left: var(--s-margen); bottom: var(--s-margen);
    background: var(--s-ink);
    border-radius: var(--s-r-shell) 0 0 var(--s-r-shell);
    box-shadow: none;
    padding: 26px 18px 22px;
}
.ds2 .sidebar-logo { padding: 0 0 26px 10px; }
.ds2 .sidebar-logo-img { width: 78px; margin-left: 0; }
.ds2 .sidebar-user {
    background: var(--s-panel-dark); border: 0; border-radius: var(--s-r-emp);
    padding: 14px; margin-bottom: 26px;
    display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.ds2 .sidebar-user-name {
    font-size: 13px; font-weight: 700; color: #fff; margin: 0;
    text-transform: uppercase; letter-spacing: .2px; line-height: 1.3;
}
.ds2 .sidebar-user-nit { font-size: 11px; color: var(--s-on-dark); margin: 0; line-height: 1.3; }
/* La pastilla de Activo: en el Figma es un punto + la palabra. La plantilla trae
   "● ACTIVO" en un solo texto y la comparten otras pantallas todavia sin pasar,
   asi que aqui se apaga ese texto (font-size 0) y se dibuja el punto y la palabra. */
.ds2 .sidebar-badge {
    display: inline-flex; align-items: center; gap: 6px; font-size: 0;
    background: rgba(34,185,92,.12); border-radius: var(--s-r-pill); padding: 4px 10px;
}
.ds2 .sidebar-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--s-green); flex: none; }
.ds2 .sidebar-badge::after { content: 'Activo'; font-size: 11px; font-weight: 600; color: var(--s-green); }
.ds2 .sidebar-nav { padding: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ds2 .sidebar-nav a {
    gap: 12px; padding: 12px; border-radius: var(--s-r-field); margin: 0;
    font-size: 13px; font-weight: 500; color: var(--s-on-dark); box-shadow: none;
    line-height: 1.4; transition: background .15s, color .15s;
}
.ds2 .sidebar-nav a svg { width: 18px; height: 18px; flex: none; }
.ds2 .sidebar-nav a:hover { background: var(--s-panel-dark); color: #fff; }
.ds2 .sidebar-nav a.active {
    background: var(--s-cyan); color: var(--s-ink); font-weight: 600; box-shadow: none;
}
.ds2 .sidebar-bottom { padding: 16px 0 0; border-top: 1px solid var(--s-panel-dark); display: flex; flex-direction: column; gap: 10px; }
.ds2 .sidebar-bottom form { margin: 0 !important; }
.ds2 .sidebar-bottom button {
    border-radius: var(--s-r-field) !important; background: var(--s-panel-dark) !important;
    color: #fff !important; font-size: 13px !important; font-weight: 600 !important;
    padding: 12px 14px !important;
}
.ds2 .sidebar-bottom button:hover { background: var(--s-cyan) !important; color: var(--s-ink) !important; }
.ds2 .sidebar-logout {
    display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500;
    color: var(--s-on-dark); padding: 10px 14px;
}
.sidebar-logout svg { display: none; }            /* en las pantallas viejas no se muestra */
.ds2 .sidebar-logout svg { display: block; width: 16px; height: 16px; flex: none; }
.ds2 .sidebar-logout:hover { color: #fff; }

/* ---------- Zona de trabajo ---------- */
.ds2 .main-content {
    margin-left: var(--s-menu);
    padding: 22px 28px 28px;
    background: var(--s-bg);
    color: var(--s-ink);
    border-radius: 0 var(--s-r-shell) var(--s-r-shell) 0;
    min-height: calc(100vh - var(--s-margen) * 2);
    display: flex; flex-direction: column; gap: 20px;
}
.ds2 .topbar { margin: 0; align-items: flex-start; }
.ds2 .s-titulo { font-size: 22px; font-weight: 700; color: var(--s-ink); line-height: 1.2; margin: 0 0 4px; }
.ds2 .s-sub { font-size: 13px; color: var(--s-ink-3); line-height: 1.4; }
.ds2 .s-sub b { color: var(--s-amber-tx); font-weight: 700; }

/* ---------- Tarjetas ---------- */
.ds2 .s-card {
    background: var(--s-card); border: 1px solid var(--s-line); border-radius: var(--s-r-card);
    padding: 18px 20px; box-shadow: none;
    display: flex; flex-direction: column; gap: 14px;
}
.ds2 .s-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ds2 .s-card-head h3 { font-size: 15px; font-weight: 700; color: var(--s-ink); margin: 0; line-height: 1.3; }
.ds2 .s-link { font-size: 12px; font-weight: 600; color: var(--s-cyan-deep); text-decoration: none; white-space: nowrap; }
.ds2 .s-link:hover { color: var(--s-ink); }
.ds2 .s-vacio { font-size: 12px; color: var(--s-ink-3); text-align: center; padding: 22px 0; margin: 0; }
.ds2 .s-lista { display: flex; flex-direction: column; }

/* ---------- Indicadores (KPI) ---------- */
.ds2 .s-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.ds2 .s-kpi {
    background: var(--s-card); border: 1px solid var(--s-line); border-radius: var(--s-r-card);
    padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.ds2 .s-kpi-ico {
    width: 34px; height: 34px; border-radius: var(--s-r-ico); background: var(--s-bg);
    display: flex; align-items: center; justify-content: center; color: var(--s-ink-2); flex: none;
}
.ds2 .s-kpi-ico svg { width: 16px; height: 16px; }
.ds2 .s-kpi-val { font-size: 28px; font-weight: 700; color: var(--s-ink); line-height: 1.1; width: 100%; }
.ds2 .s-kpi-val.is-plata { font-size: 19px; }
.ds2 .s-kpi-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; width: 100%; }
.ds2 .s-kpi-tit { font-size: 12px; font-weight: 600; color: var(--s-ink-2); }
.ds2 .s-kpi-pie { font-size: 11px; color: var(--s-ink-3); }

/* ---------- Dos columnas ---------- */
.ds2 .s-dos { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.ds2 .s-col { display: flex; flex-direction: column; gap: 20px; }

/* ---------- Panel oscuro (valor causado) ---------- */
.ds2 .s-panel-oscuro {
    background: var(--s-ink); border-radius: var(--s-r-card); padding: 22px; color: #fff;
    display: flex; flex-direction: column; gap: 14px;
}
.ds2 .s-panel-oscuro .arriba { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ds2 .s-panel-oscuro .rot { font-size: 12px; color: var(--s-on-dark); line-height: 1.4; margin-bottom: 4px; }
.ds2 .s-panel-oscuro .cifra { font-size: 30px; font-weight: 700; line-height: 1.1; }
.ds2 .s-panel-oscuro .ico {
    width: 38px; height: 38px; border-radius: var(--s-r-ico); background: var(--s-panel-dark);
    display: flex; align-items: center; justify-content: center; flex: none; color: #fff;
}
.ds2 .s-panel-oscuro .ico svg { width: 18px; height: 18px; }
.ds2 .s-panel-oscuro .nota { font-size: 12px; color: var(--s-on-dark); line-height: 1.55; }
.ds2 .s-btn-cyan {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    background: var(--s-cyan); color: var(--s-ink); border: 0; border-radius: var(--s-r-btn);
    padding: 12px 20px; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.ds2 .s-btn-cyan:hover { background: #fff; }

/* ---------- Filas de meses ---------- */
.ds2 .s-mes { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--s-line); }
.ds2 .s-mes:first-child { padding-top: 0; }
.ds2 .s-mes:last-child { border-bottom: 0; padding-bottom: 0; }
.ds2 .s-mes-nom { min-width: 104px; }
.ds2 .s-mes-nom b { font-size: 12px; font-weight: 600; color: var(--s-ink); display: block; line-height: 1.4; }
.ds2 .s-mes-nom span { font-size: 11px; color: var(--s-ink-3); }
.ds2 .s-barra { flex: 1; height: 8px; background: var(--s-soft); border-radius: var(--s-r-chip); overflow: hidden; }
.ds2 .s-barra i { display: block; height: 100%; background: var(--s-cyan); border-radius: var(--s-r-chip); transition: width .4s; }
.ds2 .s-barra i.is-ok { background: var(--s-green); }
.ds2 .s-pct { font-size: 11px; font-weight: 700; color: var(--s-ink-2); min-width: 32px; text-align: right; }

/* ---------- Chips de estado ---------- */
.ds2 .s-chip {
    display: inline-flex; align-items: center; gap: 6px; border-radius: var(--s-r-chip);
    padding: 4px 10px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.ds2 .s-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ds2 .s-chip.is-ok    { color: var(--s-green-tx); background: var(--s-green-bg); }
.ds2 .s-chip.is-curso { color: var(--s-amber-tx); background: var(--s-amber-bg); }
.ds2 .s-chip.is-nada  { color: var(--s-ink-3);    background: var(--s-soft); }
.ds2 .s-chip.sin-punto::before { display: none; }

/* ---------- Actividad ---------- */
.ds2 .s-act { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--s-line); }
.ds2 .s-act:first-child { padding-top: 0; }
.ds2 .s-act:last-child { border-bottom: 0; padding-bottom: 0; }
.ds2 .s-act .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--s-cyan); margin-top: 5px; flex: none; }
.ds2 .s-act .texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ds2 .s-act .que { font-size: 12px; font-weight: 600; color: var(--s-ink); line-height: 1.38; }
.ds2 .s-act .cuando { font-size: 11px; color: var(--s-ink-3); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Aviso ---------- */
.ds2 .s-aviso {
    display: flex; align-items: flex-start; gap: 10px; background: var(--s-red-bg);
    border: 1px solid #E5484D; border-radius: var(--s-r-field); padding: 12px 14px;
}
.ds2 .s-aviso .ico {
    width: 20px; height: 20px; border-radius: 50%; background: var(--s-red-tx); color: #fff;
    font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none;
}
.ds2 .s-aviso b { font-size: 13px; color: var(--s-red-tx); display: block; margin-bottom: 1px; }
.ds2 .s-aviso span { font-size: 12px; color: var(--s-ink-2); }
.ds2 .s-aviso a { color: var(--s-red-tx); font-weight: 700; text-decoration: none; }

/* ---------- Pantallas angostas ---------- */
@media (max-width: 1280px) {
    .ds2 .s-kpis { grid-template-columns: repeat(3, 1fr); }
    .ds2 .s-dos { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    body.ds2-pagina { padding: 10px; }
    .ds2 .s-kpis { grid-template-columns: repeat(2, 1fr); }
    .ds2 .sidebar { border-radius: var(--s-r-shell); }
    .ds2 .main-content { margin-left: 0; padding: 16px; border-radius: var(--s-r-shell); }
}

/* ============================================================
   PIEZAS COMUNES — se visten las clases que las pantallas YA usan,
   sin tocar el HTML ni los id que busca el JavaScript.
   Medidas: Dashboard 150:493 y Mis Facturas 157:547 del Figma.
   ============================================================ */

/* ---------- Titulo de la pantalla ---------- */
.ds2 .topbar h2 { font-size: 22px; font-weight: 700; color: var(--s-ink); margin: 0 0 4px; line-height: 1.2; }
.ds2 .topbar > div > span { font-size: 13px; color: var(--s-ink-3); }
.ds2 .topbar-right { gap: 10px; }

/* ---------- Botones ---------- */
.ds2 .btn {
    border-radius: var(--s-r-btn); font-size: 13px; font-weight: 600; padding: 12px 20px;
    box-shadow: none; transition: background .15s, color .15s, border-color .15s;
}
.ds2 .btn-sm { padding: 11px 18px; font-size: 13px; }
.ds2 .btn-primary { background: var(--s-cyan); color: var(--s-ink); box-shadow: none; }
.ds2 .btn-primary:hover { background: var(--s-cyan-deep); color: #fff; }
.ds2 .btn-outline { background: #fff; border: 1px solid var(--s-line); color: var(--s-ink); }
.ds2 .btn-outline:hover { background: var(--s-bg); }
.ds2 .btn-danger-sm { color: var(--s-red-tx) !important; border-color: #E5484D !important; background: #fff; }
.ds2 .btn-danger-sm:hover { background: var(--s-red-bg); }
.ds2 .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Pastillas de estado ---------- */
.ds2 .badge {
    border-radius: var(--s-r-pill); padding: 5px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0;
}
.ds2 .badge-active  { background: var(--s-green-bg); color: var(--s-green-tx); }
.ds2 .badge-yellow,
.ds2 .badge-orange  { background: var(--s-amber-bg); color: var(--s-amber-tx); }
.ds2 .badge-blue    { background: var(--s-blue-bg);  color: var(--s-blue-tx); }
.ds2 .badge-inactive{ background: var(--s-red-bg);   color: var(--s-red-tx); }

/* ---------- Campos y selectores ---------- */
.ds2 .filter-select, .ds2 .filter-input {
    border: 1px solid var(--s-line); border-radius: var(--s-r-field); padding: 11px 14px;
    font-size: 13px; font-weight: 500; color: var(--s-ink); background: #fff;
}
.ds2 .filter-select:focus, .ds2 .filter-input:focus { outline: 2px solid var(--s-cyan); outline-offset: -2px; border-color: var(--s-cyan); }
.ds2 input[type="date"], .ds2 input[type="text"], .ds2 input[type="number"], .ds2 input[type="search"] {
    font-family: 'Montserrat', sans-serif;
}
.ds2 input[type="checkbox"], .ds2 input[type="radio"] { accent-color: var(--s-cyan); }

/* ---------- Tarjetas y tablas ---------- */
.ds2 .table-card {
    background: #fff; border: 1px solid var(--s-line); border-radius: var(--s-r-card);
    box-shadow: none;
}
.ds2 .table-card:hover { box-shadow: none; }
.ds2 .card-header { padding: 18px 20px; border-bottom: 1px solid var(--s-line); }
.ds2 .card-header h3 { font-size: 15px; font-weight: 700; color: var(--s-ink); }
.ds2 .table-card th {
    padding: 12px 16px; font-size: 11px; font-weight: 600; text-transform: none;
    letter-spacing: .44px; color: var(--s-ink-3); background: #fff;
    border-bottom: 1px solid var(--s-line);
}
.ds2 .table-card td {
    padding: 10px 16px; font-size: 12px; color: var(--s-ink-2);
    border-bottom: 1px solid rgba(229,232,236,.7);
}
.ds2 .table-card tr:last-child td { border-bottom: 0; }
.ds2 .table-filters { gap: 10px; }

/* ---------- Franja de cifras del mes ---------- */
.ds2 .banner-dark {
    background: var(--s-ink); border-radius: var(--s-r-card); padding: 22px 24px;
    box-shadow: none; margin: 0;
}
.ds2 .stat-value { font-size: 26px; font-weight: 700; color: #fff; line-height: 1.1; }
.ds2 .stat-label { font-size: 11px; color: var(--s-on-dark); }
.ds2 .stat-green { color: var(--s-cyan); }
.ds2 .stat-divider { background: var(--s-panel-dark); height: 38px; }

/* ---------- Avisos ---------- */
.ds2 .alert { border-radius: var(--s-r-field); padding: 12px 16px; font-size: 13px; margin: 0; border: 1px solid transparent; }
.ds2 .alert-icon { width: 20px; height: 20px; font-size: 12px; }

/* ---------- Las cuatro tarjetas de carga ---------- */
.ds2 .upload-cards-grid { grid-template-columns: 1fr 1fr; gap: 20px; margin: 0; }
.ds2 .upload-card { padding: 18px 20px; }
.ds2 .upload-card-header { gap: 12px; margin-bottom: 14px; }
.ds2 .upload-card-icon {
    width: 38px; height: 38px; border-radius: var(--s-r-ico);
    background: var(--s-bg) !important;
}
.ds2 .upload-card-icon svg { width: 18px; height: 18px; stroke: var(--s-ink-2) !important; }
.ds2 .upload-card-header h4 { font-size: 15px; font-weight: 700; color: var(--s-ink); line-height: 1.3; }
.ds2 .upload-card-header p { font-size: 12px; color: var(--s-ink-3); line-height: 1.4; margin: 2px 0 0; }
.ds2 .upload-card-count { font-size: 26px; font-weight: 700; color: var(--s-ink) !important; }
.ds2 .upload-card-btn {
    border-radius: var(--s-r-btn); padding: 12px 20px; font-size: 13px; font-weight: 600;
    background: var(--s-cyan); color: var(--s-ink); border: 0;
}
.ds2 .upload-card-btn:hover { background: var(--s-cyan-deep); color: #fff; }
.ds2 .upload-card-btn-outline { background: #fff; border: 1px solid var(--s-line); color: var(--s-ink); }
.ds2 .upload-card-btn-outline:hover { background: var(--s-bg); color: var(--s-ink); }
.ds2 .upload-card-btn-danger {
    background: #fff; border: 1px solid #E5484D; color: var(--s-red-tx); padding: 12px 16px;
}
.ds2 .upload-card-btn-danger:hover { background: var(--s-red-bg); }

/* El recuadro de soltar archivos no esta en el Figma: se arma con el mismo
   idioma (linea punteada del color de los bordes, fondo gris suave, radio 12). */
.ds2 .drop-zone {
    gap: 12px; border: 1.5px dashed var(--s-line); border-radius: var(--s-r-field);
    background: var(--s-bg); padding: 12px; transition: border-color .15s, background .15s;
}
.ds2 .drop-zone.dragover { border-color: var(--s-cyan); background: #fff; }
.ds2 .drop-hint { font-size: 12px; color: var(--s-ink-3); }

/* ---------- Los pasos numerados de la DIAN ---------- */
.ds2 .dpaso-num { background: var(--s-cyan); color: var(--s-ink); }
.ds2 .dpaso b { font-size: 13px; }

/* ---------- Secciones que se abren y cierran ---------- */
.ds2 .collapse-icon { color: var(--s-ink-3); }

/* ---------- Descargar XMLs: bloques con estilo escrito a mano en la plantilla ---------- */
/* Llevan el estilo pegado en el HTML, asi que toca pisarlo desde aqui. Cuando esa
   plantilla se limpie, estas tres reglas se pueden borrar. */
.ds2 #facturas-xml {
    background: var(--s-bg) !important; border: 1px solid var(--s-line) !important;
    border-radius: var(--s-r-field) !important; padding: 14px 16px !important;
}
.ds2 #buzon-estado {
    background: var(--s-bg) !important; border: 1px solid var(--s-line) !important;
    border-radius: var(--s-r-field) !important; padding: 12px 14px !important;
}
.ds2 #buzon-avance {
    border: 1px solid var(--s-line) !important; border-radius: var(--s-r-chip) !important;
}
/* El tipo de documento, en azul; el verde se reserva para el estado (asi esta en el Figma). */
.ds2 .badge-doc { background: var(--s-blue-bg); color: var(--s-blue-tx); }
.badge-doc { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; background: #E3F0FB; color: #0B6BB5; }

/* ---------- Iconos de linea que reemplazaron a los emojis ---------- */
.ds2 .ic { display: inline-block; vertical-align: -0.18em; flex: none; }
.ds2 h3 .ic, .ds2 h4 .ic, .ds2 b .ic { vertical-align: -0.15em; margin-right: 2px; }
.ds2 .check-green { color: var(--s-green-tx); }
.ds2 .check-blue  { color: var(--s-blue-tx); }
.ds2 .check-empty { color: #DCE3E8; }
.ds2 .collapse-icon .ic { vertical-align: middle; }

/* ---------- Ventanitas (avisos que salen encima) ----------
   El Figma no trae ninguna, asi que se arman con el mismo idioma: blanca,
   esquinas de 16, relleno 24. Llevan una sombra suave porque flotan sobre la
   pantalla y tienen que despegarse del fondo. Estas reglas NO van dentro de
   .ds2: una de las tres vive fuera, en el bloque de scripts. */
.s-ventana {
    background: #fff; border-radius: 16px; padding: 24px; width: 420px; max-width: 90vw;
    box-shadow: 0 12px 40px rgba(11,17,24,.22); font-family: 'Montserrat', sans-serif;
}
.s-ventana h3 { font-size: 16px; font-weight: 700; color: #0B1118; }
.s-ventana p  { font-size: 13px; color: #4B5563; line-height: 1.5; }
.s-btn-rojo {
    background: #C0392B; color: #fff; border: 0; border-radius: 30px;
    padding: 11px 18px; font-size: 13px; font-weight: 600; cursor: pointer; width: auto;
    font-family: 'Montserrat', sans-serif;
}
.s-btn-rojo:hover { background: #C0392B; }
/* El aviso de eliminar vive fuera de .ds2, asi que sus botones se visten aqui. */
#modal-confirmar-eliminacion .btn {
    width: auto; border-radius: 30px; padding: 11px 18px; font-size: 13px; font-weight: 600;
    background: #fff; border: 1px solid #E5E8EC; color: #0B1118; box-shadow: none;
}
#modal-confirmar-eliminacion .btn:hover { background: #F7F8FA; }

/* Los encabezados de las secciones que se abren y cierran: el titulo en tinta;
   el aviso de color lo da el borde de la tarjeta, como en el Figma. */
.ds2 .card-header h3 { color: var(--s-ink); font-size: 15px; font-weight: 700; }

/* ============================================================
   MIS FACTURAS — mesa 157:547 del Figma
   ============================================================ */

/* El tipo de documento: pastilla de esquina 8, sin punto (asi esta dibujada). */
.badge-doc { display: inline-block; padding: 5px 8px; border-radius: 8px; font-size: 11px;
             font-weight: 500; background: #E3F0FB; color: #0B6BB5; text-align: center; }
.badge-doc-nc { background: #FDF1D8; color: #916500; }
.ds2 .badge-doc    { background: var(--s-blue-bg);  color: var(--s-blue-tx); border-radius: var(--s-r-chip); font-weight: 500; }
.ds2 .badge-doc-nc { background: var(--s-amber-bg); color: var(--s-amber-tx); }

/* El estado: pastilla de esquina 20 CON punto, como en el Figma. */
.ds2 td .badge-active, .ds2 td .badge-orange, .ds2 td .badge-yellow,
.ds2 td .badge-blue, .ds2 td .badge-inactive {
    display: inline-flex; align-items: center; gap: 6px; border-radius: var(--s-r-pill);
    padding: 5px 8px; font-weight: 600;
}
.ds2 td .badge-active::before, .ds2 td .badge-orange::before, .ds2 td .badge-yellow::before,
.ds2 td .badge-blue::before, .ds2 td .badge-inactive::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
.ds2 td .badge-doc::before { content: none; }

/* La fila: proveedor arriba, NIT debajo (separacion 2, interlineado 1,3). */
.ds2 .tabla-mis-facturas td, .ds2 .tabla-gastos td { padding: 8px 16px; line-height: 1.3; }
.ds2 .table-card td strong { font-weight: 600; color: var(--s-ink); }
.ds2 .factura-row:hover, .ds2 .table-row-hover:hover { background: var(--s-bg); }

/* Los botones redondos de la columna Acciones: 32x32, esquina 8, fondo gris. */
.ds2 .action-btns { display: flex; align-items: center; gap: 6px; }
.ds2 .action-btns .btn {
    width: auto; min-height: 30px; padding: 6px 10px; border-radius: var(--s-r-chip);
    background: var(--s-bg); border: 1px solid var(--s-line);
    font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
/* Los que son solo icono si van cuadrados, 32x32 como en el Figma. */
.ds2 .action-btns .btn.solo-icono { width: 32px; padding: 0; }
.ds2 .action-btns .btn:hover { background: #fff; border-color: var(--s-ink-3); }
.ds2 .chevron { color: var(--s-ink-3) !important; display: inline-flex; transition: transform .2s; }

/* El semaforo del mes: tarjeta blanca con las pastillas del Figma. */
.ds2 .s-semaforo {
    background: #fff; border: 1px solid var(--s-line); border-radius: var(--s-r-emp);
    padding: 14px 16px; font-size: 12px; color: var(--s-ink-2);
    display: flex; flex-direction: column; gap: 10px;
}
.ds2 .s-semaforo b { color: var(--s-ink); }
.ds2 .s-semaforo > div { margin: 0 !important; }
.ds2 .s-semaforo span[style*="border-radius:20px"] {
    padding: 8px 14px !important; font-size: 12px !important; font-weight: 600 !important;
}
.ds2 .s-semaforo span[style*="border-radius:6px"] {
    border-radius: var(--s-r-chip) !important; padding: 5px 10px !important; font-size: 11px !important;
}

/* La tabla ancha se desplaza DENTRO de su tarjeta, no arrastra la pantalla entera.
   Sin min-width:0 el bloque de trabajo crece con la tabla y aparece barra abajo. */
.ds2 .main-content { min-width: 0; }
.ds2 .topbar { flex-wrap: wrap; gap: 14px; }
.ds2 .topbar-right { flex-wrap: wrap; justify-content: flex-end; }
.ds2 .table-card > div[style*="overflow-x"] { border-radius: 0 0 var(--s-r-card) var(--s-r-card); }

/* ---------- Que las columnas tengan aire ----------
   Si la tabla se encoge para caber, los nombres largos se apilan en torres de
   cuatro renglones. Mejor darle un ancho minimo y que se desplace dentro de su
   tarjeta: las columnas quedan con el aire que tienen en el Figma. */
.ds2 .tabla-mis-facturas { min-width: 1080px; }
.ds2 .tabla-gastos { min-width: 1250px; }

/* --- Gastos no electronicos: reparticion fija, igual que Descargar XMLs ---
   Sin esto la tabla pide 1291 en 1140 y "Borrar" se queda por fuera: la
   columna de acciones se llevaba 273 y la de "Va a" 197. Los anchos salen
   de medir en el navegador lo que cada cosa necesita. */
.ds2 .tabla-gastos { table-layout: fixed; width: 100%; }
.ds2 .tabla-gastos th:nth-child(1),  .ds2 .tabla-gastos td:nth-child(1)  { width: 40px; padding-left: 8px; padding-right: 8px; }
.ds2 .tabla-gastos th:nth-child(2),  .ds2 .tabla-gastos td:nth-child(2)  { width: auto; min-width: 0; }
.ds2 .tabla-gastos th:nth-child(3),  .ds2 .tabla-gastos td:nth-child(3)  { width: 74px; }
.ds2 .tabla-gastos th:nth-child(4),  .ds2 .tabla-gastos td:nth-child(4)  { width: 123px; padding-left: 8px; padding-right: 8px; }
.ds2 .tabla-gastos th:nth-child(5),  .ds2 .tabla-gastos td:nth-child(5)  { width: 170px; }
.ds2 .tabla-gastos td:nth-child(5) { padding-left: 8px; padding-right: 8px; }
.ds2 .tabla-gastos th:nth-child(6),  .ds2 .tabla-gastos td:nth-child(6)  { width: 66px; }
.ds2 .tabla-gastos th:nth-child(7),  .ds2 .tabla-gastos td:nth-child(7)  { width: 60px; }
.ds2 .tabla-gastos th:nth-child(8),  .ds2 .tabla-gastos td:nth-child(8)  { width: 76px; }
.ds2 .tabla-gastos th:nth-child(9),  .ds2 .tabla-gastos td:nth-child(9)  { width: 141px; padding-left: 8px; padding-right: 8px; }
.ds2 .tabla-gastos th:nth-child(10), .ds2 .tabla-gastos td:nth-child(10) { width: 302px; padding-left: 8px; padding-right: 8px; }
.ds2 .tabla-gastos td:nth-child(5) .inline-select { width: 100%; }
.ds2 .tabla-gastos td:nth-child(2) strong {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: break-word;
}

/* Los botones de fila de las dos tablas, del mismo tamano que los de
   Descargar XMLs, y ningun enlace subrayado (a "Soporte" le faltaba, igual
   que le faltaba a "Ver"). */
.ds2 .tabla-gastos .action-btns, .ds2 .tabla-mis-facturas .action-btns { gap: 5px; }
.ds2 .tabla-gastos .action-btns .btn, .ds2 .tabla-mis-facturas .action-btns .btn {
    width: auto; min-width: 0; min-height: 0; height: 28px; flex: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    font-size: 10.5px !important; padding: 0 7px; line-height: 1;
    white-space: nowrap; text-decoration: none; border-radius: var(--s-r-chip);
}
.ds2 .action-btns a.btn { text-decoration: none; }
.ds2 .tabla-descargar { min-width: 1080px; }
.ds2 .table-card th { white-space: nowrap; }
.ds2 .tabla-mis-facturas td:nth-child(2),
.ds2 .tabla-gastos       td:nth-child(2) { min-width: 200px; }
.ds2 .tabla-mis-facturas td:nth-child(3),
.ds2 .tabla-gastos       td:nth-child(3) { white-space: nowrap; }
.ds2 .tabla-mis-facturas td:nth-last-child(-n+5),
.ds2 .tabla-gastos       td:nth-last-child(-n+4) { white-space: nowrap; }
/* La fila del panel de la factura es un <td> solo con colspan, asi que
   tambien cumple el nth-last-child de arriba y el nowrap se le heredaba a
   TODO lo de adentro: la descripcion del producto se salia por encima de
   las otras columnas en vez de partirse. */
.ds2 .tabla-mis-facturas .factura-detail > td,
.ds2 .tabla-gastos       .factura-detail > td { white-space: normal; }
/* Y lo mismo con TODAS las reglas de .table-card th/td: el panel esta dentro
   de una celda de la tabla, asi que se le metian adentro y le pintaban de
   blanco el encabezado NEGRO de la tabla de productos (dejando el cian
   invisible) y le ponian el texto en negro sobre el negro de Joseph.
   Adentro del panel manda lo que el panel diga. */
.ds2 .factura-detail th {
    background: transparent; color: inherit; white-space: normal;
    border-bottom: 0; letter-spacing: inherit;
}
.ds2 .factura-detail td strong { color: inherit; font-weight: inherit; }
.ds2 .factura-detail .jchat-top strong,
.ds2 .factura-detail .joseph-card-top strong { color: #fff; font-weight: 700; }

/* ============================================================
   PROGRESO SIIGO · LEGALIZACIONES · NOMINA · MI RUT
   Las cuatro traen clases propias en su plantilla. Aqui se les pone la
   misma ropa del Figma: sin sombras, borde de 1px, esquinas de 16, los
   paneles oscuros en negro y los rotulos sin mayusculas forzadas.
   ============================================================ */

/* ---- Progreso Siigo ---- */
.ds2 .prog-hero {
    background: var(--s-ink); border-radius: var(--s-r-card); padding: 24px;
    box-shadow: none; margin: 0;
}
.ds2 .prog-hero::before, .ds2 .prog-hero::after { display: none; }
.ds2 .prog-pct-ring .ring-text { font-size: 24px; font-weight: 700; }
.ds2 .prog-metrics { grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 0; }
.ds2 .prog-metric {
    border-radius: var(--s-r-card); padding: 16px 20px; border: 1px solid var(--s-line);
    box-shadow: none; transition: none;
}
.ds2 .prog-metric:hover { transform: none; box-shadow: none; }
.ds2 .prog-metric .pm-icon {
    width: 34px; height: 34px; border-radius: var(--s-r-ico);
    background: var(--s-bg) !important; color: var(--s-ink-2) !important; margin-bottom: 12px;
}
.ds2 .prog-metric .pm-value { font-size: 28px; font-weight: 700; line-height: 1.1; margin-bottom: 6px; color: var(--s-ink) !important; }
.ds2 .prog-metric .pm-label { font-size: 12px; font-weight: 600; color: var(--s-ink-2); text-transform: none; letter-spacing: 0; }
.ds2 .prog-metric .pm-bar { display: none; }
.ds2 .prog-grid2 { gap: 20px; margin: 0; }
.ds2 .prov-row, .ds2 .caus-row { border-bottom: 1px solid var(--s-line); padding: 10px 0; }
.ds2 .prov-rank { border-radius: var(--s-r-chip); background: var(--s-bg); color: var(--s-ink-2); }
.ds2 .prov-bar { background: var(--s-soft); border-radius: var(--s-r-chip); }
.ds2 .prov-bar-fill { background: var(--s-cyan); border-radius: var(--s-r-chip); }
.ds2 .tipo-chip {
    border-radius: var(--s-r-pill); border: 1px solid var(--s-line); background: #fff;
    font-size: 12px; font-weight: 600; color: var(--s-ink); padding: 8px 14px;
}
.ds2 .tipo-chip:hover { background: var(--s-bg); }
.ds2 .tipo-chip .tc-count { color: var(--s-ink-3); font-weight: 500; }
.ds2 .mes-card-new {
    border-radius: var(--s-r-card); border: 1px solid var(--s-line); box-shadow: none; transition: none;
}
.ds2 .mes-card-new:hover { transform: none; box-shadow: none; }
.ds2 .mes-head { border-bottom: 1px solid var(--s-line); }
.ds2 .mes-stat-dot { width: 6px; height: 6px; }
.ds2 .mes-actions .btn { border-radius: var(--s-r-chip); font-size: 11px; padding: 7px 12px; width: auto; }

/* ---- Legalizaciones ---- */
.ds2 .leg-hero {
    background: var(--s-ink); border-radius: var(--s-r-card); padding: 22px 24px;
    box-shadow: none; margin: 0;
}
.ds2 .leg-hero::before { display: none; }
.ds2 .leg-card, .ds2 .new-leg-form {
    border-radius: var(--s-r-card); border: 1px solid var(--s-line); box-shadow: none;
    padding: 18px 20px; transition: none;
}
.ds2 .leg-card { border-left: 3px solid var(--s-cyan); margin-bottom: 12px; }
.ds2 .leg-card:hover { transform: none; box-shadow: none; background: var(--s-bg); }
.ds2 .leg-stat { font-size: 12px; color: var(--s-ink-3); }
.ds2 .leg-stat strong { color: var(--s-ink); }

/* ---- Nomina ---- */
.ds2 .nm-tab {
    border-radius: var(--s-r-pill); border: 1px solid var(--s-line); background: #fff;
    font-size: 13px; font-weight: 600; color: var(--s-ink-2); padding: 10px 18px;
}
.ds2 .nm-tab:hover { background: var(--s-bg); color: var(--s-ink); }
.ds2 .nm-tab.active { background: var(--s-cyan); border-color: var(--s-cyan); color: var(--s-ink); }
.ds2 .nm-card {
    border-radius: var(--s-r-card); border: 1px solid var(--s-line); box-shadow: none;
    padding: 18px 20px; margin-bottom: 16px;
}
.ds2 .nm-grid { gap: 12px; }
.ds2 .nm-field label {
    font-size: 12px; font-weight: 600; color: var(--s-ink); text-transform: none;
    letter-spacing: 0; margin-bottom: 5px;
}
.ds2 .nm-field input, .ds2 .nm-field select {
    border: 1px solid var(--s-line); border-radius: var(--s-r-field); padding: 11px 14px; font-size: 13px;
}
.ds2 .nm-field input:focus, .ds2 .nm-field select:focus { border-color: var(--s-cyan); outline: 2px solid var(--s-cyan); outline-offset: -2px; }
.ds2 table.nm th {
    font-size: 11px; text-transform: none; letter-spacing: .44px; font-weight: 600;
    color: var(--s-ink-3); background: #fff; padding: 12px 8px; border-bottom: 1px solid var(--s-line);
}
.ds2 table.nm td { border-top: 1px solid rgba(229,232,236,.7); padding: 9px 8px; color: var(--s-ink-2); }
.ds2 table.nm input.celda { border: 1px solid var(--s-line); border-radius: var(--s-r-chip); padding: 7px 8px; }
.ds2 table.nm input.celda:focus { border-color: var(--s-cyan); }
.ds2 .nm-total { background: var(--s-ink); }
.ds2 .nm-total td { color: #fff; }

/* ---- Mi RUT ---- */
.ds2 .rut-seccion h3, .ds2 .table-card h3 { display: flex; align-items: center; gap: 8px; }

/* ============================================================
   BANDEJA COMPLETA · VALIDAR SOPORTE
   ============================================================ */
.ds2 .bc-bloque, .ds2 .vs-visor {
    border: 1px solid var(--s-line); border-radius: var(--s-r-card); box-shadow: none;
}
.ds2 .bc-cab { background: var(--s-bg); border-bottom: 1px solid var(--s-line); padding: 12px 16px; }
.ds2 .bc-cab b { font-size: 13px; color: var(--s-ink); }
.ds2 .bc-num { font-size: 11px; color: var(--s-ink-3); }
.ds2 .bc-listo .bc-cab { background: var(--s-green-bg); border-color: #22B95C; }
.ds2 .bc-falla .bc-cab { background: var(--s-red-bg); border-color: #E5484D; }
.ds2 .bc-motivo { font-size: 11px; color: var(--s-red-tx); background: var(--s-red-bg); border-bottom: 1px solid #E5484D; }
.ds2 .bc-barra {
    background: #fff; border-bottom: 1px solid var(--s-line); box-shadow: none;
    padding: 12px 16px; border-radius: var(--s-r-card) var(--s-r-card) 0 0;
}
.ds2 .bc-marco, .ds2 .vs-visor iframe, .ds2 .vs-visor img { border-radius: var(--s-r-field); }
.ds2 .vs-visor { padding: 12px; }
.ds2 .vs-grid { gap: 20px; }

/* ============================================================
   ENTRAR, REGISTRARSE Y RECUPERAR LA CONTRASEÑA
   La pantalla de Inicio de sesion ya estaba hecha con el Figma (clases .lg).
   Estas seis usaban el diseño viejo (.split-*); aqui se igualan a aquella.
   Estas clases solo las usan esas seis pantallas, por eso no llevan .ds2.
   ============================================================ */
.split-layout { background: #fff; font-family: 'Montserrat', sans-serif; }
.split-left {
    width: 46%; background: #0B1118; padding: 56px 56px;
}
.split-logo { width: 110px; margin: 0 0 8px; }
.split-left h1, .split-left h2 { color: #fff; font-size: 30px; font-weight: 700; line-height: 1.2; }
.split-desc { color: #9CA6B0; font-size: 14px; line-height: 1.6; margin-bottom: 32px; }
.split-footer { color: #6B7280; font-size: 12px; }
.split-right { width: 54%; background: #fff; padding: 56px; }
.split-right-content { max-width: 440px; }
.split-right h2 { font-size: 30px; font-weight: 700; color: #0B1118; line-height: 1.2; }
.split-right .subtitle { font-size: 14px; color: #4B5563; line-height: 1.55; }

.form-group { margin-bottom: 18px; }
.form-group label { font-size: 13px; font-weight: 600; color: #0B1118; margin-bottom: 8px; }
.form-group input, .form-group select {
    padding: 14px 16px; border: 1px solid #E5E8EC; border-radius: 12px; font-size: 14px; color: #0B1118;
}
.form-group input:focus, .form-group select:focus {
    outline: none; border: 2px solid #00D4FF; padding: 13px 15px;
}
.split-right .btn { border-radius: 30px; padding: 15px 26px; font-size: 14px; font-weight: 600; box-shadow: none; }
.split-right .btn-primary { background: #00D4FF; color: #0B1118; }
.split-right .btn-primary:hover { background: #007E99; color: #fff; }
.auth-link { font-size: 13px; color: #4B5563; margin-top: 22px; }
.auth-link a, .resend-link { color: #007E99; font-weight: 600; }

.reg-steps { gap: 18px; margin-top: 30px; }
.reg-step { gap: 14px; }
.reg-step-circle {
    width: 36px; height: 36px; border-radius: 50%; background: #22272E; color: #9CA6B0;
    font-size: 14px; font-weight: 700;
}
.reg-step.active .reg-step-circle { background: #00D4FF; color: #0B1118; }
.reg-step.done .reg-step-circle { background: #22B95C; color: #fff; }
.reg-step-text { font-size: 13px; color: #9CA6B0; }
.reg-step.active .reg-step-text { color: #fff; font-weight: 600; }

.code-input input {
    width: 48px; height: 56px; text-align: center; font-size: 20px; font-weight: 700;
    border: 1px solid #E5E8EC; border-radius: 12px; font-family: 'Montserrat', sans-serif; color: #0B1118;
}
.code-input input:focus { outline: none; border: 2px solid #00D4FF; }
.alert-success {
    background: #E4F6EC; border: 1px solid #22B95C; color: #187D40;
    border-radius: 12px; font-size: 13px; font-weight: 600; padding: 12px 16px;
}
@media (max-width: 860px) {
    .split-layout { flex-direction: column; }
    .split-left, .split-right { width: 100%; padding: 32px 20px; }
}

/* ============================================================
   EL PANEL QUE SE ABRE AL TOCAR UNA FACTURA, Y EL FORMULARIO DEL GASTO
   ============================================================ */
.ds2 .gasto-hero { background: var(--s-ink); border-radius: var(--s-r-card); padding: 22px 24px; box-shadow: none; }
.ds2 .gasto-hero::before { display: none; }
.ds2 .g-card { border-radius: var(--s-r-card); border: 1px solid var(--s-line); box-shadow: none; padding: 18px 20px; margin-bottom: 16px; }
.ds2 .g-grid { gap: 12px; }
.ds2 .g-field label, .ds2 .ret-item strong {
    font-size: 12px; font-weight: 600; color: var(--s-ink); text-transform: none; letter-spacing: 0; margin-bottom: 5px;
}
.ds2 .g-field input, .ds2 .g-field select,
.ds2 table.gr input, .ds2 table.gr select, .ds2 .ret-item input {
    border: 1px solid var(--s-line); border-radius: var(--s-r-field); font-size: 13px; padding: 10px 12px;
}
.ds2 table.gr input, .ds2 table.gr select { padding: 8px 10px; border-radius: var(--s-r-chip); }
.ds2 .g-field input:focus, .ds2 .g-field select:focus,
.ds2 table.gr input:focus, .ds2 table.gr select:focus, .ds2 .ret-item input:focus { border-color: var(--s-cyan); }
.ds2 .g-chip {
    border-radius: var(--s-r-pill); border: 1px solid var(--s-line); font-size: 13px; padding: 10px 16px;
}
.ds2 .g-chip.on { border-color: var(--s-cyan); background: rgba(0,212,255,.08); }
.ds2 .g-chip small { color: var(--s-ink-3); font-size: 11px; }
.ds2 table.gr th, .ds2 .joseph-tabla th, .ds2 .g-pdf-tabla th {
    font-size: 11px; text-transform: none; letter-spacing: .44px; font-weight: 600;
    color: var(--s-ink-3); background: #fff; border-bottom: 1px solid var(--s-line); padding: 12px 8px;
}
.ds2 table.gr td, .ds2 .joseph-tabla td { border-top: 1px solid rgba(229,232,236,.7); }
.ds2 .g-total, .ds2 .totals-bar { background: var(--s-ink); border-radius: var(--s-r-card); }
.ds2 .totals-bar { padding: 18px 24px; }
/* OJO: el color de estas dos vivia en templates/partials/detalle_factura_css.html,
   que SOLO incluye Mis Facturas. Cualquier otra pantalla que usara la franja
   negra heredaba el texto negro del cuerpo y quedaba negro sobre negro — paso
   en la pantalla del cruce con Siigo. Aqui quedan, en la hoja compartida. */
.ds2 .totals-bar .t-value { display: block; font-size: 20px; font-weight: 700; color: #fff; }
.ds2 .totals-bar .t-label { display: block; font-size: 11px; color: var(--s-on-dark); }
.ds2 .g-faltas { border-radius: var(--s-r-field); }
.ds2 .ret-item { border: 1px solid var(--s-line); border-radius: var(--s-r-field); padding: 14px; }
.ds2 .ret-grid { gap: 14px; }
.ds2 .ret-total { font-size: 15px; color: var(--s-ink); }
.ds2 .detail-header h4 { font-size: 15px; font-weight: 700; color: var(--s-ink); }
.ds2 .inline-select { border: 1px solid var(--s-line); border-radius: var(--s-r-chip); font-size: 12px; padding: 7px 8px; }
.ds2 td .inline-select { font-size: 11px !important; padding: 6px 7px; }
.ds2 .inline-select:focus { border-color: var(--s-cyan); }
.ds2 .producto-inv-extra { background: var(--s-bg); border-radius: var(--s-r-chip); font-size: 11px; }
.ds2 .mult-sure { background: var(--s-blue-bg); color: var(--s-blue-tx); }
.ds2 .mult-warn { background: var(--s-amber-bg); color: var(--s-amber-tx); }
.ds2 .mult-none { background: var(--s-soft); color: var(--s-ink-3); }
.ds2 .badge-inventario { background: var(--s-soft); color: var(--s-ink-2); }
.ds2 .badge-transporte { background: var(--s-blue-bg); color: var(--s-blue-tx); }
.ds2 .badge-gasto { background: var(--s-amber-bg); color: var(--s-amber-tx); }
.ds2 .badge-servicios { background: var(--s-green-bg); color: var(--s-green-tx); }
.ds2 .badge-otro { background: var(--s-blue-bg); color: var(--s-blue-tx); }
.ds2 .btn-purple { background: var(--s-soft); color: var(--s-ink); }
.ds2 .btn-green { background: var(--s-green-tx); color: #fff; }
.ds2 .btn-gray { background: var(--s-bg); color: var(--s-ink-2); border: 1px solid var(--s-line); }
.ds2 .detail-buttons { gap: 10px; margin-top: 18px; }

/* Joseph dentro de la factura: el mismo negro, sin degradados ni sombras. */
.ds2 .btn-joseph {
    /* color: #fff es obligatorio. La regla no lo traia y el boton heredaba
       el texto casi negro del body: letra negra sobre fondo negro. */
    background: var(--s-ink); color: #fff; border: 0; box-shadow: none;
    border-radius: var(--s-r-pill);
    font-size: 12px; font-weight: 600; padding: 6px 14px 6px 6px;
}
.ds2 .btn-joseph:hover { color: #fff; }
.ds2 .btn-joseph:hover { background: var(--s-panel-dark); filter: none; }
.ds2 .joseph-card, .ds2 .jchat { border: 1px solid var(--s-line); border-radius: var(--s-r-card); }
.ds2 .joseph-card-top, .ds2 .jchat-top { background: var(--s-ink); color: #fff; }
.ds2 .joseph-card-top b, .ds2 .jchat-top b,
.ds2 .joseph-card-top strong, .ds2 .jchat-top strong { color: #fff; }
.ds2 .joseph-card-top span, .ds2 .jchat-top span { color: var(--s-on-dark); font-size: 11px; }
.ds2 .joseph-alerta { background: var(--s-amber-bg); border-bottom: 1px solid #E8A317; color: var(--s-amber-tx); font-size: 12px; }
.ds2 .joseph-rets { border-top: 1px solid var(--s-line); background: var(--s-bg); }
.ds2 .j-chip { font-size: 11px; padding: 4px 10px; border-radius: var(--s-r-pill); background: var(--s-bg); color: var(--s-ink-3); border: 1px solid var(--s-line); }
.ds2 .j-chip.on { background: var(--s-blue-bg); color: var(--s-blue-tx); border-color: var(--s-cyan); }
.ds2 .jchat-msgs { background: var(--s-bg); }

/* ============================================================
   AJUSTES FINALES DE ESTETICA
   ============================================================ */

/* ---- 1. Que las tablas respiren ---- */
.ds2 .table-card td { padding: 12px 16px; line-height: 1.45; }
.ds2 .table-card td { padding: 12px 16px; }
.ds2 .tabla-mis-facturas td:nth-child(2),
.ds2 .tabla-gastos       td:nth-child(2) { min-width: 230px; }
.ds2 .table-card th { padding: 13px 16px; }

/* ---- 2. Jerarquia de titulos (22 pantalla · 15 tarjeta · 11 rotulo) ---- */
.ds2 .card-header > span,
.ds2 .s-card-head > span { font-size: 11px; color: var(--s-ink-3); }
.ds2 .card-header h3, .ds2 .s-card-head h3, .ds2 .upload-card-header h4 { font-size: 15px; font-weight: 700; }

/* ---- 3. La fila se marca al pasar por encima ---- */
.ds2 .table-card tbody tr { transition: background .12s; }
.ds2 .table-card tbody tr:hover > td { background: var(--s-bg); }
.ds2 .table-card tbody tr.factura-detail:hover > td,
.ds2 .table-card tbody tr.nm-total:hover > td { background: inherit; }

/* ---- 4. Los botones, con una sola regla ----
   Lleno de cian = la accion principal · blanco con linea = las demas ·
   rojo = las que borran. Nada mas. */
.ds2 .btn-primary, .ds2 .upload-card-btn { background: var(--s-cyan); color: var(--s-ink); }
.ds2 .btn-primary:hover, .ds2 .upload-card-btn:hover { background: var(--s-cyan-deep); color: #fff; }
.ds2 .btn-outline, .ds2 .upload-card-btn-outline { background: #fff; border: 1px solid var(--s-line); color: var(--s-ink); }
.ds2 .btn-outline:hover, .ds2 .upload-card-btn-outline:hover { background: var(--s-bg); }
.ds2 .btn[disabled], .ds2 .btn:disabled { background: var(--s-soft); color: var(--s-ink-3); border-color: var(--s-line); }

/* ---- 5. Las pantallas vacias, con su caja ---- */
.ds2 .s-vacio-caja {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 46px 24px; text-align: center; color: var(--s-ink-3);
}
.ds2 .s-vacio-caja .ico {
    width: 52px; height: 52px; border-radius: var(--s-r-card); background: var(--s-bg);
    display: flex; align-items: center; justify-content: center; color: var(--s-ink-3); margin-bottom: 8px;
}
.ds2 .s-vacio-caja .tit { font-size: 15px; font-weight: 700; color: var(--s-ink); margin: 0; }
.ds2 .s-vacio-caja .dice { font-size: 13px; color: var(--s-ink-3); margin: 0; max-width: 380px; line-height: 1.5; }

/* ---- 6. Los filtros, separados de los datos ----
   En el Figma la barra de filtros es su propia tarjeta y sus controles van
   sobre gris, no sobre blanco: asi se distingue de la tabla de abajo. */
.ds2 .table-filters .filter-select, .ds2 .table-filters .filter-input {
    background: var(--s-bg); border-color: transparent; border-radius: var(--s-r-ico); padding: 10px 14px;
}
.ds2 .table-filters .filter-select:focus, .ds2 .table-filters .filter-input:focus {
    background: #fff; border-color: var(--s-cyan);
}

/* ---------- Estado por mes: la grafica de barras del Figma ----------
   Barra de 28 de ancho, esquina 8, fondo #EDF1F4 y lo causado en cian; el
   mes cerrado va en verde. El rotulo del mes debajo, a 10 de separacion. */
.ds2 .s-leyenda { display: flex; gap: 18px; flex-wrap: wrap; }
.ds2 .s-leyenda span { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; color: var(--s-ink-3); }
.ds2 .s-leyenda i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ds2 .s-leyenda .p-cyan  { background: var(--s-cyan); }
.ds2 .s-leyenda .p-verde { background: var(--s-green); }
.ds2 .s-leyenda .p-gris  { background: #E5E8EC; }

.ds2 .s-gráfica {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 6px; padding: 6px 2px 0; min-height: 240px;
}
.ds2 .s-mesbar { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ds2 .s-mesbar .pct { font-size: 11px; font-weight: 600; color: var(--s-ink-3); }
.ds2 .s-mesbar .barra {
    width: 28px; background: var(--s-soft); border-radius: var(--s-r-chip);
    display: flex; align-items: flex-end; overflow: hidden;
}
.ds2 .s-mesbar .barra i {
    display: block; width: 100%; background: var(--s-cyan);
    border-radius: var(--s-r-chip); transition: height .4s;
}
.ds2 .s-mesbar .barra i.is-cerrado { background: var(--s-green); }
.ds2 .s-mesbar .mes { font-size: 11px; color: var(--s-ink-3); }
.ds2 .s-mesbar:hover .pct, .ds2 .s-mesbar:hover .mes { color: var(--s-ink); font-weight: 600; }

.ds2 .s-mesbar.es-actual .mes { color: var(--s-ink); font-weight: 600; }
.ds2 .s-mesbar.es-actual .pct { color: var(--s-ink); font-weight: 700; }

/* ---------- Ultimas facturas (tarjeta del Dashboard) ---------- */
.ds2 .s-ult { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--s-line); }
.ds2 .s-ult:first-of-type { padding-top: 0; }
.ds2 .s-ult:last-of-type { border-bottom: 0; padding-bottom: 0; }
.ds2 .s-ult .ico {
    width: 32px; height: 32px; border-radius: var(--s-r-ico); background: var(--s-bg);
    display: flex; align-items: center; justify-content: center; color: var(--s-ink-2); flex: none;
}
.ds2 .s-ult .quien { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; line-height: 1.35; }
.ds2 .s-ult .quien b { font-size: 13px; font-weight: 600; color: var(--s-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds2 .s-ult .quien small { font-size: 11px; color: var(--s-ink-3); }
.ds2 .s-ult .plata { font-size: 13px; font-weight: 700; color: var(--s-ink); white-space: nowrap; }

/* Los meses sin documentos: la barra queda apenas insinuada. */
.ds2 .s-mesbar.es-vacio .barra { background: var(--s-line); opacity: .6; }
.ds2 .s-gráfica { gap: 4px; }

/* ---------- El logo ----------
   El del Figma: "sure" en blanco con la r en cian, sin el texto de abajo.
   El PNG viejo traia margen incorporado y por eso el estilo antiguo lo corria
   18 a la izquierda; el SVG no lo necesita. */
.sidebar-logo-img { width: 92px; margin-left: 0; height: auto; }
.ds2 .sidebar-logo-img { width: 78px; }
.split-logo { width: 92px; margin-left: 0; margin-bottom: 0; height: auto; }

/* ---------- Los detallitos del Figma ----------
   1. Cada icono de indicador lleva SU color, no todos gris: el documento en
      teal, el visto en verde, el reloj en ambar, la raya en gris, la varita
      de la IA en cian y la billetera en negro. */
/* Los tonos son los que el diseñador le puso a cada icono, leidos del archivo. */
.ds2 .s-kpi-ico.es-doc    { color: #007E99; }
.ds2 .s-kpi-ico.es-ok     { color: #1E9E51; }
.ds2 .s-kpi-ico.es-espera { color: #9A6B00; }
.ds2 .s-kpi-ico.es-nada   { color: #6B7280; }
.ds2 .s-kpi-ico.es-ia     { color: #007E99; }
.ds2 .s-kpi-ico.es-plata  { color: #0B1118; }

/* 2. El icono de cada factura en la tarjeta de abajo, tambien en teal. */
.ds2 .s-ult .ico { color: #007E99; }

/* 3. En el Dashboard el chip de estado va SIN punto y mas holgado (asi esta
      dibujado); el punto se queda en la tabla de Mis Facturas, que si lo trae. */
.ds2 .s-ult .s-chip { padding: 5px 10px; }
.ds2 .s-ult .s-chip::before { display: none; }

.ds2 .s-panel-oscuro .ico { color: var(--s-cyan); }

/* ---------- Ventanas flotantes de Descargar XMLs ----------
   Las dos primeras tarjetas cargaban la pantalla con todos sus pasos a la
   vista. Ahora la tarjeta queda compacta y el detalle vive aqui. */
.vt-fondo {
    display: none; position: fixed; inset: 0; z-index: 9998;
    background: rgba(11,17,24,.45); padding: 24px; overflow-y: auto;
}
.vt-fondo.abierta { display: flex; align-items: flex-start; justify-content: center; }
.vt-caja {
    background: #fff; border-radius: var(--s-r-shell); width: 100%; max-width: 640px;
    margin: auto; box-shadow: 0 16px 48px rgba(11,17,24,.25); overflow: hidden;
    font-family: 'Montserrat', sans-serif;
}
.vt-top {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 18px 22px; border-bottom: 1px solid var(--s-line);
}
.vt-top h3 { font-size: 16px; font-weight: 700; color: var(--s-ink); margin: 0; }
.vt-x {
    margin-left: auto; width: 32px; height: 32px; border-radius: var(--s-r-chip);
    background: var(--s-bg); border: 1px solid var(--s-line); color: var(--s-ink-2);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.vt-x:hover { background: var(--s-line); color: var(--s-ink); }
.vt-cuerpo { padding: 18px 22px 22px; }
.vt-cuerpo .dpaso:first-child { margin-top: 0; }

/* El pie de las dos tarjetas compactas */
.ds2 .uc-pie { display: flex; flex-direction: column; gap: 10px; }
.ds2 .uc-estado { font-size: 12px; color: var(--s-ink-3); }
.ds2 .uc-estado b { color: var(--s-ink); }
@media (max-width: 640px) {
    .vt-fondo { padding: 12px; }
    .vt-cuerpo { padding: 14px 16px 18px; }
}

/* El pie de la tarjeta de facturas lleva dos acciones: traer el listado
   (abre la ventana) y subir los ZIP, que es lo que mas se usa y por eso
   queda a la vista, no escondido. */
.ds2 .uc-pie #zip-form { margin: 0; }
.ds2 .uc-pie .drop-zone { padding: 10px; }
.ds2 .uc-pie .upload-card-btn { white-space: nowrap; }

/* ---------- La ventana flotante, con mas color ----------
   Todo sale de la paleta: el encabezado en negro #0B1118, el numero del paso
   en cian, los datos para copiar como pastilla azul de documento, y cada paso
   separado del anterior por una linea. */
.vt-caja { box-shadow: 0 20px 60px rgba(11,17,24,.3); }
.vt-top {
    background: #0B1118; border-bottom: 0; padding: 20px 24px;
}
.vt-top h3 { color: #fff; font-size: 17px; }
.vt-x {
    background: #22272E; border-color: transparent; color: #9CA6B0;
}
.vt-x:hover { background: #00D4FF; color: #0B1118; }
.vt-cuerpo { padding: 6px 24px 24px; }

/* Cada paso: linea arriba y mas aire */
.vt-cuerpo .dpaso {
    margin: 0; padding: 18px 0 8px; border-top: 1px solid #E5E8EC; gap: 10px;
}
.vt-cuerpo .dpaso:first-of-type { border-top: 0; }
.vt-cuerpo .dpaso-num {
    width: 24px; height: 24px; font-size: 12px; font-weight: 800;
    background: #00D4FF; color: #0B1118;
}
.vt-cuerpo .dpaso b { font-size: 14px; color: #0B1118; }

/* Las letras chicas de adentro, un punto mas grandes */
.vt-cuerpo [style*="font-size:11px"] { font-size: 12px !important; }
.vt-cuerpo .drop-hint { font-size: 12px; }

/* Los datos para copiar: pastilla azul de documento, no un recuadro gris */
.vt-cuerpo code {
    background: #E3F0FB !important; color: #0B6BB5 !important;
    border: 1px solid #CFE4F6 !important; font-weight: 700;
    padding: 3px 9px !important; border-radius: 7px !important;
}
.vt-cuerpo code:hover { background: #0B6BB5 !important; color: #fff !important; }
.vt-cuerpo a[target="_blank"] { color: #007E99 !important; text-decoration: underline; }

/* Campos y botones del paso 2 y 3 */
.vt-cuerpo input[type="text"], .vt-cuerpo input[type="date"] {
    font-size: 13px !important; padding: 11px 13px !important;
    border: 1px solid #E5E8EC !important; border-radius: 10px !important;
    font-family: 'Montserrat', sans-serif; color: #0B1118;
}
.vt-cuerpo input[type="text"]:focus, .vt-cuerpo input[type="date"]:focus {
    outline: 2px solid #00D4FF; outline-offset: -2px; border-color: #00D4FF !important;
}
.vt-cuerpo .btn-sm { font-size: 13px !important; padding: 11px 16px !important; }
.vt-cuerpo .btn-primary { background: #00D4FF; color: #0B1118; }
.vt-cuerpo .btn-primary:hover { background: #007E99; color: #fff; }
/* "Guardar link" es la accion del paso 2: va en cian, no en contorno */
.vt-cuerpo form[action*="dian/token"] .btn-outline {
    background: #00D4FF; border-color: #00D4FF; color: #0B1118;
}
.vt-cuerpo form[action*="dian/token"] .btn-outline:hover { background: #007E99; border-color: #007E99; color: #fff; }
.vt-cuerpo form[action*="token-correo"] .btn-outline { background: #fff; border-color: #E5E8EC; color: #0B1118; }

/* La nota del final de cada paso, sobre gris para que se lea como aclaracion */
.vt-cuerpo .vt-nota {
    background: #F7F8FA; border-radius: 10px; padding: 10px 12px; margin-top: 8px;
    font-size: 12px; color: #4B5563; line-height: 1.5;
}

/* Las dos acciones de la tarjeta de facturas, mitad y mitad en el mismo
   renglon: asi la tarjeta queda del alto de la de al lado. */
.ds2 .uc-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.ds2 .uc-acciones > * { margin: 0; min-width: 0; }
.ds2 .uc-acciones > .upload-card-btn { height: 100%; }
.ds2 .uc-acciones #zip-form { display: flex; }
.ds2 .uc-acciones .drop-zone {
    flex-direction: column; gap: 4px; justify-content: center; width: 100%; padding: 7px 8px;
}
.ds2 .uc-acciones .drop-zone .upload-card-btn { width: 100%; }
.ds2 .uc-acciones .drop-hint { font-size: 11px; }
@media (max-width: 760px) { .ds2 .uc-acciones { grid-template-columns: 1fr; } }

/* Los dos botones, exactamente iguales y alineados con el de la tarjeta de al
   lado. El recuadro punteado solo aparece mientras se arrastra un archivo. */
/* Sin borde: un borde transparente corre el boton 1,5 y lo desalinea del de
   al lado. La senal de arrastrar se dibuja por fuera, con outline. */
.ds2 .uc-acciones .drop-zone {
    border: 0; background: transparent; padding: 0;
    flex-direction: row; gap: 0; align-items: stretch;
}
.ds2 .uc-acciones .drop-zone.dragover {
    outline: 2px dashed var(--s-cyan); outline-offset: 3px; border-radius: var(--s-r-btn);
}
.ds2 .uc-acciones > .upload-card-btn,
.ds2 .uc-acciones .drop-zone .upload-card-btn { height: 46px; padding: 12px 16px; }
.ds2 .uc-pie > .drop-hint { font-size: 11px; color: var(--s-ink-3); text-align: center; }
.ds2 .uc-pie { gap: 8px; }
.ds2 .uc-estado { min-height: 20px; display: flex; align-items: center; }
/* La tarjeta del buzon: su boton a la misma altura que los de la izquierda. */
.ds2 .uc-pie > .upload-card-btn { height: 46px; }

/* Las dos tarjetas de abajo, con la misma regla que las de arriba: dos
   acciones del mismo tamaño en un renglon, a 46 de alto. */
.ds2 .uc-acciones form { display: flex; margin: 0; }
.ds2 .uc-acciones form > .upload-card-btn,
.ds2 .uc-acciones > a.upload-card-btn { width: 100%; height: 46px; padding: 12px 16px; }
/* El Excel: el boton ocupa casi todo y la equis de borrar va al final, cuadrada. */
.ds2 .uc-excel { grid-template-columns: 1fr 46px; }
.ds2 .uc-excel .upload-card-btn-danger {
    width: 46px; height: 46px; padding: 0; border-radius: var(--s-r-btn);
    display: flex; align-items: center; justify-content: center;
}
.ds2 .uc-excel form:first-child { grid-column: 1; }

/* Los numeros de las cuatro tarjetas: mismo sitio, mismo tamaño, mismo color.
   Antes el del buzon iba metido dentro de una frase y se veia distinto. */
.ds2 .upload-card-count {
    margin-left: auto; align-self: flex-start; font-size: 26px; font-weight: 700;
    line-height: 1.1; color: var(--s-ink) !important; white-space: nowrap;
}
/* Los cuatro iconos de tarjeta, del mismo grosor aparente: todos en rejilla
   de 24 con trazo 1,5 (uno venia en rejilla de 15 y se veia un tercio mas grueso). */
.ds2 .upload-card-icon svg { width: 20px; height: 20px; stroke-width: 1.5; }

/* ---------- Los avisos ----------
   Venian con los colores viejos (#fffbeb, #fde68a) y con el icono como un
   circulo RELLENO del mismo tono de la letra: el "!" quedaba invisible y se
   veia un borron. Ahora: fondo suave de la paleta, una barra de color a la
   izquierda en vez de borde entero, y el icono como circulo de contorno. */
.ds2 .alert {
    border: 0; border-left: 3px solid transparent; border-radius: var(--s-r-field);
    padding: 13px 16px; gap: 11px; align-items: flex-start;
}
.ds2 .alert strong { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.ds2 .alert > div span { font-size: 12px; color: var(--s-ink-2); line-height: 1.5; }
.ds2 .alert-icon {
    width: 20px; height: 20px; flex: none; margin-top: 1px;
    background: transparent !important; border: 1.5px solid currentColor;
    font-size: 12px; font-weight: 700; line-height: 1;
}
.ds2 .alert-yellow { background: #FFF6E0; border-left-color: #E8A317; color: #916500; }
.ds2 .alert-red    { background: #FBEAEA; border-left-color: #E5484D; color: #C0392B; }
.ds2 .alert-green  { background: #E4F6EC; border-left-color: #22B95C; color: #187D40; }

/* ============================================================
   LA TABLA DE DESCARGAR XMLS
   Once columnas en 1141: las de un chulito van angostas, el proveedor se
   queda con lo que sobra, y la fila se aprieta para que quepan mas facturas
   sin bajar de 11 la letra (que es el minimo del Figma).
   ============================================================ */
.ds2 .tabla-descargar { table-layout: fixed; width: 100%; min-width: 1040px; }

/* --- anchos: 36+44+44+100+82+auto+92+118+96+118+180 --- */
.ds2 .tabla-descargar th:nth-child(1),  .ds2 .tabla-descargar td:nth-child(1)  { width: 36px; }
.ds2 .tabla-descargar th:nth-child(2),  .ds2 .tabla-descargar td:nth-child(2),
.ds2 .tabla-descargar th:nth-child(3),  .ds2 .tabla-descargar td:nth-child(3)  { width: 44px; text-align: center; }
.ds2 .tabla-descargar th:nth-child(4),  .ds2 .tabla-descargar td:nth-child(4)  { width: 100px; }
.ds2 .tabla-descargar th:nth-child(5),  .ds2 .tabla-descargar td:nth-child(5)  { width: 92px; white-space: nowrap; }
.ds2 .tabla-descargar th:nth-child(6),  .ds2 .tabla-descargar td:nth-child(6)  { width: auto; overflow-wrap: anywhere; }
.ds2 .tabla-descargar th:nth-child(7),  .ds2 .tabla-descargar td:nth-child(7)  { width: 92px; }
.ds2 .tabla-descargar th:nth-child(8),  .ds2 .tabla-descargar td:nth-child(8)  { width: 118px; }
.ds2 .tabla-descargar th:nth-child(9),  .ds2 .tabla-descargar td:nth-child(9)  { width: 96px; white-space: nowrap; }
.ds2 .tabla-descargar th:nth-child(10), .ds2 .tabla-descargar td:nth-child(10) { width: 150px; padding-left: 8px; padding-right: 8px; }
.ds2 .tabla-descargar th:nth-child(11), .ds2 .tabla-descargar td:nth-child(11) { width: 196px; }
/* 196 y no 180: con una factura trasladada la fila lleva "Elim. traslado" + "No
   aplica", que piden 165; con 180 se salian. Venia asi de antes, se vio al probar
   con una trasladada (hoy no hay ninguna en la base, por eso no se notaba). */

/* --- la fila, mas apretada: el relleno es lo que la hacia alta --- */
.ds2 .tabla-descargar th { padding: 9px 10px; font-size: 11px; }
.ds2 .tabla-descargar td { padding: 7px 10px; font-size: 11.5px; color: var(--s-ink-2); line-height: 1.35;
                           vertical-align: middle; }
.ds2 .tabla-descargar td:nth-child(6) { font-size: 12px; font-weight: 600; color: var(--s-ink); }
.ds2 .tabla-descargar td:nth-child(7) code {
    font-size: 11px; color: var(--s-ink-3); background: none; padding: 0;
    font-family: 'Montserrat', sans-serif;
}
.ds2 .tabla-descargar td:nth-child(8) strong { font-size: 11.5px; font-weight: 600; color: var(--s-ink); }
.ds2 .tabla-descargar td:nth-child(9) { font-size: 12px; font-weight: 700; color: var(--s-ink); }

/* --- la pastilla del tipo: que "electronica" quepa y no se salga --- */
.ds2 .tabla-descargar td:nth-child(4) { padding-left: 8px; padding-right: 8px; }
.ds2 .tabla-descargar td:nth-child(4) .badge-doc {
    /* flex + min-height: la pastilla mide igual lleve uno o dos renglones,
       asi todas las filas de la tabla quedan a la misma altura */
    display: flex; align-items: center; justify-content: center;
    width: 100%; box-sizing: border-box; min-height: 32px;
    font-size: 9.5px !important; font-weight: 500; padding: 4px 5px;
    /* se parte en dos renglones: el nombre completo importa (factura / nota credito) */
    white-space: normal; overflow-wrap: break-word; hyphens: none;
    line-height: 1.25; text-align: center;
}
/* --- las pastillas de estado y los botones, a tono con la fila --- */
.ds2 .tabla-descargar td:nth-child(10) .badge { font-size: 10.5px !important; padding: 4px 8px; white-space: nowrap; }
.ds2 .tabla-descargar td:nth-child(11) { padding-left: 8px; padding-right: 8px; white-space: nowrap; }
.ds2 .tabla-descargar td:nth-child(11) .action-btns { gap: 5px; }
.ds2 .tabla-descargar td:nth-child(11) .btn {
    font-size: 10.5px !important; padding: 6px 9px !important; min-height: 0;
    border-radius: var(--s-r-chip);
}
.ds2 .tabla-descargar .check-green, .ds2 .tabla-descargar .check-blue,
.ds2 .tabla-descargar .check-empty { font-size: 0; }
.ds2 .tabla-descargar .ic { width: 13px; height: 13px; }

/* =====================================================================
   LA RECETA COMPARTIDA DE LAS TABLAS SECUNDARIAS  (.tabla-sure)
   Mismas medidas que .tabla-descargar — th 9/10 letra 11, td 7/10 letra
   11,5, fila de 46 — pero en su propio bloque, para que la tabla grande
   que ya esta aprobada no se toque. Cada tabla ademas lleva su clase
   propia (tbl-soportes, tbl-esperando, tbl-descartados, tbl-papelera)
   con los anchos de sus columnas: sin anchos el navegador reparte mal y
   deja la columna del remitente tan angosta que corta el correo.
   ===================================================================== */
.ds2 .tabla-sure { table-layout: fixed; width: 100%; }
/* Ancho minimo, igual que la tabla grande: en pantalla angosta la tarjeta
   se desliza de lado en vez de aplastar las columnas. Es la suma de las
   columnas fijas mas lo que necesita la que crece. */
.ds2 .tbl-soportes    { min-width: 960px; }
.ds2 .tbl-esperando   { min-width: 1150px; }
.ds2 .tbl-descartados { min-width: 900px; }
.ds2 .tbl-papelera    { min-width: 880px; }
.ds2 .table-card .tabla-sure th {
    padding: 9px 10px; font-size: 11px; font-weight: 600;
    color: var(--s-ink-3); letter-spacing: .44px; background: #fff;
}
.ds2 .table-card .tabla-sure td {
    padding: 7px 10px; font-size: 11.5px; color: var(--s-ink-2);
    line-height: 1.35; vertical-align: middle; overflow-wrap: break-word;
}
.ds2 .tabla-sure td strong { font-size: 11.5px; font-weight: 600; color: var(--s-ink); }
.ds2 .tabla-sure .t-sub { display: block; font-size: 10.5px; color: var(--s-ink-3); line-height: 1.3; }
.ds2 .tabla-sure .ic { width: 13px; height: 13px; }
.ds2 .tabla-sure .t-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds2 .tabla-sure .t-centro { text-align: center; }
.ds2 .tabla-sure .t-nowrap { white-space: nowrap; }
.ds2 .tabla-sure .t-tenue { color: var(--s-ink-3); }
.ds2 .tabla-sure .t-tarde { color: var(--s-red-tx); font-weight: 600; }
.ds2 .tabla-sure .t-corta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- los botones de la fila: todos del mismo tamano y ninguno subrayado --- */
.ds2 .tabla-sure td form { display: inline; margin: 0; }
.ds2 .tabla-sure .fila-acciones {
    display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: center;
}
.ds2 .tabla-sure .fila-acciones .btn {
    /* alto fijo de 28: con letras de 10,5 y de 11 mezcladas los botones
       quedaban desparejos por 1,3px y se notaba */
    width: auto; min-width: 0; height: 28px; min-height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10.5px; padding: 0 10px; line-height: 1;
    white-space: nowrap; text-decoration: none; border-radius: var(--s-r-chip);
}
/* la accion principal de la fila: cian, pero de borde, como la tabla grande */
.ds2 .tabla-sure .fila-acciones .btn-principal {
    background: #fff; color: var(--s-cyan-deep); border: 1px solid var(--s-cyan); font-weight: 600;
}
.ds2 .tabla-sure .fila-acciones .btn-principal:hover { background: var(--s-blue-bg); }
.ds2 .tabla-sure .fila-acciones .btn-apagado { color: var(--s-ink-3); }
/* "Validar" copiado de la pastilla "Contabilizado" de la tabla grande:
   mismo verde, misma letra 11 grueso 600, misma esquina 20 y mismo
   relleno 5/8. Sin el puntito, porque ahi el punto dice "estado" y esto
   es un boton. */
.ds2 .tabla-sure .fila-acciones .btn-validar {
    background: var(--s-green-bg); color: var(--s-green-tx); border: 1px solid transparent;
    border-radius: var(--s-r-pill); padding: 0 12px;
    font-size: 11px; font-weight: 600; letter-spacing: 0;
}
.ds2 .tabla-sure .fila-acciones .btn-validar:hover {
    background: var(--s-green-tx); color: #fff; border-color: var(--s-green-tx);
}
/* el boton del documento, igual al PDF de la tabla grande */
.ds2 .tabla-sure .fila-acciones .btn-doc { color: var(--s-red-tx); }
.ds2 .tabla-sure .fila-acciones .btn-ok {
    background: var(--s-green-tx); color: #fff; border: 1px solid var(--s-green-tx); font-weight: 600;
}
.ds2 .tabla-sure .fila-acciones .btn-ok:hover { background: var(--s-green-h); border-color: var(--s-green-h); }

/* --- Fotos y PDF por validar --- */
.ds2 .tbl-soportes th:nth-child(1), .ds2 .tbl-soportes td:nth-child(1) { width: 36px; }
.ds2 .tbl-soportes th:nth-child(2), .ds2 .tbl-soportes td:nth-child(2) { width: 84px; }
.ds2 .tbl-soportes th:nth-child(3), .ds2 .tbl-soportes td:nth-child(3) { width: 270px; }
.ds2 .tbl-soportes th:nth-child(4), .ds2 .tbl-soportes td:nth-child(4) { width: auto; }
.ds2 .tbl-soportes th:nth-child(5), .ds2 .tbl-soportes td:nth-child(5) { width: 84px; }
.ds2 .tbl-soportes th:nth-child(6), .ds2 .tbl-soportes td:nth-child(6) { width: 226px; }

/* --- Esperando factura --- */
.ds2 .tbl-esperando th:nth-child(1), .ds2 .tbl-esperando td:nth-child(1) { width: 82px; }
.ds2 .tbl-esperando th:nth-child(2), .ds2 .tbl-esperando td:nth-child(2) { width: 160px; }
.ds2 .tbl-esperando th:nth-child(3), .ds2 .tbl-esperando td:nth-child(3) { width: auto; }
.ds2 .tbl-esperando th:nth-child(4), .ds2 .tbl-esperando td:nth-child(4) { width: 104px; }
.ds2 .tbl-esperando th:nth-child(5), .ds2 .tbl-esperando td:nth-child(5) { width: 200px; }
.ds2 .tbl-esperando th:nth-child(6), .ds2 .tbl-esperando td:nth-child(6) { width: 390px; }

/* --- Descartados --- */
.ds2 .tbl-descartados th:nth-child(1), .ds2 .tbl-descartados td:nth-child(1) { width: 34px; }
.ds2 .tbl-descartados th:nth-child(2), .ds2 .tbl-descartados td:nth-child(2) { width: 90px; }
.ds2 .tbl-descartados th:nth-child(3), .ds2 .tbl-descartados td:nth-child(3) { width: 270px; }
.ds2 .tbl-descartados th:nth-child(4), .ds2 .tbl-descartados td:nth-child(4) { width: auto; }
.ds2 .tbl-descartados th:nth-child(5), .ds2 .tbl-descartados td:nth-child(5) { width: 222px; }

/* --- Papelera --- */
.ds2 .tbl-papelera th:nth-child(1), .ds2 .tbl-papelera td:nth-child(1) { width: 36px; }
.ds2 .tbl-papelera th:nth-child(2), .ds2 .tbl-papelera td:nth-child(2) { width: 150px; }
.ds2 .tbl-papelera th:nth-child(3), .ds2 .tbl-papelera td:nth-child(3) { width: auto; }
.ds2 .tbl-papelera th:nth-child(4), .ds2 .tbl-papelera td:nth-child(4) { width: 96px; }
.ds2 .tbl-papelera th:nth-child(5), .ds2 .tbl-papelera td:nth-child(5) { width: 112px; }
.ds2 .tbl-papelera th:nth-child(6), .ds2 .tbl-papelera td:nth-child(6) { width: 96px; }
.ds2 .tbl-papelera th:nth-child(7), .ds2 .tbl-papelera td:nth-child(7) { width: 126px; }

/* ===== El cabezote de Mis Facturas, como el del Figma =====================
   Renglon 1 el titulo solo; renglon 2 las cifras del mes a la izquierda y el
   periodo con sus dos acciones a la derecha; renglon 3 los filtros, con los
   dos controles que el Figma no trae pegados a la derecha. */
.ds2 .s-barra-mes {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.ds2 .s-barra-mes .s-cifra { font-size: 13px; font-weight: 700; color: var(--s-ink); white-space: nowrap; }
.ds2 .s-barra-mes .s-cifra span { font-weight: 500; color: var(--s-ink-3); }
.ds2 .s-barra-mes .badge { font-size: 11.5px; }
.ds2 .s-barra-mes .s-acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds2 .s-filtro-der { margin-left: auto; color: var(--s-ink-2); }

/* La tirita de "estas viendo como": clara, con linea, sin sombra */
.s-viendo-como {
    position: fixed; top: 0; left: 0; right: 0; z-index: 9998;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 9px 20px; background: #E3F0FB; border-bottom: 1px solid #C9E0F4;
    color: #0B6BB5; font-family: 'Montserrat', sans-serif; font-size: 12px;
}
.s-viendo-como strong { color: #0B1118; font-size: 12.5px; }
.s-viendo-como .ic { flex: none; }
.s-viendo-volver { margin-left: 8px; display: flex; }
.s-viendo-volver button {
    display: inline-flex; align-items: center; gap: 5px;
    background: #fff; color: #0B6BB5; border: 1px solid #C9E0F4; border-radius: 20px;
    padding: 5px 12px; font-size: 11px; font-weight: 600; cursor: pointer;
    font-family: 'Montserrat', sans-serif;
}
.s-viendo-volver button:hover { background: #0B6BB5; color: #fff; border-color: #0B6BB5; }

/* La ventana de "procesando" de base.html vive fuera de .ds2, asi que se
   ajusta por el body. El porcentaje salia en el cian VIEJO sobre blanco:
   contraste 1,62, no se leia justo mientras la app esta trabajando. */
.ds2-pagina .processing-pct { color: var(--s-cyan-deep); }
.ds2-pagina .processing-fill { background: var(--s-cyan); }
.ds2-pagina .processing-bar { background: var(--s-soft); }
.ds2-pagina .processing-card {
    border-radius: var(--s-r-card); border: 1px solid var(--s-line); box-shadow: none;
}
.ds2-pagina .processing-text { color: var(--s-ink); }

/* ===== El resumen del mes: una sola caja negra ==========================
   Las pastillas traen su propio fondo claro, asi que se leen igual sobre el
   negro. Lo que va suelto sobre el negro usa --s-on-dark. */
.ds2 .totals-bar.s-mes { display: block; padding: 0; }
.ds2 .s-mes-cifras { display: flex; flex-wrap: wrap; gap: 16px; padding: 18px 24px; }
.ds2 .s-mes-cifras .t-item { flex: 1 1 160px; min-width: 0; }
.ds2 .s-mes-detalle,
.ds2 .s-mes-dian {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 12px 24px; border-top: 1px solid var(--s-panel-dark);
    font-size: 12px; color: var(--s-on-dark); line-height: 1.5;
}
.ds2 .s-mes-detalle:empty, .ds2 .s-mes-dian:empty { display: none; }
.ds2 .s-mes-rotulo { color: var(--s-on-dark); }
.ds2 .s-mes-dian b { color: #fff; }
.ds2 .s-mes-dian a { color: var(--s-cyan); font-weight: 700; text-decoration: none; }
.ds2 .s-mes-dian a:hover { text-decoration: underline; }
.ds2 .s-mes-alerta { color: var(--s-amber); }
.ds2 .s-mes-alerta b { color: var(--s-amber); }
.ds2 .s-mes-detalle .badge { font-size: 11px; }
.ds2 .s-mes-auditar {
    margin-left: auto; width: auto; font-size: 11px; padding: 6px 12px; height: auto;
    color: #fff; background: transparent; border: 1px solid var(--s-ink-3);
}
.ds2 .s-mes-auditar:hover { background: var(--s-panel-dark); color: #fff; border-color: var(--s-on-dark); }

/* ===== La vista del cruce con el auxiliar de Siigo =====================
   Usa la receta .tabla-sure; aqui solo van los anchos de cada tabla y la
   tira de avisos. Los anchos dejan UNA columna sin medida (el proveedor),
   que es la que se queda con lo que sobre. */
.ds2 .tbl-sg-meses   { min-width: 1240px; }
.ds2 .tbl-sg-cruce   { min-width: 1270px; }
.ds2 .tbl-sg-sueltas { min-width: 1080px; }
.ds2 .tbl-sg-app     { min-width: 1050px; }

/* Ocho columnas de cifras a 130 = 1040; el min-width de 1240 le deja 200 al
   nombre del mes. Si se suma otra columna hay que subir las dos cifras, o el
   mes se queda sin ancho y el nombre se monta sobre la columna de al lado. */
.ds2 .tbl-sg-meses th:nth-child(n+2), .ds2 .tbl-sg-meses td:nth-child(n+2) { width: 130px; }

.ds2 .tbl-sg-cruce th:nth-child(1), .ds2 .tbl-sg-cruce td:nth-child(1) { width: 130px; }
.ds2 .tbl-sg-cruce th:nth-child(2), .ds2 .tbl-sg-cruce td:nth-child(2) { width: 140px; }
.ds2 .tbl-sg-cruce th:nth-child(3), .ds2 .tbl-sg-cruce td:nth-child(3) { width: auto; }
.ds2 .tbl-sg-cruce th:nth-child(4), .ds2 .tbl-sg-cruce td:nth-child(4) { width: 92px; }
.ds2 .tbl-sg-cruce th:nth-child(5), .ds2 .tbl-sg-cruce td:nth-child(5) { width: 120px; }
.ds2 .tbl-sg-cruce th:nth-child(6), .ds2 .tbl-sg-cruce td:nth-child(6) { width: 120px; }
.ds2 .tbl-sg-cruce th:nth-child(7), .ds2 .tbl-sg-cruce td:nth-child(7) { width: 110px; }
.ds2 .tbl-sg-cruce th:nth-child(8), .ds2 .tbl-sg-cruce td:nth-child(8) { width: 150px; }
.ds2 .tbl-sg-cruce th:nth-child(9), .ds2 .tbl-sg-cruce td:nth-child(9) { width: 170px; }

.ds2 .tbl-sg-sueltas th:nth-child(1), .ds2 .tbl-sg-sueltas td:nth-child(1) { width: 130px; }
.ds2 .tbl-sg-sueltas th:nth-child(2), .ds2 .tbl-sg-sueltas td:nth-child(2) { width: 140px; }
.ds2 .tbl-sg-sueltas th:nth-child(3), .ds2 .tbl-sg-sueltas td:nth-child(3) { width: auto; }
.ds2 .tbl-sg-sueltas th:nth-child(4), .ds2 .tbl-sg-sueltas td:nth-child(4) { width: 92px; }
.ds2 .tbl-sg-sueltas th:nth-child(5), .ds2 .tbl-sg-sueltas td:nth-child(5) { width: 112px; }
.ds2 .tbl-sg-sueltas th:nth-child(6), .ds2 .tbl-sg-sueltas td:nth-child(6) { width: 100px; }
.ds2 .tbl-sg-sueltas th:nth-child(7), .ds2 .tbl-sg-sueltas td:nth-child(7) { width: 104px; }
.ds2 .tbl-sg-sueltas th:nth-child(8), .ds2 .tbl-sg-sueltas td:nth-child(8) { width: 120px; }

.ds2 .tbl-sg-app th:nth-child(1), .ds2 .tbl-sg-app td:nth-child(1) { width: 150px; }
.ds2 .tbl-sg-app th:nth-child(2), .ds2 .tbl-sg-app td:nth-child(2) { width: auto; }
.ds2 .tbl-sg-app th:nth-child(3), .ds2 .tbl-sg-app td:nth-child(3) { width: 92px; }
.ds2 .tbl-sg-app th:nth-child(4), .ds2 .tbl-sg-app td:nth-child(4) { width: 120px; }
.ds2 .tbl-sg-app th:nth-child(5), .ds2 .tbl-sg-app td:nth-child(5) { width: 150px; }
.ds2 .tbl-sg-app th:nth-child(6), .ds2 .tbl-sg-app td:nth-child(6) { width: 190px; }

/* La tira de avisos del lector: ambar, con linea, sin sombra */
.ds2 .s-aviso-revisar {
    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px;
    padding: 12px 16px; border: 1px solid var(--s-amber);
    background: var(--s-amber-bg); color: var(--s-amber-tx);
    border-radius: var(--s-r-card); font-size: 12px; line-height: 1.5;
}
.ds2 .s-aviso-revisar .ic { flex: none; margin-top: 1px; }
.ds2 .s-aviso-revisar p { margin: 0 0 4px; }
.ds2 .s-aviso-revisar p:last-child { margin-bottom: 0; }

.ds2 .tbl-sg-probables { min-width: 1310px; }
.ds2 .tbl-sg-probables th:nth-child(1), .ds2 .tbl-sg-probables td:nth-child(1) { width: 40px; }
.ds2 .tbl-sg-probables th:nth-child(2), .ds2 .tbl-sg-probables td:nth-child(2) { width: 130px; }
.ds2 .tbl-sg-probables th:nth-child(3), .ds2 .tbl-sg-probables td:nth-child(3) { width: 140px; }
.ds2 .tbl-sg-probables th:nth-child(4), .ds2 .tbl-sg-probables td:nth-child(4) { width: 140px; }
.ds2 .tbl-sg-probables th:nth-child(5), .ds2 .tbl-sg-probables td:nth-child(5) { width: auto; }
.ds2 .tbl-sg-probables th:nth-child(6), .ds2 .tbl-sg-probables td:nth-child(6) { width: 92px; }
.ds2 .tbl-sg-probables th:nth-child(7), .ds2 .tbl-sg-probables td:nth-child(7) { width: 130px; }
.ds2 .tbl-sg-probables th:nth-child(8), .ds2 .tbl-sg-probables td:nth-child(8) { width: 250px; }
.ds2 .tbl-sg-probables th:nth-child(9), .ds2 .tbl-sg-probables td:nth-child(9) { width: 170px; }

/* ===== El detalle de una pareja ======================================
   Se abre dando clic en la fila y muestra las mismas cifras de los dos
   lados, para decidir si se aprueba. La fila del detalle es una fila mas
   de la tabla, con colspan: por eso NO le aplican los anchos de arriba. */
.ds2 .sg-fila { cursor: pointer; }
.ds2 .sg-fila:hover { background: var(--s-soft); }
.ds2 .sg-caret {
    display: inline-block; width: 0; height: 0; margin-right: 7px;
    vertical-align: middle; transition: transform .15s ease;
    border-left: 5px solid var(--s-ink-3);
    border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.ds2 .sg-abierta .sg-caret { transform: rotate(90deg); }
.ds2 .sg-abierta { background: var(--s-soft); }
.ds2 .sg-hecha td { opacity: .72; }
.ds2 .sg-chulo { color: var(--s-green-tx); font-size: 14px; font-weight: 700; }

.ds2 .sg-det > td { padding: 0 !important; background: var(--s-soft); }
.ds2 .sg-det-caja {
    padding: 16px 18px; border-left: 3px solid var(--s-cyan-deep);
    background: var(--s-card); margin: 0 0 1px 0;
}
.ds2 .sg-det-lados { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; max-width: 980px; }
.ds2 .sg-det-lado {
    flex: 1 1 280px; min-width: 260px; padding: 10px 12px;
    border: 1px solid var(--s-line); border-radius: var(--s-r-chip);
    background: var(--s-bg);
}
.ds2 .sg-det-lado.sg-det-siigo { border-color: var(--s-blue-tx); background: var(--s-blue-bg); }
.ds2 .sg-det-tit {
    display: block; font-size: 10px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; color: var(--s-ink-3); margin-bottom: 3px;
}
.ds2 .sg-det-lado strong { display: block; font-size: 13px; color: var(--s-ink); }
.ds2 .sg-det-lado em {
    display: block; font-style: normal; font-size: 11px;
    color: var(--s-ink-2); line-height: 1.45;
}
.ds2 .sg-det-cifras { width: 100%; max-width: 560px; border-collapse: collapse; }
.ds2 .sg-det-cifras th {
    font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
    color: var(--s-ink-3); padding: 4px 10px; border-bottom: 1px solid var(--s-line);
    background: transparent; text-align: left;
}
.ds2 .sg-det-cifras th.t-num, .ds2 .sg-det-cifras td.t-num { text-align: right; }
.ds2 .sg-det-cifras td {
    font-size: 12px; color: var(--s-ink); padding: 5px 10px;
    border-bottom: 1px solid var(--s-line-suave); white-space: nowrap;
}
.ds2 .sg-det-cifras tr:last-child td { font-weight: 700; border-bottom: none; }
.ds2 .sg-det-cifras tr.sg-ojo td { background: var(--s-amber-bg); color: var(--s-amber-tx); }
.ds2 .sg-det-nota {
    margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--s-ink-3);
    max-width: 680px;
}
/* El aviso de que el comprobante no se puede enviar todavia. No es un error:
   el comprobante esta bien: lo que falta es destrabar algo en Siigo. */
.ds2 .nc-frenada {
    display: flex; align-items: flex-start; gap: 9px; margin-top: 9px;
    padding: 10px 12px; border: 1px solid var(--s-amber);
    background: var(--s-amber-bg); border-radius: var(--s-r-chip);
    font-size: 11.5px; line-height: 1.5; color: var(--s-ink-2);
}
.ds2 .nc-frenada .ic { flex: none; margin-top: 1px; color: var(--s-amber-tx); }

/* La nota del descuento: se resalta porque explica una diferencia que el
   contador ya vio con sus propios ojos y necesita entender. */
.ds2 .sg-det-nota.sg-det-dcto {
    padding: 8px 11px; border-left: 3px solid var(--s-amber);
    background: var(--s-amber-bg); color: var(--s-ink-2); border-radius: var(--s-r-chip);
}

/* El boton de ver el PDF: en el detalle que compara las cifras y en la lista
   de "Faltan por causar". Discreto, para que no compita con los datos, pero
   a la mano: es donde el contador esta parado cuando ve una diferencia. */
.ds2 .sg-ver-pdf {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
    padding: 3px 9px; border: 1px solid var(--s-line); border-radius: var(--s-r-pill);
    background: var(--s-card); color: var(--s-red-tx);
    font-size: 11px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.ds2 .sg-ver-pdf:hover { border-color: var(--s-red-tx); background: var(--s-soft); }
.ds2 td.t-centro .sg-ver-pdf { margin-top: 0; }

/* La listica para relacionar a mano un documento suelto de Siigo con una
   factura que falta por causar. Al lado muestra la diferencia de plata y el
   PDF de la escogida, para decidir viendo las cifras y no a ciegas. */
.ds2 .sg-rel-th { min-width: 300px; }
.ds2 td.sg-rel { min-width: 300px; white-space: normal; }
.ds2 .sg-rel-sel {
    width: 100%; max-width: 330px; padding: 5px 8px;
    border: 1px solid var(--s-line); border-radius: var(--s-r-chip);
    background: var(--s-card); color: var(--s-ink);
    font-family: 'Montserrat', sans-serif; font-size: 11.5px; cursor: pointer;
}
.ds2 .sg-rel-sel:focus { outline: none; border-color: var(--s-cyan); }
.ds2 .sg-rel-info {
    display: block; margin-top: 4px; font-size: 11px; color: var(--s-ink-3);
    line-height: 1.4;
}
.ds2 .sg-rel-info a { color: var(--s-red-tx); font-weight: 600; text-decoration: none; }
.ds2 .sg-rel-info a:hover { text-decoration: underline; }
.ds2 .sg-rel-dif { color: var(--s-amber-tx); }
.ds2 .sg-rel-ok { color: var(--s-green-tx); font-weight: 600; }

/* "¿Lo causaron en otro mes?" — el caso de la contabilidad atrasada: la
   factura es de enero pero el contador anterior la causo en el febrero de
   Siigo. El panel se abre debajo de la fila y muestra los documentos del
   mismo proveedor que quedaron sueltos en los otros meses. */
.ds2 .sg-om-abrir { width: auto; font-size: 11px; white-space: nowrap; }
.ds2 .sg-om-abrir.sg-om-abierto { border-color: var(--s-cyan); color: var(--s-cyan-deep); }
.ds2 .sg-om-fila > td { padding: 0 !important; background: var(--s-soft); }
.ds2 .sg-om-caja {
    padding: 14px 18px; border-left: 3px solid var(--s-blue-tx);
    background: var(--s-card);
}
.ds2 .sg-om-tit {
    margin: 0 0 10px 0; font-size: 11.5px; line-height: 1.55; color: var(--s-ink-2);
    max-width: 860px;
}
.ds2 .sg-om-tabla { width: 100%; border-collapse: collapse; }
.ds2 .sg-om-tabla th {
    font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
    color: var(--s-ink-3); padding: 5px 10px; border-bottom: 1px solid var(--s-line);
    background: transparent; text-align: left;
}
.ds2 .sg-om-tabla th.t-num, .ds2 .sg-om-tabla td.t-num { text-align: right; }
.ds2 .sg-om-tabla td {
    font-size: 12px; color: var(--s-ink); padding: 6px 10px;
    border-bottom: 1px solid var(--s-line-suave);
}
.ds2 .sg-om-tabla tr:last-child td { border-bottom: none; }
/* Las que solo comparten el NIT: se muestran, pero apagadas a proposito.
   No son una propuesta, son algo que el contador tiene que mirar. */
.ds2 .sg-om-tabla tr.sg-om-floja td { opacity: .62; }

/* El boton de Siigo: chiquito y discreto a proposito. No es una funcion del
   dia a dia — sirve para resolver contabilidades de antes de que la empresa
   tuviera la app — asi que no compite con las cuatro tarjetas de siempre.
   Todo lo que hace se despliega en la ventana vt-siigo. */
.ds2 .btn-siigo {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
    background: #fff; color: var(--s-ink-2);
    border: 1px solid var(--s-line); border-radius: var(--s-r-pill);
    font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.ds2 .btn-siigo:hover { border-color: var(--s-cyan); color: var(--s-cyan-deep); }
.ds2 .btn-siigo .ic { color: var(--s-ink-3); }
.ds2 .btn-siigo:hover .ic { color: var(--s-cyan-deep); }

/* La casilla de crear las que solo estan en Siigo */
.ds2 .s-crear-faltantes {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    padding: 12px 20px; border-bottom: 1px solid var(--s-line);
    font-size: 12px; color: var(--s-ink-2); line-height: 1.5;
}
.ds2 .s-crear-faltantes input { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.ds2 .s-crear-faltantes span { max-width: 860px; }
.ds2 .s-crear-faltantes b { color: var(--s-ink); }

/* La barra de abajo: lo que se va a marcar y el boton. Se queda pegada al
   pie para que no toque bajar hasta el final de listas largas. */
.ds2 .s-barra-procesar {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-top: 16px; padding: 14px 20px;
    background: var(--s-ink); border-radius: var(--s-r-card); color: #fff;
}
.ds2 .s-barra-procesar b { display: block; font-size: 13px; }
.ds2 .s-barra-procesar span { font-size: 11.5px; color: var(--s-on-dark); line-height: 1.45; }
.ds2 .s-barra-procesar .btn { margin-left: auto; width: auto; white-space: nowrap; }

/* Los pasos numerados (1,2,3) de las ventanas de la DIAN, el correo y Siigo.
   Estaban dentro de descargar.html; se mueven aqui porque ahora la pantalla
   de Siigo tambien los usa. */
.ds2 .dpaso { display: flex; align-items: center; gap: 6px; margin: 10px 0 5px; }
.ds2 .dpaso:first-of-type { margin-top: 2px; }
.ds2 .dpaso b { font-size: 11.5px; color: var(--s-ink); }
.ds2 .dpaso-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--s-ink); color: #fff; font-size: 11px; font-weight: 800; flex: none;
}
.ds2 a.btn-siigo { text-decoration: none; }

/* ===== La tabla de Descargar CON la columna Siigo ========================
   La columna Siigo entra en la posicion 4 y corre todas las demas, asi que
   las medidas de arriba (que cuentan 11 columnas) dejan de servir. Este
   bloque las repite para 12. Solo se aplica cuando el mes tiene reporte
   cruzado, que es cuando la columna existe. */
.ds2 .tabla-descargar.con-siigo { min-width: 1098px; }
.ds2 .con-siigo th:nth-child(4),  .ds2 .con-siigo td:nth-child(4)  { width: 44px; text-align: center; }
.ds2 .con-siigo th:nth-child(5),  .ds2 .con-siigo td:nth-child(5)  { width: 100px; white-space: normal; }
.ds2 .con-siigo th:nth-child(6),  .ds2 .con-siigo td:nth-child(6)  { width: 92px; white-space: nowrap; overflow-wrap: normal; }
.ds2 .con-siigo th:nth-child(7),  .ds2 .con-siigo td:nth-child(7)  { width: auto; overflow-wrap: anywhere; font-size: 12px; font-weight: 600; color: var(--s-ink); }
.ds2 .con-siigo th:nth-child(8),  .ds2 .con-siigo td:nth-child(8)  { width: 92px; }
.ds2 .con-siigo th:nth-child(9),  .ds2 .con-siigo td:nth-child(9)  { width: 118px; }
.ds2 .con-siigo th:nth-child(10), .ds2 .con-siigo td:nth-child(10) { width: 96px; white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--s-ink); }
.ds2 .con-siigo th:nth-child(11), .ds2 .con-siigo td:nth-child(11) { width: 150px; padding-left: 8px; padding-right: 8px; white-space: normal; }
.ds2 .con-siigo th:nth-child(12), .ds2 .con-siigo td:nth-child(12) { width: 196px; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
/* la pastilla del tipo se corre de la 4 a la 5 */
.ds2 .con-siigo td:nth-child(4) .badge-doc { display: inline-flex; width: auto; min-height: 0; }
.ds2 .con-siigo td:nth-child(5) { padding-left: 8px; padding-right: 8px; }
.ds2 .con-siigo td:nth-child(5) .badge-doc {
    display: flex; align-items: center; justify-content: center;
    width: 100%; box-sizing: border-box; min-height: 32px;
    font-size: 9.5px !important; font-weight: 500; padding: 4px 5px;
    white-space: normal; overflow-wrap: break-word; line-height: 1.25; text-align: center;
}
.ds2 .con-siigo td:nth-child(7) code { font-size: inherit; }
.ds2 .con-siigo td:nth-child(8) code {
    font-size: 11px; color: var(--s-ink-3); background: none; padding: 0;
    font-family: 'Montserrat', sans-serif;
}
.ds2 .con-siigo td:nth-child(9) strong { font-size: 11.5px; font-weight: 600; color: var(--s-ink); }
.ds2 .con-siigo td:nth-child(11) .badge { font-size: 10.5px !important; padding: 4px 8px; white-space: nowrap; }
.ds2 .con-siigo td:nth-child(12) .action-btns { gap: 5px; }

/* "Causada manual": la causo una persona en Siigo, no la app. Verde porque
   esta causada, pero el tono profundo y el punto hueco la separan de las que
   hizo la app. Ambos colores son de la paleta. */
.ds2 .badge-manual { background: var(--s-green-bg); color: var(--s-green-tx); font-weight: 600; }
.ds2 td .badge-manual {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: var(--s-r-pill); padding: 5px 8px;
}
.ds2 td .badge-manual::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    border: 1.5px solid currentColor; background: transparent; flex: none;
}

/* La tarjeta de Joseph en el cruce: el boton para pedirle y su lista. */
.ds2 .s-joseph-pedir {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 20px; border-bottom: 1px solid var(--s-line);
}
.ds2 .s-joseph-pedir .btn { width: auto; white-space: nowrap; }
.ds2 .s-joseph-pedir span { flex: 1 1 280px; min-width: 0; font-size: 11px; color: var(--s-ink-3); line-height: 1.5; }
.ds2 .tbl-sg-joseph { min-width: 1160px; }
.ds2 .tbl-sg-joseph th:nth-child(1), .ds2 .tbl-sg-joseph td:nth-child(1) { width: 40px; }
.ds2 .tbl-sg-joseph th:nth-child(2), .ds2 .tbl-sg-joseph td:nth-child(2) { width: 130px; }
.ds2 .tbl-sg-joseph th:nth-child(3), .ds2 .tbl-sg-joseph td:nth-child(3) { width: 130px; }
.ds2 .tbl-sg-joseph th:nth-child(4), .ds2 .tbl-sg-joseph td:nth-child(4) { width: 130px; }
.ds2 .tbl-sg-joseph th:nth-child(5), .ds2 .tbl-sg-joseph td:nth-child(5) { width: 200px; }
.ds2 .tbl-sg-joseph th:nth-child(6), .ds2 .tbl-sg-joseph td:nth-child(6) { width: 130px; }
.ds2 .tbl-sg-joseph th:nth-child(7), .ds2 .tbl-sg-joseph td:nth-child(7) { width: 110px; }
.ds2 .tbl-sg-joseph th:nth-child(8), .ds2 .tbl-sg-joseph td:nth-child(8) { width: auto; }

/* ===== Los avisos que salen arriba a la derecha =========================
   style.css solo define error y success. "warning" no tenia estilo, asi que
   salia como texto suelto SIN FONDO encima de la tabla. Aqui quedan los
   tres, con la paleta y sin sombras. */
.ds2-pagina .flash {
    border-radius: var(--s-r-card); border: 1px solid var(--s-line);
    font-size: 12.5px; font-weight: 500; line-height: 1.5; padding: 13px 16px;
    max-width: 380px; box-shadow: none;
}
.ds2-pagina .flash-success { background: var(--s-green-bg); color: var(--s-green-tx); border-color: var(--s-green); }
.ds2-pagina .flash-error   { background: var(--s-red-bg);   color: var(--s-red-tx);   border-color: var(--s-red); }
.ds2-pagina .flash-warning { background: var(--s-amber-bg); color: var(--s-amber-tx); border-color: var(--s-amber); }
.ds2-pagina .flash-info    { background: var(--s-blue-bg);  color: var(--s-blue-tx);  border-color: var(--s-blue-tx); }

/* El chulo de "esta cuadra al peso" y la fila que no cuadra. */
.ds2 .sg-cuadra { color: var(--s-green-tx); font-weight: 700; }
.ds2 .sg-cuadra-sub { color: var(--s-green-tx); }
.ds2 .sg-dif td { background: var(--s-amber-bg); }
.ds2 .sg-dif:hover td { background: #FBE7BE; }
.ds2 .s-filtro-dif { color: var(--s-red-tx); border-color: var(--s-red-tx); }
.ds2 .s-filtro-dif:hover { background: var(--s-red-bg); }

/* El documento de Siigo que NO se va a poder crear porque su numero ya lo
   tiene otro proveedor (varios documentos soporte vienen numerados "DS1"). */
.ds2 .sg-choca td { background: var(--s-red-bg); }

/* El mes que se esta trabajando, resaltado en el resumen por mes. */
.ds2 .s-mes-activo td { background: var(--s-blue-bg); }
.ds2 .s-mes-activo td:first-child a { color: var(--s-blue-tx); font-weight: 700; }