/* ================================================================
   Tokeniza Console — Design System
   Paleta: sobria, financiera, modo claro
   Prefijo de clases propias: tz-
   ================================================================ */

/* ── Variables globales ─────────────────────────────────────── */
:root {
    /* Layout */
    --topbar-height:           64px;
    --sidebar-width:           220px;
    --sidebar-width-collapsed: 52px;

    /* Color primario: azul marino institucional */
    --color-primary:        #1B3A5C;
    --color-primary-hover:  #142d47;
    --color-primary-soft:   rgba(27, 58, 92, 0.08);
    --color-primary-border: rgba(27, 58, 92, 0.20);

    /* Acento: azul medio solo para CTAs secundarios */
    --color-accent:         #2E6DA4;
    --color-accent-hover:   #255a8a;

    /* Estados */
    --color-success:  #1a7f5a;
    --color-warning:  #92610a;
    --color-danger:   #b91c1c;
    --color-info:     #1d5fa3;

    /* Fondos */
    --bg-main:      #F4F6F9;
    --bg-topbar:    #FFFFFF;
    --bg-sidebar:   #1B3A5C;
    --bg-surface:   #FFFFFF;
    --bg-surface-2: #EEF1F5;
    --bg-tooltip:   #1F2937;

    /* Texto */
    --text-primary:        #111827;
    --text-secondary:      #4B5563;
    --text-muted:          #6B7280;
    --text-inverse:        #FFFFFF;
    --text-sidebar:        rgba(255, 255, 255, 0.75);
    --text-sidebar-active: #FFFFFF;

    /* Bordes */
    --border-subtle:  #E5E7EB;
    --border-default: #D1D5DB;

    /* Sombras */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);

    /* Radios */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

/* ── Reset base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-main);
}

h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }

.label-sm {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.text-xs   { font-size: 11px; }
.text-sm   { font-size: 12px; }
.text-muted { color: var(--text-muted); }

/* ── Topbar ─────────────────────────────────────────────────── */
.tz-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbar-height);
    z-index: 1000;
    background: var(--bg-topbar);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    box-shadow: var(--shadow-sm);
}

.tz-topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
}

.tz-topbar-brand img {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.tz-topbar-brand span {
    transition: opacity 0.2s, width 0.22s;
}

body.sidebar-collapsed .tz-topbar-brand span {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.tz-topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tz-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    transition: background 0.15s, color 0.15s;
}
.tz-toggle-btn:hover {
    background: var(--bg-surface-2);
    color: var(--color-primary);
}

/* ── Sidebar ────────────────────────────────────────────────── */
.tz-sidebar {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    border-right: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 900;
}

body.sidebar-collapsed .tz-sidebar {
    width: var(--sidebar-width-collapsed);
}

.tz-nav-list {
    list-style: none;
    padding: 8px 0;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.tz-nav-list::-webkit-scrollbar { width: 3px; }
.tz-nav-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* Cabecera de sección = botón de acordeón */
.tz-nav-group { list-style: none; }
.tz-nav-section {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 16px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
    overflow: hidden;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s, opacity 0.15s;
}
.tz-nav-section:hover { color: rgba(255,255,255,0.62); }
.tz-nav-section > span { flex: 1; text-align: left; }
.tz-nav-chev { font-size: 10px; opacity: 0.6; transition: transform 0.2s ease; }
.tz-nav-chev { transform: rotate(180deg); }                 /* abierto -> arriba */
.tz-nav-group.collapsed .tz-nav-chev { transform: rotate(0deg); }   /* cerrado -> abajo */

/* Items colapsables */
.tz-nav-group-items { list-style: none; margin: 0; padding: 0; overflow: hidden; max-height: 600px; transition: max-height 0.22s ease; }
.tz-nav-group.collapsed .tz-nav-group-items { max-height: 0; }

/* En modo icono (escritorio colapsado) se muestran todos los items, sin acordeón */
@media (min-width: 769px) {
    body.sidebar-collapsed .tz-nav-group-items { max-height: none !important; }
    body.sidebar-collapsed .tz-nav-chev { display: none; }
}

body.sidebar-collapsed .tz-nav-section {
    opacity: 0;
}

.tz-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    text-decoration: none;
    color: var(--text-sidebar);
    border-radius: 0;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    position: relative;
    margin: 1px 8px;
    border-radius: var(--radius-sm);
}

.tz-nav-link:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-sidebar-active);
}

.tz-nav-item.active .tz-nav-link {
    background: rgba(255,255,255,0.12);
    color: var(--text-sidebar-active);
    font-weight: 500;
}

.tz-nav-item.active .tz-nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: #FFFFFF;
    border-radius: 0 2px 2px 0;
    margin-left: -8px;
}

.tz-nav-link i {
    font-size: 16px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

/* Badge de conteo en el menú lateral */
.tz-nav-badge {
    margin-left: auto;
    background: rgba(255,255,255,0.14);
    color: var(--text-sidebar-active);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 10px;
    padding: 3px 7px;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.tz-nav-item.active .tz-nav-badge { background: rgba(255,255,255,0.26); }
body.sidebar-collapsed .tz-nav-badge { opacity: 0; width: 0; min-width: 0; padding: 0; margin: 0; overflow: hidden; }

.tz-nav-label {
    transition: opacity 0.15s, width 0.22s;
    overflow: hidden;
}

body.sidebar-collapsed .tz-nav-label {
    opacity: 0;
    width: 0;
}

/* Tooltip al colapsar */
body.sidebar-collapsed .tz-nav-link:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(var(--sidebar-width-collapsed) + 4px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-tooltip);
    color: var(--text-inverse);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    white-space: nowrap;
    z-index: 9999;
    pointer-events: none;
}

/* ── Footer fijo del sidebar: tipo de panel + rol ──────────── */
.tz-sidebar-footer {
    background: #071f3a;
    flex: 0 0 auto;
    padding: 9px 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tipo de panel (badge OPERADOR; auth.js -> inline-flex). Secundario. */
.tz-sidebar-role {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.6);
    border-radius: 20px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Tipo de panel. Principal (blanco, prominente). */
.tz-sidebar-paneltype {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.97);
    white-space: nowrap;
}
.tz-sidebar-paneltype i { font-size: 15px; opacity: 0.75; }

/* Rol del usuario. Secundario. */

.tz-sidebar-userrole {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
}
.tz-sidebar-userrole i { font-size: 12px; opacity: 0.5; }

/* Modo icono (escritorio colapsado): se oculta todo el footer */
@media (min-width: 769px) {
    body.sidebar-collapsed .tz-sidebar-footer { display: none !important; }
}

/* ── Zona central ───────────────────────────────────────────── */
.tz-main {
    margin-top: var(--topbar-height);
    margin-left: var(--sidebar-width);
    min-height: calc(100vh - var(--topbar-height));
    padding: 28px;
    transition: margin-left 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--bg-main);
}

body.sidebar-collapsed .tz-main {
    margin-left: var(--sidebar-width-collapsed);
}

#tz-view {
    max-width: 1400px;
}

/* ── Componentes ────────────────────────────────────────────── */

/* Tarjeta */
.tz-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 20px 24px;
}

/* Botones */
.tz-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    text-decoration: none;
    white-space: nowrap;
}

.tz-btn-primary {
    background: var(--color-primary);
    color: var(--text-inverse);
    border-color: var(--color-primary);
}
.tz-btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--text-inverse);
}

.tz-btn-secondary {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-default);
}
.tz-btn-secondary:hover {
    background: var(--bg-surface-2);
}

.tz-btn-danger {
    background: var(--color-danger);
    color: var(--text-inverse);
    border-color: var(--color-danger);
}

/* Badge / Pill de estado */
.tz-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    white-space: nowrap;
}
.tz-badge-success { background: rgba(26,127,90,0.10); color: var(--color-success); }
.tz-badge-warning { background: rgba(146,97,10,0.10); color: var(--color-warning); }
.tz-badge-danger  { background: rgba(185,28,28,0.10); color: var(--color-danger); }
.tz-badge-info    { background: var(--color-primary-soft); color: var(--color-primary); }
.tz-badge-muted   { background: var(--bg-surface-2); color: var(--text-muted); }

/* Tabla */
.tz-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.tz-table th {
    text-align: left;
    padding: 11px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-surface-2);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}
/* Columna numérica/derecha en el header estándar */
.tz-table th.tz-th-right { text-align: right; }
.tz-table td.tz-td-right { text-align: right; }
.tz-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
}
.tz-table tr:last-child td { border-bottom: none; }
.tz-table tbody tr:hover td { background: var(--bg-surface-2); }

/* Spinner */
.tz-spinner {
    width: 20px; height: 20px;
    border: 2px solid var(--color-primary-soft);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: tz-spin 0.7s linear infinite;
    display: inline-block;
}
@keyframes tz-spin { to { transform: rotate(360deg); } }

/* Toast */
/* Arriba a la derecha: abajo tapaba los botones de accion de los paneles
   -Siguiente, Crear paquete- justo cuando el aviso aparece por haber pulsado
   uno de ellos. Es el unico contenedor de avisos de la consola, asi que el
   cambio aplica en todas las pantallas.
   A la altura del topbar (64px, --topbar-height), no debajo: con top:76px
   el aviso quedaba pegado al borde superior del contenido, lejos de la
   campana/avatar donde el ojo ya esta mirando al terminar una accion.
   z-index 9999 > 1000 del topbar, asi que el toast se dibuja ENCIMA de la
   barra sin necesitar mas ajustes. 14px centra el toast (~48-56px de alto
   segun el mensaje) dentro de los 64px del topbar. */
#tz-toast-container {
    position: fixed;
    top: 14px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tz-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-tooltip);
    color: var(--text-inverse);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: 13px;
    min-width: 260px;
    max-width: 380px;
    animation: tz-toast-in 0.25s ease;
}
.tz-toast.success { border-left: 3px solid #34d399; }
.tz-toast.error   { border-left: 3px solid #f87171; }
.tz-toast.warning { border-left: 3px solid #fbbf24; }
.tz-toast.info    { border-left: 3px solid #60a5fa; }

@keyframes tz-toast-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Modal */
.tz-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.tz-modal {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 520px;
    padding: 28px;
}
.tz-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.tz-modal-title { font-size: 16px; font-weight: 600; }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tz-sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: var(--sidebar-width) !important;
    }
    body.sidebar-open .tz-sidebar {
        transform: translateX(0);
    }
    /* En móvil el sidebar es overlay y SIEMPRE expandido (icono+texto+badge),
       aunque el escritorio lo hubiera dejado colapsado. */
    body.sidebar-collapsed .tz-sidebar { width: var(--sidebar-width) !important; }
    body.sidebar-collapsed .tz-nav-label { opacity: 1 !important; width: auto !important; }
    body.sidebar-collapsed .tz-nav-badge { opacity: 1 !important; width: auto !important; min-width: 18px !important; padding: 1px 7px !important; margin: 0 !important; overflow: visible !important; }
    body.sidebar-collapsed .tz-nav-section { opacity: 1 !important; height: auto !important; overflow: visible !important; }
    body.sidebar-collapsed .tz-topbar-brand span { opacity: 1 !important; }
    .tz-main {
        margin-left: 0 !important;
        padding: 16px;
    }
    .tz-backdrop {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 850;
    }
    body.sidebar-open .tz-backdrop {
        display: block;
    }
}

/* ── Avatar usuario ─────────────────────────────────────────── */
.tz-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    cursor: pointer;
}

/* ── Page header ────────────────────────────────────────────── */
.tz-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.tz-page-title { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.tz-page-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* ── Tenant badge (topbar) ──────────────────────────────── */
.tz-tenant-badge {
    margin-left: 8px;
    padding: 3px 10px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    display: none;
}

/* ── Spinner pequeño (botones) ──────────────────────────── */
.tz-spinner-sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
    border-top-color: #fff;
    border-color: rgba(255,255,255,0.3);
    border-top-color: #fff;
}

/* ── Favicon fallback ───────────────────────────────────── */
.tz-logo-fallback {
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Iconos de estado ───────────────────────────────────── */
.tz-icon-success { color: var(--color-success); margin-right: 6px; }
.tz-icon-warning { color: var(--color-warning); margin-right: 6px; }
.tz-icon-danger  { color: var(--color-danger);  margin-right: 6px; }
.tz-icon-info    { color: var(--color-accent);  margin-right: 6px; }

/* ── Utilidades de iconos ───────────────────────────────── */
.tz-icon-lg { font-size: 20px; }
.tz-icon-md { font-size: 17px; }

/* ── Estado de carga ────────────────────────────────────── */
.tz-loading-state {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
}

/* ── Logo en topbar ─────────────────────────────────────── */
.tz-topbar-brand img { display: none; }

.tz-logo-bg {
    width: 140px;
    height: 44px;
    background-image: url('/assets/img/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    flex-shrink: 0;
}

/* ── User menu / dropdown ───────────────────────────────────── */
.tz-user-menu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tz-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 2000;
    display: none;
    overflow: hidden;
}
.tz-user-dropdown.open { display: block; }

.tz-user-dropdown-info {
    padding: 12px 14px;
    background: var(--bg-surface-2);
    border-bottom: 1px solid var(--border-subtle);
}

.tz-user-dropdown-divider {
    height: 1px;
    background: var(--border-subtle);
}

.tz-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.tz-user-dropdown-item:hover {
    background: var(--bg-surface-2);
    color: var(--color-danger);
}
.tz-user-dropdown-item i { font-size: 14px; }

/* ── Tabs de estado ─────────────────────────────────────────── */
.tz-tabs-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 6px 8px 0;
    margin-bottom: 0;
    border-bottom: none;
}

.tz-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.tz-tab:hover { color: var(--text-primary); background: var(--bg-surface-2); }
.tz-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 700;
    background: var(--bg-surface);
}

.tz-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    background: var(--bg-surface-2);
    color: var(--text-muted);
    border-radius: 10px;
    transition: background 0.15s, color 0.15s;
}
.tz-tab.active .tz-tab-count {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

/* Tabla conectada a los tabs */
.tz-card.tz-card-tabbed {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 1px solid var(--border-subtle);
}

/* ── Badge de fase (transición interna) ─────────────────────── */
.tz-fase-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.tz-fase-success { background: rgba(26,127,90,0.08); color: var(--color-success); border-color: rgba(26,127,90,0.2); }
.tz-fase-danger  { background: rgba(185,28,28,0.08); color: var(--color-danger);  border-color: rgba(185,28,28,0.2); }
.tz-fase-warning { background: rgba(146,97,10,0.08); color: var(--color-warning); border-color: rgba(146,97,10,0.2); }
.tz-fase-info    { background: rgba(14,116,144,0.08); color: var(--color-info);   border-color: rgba(14,116,144,0.2); }
.tz-fase-muted   { background: var(--bg-surface-2); color: var(--text-muted);     border-color: var(--border-subtle); }

/* ── KPIs por fase ──────────────────────────────────────────── */
.tz-kpis-fase-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 10px 16px;
    flex-wrap: wrap;
}
.tz-kpis-fase-total {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-right: 20px;
    border-right: 1px solid var(--border-subtle);
    min-width: 100px;
}
.tz-kpis-fase-items {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}
.tz-kpi-fase-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tz-kpi-fase-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── KPIs por fase — cards con ícono ────────────────────────── */
.tz-fase-kpis {
    display: flex;
    gap: 10px;
    padding: 14px 0 10px;
    flex-wrap: wrap;
}

.tz-fase-kpi-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    min-width: 160px;
    flex: 1;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s;
}
.tz-fase-kpi-card:hover { box-shadow: var(--shadow-md); }

.tz-fase-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.tz-fase-kpi-body { min-width: 0; }

.tz-fase-kpi-value {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 2px;
}

.tz-fase-kpi-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.tz-fase-kpi-monto {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ── Columnas ordenables ────────────────────────────────────── */
/* Cabeceras ordenables (con icono asc/desc) — estándar de listado */
.tz-th-sort { white-space: nowrap; cursor: pointer; user-select: none; }
.tz-th-sort:hover { color: var(--text-secondary); }
.tz-th-sort:hover { background: var(--bg-surface-2); }
.tz-th-sort-active { color: var(--color-primary) !important; }
.tz-sort-ic { font-size: 10px; margin-left: 5px; opacity: .40; vertical-align: middle; transition: opacity .12s; }
.tz-th-sort:hover .tz-sort-ic { opacity: .75; }
.tz-th-sort-active .tz-sort-ic { opacity: 1; }

/* ── Expediente documental ──────────────────────────────────── */
.tz-expediente { display: flex; flex-direction: column; gap: 10px; }

.tz-doc-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.tz-doc-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-surface-2);
    border-bottom: 1px solid var(--border-subtle);
}

.tz-doc-icon {
    width: 34px; height: 34px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}

.tz-doc-info { flex: 1; min-width: 0; }
.tz-doc-type { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.tz-doc-filename { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

.tz-doc-view-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px; font-size: 12px; font-weight: 600;
    background: var(--color-primary); color: white;
    border-radius: var(--radius-sm); text-decoration: none;
    white-space: nowrap; flex-shrink: 0;
    transition: opacity 0.15s;
}
.tz-doc-view-btn:hover { opacity: 0.85; }

.tz-doc-meta { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }

.tz-doc-meta-row {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 4px 12px;
    align-items: center;
    font-size: 12px;
}
.tz-doc-hash-row { grid-template-columns: auto 1fr; }

.tz-doc-meta-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted); white-space: nowrap;
}

.tz-doc-hash {
    font-family: monospace; font-size: 11px;
    background: var(--bg-surface-2); padding: 2px 7px;
    border-radius: 3px; color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

.tz-doc-expiry {
    font-size: 11px; display: inline-flex; align-items: center; gap: 3px;
    color: var(--color-success);
}
.tz-doc-expiry-warn { color: var(--color-danger); }

.tz-doc-blockchain {
    display: flex; flex-direction: column; gap: 5px;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
}
.tz-blockchain-item {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px;
}
.tz-blockchain-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--color-primary); text-decoration: none; font-size: 11px;
}
.tz-blockchain-link:hover { text-decoration: underline; }
.tz-blockchain-link code {
    font-family: monospace; font-size: 11px;
    background: var(--bg-surface-2); padding: 1px 5px;
    border-radius: 3px; border: 1px solid var(--border-subtle);
}

/* ── Modal ──────────────────────────────────────────────────── */
.tz-modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.tz-modal {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    width: 100%; max-width: 540px;
    max-height: 90vh; display: flex; flex-direction: column;
    overflow: hidden;
}
.tz-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.tz-modal-title {
    font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px;
    color: var(--text-primary);
}
.tz-modal-title i { color: var(--color-primary); }
.tz-modal-close {
    background: none; border: none; cursor: pointer; font-size: 16px;
    color: var(--text-muted); padding: 4px; border-radius: 4px;
}
.tz-modal-close:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.tz-modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.tz-modal-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 20px; border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

/* ── Lista de contratos en modal ────────────────────────────── */
.tz-contratos-list { display: flex; flex-direction: column; gap: 8px; }
.tz-contrato-option {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer; transition: all 0.15s;
    background: var(--bg-surface);
}
.tz-contrato-option:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}
.tz-contrato-option-left { flex: 1; min-width: 0; }
.tz-contrato-option-name { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.tz-contrato-option-right {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.tz-contrato-option-linea { text-align: right; display: flex; flex-direction: column; gap: 1px; }
.tz-contrato-option--disabled {
    cursor: not-allowed; opacity: 0.7;
    border-color: var(--color-danger, #dc2626);
    background: var(--bg-surface);
}
.tz-contrato-option--disabled:hover {
    border-color: var(--color-danger, #dc2626);
    background: var(--bg-surface);
}
.tz-motivo-box { font-size: 12px; line-height: 1.5; }
.tz-motivo-box--clamped .tz-motivo-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tz-motivo-toggle {
    display: block; margin-top: 2px;
    background: none; border: none; padding: 0;
    color: var(--color-primary); font-size: 12px; font-weight: 600;
    cursor: pointer; text-decoration: underline;
}

/* ── Condiciones del contrato en drawer ─────────────────────── */
.tz-cesion-contrato-info {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}
.tz-cesion-contrato-nombre {
    font-size: 13px; font-weight: 700;
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 10px;
}
.tz-cesion-condiciones {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.tz-cond-pill {
    display: flex; flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 5px 10px; min-width: 80px;
}
.tz-cond-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.tz-cond-pill strong { font-size: 12px; }

/* ── Selector de pagarés ────────────────────────────────────── */
.tz-cesion-selector-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
}
.tz-pagares-selector {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 300px; overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 6px;
    background: var(--bg-surface-2);
}
.tz-pagare-check-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer; transition: background 0.1s;
    background: var(--bg-surface);
    border: 1px solid transparent;
}
.tz-pagare-check-row:hover { background: var(--color-primary-soft); border-color: var(--color-primary-border); }
.tz-pagare-check-row input[type="checkbox"] { flex-shrink: 0; accent-color: var(--color-primary); width: 15px; height: 15px; }
.tz-pagare-check-info { flex: 1; min-width: 0; }

/* ── Resumen cesión ─────────────────────────────────────────── */
.tz-resumen-cesion { display: flex; flex-direction: column; gap: 16px; }
.tz-resumen-row { display: flex; align-items: center; gap: 10px; }
.tz-resumen-kpis {
    /* Auto-fit y no 3 fijas: el resumen pasa de tres cifras a cinco -se
       anadieron solicitado y cobertura- y con columnas fijas la cuarta caia
       sola en una fila. Ahora se acomodan al ancho del panel, que ademas es
       redimensionable. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px;
}
.tz-resumen-kpi {
    text-align: center;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px 8px;
}
.tz-resumen-kpi-val { font-size: 18px; font-weight: 800; color: var(--color-primary); }
.tz-resumen-kpi-label { font-size: 10px; text-transform: uppercase; color: var(--text-muted); margin-top: 3px; }
.tz-resumen-pagares {
    /* Alto en proporcion a la ventana: un paquete puede traer cientos de
       pagares y revisarlos por una mirilla de 280 px era el cuello de botella.
       El maximo evita que en pantallas altas la lista despegue del resto. */
    max-height: min(58vh, 520px);
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.tz-resumen-pagare-acc { border-bottom: 1px solid var(--border-subtle); }
.tz-resumen-pagare-acc:last-child { border-bottom: none; }
.tz-resumen-pagare-toggle {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; background: none; border: none; cursor: pointer;
    text-align: left; font-family: inherit;
}
.tz-resumen-pagare-toggle:hover { background: var(--bg-surface-2); }
.tz-resumen-pagare-chev { font-size: 11px; color: var(--text-muted); flex-shrink: 0; transition: transform .15s; }
.tz-resumen-pagare-code { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-resumen-pagare-monto { font-size: 13px; font-weight: 700; flex-shrink: 0; }
.tz-resumen-pagare-venc { font-size: 11.5px; color: var(--text-muted); flex-shrink: 0; width: 72px; text-align: right; }
.tz-resumen-pagare-detail { background: var(--bg-surface-2); border-top: 1px solid var(--border-subtle); }

/* ── Spinner pequeño ────────────────────────────────────────── */
.tz-spinner-sm {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* ── Steps bar ──────────────────────────────────────────────── */
.tz-steps-bar {
    display: flex; align-items: center; gap: 0;
    margin-bottom: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.tz-step {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    white-space: nowrap;
}
.tz-step span {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--bg-surface-2); border: 2px solid var(--border-default);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
}
.tz-step-active { color: var(--color-primary); }
.tz-step-active span { background: var(--color-primary); border-color: var(--color-primary); color: white; }
.tz-step-done { color: var(--color-success); }
.tz-step-done span { background: var(--color-success); border-color: var(--color-success); color: white; }
.tz-step-line {
    flex: 1; height: 2px; background: var(--border-subtle); margin: 0 8px;
}
.tz-step-line-done { background: var(--color-success); }
.tz-action-btn-danger { color: var(--color-danger) !important; }
.tz-action-btn-danger:hover { background: rgba(185,28,28,0.08) !important; }

/* ================================================================
   Sidebar — Redimensionado por drag & drop
   ================================================================ */

/* Handle de arrastre, anclado al borde derecho del sidebar */
.tz-sidebar-resizer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    z-index: 950;
    background: transparent;
    transition: background 0.15s ease;
    touch-action: none;          /* drag fluido en táctil */
}

.tz-sidebar-resizer::after {
    /* Línea-guía visual fina */
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2px;
    background: transparent;
    transition: background 0.15s ease;
}

.tz-sidebar-resizer:hover::after,
body.sidebar-resizing .tz-sidebar-resizer::after {
    background: rgba(255, 255, 255, 0.25);
}

/* Mientras se arrastra: sin transiciones para que siga al cursor */
body.sidebar-resizing .tz-sidebar,
body.sidebar-resizing .tz-main {
    transition: none !important;
}

/* Evitar selección de texto y forzar cursor durante el arrastre */
body.sidebar-resizing {
    cursor: col-resize;
    user-select: none;
    -webkit-user-select: none;
}

/* No tiene sentido redimensionar cuando está colapsado o en móvil */
body.sidebar-collapsed .tz-sidebar-resizer {
    display: none;
}

@media (max-width: 768px) {
    .tz-sidebar-resizer {
        display: none;
    }
}

/* ── Barra de cobertura compartida (cesión / reemplazo) con sobre-cobertura ── */
.tz-cov { margin: 4px 0 14px; }
.tz-cov-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px; }
.tz-cov-label { font-size:12.5px; color:var(--text-secondary); }
.tz-cov-pct { font-size:12.5px; font-weight:700; color:var(--text-muted); white-space:nowrap; }
.tz-cov-pct.ok { color:var(--color-success,#16a34a); }
.tz-cov-track { position:relative; height:10px; border-radius:6px; background:#eceff3; overflow:hidden; }
.tz-cov-zone-over { position:absolute; top:0; bottom:0; right:0;
    background:repeating-linear-gradient(45deg, rgba(22,163,74,0.07) 0, rgba(22,163,74,0.07) 5px, rgba(22,163,74,0.14) 5px, rgba(22,163,74,0.14) 10px); }
.tz-cov-fill { position:absolute; top:0; bottom:0; left:0; background:var(--color-warning,#ca8a04);
    transition:width .28s ease, background .28s ease; z-index:1; }
.tz-cov-fill.ok { background:var(--color-success,#16a34a); }
.tz-cov-fill-over { position:absolute; top:0; bottom:0; background:#7bdba0; transition:width .28s ease; z-index:1; }
.tz-cov-mark { position:absolute; top:-1px; bottom:-1px; width:2px; background:#fff;
    box-shadow:0 0 0 1px rgba(0,0,0,0.14); z-index:2; }
.tz-cov-foot { margin-top:5px; text-align:right; min-height:15px; }
.tz-cov-falta { font-size:11px; color:#b4341f; font-weight:600; }
.tz-cov-extra { font-size:11px; color:var(--text-muted); display:inline-flex; align-items:center; gap:4px; }
.tz-cov-extra.ok { color:var(--color-success,#15803d); }
.tz-cov-extra i { font-size:10px; }


/* Rol del usuario como chip pequeño junto al avatar (header) */
.tz-user-rolechip {
    display: none;
    align-items: center;
    max-width: 160px;
    padding: 3px 10px;
    margin-right: 2px;
    background: var(--color-primary-soft, rgba(31,159,146,0.12));
    color: var(--color-primary, #1f9f92);
    border: 1px solid var(--color-primary-border, rgba(31,159,146,0.25));
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 640px) { .tz-user-rolechip { display: none !important; } }

/* ── Centro de notificaciones (campana) ─────────────────────── */
.tz-notif { position: relative; }
.tz-notif-btn { position: relative; }
.tz-notif-btn.has-alerts i { color: var(--color-accent); }
.tz-notif-badge {
    position: absolute; top: -3px; right: -3px;
    min-width: 17px; height: 17px; padding: 0 4px;
    background: var(--color-danger, #c0392b); color: #fff;
    border-radius: 999px; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg-surface, #fff); line-height: 1;
}
.tz-notif-pop {
    position: absolute; top: calc(100% + 10px); right: 0;
    width: 360px; max-width: 90vw;
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 12px); box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,.18));
    z-index: 2000; display: none; overflow: hidden;
}
.tz-notif-pop.open { display: block; }
.tz-notif-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--border-subtle);
    font-size: 14px; font-weight: 700; color: var(--text-primary);
}
.tz-notif-count { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.tz-notif-list { max-height: 420px; overflow-y: auto; }
.tz-notif-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px; border-bottom: 1px solid var(--border-subtle);
}
.tz-notif-item:last-child { border-bottom: none; }
.tz-notif-ic {
    width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
    background: var(--bg-surface-2); color: var(--text-secondary);
}
.tz-notif-ic.sev-danger  { background: rgba(192,57,43,.12);  color: var(--color-danger, #c0392b); }
.tz-notif-ic.sev-warning { background: rgba(146,97,10,.12);  color: var(--color-warning, #92610a); }
.tz-notif-ic.sev-info    { background: var(--color-primary-soft); color: var(--color-accent); }
.tz-notif-body { flex: 1 1 auto; min-width: 0; }
.tz-notif-row1 { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tz-notif-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.tz-notif-desc { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.tz-notif-go { flex: 0 0 auto; white-space: nowrap; align-self: center; }
.tz-btn-sm { padding: 4px 10px; font-size: 12px; }
.tz-notif-empty { padding: 28px 14px; text-align: center; color: var(--text-muted); font-size: 13px; }
.tz-notif-empty i { color: var(--color-success, #1a7f5a); margin-right: 6px; }
@media (max-width: 480px) { .tz-notif-pop { position: fixed; top: 56px; right: 8px; left: 8px; width: auto; } }

/* ── Panel de credenciales del gestor ───────────────────────── */
.tz-cred-panel { display:flex; flex-direction:column; gap:6px; }
.tz-cred-row { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--border-subtle); }
.tz-cred-lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); min-width:90px; }
.tz-cred-val { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-primary); background:var(--bg-surface-2); padding:3px 8px; border-radius:6px; word-break:break-all; }
.tz-cred-note { font-size:13px; color:var(--text-muted); padding:8px 0; }
.tz-cred-otp { background:var(--bg-surface-2); border:1px solid var(--border-subtle); border-radius:10px; padding:12px 14px; margin-top:4px; }
.tz-cred-otp-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--color-accent); margin-bottom:8px; }
.tz-cred-otp-val { font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:700; letter-spacing:3px; color:var(--text-primary); text-align:center; background:#071f3a; border-radius:8px; padding:10px; margin-bottom:6px; }
.tz-cred-otp-note { font-size:11.5px; color:var(--text-muted); text-align:center; }

/* ── Historial de reportes de saldo (acordeón de resumen de cesión) ── */
.tz-saldo-hist-row {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    padding: 6px 0; border-bottom: 1px solid var(--border-subtle);
    font-size: 12px;
}
.tz-saldo-hist-fecha { color: var(--text-muted); width: 68px; flex-shrink: 0; }
.tz-saldo-hist-montos { flex: 1; color: var(--text-secondary); }
.tz-saldo-hist-montos i { font-size: 9px; margin: 0 2px; color: var(--text-muted); }
.tz-saldo-hist-delta { font-weight: 700; flex-shrink: 0; }
.tz-saldo-hist-motivo { font-size: 11px; color: var(--text-muted); padding: 0 0 6px 76px; margin-top: -4px; }

/* ── Sub-acordeones dentro del detalle de pagaré (originación / reportes) ── */
.tz-sub-acc { border-top: 1px solid var(--border-subtle); }
.tz-sub-acc-toggle {
    width: 100%; display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; background: none; border: none; cursor: pointer;
    text-align: left; font-family: inherit; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
}
.tz-sub-acc-toggle:hover { color: var(--text-primary); }
.tz-sub-acc-chev { font-size: 10px; flex-shrink: 0; }
.tz-sub-acc-icon { font-size: 13px; flex-shrink: 0; color: var(--color-primary); }
.tz-sub-acc-body { background: var(--bg-surface); }

/* ── Bleed de pagaresPanelHTML() SOLO dentro del detalle de cesion ──
   El wrapper se sangra completo (recupera ancho para el codigo del
   pagare en .tz-pag-list), pero el buscador y el panel de orden
   compensan volviendo a su padding normal -- si no, quedan pegados
   al borde. Scoped a .tz-pag-bleed: los otros 2 usos de
   pagaresPanelHTML() (selector de Nueva cesion, flujo de firma) no
   llevan esta clase y no se ven afectados. */
.tz-pag-bleed { margin: 0 -14px -12px; }
.tz-pag-bleed .tz-pag-searchrow,
.tz-pag-bleed .tz-pag-sort-panel { margin-left: 14px; margin-right: 14px; }

/* ── Confirmación del paquete de cesión ────────────────────────────────────
   La cobertura es la cifra que decide si el paquete se acepta, así que se lee
   antes que ninguna otra. Lo demás la acompaña. */
.tz-cob-bloque { margin-top: 14px; }
.tz-cob-cab    { display: flex; align-items: baseline; margin-bottom: 3px; }
.tz-cob-tit {
    font-size: 11px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .05em;
}
.tz-cob-min { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.tz-cob-fila { display: flex; align-items: baseline; gap: 10px; }
.tz-cob-val {
    font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--text-primary);
}
.tz-cob-val.ok { color: var(--color-success); }
.tz-cob-val.no { color: var(--color-danger); }
.tz-cob-nota   { font-size: 12.5px; color: var(--text-secondary); }

/* La marca del mínimo hace visible el margen, no solo el número. */
.tz-cob-barra {
    position: relative; height: 6px; margin: 12px 0 4px;
    background: var(--bg-surface-2); border-radius: 6px; overflow: visible;
}
.tz-cob-barra i {
    display: block; height: 100%; border-radius: 6px;
    transition: width .35s ease;
}
.tz-cob-barra b {
    position: absolute; top: -3px; width: 2px; height: 12px;
    background: var(--text-muted); border-radius: 1px;
}
/* Las etiquetas son contexto; los importes son el dato. Antes pesaban igual y
   había que leer la frase entera para encontrar la cifra. */
.tz-cob-pies {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--text-muted); margin-bottom: 14px;
}
.tz-cob-pies b {
    font-size: 12px; font-weight: 700; color: var(--text-secondary);
    margin-left: 2px;
}
/* El colateral es el extremo que el operador mueve al elegir pagarés: se tiñe
   del mismo verde que la barra para que se lean como una sola cosa. */
.tz-cob-pies b.tz-cob-col { color: var(--color-success); }

/* Tira de cifras: separadores en vez de cajas sueltas. */
.tz-cifras-tira {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    overflow: hidden; margin-bottom: 12px;
}
.tz-cifras-tira > div { padding: 11px 12px; }
.tz-cifras-tira > div + div { border-left: 1px solid var(--border-subtle); }
.tz-cifras-tira b {
    display: block; font-size: 15px; font-weight: 700; color: var(--text-primary);
}
.tz-cifras-tira span {
    display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px;
}

.tz-info-box-warn {
    background: rgba(220, 38, 38, .07) !important;
    color: var(--color-danger) !important;
}
.tz-info-box-warn i { color: var(--color-danger) !important; }

/* ── Progreso de creación, dentro del panel ────────────────────────────────
   Antes era un modal que tapaba la pantalla: la bóveda aparecía como una
   ventana ajena en vez de como el paso siguiente de lo que se venía haciendo. */
.tz-prog { padding: 8px 2px; }
.tz-prog-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.tz-prog-spin {
    width: 34px; height: 34px; flex-shrink: 0;
    border: 2px solid var(--border-default);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: tzProgSpin .9s linear infinite;
}
@keyframes tzProgSpin { to { transform: rotate(360deg); } }
.tz-prog-tit { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.tz-prog-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

.tz-prog-barra {
    height: 4px; background: var(--bg-surface-2);
    border-radius: 4px; overflow: hidden; margin-bottom: 16px;
}
.tz-prog-barra i {
    display: block; height: 100%; width: 0;
    background: var(--color-primary); border-radius: 4px;
    transition: width .5s ease;
}

.tz-prog-fila {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--radius-sm);
    font-size: 12.5px; color: var(--text-muted);
}
.tz-prog-fila.on { background: var(--bg-surface-2); color: var(--text-primary); }
.tz-prog-fila.ok { color: var(--text-primary); }
.tz-prog-fila i  { font-size: 15px; color: var(--text-muted); }
.tz-prog-fila.on i { color: var(--color-primary); }
.tz-prog-fila.ok i { color: var(--color-success); }
.tz-prog-fila b {
    margin-left: auto; font-size: 11px; font-weight: 600;
    color: var(--color-primary);
}
.tz-prog-fila b.ok { color: var(--color-success); }

.tz-prog-pie {
    display: flex; gap: 8px; margin-top: 16px; padding: 10px 12px;
    background: var(--bg-surface-2); border-radius: var(--radius-sm);
    font-size: 11.5px; color: var(--text-secondary); line-height: 1.55;
}
.tz-prog-pie i { flex-shrink: 0; margin-top: 1px; }

/* ── Condiciones del contrato ──────────────────────────────────────────────
   El disponible es lo que limita cuánto se puede pedir, así que se lee antes
   que ninguna otra cifra. El resto acompaña. */
.tz-cond-linea { margin-bottom: 16px; }
.tz-cond-cab   { display: flex; align-items: baseline; margin-bottom: 2px; }
.tz-cond-tit {
    font-size: 11px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .05em;
}
.tz-cond-de  { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.tz-cond-val {
    font-size: 26px; font-weight: 700; line-height: 1.15;
    color: var(--color-success);
}
.tz-cond-barra {
    height: 5px; background: var(--bg-surface-2);
    border-radius: 5px; overflow: hidden; margin: 9px 0 4px;
}
.tz-cond-barra i {
    display: block; height: 100%; background: var(--color-success);
    border-radius: 5px; transition: width .35s ease;
}
.tz-cond-pie { font-size: 11px; color: var(--text-muted); }

/* Rótulo de grupo: dice qué responde el bloque que viene debajo. */
.tz-rotulo {
    font-size: 10.5px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .05em;
    margin: 0 0 7px;
}

.tz-cond-dos {
    display: grid; grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    overflow: hidden; margin-bottom: 14px;
}
.tz-cond-dos > div { padding: 10px 12px; }
.tz-cond-dos > div + div { border-left: 1px solid var(--border-subtle); }
.tz-cond-dos b {
    display: block; font-size: 15px; font-weight: 700; color: var(--text-primary);
}
.tz-cond-dos span {
    display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px;
}

/* Filas dato-valor: son pares, no métricas. Ocupan la mitad que una caja. */
.tz-cond-lista {
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    overflow: hidden;
}
.tz-cond-fila {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; font-size: 12.5px; color: var(--text-secondary);
}
.tz-cond-fila + .tz-cond-fila { border-top: 1px solid var(--border-subtle); }
.tz-cond-fila i { font-size: 14px; color: var(--text-muted); }
.tz-cond-fila b {
    margin-left: auto; font-weight: 700; color: var(--text-primary);
}

/* ── Nueva cesión: línea y monto ───────────────────────────────────────────
   Las dos decisiones caben juntas porque cada una es corta: elegir entre pocas
   líneas y escribir un número. */
.tz-linea-op {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 11px 13px;
    margin-bottom: 7px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.tz-linea-op:hover:not(.off) { border-color: var(--color-primary); }
.tz-linea-op.on {
    border-color: var(--color-primary);
    border-width: 2px;
    padding: 10px 12px;   /* compensa el borde para que no salte */
}
/* Las bloqueadas se ven, con su motivo: ocultarlas haría preguntarse dónde
   están y el bloqueo aparecería más tarde, a medio armar la cesión. */
.tz-linea-op.off { opacity: .5; cursor: not-allowed; }

.tz-linea-cab  { display: flex; align-items: center; gap: 9px; }
.tz-linea-cab i { font-size: 15px; color: var(--text-muted); }
.tz-linea-op.on .tz-linea-cab i { color: var(--color-primary); }
.tz-linea-nom  { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.tz-linea-disp { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--color-success); }
.tz-linea-off  { margin-left: auto; font-size: 11.5px; color: var(--color-danger); }
.tz-linea-cond { font-size: 11px; color: var(--text-muted); margin-top: 3px; padding-left: 24px; }

/* El campo del monto se distingue de una caja de solo lectura: fondo propio,
   borde mas marcado y foco visible. Antes parecia un dato mostrado, no algo
   que se puede escribir. */
.tz-monto-caja {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 9px 13px;
    background: var(--bg-surface-2);
    transition: border-color .15s, background .15s, box-shadow .15s;
    cursor: text;
}
.tz-monto-caja:hover { border-color: var(--color-primary); }
.tz-monto-caja:focus-within {
    border-color: var(--color-primary);
    background: var(--bg-surface);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.tz-monto-caja span { font-size: 13px; color: var(--text-muted); }
.tz-monto-caja input {
    flex: 1; border: none; background: none; outline: none;
    font-size: 22px; font-weight: 700; color: var(--text-primary);
    padding: 0;
}
.tz-monto-topes {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--text-muted);
}

/* ── Detalle de cesión ─────────────────────────────────────────────────────
   Adelanto y respaldo son las dos caras de la operación; la cobertura es su
   relación, no una tercera cifra del mismo rango. */
.tz-ces-hace {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; color: var(--text-muted);
}
.tz-ces-hace i { font-size: 12px; }

.tz-ces-caras {
    display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.tz-ces-caras > div { flex: 1; min-width: 0; }
.tz-ces-caras > div.der { text-align: right; }
.tz-ces-caras > i { font-size: 18px; color: var(--text-muted); flex-shrink: 0; }
.tz-ces-caras .k {
    display: block; font-size: 10.5px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .05em;
}
.tz-ces-caras .v {
    display: block; font-size: 21px; font-weight: 700;
    color: var(--text-primary); line-height: 1.25; margin-top: 2px;
}
.tz-ces-caras .v.ok { color: var(--color-success); }

.tz-ces-barra {
    position: relative; height: 5px; margin-bottom: 5px;
    background: var(--bg-surface-2); border-radius: 5px;
}
.tz-ces-barra i {
    display: block; height: 100%; border-radius: 5px; transition: width .35s ease;
}
.tz-ces-barra b {
    position: absolute; top: -3px; width: 2px; height: 11px;
    background: var(--text-muted); border-radius: 1px;
}
.tz-ces-barra-pie {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--text-muted); margin-bottom: 16px;
}
.tz-ces-barra-pie b { font-weight: 700; }

.tz-ces-filas {
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    overflow: hidden; margin-bottom: 12px;
}
.tz-ces-filas > div {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; font-size: 12.5px;
}
.tz-ces-filas > div + div { border-top: 1px solid var(--border-subtle); }
.tz-ces-filas i { font-size: 14px; color: var(--text-muted); }
.tz-ces-filas i.sep { font-size: 12px; }
.tz-ces-filas .s { color: var(--text-secondary); }
.tz-ces-filas .f { font-weight: 600; color: var(--text-primary); }
.tz-ces-filas b { margin-left: auto; font-weight: 700; color: var(--text-primary); }

/* En un estado de espera lo util es poder revisar lo que se firmo. */
.tz-ces-acciones { display: flex; gap: 8px; margin-bottom: 12px; }
.tz-ces-acciones .tz-btn { flex: 1; justify-content: center; font-size: 12.5px; }

/* ── Incidencia de firma ───────────────────────────────────────────────────
   No es un aviso pasajero: hay instrumentos comprometidos en la bóveda y
   alguien tiene que decidir. Ocupa la pantalla y no se cierra solo. */
.tz-incidencia { padding: 8px 2px; }
.tz-incidencia-cab {
    display: flex; align-items: flex-start; gap: 13px; margin-bottom: 16px;
}
.tz-incidencia-cab > i { font-size: 26px; color: var(--color-danger); flex-shrink: 0; }
.tz-incidencia-cab b {
    display: block; font-size: 15px; font-weight: 700; color: var(--color-danger);
}
.tz-incidencia-cab span {
    display: block; font-size: 12.5px; color: var(--text-secondary);
    line-height: 1.6; margin-top: 3px;
}
.tz-incidencia-detalle {
    padding: 12px 14px; margin-bottom: 14px;
    background: rgba(220, 38, 38, .07);
    border: 1px solid rgba(220, 38, 38, .25);
    border-radius: var(--radius-md);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11.5px; line-height: 1.65; color: var(--text-primary);
    word-break: break-word;
}
.tz-incidencia-pie {
    display: flex; gap: 9px; padding: 11px 13px;
    background: var(--bg-surface-2); border-radius: var(--radius-md);
    font-size: 11.5px; color: var(--text-secondary); line-height: 1.6;
}
.tz-incidencia-pie i { flex-shrink: 0; margin-top: 1px; }

/* Número de copia: es lo que se cita para verificarla, así que se lee como una
   referencia y no como un dato secundario en letra pequeña. */
.tz-copia-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: .02em;
    color: var(--text-primary);
    white-space: nowrap;
}

/* Aviso de rechazo, dentro del panel: pedir el motivo en un modal aparte sacaba
   al usuario del flujo y rompía el diseño. */
.tz-apr-rechazo {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 14px; margin: 14px 0 16px;
    background: rgba(220, 38, 38, .08);
    border-radius: var(--radius-md);
}
.tz-apr-rechazo > i { font-size: 18px; color: var(--color-danger); flex-shrink: 0; }
.tz-apr-rechazo b {
    display: block; font-size: 12.5px; font-weight: 600; color: var(--color-danger);
}
.tz-apr-rechazo span {
    display: block; font-size: 11px; color: var(--color-danger);
    opacity: .85; margin-top: 1px;
}
/* Rechazar no compite con aceptar: es la salida, no la alternativa. */
.tz-btn-danger-text { color: var(--color-danger) !important; }
.tz-btn-danger-text:hover { border-color: var(--color-danger) !important; }

/* ── Panel de bóveda ───────────────────────────────────────────────────────
   Mismo lenguaje para pagarés y paquetes: son dos objetos custodiados por la
   misma bóveda, y verlos distinto obliga a reaprender lo que ya se sabe. */
.tz-bv-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tz-bv-ico {
    width: 46px; height: 46px; border-radius: 12px; flex: none;
    background: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
}
.tz-bv-ico i { font-size: 21px; color: #fff; }
.tz-bv-tit  { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.tz-bv-tit em { font-style: normal; font-weight: 400; color: var(--text-secondary); }
.tz-bv-tags { display: flex; gap: 6px; margin-top: 4px; align-items: center; flex-wrap: wrap; }
.tz-bv-estado {
    font-size: 11px; padding: 2px 9px; border-radius: 999px;
    background: rgba(22,163,74,.12); color: var(--color-success); font-weight: 600;
}
.tz-bv-estado.warn { background: rgba(245,158,11,.14); color: var(--color-warning); }
.tz-bv-tipo {
    font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
    background: var(--bg-surface-2); color: var(--text-muted);
    font-family: var(--font-mono, ui-monospace, monospace);
}

/* Código largo: truncado y copiable. Entero ocupaba media pantalla y aun así
   había que seleccionarlo a mano para usarlo en otra parte. */
.tz-bv-cod {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 11px; margin-bottom: 7px;
    background: var(--bg-surface-2); border-radius: var(--radius-md);
}
.tz-bv-cod > span { font-size: 11px; color: var(--text-muted); flex: none; min-width: 58px; }
.tz-bv-cod > code {
    flex: 1; min-width: 0; font-size: 11.5px; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-mono, ui-monospace, monospace);
}
.tz-bv-cod > button {
    flex: none; padding: 3px 6px; border: none; background: none;
    color: var(--text-muted); cursor: pointer; border-radius: 4px;
}
.tz-bv-cod > button:hover { color: var(--color-primary); background: var(--bg-surface); }

/* Datos en rejilla: cuatro valores cortos ocupan la mitad y se comparan mejor
   que en filas de etiqueta y valor. */
.tz-bv-datos {
    background: var(--bg-surface-2); border-radius: var(--radius-md);
    padding: 12px 14px; margin: 14px 0 18px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
}
.tz-bv-datos .k { font-size: 11px; color: var(--text-muted); }
.tz-bv-datos .v { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-top: 1px; }
.tz-bv-datos .full {
    grid-column: 1 / -1; border-top: 1px solid var(--border-subtle); padding-top: 10px;
}

/* Línea de tiempo: icono en círculo, tarjeta con borde lateral y su transacción. */
.tz-bv-hito { display: flex; gap: 11px; }
.tz-bv-hito-col { display: flex; flex-direction: column; align-items: center; flex: none; }
.tz-bv-hito-ic {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.tz-bv-hito-ic i { font-size: 15px; color: #fff; }
.tz-bv-hito-ln { width: 2px; flex: 1; min-height: 14px; background: var(--border-subtle); }
.tz-bv-hito:last-child .tz-bv-hito-ln { display: none; }
.tz-bv-hito-card {
    flex: 1; min-width: 0; margin-bottom: 10px; padding: 9px 12px;
    border: 1px solid var(--border-subtle); border-left: 3px solid var(--border-default);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.tz-bv-hito-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.tz-bv-hito-top b { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.tz-bv-hito-top span { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.tz-bv-hito-actor { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.tz-bv-hito-tx {
    font-size: 11px; display: inline-flex; align-items: center; gap: 4px;
    margin-top: 4px; color: var(--color-primary); text-decoration: none;
    font-family: var(--font-mono, ui-monospace, monospace);
}
.tz-bv-hito-tx:hover { text-decoration: underline; }

/* Paquetes atascados: cada uno con su motivo, porque liberar es una decisión y
   quien la toma necesita saber por qué está ahí. */
.tz-paq-lista { display: flex; flex-direction: column; gap: 8px; padding: 0 18px 4px; }
.tz-paq-item {
    display: flex; gap: 11px; padding: 11px 13px;
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
}
.tz-paq-chk input { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; }
.tz-paq-info { flex: 1; min-width: 0; }
.tz-paq-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tz-paq-top b { font-size: 13px; color: var(--text-primary); }
.tz-paq-fecha { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.tz-paq-motivo { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.5; }
.tz-paq-error {
    font-size: 11px; color: var(--color-danger); margin-top: 4px;
    font-family: var(--font-mono, ui-monospace, monospace); word-break: break-word;
}
.tz-paq-cifras { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; }

/* Configurar firma: etiqueta al lado del campo. Encima duplicaba el alto del
   formulario, y la ayuda bajo cada campo lo triplicaba. */
.tz-cf-fila {
    display: flex; align-items: center; gap: 12px; margin-bottom: 9px;
}
.tz-cf-fila label {
    flex: none; width: 108px; text-align: right;
    font-size: 12px; color: var(--text-secondary);
}
.tz-cf-fila input {
    flex: 1; min-width: 0;
    padding: 8px 11px; font-size: 13px;
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--bg-surface); color: var(--text-primary);
}
.tz-cf-fila input:focus {
    outline: none; border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}
/* Una sola nota, para el único campo que de verdad necesita explicación. */
.tz-cf-nota {
    font-size: 11px; color: var(--text-muted);
    line-height: 1.5; margin: 2px 0 0 120px;
}

/* En pantallas estrechas la etiqueta vuelve arriba: con el panel a 420 px, un
   campo de 108 px de etiqueta deja poco sitio para escribir. */
@media (max-width: 520px) {
    .tz-cf-fila { flex-direction: column; align-items: stretch; gap: 4px; }
    .tz-cf-fila label { width: auto; text-align: left; }
    .tz-cf-nota { margin-left: 0; }
}

/* Estado de configuración en el menú. Sin identidad no se puede armar una
   cesión, y el operador se enteraba al fallar el armado: mejor decirlo antes. */
.tz-cfg-badge { margin-left: auto; }
.tz-cfg-badge.falta {
    font-size: 10px; font-weight: 700; letter-spacing: .03em;
    padding: 1px 7px; border-radius: 999px;
    background: rgba(245, 158, 11, .16); color: var(--color-warning);
}
/* Configurado no lleva texto: un punto basta, y una fila de "OK" sería ruido. */
.tz-cfg-badge.ok {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--color-success); flex: none;
}

/* Campo suelto: etiqueta encima y ayuda debajo, a todo el ancho. El formato en
   columnas gana cuando hay varias filas que alinear; con una sola deja media
   pantalla vacía a la izquierda. */
.tz-cf-bloque label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--text-secondary); margin-bottom: 6px;
}
.tz-cf-bloque input {
    width: 100%; padding: 9px 12px; font-size: 13px;
    font-family: var(--font-mono, ui-monospace, monospace);
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--bg-surface); color: var(--text-primary);
}
.tz-cf-bloque input:focus {
    outline: none; border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}
.tz-cf-ayuda {
    font-size: 11.5px; color: var(--text-muted);
    line-height: 1.55; margin-top: 6px;
}

/* Sello de verificación de firma. Que sea automático no lo hace decorativo: es
   lo que el adquirente debería comprobar antes de aceptar. */
.tz-sello {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 13px; margin-top: 10px;
    border-radius: var(--radius-md); font-size: 12.5px;
}
.tz-sello > i:first-child { font-size: 19px; flex: none; }
.tz-sello span { display: flex; flex-direction: column; min-width: 0; }
.tz-sello b { font-weight: 600; }
.tz-sello em { font-style: normal; font-size: 11px; opacity: .8; margin-top: 1px; }
.tz-sello-chv { margin-left: auto; font-size: 13px; opacity: .5; }

.tz-sello-ok    { background: rgba(22,163,74,.10); color: var(--color-success); cursor: pointer; }
.tz-sello-mal   { background: rgba(220,38,38,.10); color: var(--color-danger);  cursor: pointer; }
.tz-sello-duda  { background: var(--bg-surface-2); color: var(--text-muted); }
.tz-sello-cargando { background: var(--bg-surface-2); color: var(--text-muted); }
.tz-sello-ok:hover, .tz-sello-mal:hover { filter: brightness(.97); }

.tz-firmante {
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    padding: 12px 14px; margin-bottom: 10px;
}
.tz-firmante-cab { display: flex; align-items: center; gap: 8px; }
.tz-firmante-cab i.ok  { color: var(--color-success); }
.tz-firmante-cab i.mal { color: var(--color-danger); }
.tz-firmante-cab b { font-size: 13px; }
.tz-firmante-org { font-size: 11.5px; color: var(--text-muted); margin: 2px 0 8px 24px; }
.tz-firmante-chk { display: flex; flex-direction: column; gap: 5px; margin-left: 24px; }
.tz-firmante-chk span { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.tz-firmante-chk .ok     { color: var(--color-success); }
.tz-firmante-chk .mal    { color: var(--color-danger); }
.tz-firmante-chk .neutro { color: var(--text-muted); }
.tz-firmante-huella {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px; color: var(--text-muted);
    margin: 9px 0 0 24px; word-break: break-all; line-height: 1.5;
}

/* Visor de la carta: ocupa TODO el alto libre del panel.
   Con una altura calculada a ojo -100vh menos tanto- siempre sobra o falta:
   sobraba, y quedaba una franja vacía bajo el documento mientras la carta se
   leía pequeña. Estirando el cuerpo, el visor toma lo que haya. */
#apr-paso-carta {
    display: flex; flex-direction: column;
    height: 100%; min-height: 0;
}
#apr-paso-carta .tz-visor-wrap {
    /* Sin el margen superior propio del visor: encima ya está la barra de
       pasos con su separación, así que sumaba dos veces. */
    flex: 1; min-height: 260px; display: flex; margin-top: 0 !important;
}
/* El cuerpo del panel deja 20 px por lado; en este paso el documento gana ese
   alto y conserva el margen lateral, que sí hace falta para no pegarlo al borde. */
#view-aprobaciones .tz-drawer-body:has(#apr-paso-carta),
.tz-drawer-body:has(#apr-paso-carta) { padding-top: 12px; padding-bottom: 12px; }
/* La barra de pasos, más ceñida: su relleno vertical se sumaba al del cuerpo. */
#apr-paso-carta ~ .tz-steps-bar, .tz-drawer-body:has(#apr-paso-carta) .tz-steps-bar {
    padding: 4px 0; margin-bottom: 10px;
}
#apr-visor { height: 100%; flex: 1; }

/* El mensaje de carga hereda una altura fija del estilo general, que ya no
   coincide con el contenedor flexible: se quedaba arriba y a la izquierda en
   vez de centrado. Aqui ocupa la caja entera y se centra en ella. */
#apr-visor-msg {
    flex: 1; height: auto !important; min-height: 0 !important;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px;
}

/* El sello vive en el PIE, a la izquierda: ese hueco ya existe y está vacío en
   el paso de la carta, así que la verificación no le quita alto al documento.
   En una línea, porque compite con los botones por la misma fila. */
.tz-sello {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 11px; margin: 0; border-radius: 999px;
    font-size: 12px; font-weight: 500; white-space: nowrap;
}
.tz-sello > i:first-child { font-size: 15px; }
.tz-sello span { flex-direction: row; }

/* Espera de la firma de aceptación, por fases. El contador "0 de 1" no informa
   de nada cuando solo se firma un documento; las fases dicen qué está pasando. */
.tz-espera-fases2 { padding: 4px 2px; }
.tz-fase { display: flex; align-items: flex-start; gap: 11px; padding: 8px 0; }
/* El div de titulo+cuerpo (segundo hijo, sin clase) no se estiraba -sin
   flex:1 un flex item solo mide su contenido, asi que el ancho:100% del
   mini-tracker (ver components.css) se calculaba sobre ESE div angosto,
   no sobre el ancho real de la fila. min-width:0 para que el texto largo
   pueda achicarse en vez de forzar overflow horizontal. */
.tz-fase > div { flex: 1; min-width: 0; }
.tz-fase-p {
    width: 24px; height: 24px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; background: var(--bg-surface-2); color: var(--text-muted);
}
.tz-fase b { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.tz-fase i { display: block; font-style: normal; font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.tz-fase.on  .tz-fase-p { background: var(--color-primary); color: #fff; }
/* El spinner se veia parado: tz-spinner-sm solo fija tamano y grosor, y el
   borde y el giro los pone la clase base, que aqui no estaba. Se define entero
   para la fase activa, en blanco sobre el circulo azul. */
.tz-fase.on .tz-fase-p .tz-spinner-sm {
    width: 13px; height: 13px; margin: 0;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tz-prog-giro .7s linear infinite;
}
.tz-fase.on  b { color: var(--text-primary); }
.tz-fase.ok  .tz-fase-p { background: var(--color-success); color: #fff; font-size: 13px; }
.tz-fase.ok  b { color: var(--text-primary); }

/* El enlace de descarga arriba: si la app no se abrió, se busca antes de leer
   las fases, no después. */
.tz-descarga {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; margin-bottom: 14px;
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    text-decoration: none; font-size: 12.5px; color: var(--text-primary);
}
.tz-descarga:hover { border-color: var(--color-primary); }
.tz-descarga > i:first-child { font-size: 15px; color: var(--color-primary); }
.tz-descarga b { color: var(--color-primary); font-weight: 600; }
.tz-descarga-chv { margin-left: auto; color: var(--text-muted); }

/* ID del tenant en el menú de usuario. Hace falta para vincular con la bóveda
   y para soporte; truncado porque entero es ilegible, copiable porque es lo
   único que se hace con él. */
.tz-tenant-id {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 4px; padding: 2px 6px 2px 0;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px; color: var(--text-muted);
    cursor: pointer; border-radius: 4px;
}
.tz-tenant-id:hover { color: var(--color-primary); }
.tz-tenant-id i { font-size: 11px; opacity: .6; }
.tz-tenant-id:hover i { opacity: 1; }

/* Rótulo del identificador. Ocupa la línea donde antes se repetía el rol, que
   ya se ve en el distintivo de la cabecera. */
.tz-tenant-rotulo {
    font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
    color: var(--text-muted); margin-top: 7px;
}

/* Resumen del contrato: titulo + caja tipo <code> scrolleable. Las acciones
   de copiar/descargar van en la MISMA fila que el titulo -no flotando
   encima del texto con position:absolute-: con dos botones (28px c/u + gap)
   el padding-derecho fijo de la caja no alcanzaba y se solapaban con el
   texto y con la barra de scroll. En la fila del titulo nunca compiten con
   nada. No es un acordeon -es texto de lectura corrida generado siempre
   desde los datos reales de la linea (ver resumenContratoDetalle en
   contratos.js), asi que nunca queda desactualizado como el texto libre
   que se guardaba antes en c.terms. */
.tz-resumen-cab {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin: 18px 0 8px;
}
.tz-resumen-tit {
    font-size: 12px; font-weight: 700; letter-spacing: .03em;
    color: var(--text-secondary); text-transform: uppercase;
    margin: 0;
}
.tz-resumen-actions { display: flex; gap: 6px; flex-shrink: 0; }
.tz-resumen-btn {
    width: 28px; height: 28px; border-radius: 6px;
    border: 1px solid var(--border-default);
    background: var(--bg-surface); color: var(--text-secondary);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 13px; transition: background .12s, color .12s;
}
.tz-resumen-btn:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.tz-resumen-box {
    margin: 0; max-height: 220px; overflow-y: auto;
    background: var(--bg-surface-2); border: 1px solid var(--border-default);
    border-radius: 8px; padding: 16px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px; line-height: 1.75; color: var(--text-primary);
    white-space: pre-wrap; word-break: break-word;
}

/* Pestañas dentro del detalle de una linea (Contrato/Financieras/Reglas):
   TzDrawer no trae pestañas propias, asi que se arman aqui con el mismo
   patron que ya usa el dashboard (.op-ptabs/.op-pane), pero con clases
   propias para no depender de dashboard.css, que esta pantalla no carga. */
.tz-dtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-subtle); margin: -4px 0 14px; }
.tz-dtab {
    border: none; background: none; padding: 9px 13px; font-size: 13px;
    color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent;
    font-family: inherit; margin-bottom: -1px;
}
.tz-dtab:hover { color: var(--text-primary); }
.tz-dtab.on { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.tz-dpane[hidden] { display: none; }

/* Tarjetas de las partes del contrato: logo/avatar + nombre + rol, y debajo
   tenant ID y DID copiables con un clic. Reemplaza la fila plana de
   dato-valor que tenian antes 'Fondo gestor'/'Fintech financiada'. */
.tz-partes-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.tz-parte-card { background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px 13px; }
.tz-parte-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.tz-parte-head-txt { min-width: 0; flex: 1 1 auto; }
.tz-parte-avatar { width: 32px; height: 32px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
.tz-parte-avatar-fallback {
    width: 32px; height: 32px; border-radius: 7px; background: var(--color-primary-soft);
    color: var(--color-primary); display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 12px; flex-shrink: 0;
}
.tz-parte-nombre { font-size: 13px; font-weight: 600; margin: 0; }
.tz-parte-rol { font-size: 11px; color: var(--text-secondary); }
.tz-parte-ids { border-top: 1px solid var(--border-subtle); padding-top: 7px; font-size: 11.5px; }
.tz-parte-id-row { display: flex; align-items: center; padding: 2px 0; gap: 8px; }
.tz-parte-id-k { color: var(--text-secondary); flex-shrink: 0; }
.tz-parte-id-v {
    font-family: var(--font-mono, ui-monospace, monospace); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; cursor: pointer; display: flex; align-items: center; gap: 4px;
    min-width: 0; flex: 1 1 auto; justify-content: flex-end; margin-left: auto;
}
.tz-parte-id-v i { flex-shrink: 0; }
.tz-parte-id-v:hover { color: var(--color-primary); }
.tz-parte-id-v.tz-sin-dato { color: var(--text-muted); cursor: default; }

/* Menu de 3 puntos en el pie de la tarjeta del listado, para las acciones
   que casi no se usan (Boveda, Expediente) -no ameritan un boton propio
   compitiendo por espacio con Ver contrato/editar/activar/cancelar. */
.tz-kebab-wrap { position: relative; display: inline-block; }
.tz-kebab-menu {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 40;
    background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: 4px; min-width: 170px;
}
.tz-kebab-menu[hidden] { display: none; }
.tz-kebab-item {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    border: none; background: none; padding: 8px 10px; font-size: 13px; border-radius: 6px;
    color: var(--text-primary); cursor: pointer; font-family: inherit;
}
.tz-kebab-item:hover { background: var(--bg-surface-2); }

.tz-cv2-top-right { display: flex; align-items: center; gap: 8px; }
.tz-cv2-kebab-btn {
    width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border-subtle);
    background: var(--bg-surface); color: var(--text-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
    flex-shrink: 0; transition: background .12s, color .12s;
}
.tz-cv2-kebab-btn:hover { background: var(--bg-surface-2); color: var(--text-primary); }

/* Texto de la plantilla de carta de cesion: valores que aun no existen a
   nivel de contrato (monto solicitado, colateral) se pintan distinto -
   italica + fondo de color- para no confundirlos con el texto legal fijo
   que si va a firmarse tal cual. Ver formatearPlantilla() en contratos.js. */
.tz-plantilla-box p:last-child { margin-bottom: 0 !important; }
.tz-plantilla-valor {
    font-style: italic;
    background: rgba(245, 158, 11, .16);
    color: var(--color-warning);
    padding: 1px 5px;
    border-radius: 4px;
}