/* ── Contrato card ──────────────────────────────────────────── */
.tz-contrato-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: 14px;
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.tz-contrato-card:hover { box-shadow: var(--shadow-md); }

.tz-contrato-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
    flex-wrap: wrap;
    gap: 10px;
}

.tz-contrato-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tz-contrato-icon {
    width: 36px;
    height: 36px;
    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-contrato-nombre {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.tz-contrato-partes {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Línea de crédito barra ─────────────────────────────────── */
.tz-contrato-linea {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface-2);
}

.tz-contrato-linea-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
}

.tz-progress-bar {
    height: 6px;
    background: var(--border-subtle);
    border-radius: 3px;
    overflow: hidden;
}

.tz-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* ── Reglas chips ───────────────────────────────────────────── */
.tz-contrato-reglas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.tz-regla-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.tz-regla-chip i { color: var(--color-primary); font-size: 11px; }

/* ── Footer ─────────────────────────────────────────────────── */
.tz-contrato-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}

/* ── Contratos grid 3 columnas ──────────────────────────────── */
.tz-contratos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 1100px) { .tz-contratos-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 700px)  { .tz-contratos-grid { grid-template-columns: 1fr; } }

/* ── Card v2 ────────────────────────────────────────────────── */
.tz-contrato-card-v2 {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.15s;
}
.tz-contrato-card-v2:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.tz-cv2-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 8px;
}

.tz-cv2-tipo {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.tz-cv2-tipo i { color: var(--color-primary); font-size: 12px; }

.tz-cv2-nombre {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 0 14px 5px;
    line-height: 1.3;
}

.tz-cv2-partes {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 10px;
    background: var(--bg-surface-2);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}
.tz-cv2-parte { flex: 1; min-width: 0; }
.tz-cv2-parte-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.tz-cv2-parte-val {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.tz-cv2-arrow {
    color: var(--text-muted);
    font-size: 11px;
    flex-shrink: 0;
}

/* ── Línea ───────────────────────────────────────────────────── */
.tz-cv2-linea {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
}
.tz-cv2-linea-nums {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.tz-cv2-monto {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

/* ── Reglas ──────────────────────────────────────────────────── */
.tz-cv2-reglas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
}
.tz-cv2-regla {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-secondary);
}
.tz-cv2-regla i { color: var(--color-primary); font-size: 11px; flex-shrink:0; }

/* ── Footer acciones ─────────────────────────────────────────── */
.tz-cv2-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--bg-surface);
    flex-wrap: wrap;
}

.tz-cv2-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.tz-cv2-btn:hover {
    background: var(--bg-surface-2);
    color: var(--color-primary);
    border-color: var(--color-primary-border);
}
.tz-cv2-btn-success {
    background: rgba(26,127,90,0.06);
    color: var(--color-success);
    border-color: rgba(26,127,90,0.2);
}
.tz-cv2-btn-success:hover {
    background: rgba(26,127,90,0.12);
    color: var(--color-success);
}
.tz-cv2-btn-danger {
    color: var(--color-danger);
    border-color: rgba(185,28,28,0.2);
}
.tz-cv2-btn-danger:hover {
    background: rgba(185,28,28,0.06);
}

/* ── Bóveda info box ────────────────────────────────────────── */
.tz-boveda-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.tz-boveda-info i { color: var(--color-accent); flex-shrink: 0; margin-top: 1px; }

.tz-doc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    margin-bottom: 5px;
    font-size: 12px;
    color: var(--text-secondary);
}
.tz-doc-item i { color: var(--color-primary); }

/* ── KPIs en card contrato ──────────────────────────────────── */
.tz-cv2-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.6fr;
    gap: 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 0;
}
.tz-cv2-kpi {
    padding: 8px 10px;
    border-right: 1px solid var(--border-subtle);
}
.tz-cv2-kpi:last-child { border-right: none; }
.tz-cv2-kpi-val {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}
.tz-cv2-kpi-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* ── Bóveda lista ───────────────────────────────────────────── */
.tz-boveda-list { display: flex; flex-direction: column; gap: 0; }

.tz-boveda-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.tz-boveda-item:last-child { border-bottom: none; }

.tz-boveda-item-icon {
    width: 32px;
    height: 32px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

.tz-boveda-item-body { flex: 1; min-width: 0; }

.tz-boveda-item-nombre {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tz-boveda-item-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.tz-boveda-item-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.tz-boveda-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
}
.tz-boveda-empty i {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
    opacity: 0.4;
}
.tz-boveda-empty p { font-size: 12px; margin: 2px 0; }

/* ── Grupos en condiciones comerciales ─────────────────────── */
.tz-cond-grupos { display: flex; flex-direction: column; gap: 14px; }

.tz-cond-grupo {
    background: #f9fafb;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.tz-cond-grupo-title {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border-bottom: 1px solid var(--color-primary-border);
}
.tz-cond-grupo-title i { font-size: 12px; }

.tz-cond-grupo .tz-detail-grid { padding: 4px 12px; }
.tz-cond-grupo .tz-detail-row { padding: 6px 0; }

/* ── ID badge ───────────────────────────────────────────────── */
.tz-id-badge {
    display: inline-block;
    font-family: monospace;
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    padding: 1px 5px;
    margin-top: 2px;
    letter-spacing: 0.02em;
}

/* ── KPI de referencia (TEA + Vence apilados) ───────────────── */
.tz-cv2-kpi-ref {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}
.tz-cv2-kpi-ref-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px 10px;
}
.tz-cv2-kpi-ref-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 0;
}
.tz-cv2-kpi-ref-val {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.tz-cv2-kpi-ref-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 1px;
}

/* ── Barra de filtros ─────────────────────────────────────────
   La lista crece con cada tenant nuevo, asi que hace falta acotarla por pais,
   NAV o cualquiera de las dos partes. Las opciones salen de los contratos que
   existen, no del catalogo completo. */
.tz-filtros-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
}
/* Este buscador coloca el icono ENCIMA del input (absoluto), mientras que el de
   components.css lo pone como un elemento mas de una fila flex. Al declararse
   sin acotar, este pisaba al otro en TODAS las vistas y el icono terminaba
   montado sobre el texto. Se acota a los buscadores que usan .tz-search-input,
   que es el patron de esta pantalla. */
.tz-search-wrap:has(> .tz-search-input) { position: relative; flex: 1 1 240px; min-width: 200px; }
.tz-search-wrap > .tz-search-input ~ .tz-search-icon,
.tz-search-wrap > .tz-search-icon + .tz-search-input ~ i,
.tz-search-wrap:has(> .tz-search-input) > .tz-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--text-muted, #8ba6c4);
    pointer-events: none;
}
.tz-search-input { padding-left: 32px !important; }
/* La X nativa de type=search cambia de estilo en cada navegador. */
.tz-search-input::-webkit-search-cancel-button { cursor: pointer; }

/* ── Resumen de la línea ──────────────────────────────────────
   Traduce los indicadores cargados a una frase. Revisar 19 campos numericos no
   deja ver si el conjunto tiene sentido; leerlo en palabras si. */
.tz-resumen-linea {
    background: rgba(43, 196, 180, .07);
    border: 1px solid rgba(43, 196, 180, .28);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.55;
}
.tz-resumen-titulo {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #2bc4b4;
    margin-bottom: 7px;
}

/* ── Select dentro de un diálogo de confirmación ──────────────
   .tz-select solo tiene estilos bajo .tz-drawer, asi que en un modal salia con
   la apariencia nativa del navegador. */
.tz-confirm-select {
    width: 100%;
    padding: 9px 32px 9px 12px;
    margin-top: 4px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px);
    outline: none;
    cursor: pointer;
    /* Flecha propia: la nativa no respeta el resto del estilo. */
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ba6c4'%3E%3Cpath d='M4.5 6l3.5 3.5L11.5 6'  stroke='%238ba6c4' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px;
    transition: border-color .15s, box-shadow .15s;
}
.tz-confirm-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* ── Datos del fileserver en el paso de reglas ────────────────
   Prefijo tz-fs- y no tz-nav-: esa ultima la usa el MENU LATERAL, y reusarla
   le pintaba bordes y padding a cada opcion del menu.
   Donde quedan custodiados los pagares de la linea. Se muestran los que conoce
   Tokeniza; la red blockchain y el bucket los define el propio NAV. */
.tz-fs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}
.tz-fs-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 11px;
    background: rgba(130, 150, 180, .06);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    min-width: 0;
}
.tz-fs-wide { grid-column: 1 / -1; }
.tz-fs-k {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted, #8ba6c4);
}
.tz-fs-v { font-size: 13px; color: var(--text-primary); }
/* El UUID y la URL se cortan en vez de desbordar la tarjeta. */
.tz-mono {
    font-family: monospace;
    font-size: 11px;
    overflow-wrap: anywhere;
}

/* ── ID de la línea en la tarjeta ─────────────────────────────
   Es lo que se pega en una integracion o se pasa a soporte; tenerlo ahi evita
   abrir el detalle solo para copiarlo. */
.tz-cv2-id {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 5px;
    /* Alineado con el nombre y el resto del contenido de la tarjeta. */
    padding-left: 15px;
}
.tz-cv2-id code {
    font-family: monospace;
    /* 10px: el UUID completo son 36 caracteres y a 11px no entraba en la
       tarjeta. Sin truncar se puede leer y comparar de un vistazo. */
    font-size: 10px;
    letter-spacing: -0.2px;
    color: var(--text-muted, #8ba6c4);
    white-space: nowrap;
}
.tz-tid-copy {
    background: none;
    border: none;
    padding: 2px 4px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted, #8ba6c4);
    opacity: .6;
    font-size: 11px;
}
.tz-tid-copy:hover { opacity: 1; }

/* ── Checkbox con explicación ─────────────────────────────────
   Para opciones cuyo efecto no se entiende por el titulo solo: el texto chico
   dice que pasa al activarla. */
.tz-check-line {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
    padding: 10px 12px;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: rgba(130, 150, 180, .04);
}
.tz-check-line:hover { background: rgba(130, 150, 180, .08); }
.tz-check-line input { margin-top: 2px; flex-shrink: 0; }
.tz-check-line span   { display: flex; flex-direction: column; gap: 3px; }
.tz-check-line b      { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.tz-check-line small  { font-size: 11px; color: var(--text-muted, #8ba6c4); line-height: 1.45; }

/* ── Próxima revisión contractual ─────────────────────────────
   Cuando llega el corte, si la cartera incumple se ejecuta la acción de la
   línea. Verlo en la tarjeta le da al operador margen para corregir antes. */
.tz-corte {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 14px 10px;
    padding: 8px 11px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.4;
    background: rgba(130, 150, 180, .08);
    color: var(--text-secondary);
}
.tz-corte i { margin-top: 1px; flex-shrink: 0; }
.tz-corte small {
    display: block;
    font-size: 11px;
    opacity: .75;
    margin-top: 1px;
}
/* A menos de una semana ya no hay mucho margen. */
.tz-corte-cerca {
    background: rgba(245, 158, 11, .12);
    color: #b45309;
}
/* El bloqueo no es un aviso: es una consecuencia que ya ocurrió. */
.tz-corte-stop {
    background: rgba(220, 38, 38, .12);
    color: #b91c1c;
    font-weight: 500;
}

/* ── Incidencias de la revisión contractual ───────────────────
   El motivo resumido del bloqueo no alcanza para actuar: hace falta ver qué
   instrumento falla, con qué saldo y por qué regla. */
.tz-corte-click { cursor: pointer; position: relative; padding-right: 26px; }
.tz-corte-click:hover { filter: brightness(0.97); }
.tz-corte-chev { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: .6; }

.tz-inc-cabecera {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: rgba(130, 150, 180, .06);
    border-radius: 9px;
    font-size: 13px;
}
.tz-inc-k { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
            color: var(--text-muted, #8ba6c4); margin-bottom: 2px; }

/* Los hallazgos de cartera no cuelgan de ningún pagaré, así que van aparte. */
.tz-inc-conjunto {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 10px 12px; margin-bottom: 10px;
    background: rgba(245, 158, 11, .1);
    border-left: 3px solid #f59e0b;
    border-radius: 7px;
    font-size: 12.5px; line-height: 1.45;
}

.tz-inc {
    border: 1px solid var(--border-default);
    border-left: 3px solid #dc2626;
    border-radius: 9px;
    padding: 11px 13px;
    margin-bottom: 9px;
    background: var(--bg-surface);
}
.tz-inc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tz-inc-num { font-weight: 700; font-size: 13.5px; }
.tz-inc-monto { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.tz-inc-meta { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; }
.tz-inc-plazo {
    display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 20px;
    background: rgba(245, 158, 11, .16); color: #b45309; font-weight: 600; font-size: 10.5px;
}
.tz-inc-motivos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tz-inc-motivo {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 20px;
    background: rgba(220, 38, 38, .1); color: #b91c1c; font-size: 11px;
}
.tz-inc-motivo code { font-family: monospace; font-size: 10.5px; opacity: .85; }
.tz-inc-cf { display: flex; gap: 6px; margin-top: 9px; }
.tz-inc-sinnav { font-size: 11px; color: var(--text-muted, #8ba6c4); font-style: italic; }

/* Acción del corte. El color separa lo que solo avisa de lo que ya frenó la
   operación: no es lo mismo una alerta que una línea bloqueada. */
.tz-acc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}
.tz-acc-badge i { font-size: 10px; }
/* La consecuencia va debajo, no dentro del badge: explicarla adentro lo
   agrandaba hasta desequilibrar la cabecera. */
.tz-acc-desc {
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    line-height: 1.35;
    color: var(--text-muted, #8ba6c4);
}
.tz-acc-ok   { background: rgba(43, 196, 180, .16); color: #0f766e; }
.tz-acc-warn { background: rgba(245, 158, 11, .18); color: #b45309; }
.tz-acc-stop { background: #dc2626; color: #fff; }

/* Liberar el bloqueo. Va arriba de todo: es la acción que resuelve la
   situación, no un detalle más del diagnóstico. */
.tz-inc-liberar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    margin-bottom: 12px;
    background: rgba(220, 38, 38, .08);
    border: 1px solid rgba(220, 38, 38, .25);
    border-radius: 9px;
}
.tz-inc-liberar b     { font-size: 13px; color: #b91c1c; }
.tz-inc-liberar small { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

/* Liberar el bloqueo. Va arriba de todo: es la acción que resuelve la
   situación, no un detalle más del diagnóstico. */
.tz-inc-liberar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    margin-bottom: 12px;
    background: rgba(220, 38, 38, .08);
    border: 1px solid rgba(220, 38, 38, .25);
    border-radius: 9px;
}
.tz-inc-liberar b     { font-size: 13px; color: #b91c1c; }
.tz-inc-liberar small { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 2px; }