/* ================================================================
   Tokeniza — Drawer (panel lateral deslizante)
   ================================================================ */

.tz-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    /* Por encima de CUALQUIER otro modal de la app -el mas alto hoy es el
       lightbox de firma visible, 9600-: un drawer se abre casi siempre COMO
       RESPUESTA a algo que el usuario esta viendo en otro modal (ej. el
       desglose de un cuadrante desde 'Salud de la cartera'), asi que tiene
       que quedar siempre arriba, nunca detras. Por debajo del toast (9999),
       que debe verse pase lo que pase. */
    z-index: 9700;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.tz-drawer-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.tz-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* 360px quedaba corto para paneles con tarjetas y datos en dos columnas;
       460px seguia quedando justo para el Historial (badges de Estado ->
       Situación con flecha, ej. 'Cambio de situación'). */
    /* Ancho base. Ojo: TzDrawer._applySavedWidth() lo sobrescribe por estilo en
       linea al abrir, asi que el valor que manda es ANCHO_DEFECTO en
       drawer.js. Este queda como respaldo si el JS no llega a correr. */
    width: 420px;       /* ancho base; redimensionable y recordado en el navegador */
    max-width: 100vw;
    background: var(--bg-surface);
    z-index: 9701;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 32px rgba(0,0,0,0.12);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.tz-drawer.open {
    transform: translateX(0);
}

/* Handle de arrastre para redimensionar (borde izquierdo) */
.tz-drawer-resizer {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    cursor: ew-resize;
    z-index: 6;
    background: transparent;
    transition: background 0.15s ease;
    touch-action: none;
}
.tz-drawer-resizer:hover,
.tz-drawer-resizer:active {
    background: var(--color-primary, #1a7f5a);
    opacity: 0.45;
}

/* ── Header del drawer ─────────────────────────────────────── */
.tz-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

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

.tz-drawer-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: 15px;
    flex-shrink: 0;
}

.tz-drawer-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.tz-drawer-step-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

.tz-drawer-close {
    width: 30px;
    height: 30px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: background 0.15s, color 0.15s;
    font-size: 14px;
}
.tz-drawer-close:hover {
    background: var(--border-subtle);
    color: var(--text-primary);
}

/* ── Steps ─────────────────────────────────────────────────── */
.tz-drawer-steps {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-subtle);
    gap: 0;
    flex-shrink: 0;
    background: var(--bg-surface-2);
}

.tz-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    cursor: default;
}

.tz-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 14px;
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
    height: 2px;
    background: var(--border-default);
    z-index: 0;
}

.tz-step.done:not(:last-child)::after {
    background: var(--color-primary);
}

.tz-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: var(--bg-surface);
    border: 2px solid var(--border-default);
    color: var(--text-muted);
    position: relative;
    z-index: 1;
    transition: all 0.2s;
}

.tz-step.active .tz-step-num {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.tz-step.done .tz-step-num {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.tz-step-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tz-step.active .tz-step-label { color: var(--color-primary); }
.tz-step.done .tz-step-label   { color: var(--color-primary); }

/* ── Body del drawer ───────────────────────────────────────── */
.tz-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.tz-drawer-body::-webkit-scrollbar { width: 4px; }
.tz-drawer-body::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 2px;
}

/* ── Secciones del formulario ──────────────────────────────── */
.tz-form-section {
    margin-bottom: 20px;
}

.tz-form-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-primary-border);
}

.tz-form-section-title i { font-size: 13px; }

.tz-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 10px;
    /* Las celdas se estiran a la altura de la mas alta; dentro de cada una las
       bandas mantienen los controles alineados entre columnas. */
    align-items: stretch;
}
.tz-form-row > .tz-field {
    display: grid;
    /* Tres bandas: etiqueta, control y ayuda. La etiqueta se apoya abajo de su
       banda y la ayuda arriba de la suya, asi un label de dos lineas o un hint
       largo no desplazan el input del campo vecino. */
    grid-template-rows: auto auto 1fr;
    align-content: start;
}
.tz-form-row > .tz-field > .tz-label      { align-self: end; }
.tz-form-row > .tz-field > .tz-field-hint { align-self: start; }

.tz-form-row.full { grid-template-columns: 1fr; }

/* ── Footer del drawer ─────────────────────────────────────── */
.tz-drawer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
    background: var(--bg-surface);
}

.tz-drawer-footer-right {
    display: flex;
    gap: 8px;
}

/* ── Inputs en drawer ──────────────────────────────────────── */
.tz-drawer .tz-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 5px;
        padding-top: 5px;
}

.tz-drawer .tz-input,
.tz-drawer .tz-select {
    width: 100%;
    padding: 8px 11px;
    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);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tz-drawer .tz-input:focus,
.tz-drawer .tz-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.tz-drawer .tz-input.has-error {
    border-color: var(--color-danger);
}

.tz-field-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.tz-field-error-msg {
    font-size: 11px;
    color: var(--color-danger);
    margin-top: 4px;
    display: none;
}
.tz-field-error-msg.show { display: block; }

/* ── Invite link result ────────────────────────────────────── */
.tz-invite-result {
    background: var(--bg-surface-2);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-top: 16px;
}
.tz-invite-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}
.tz-invite-link-row code {
    flex: 1;
    font-size: 11px;
    color: var(--color-primary);
    background: var(--bg-surface);
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    word-break: break-all;
    line-height: 1.5;
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tz-drawer { width: 100vw; }
    .tz-drawer-resizer { display: none; }
}

/* ── Acordeón en drawer ─────────────────────────────────────── */
.tz-accordion { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 10px; }

.tz-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    cursor: pointer;
    background: var(--bg-surface-2);
    user-select: none;
    transition: background 0.15s;
}
.tz-accordion-header:hover { background: var(--bg-surface-2); filter: brightness(0.97); }

.tz-accordion-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
}
.tz-accordion-title i { font-size: 13px; }

.tz-accordion-chevron {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
.tz-accordion.open .tz-accordion-chevron { transform: rotate(180deg); }

.tz-accordion-body {
    display: none;
    padding: 12px 14px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-surface);
}
.tz-accordion.open .tz-accordion-body { display: block; }


/* Con el drawer abierto, el fondo no debe desplazarse: el scroll del ratón y
   las flechas del teclado se iban a la página de atrás en vez de mover el
   panel. Se conserva el ancho de la barra para que el contenido no salte. */
body.tz-drawer-open {
    overflow: hidden;
    padding-right: var(--tz-sbw, 0px);
}

/* Sin contorno al enfocarlo por código: el foco entra ahí para que las flechas
   muevan el panel, no para señalar un control. */
.tz-drawer-body:focus { outline: none; }

/* ── Editor de la carta de cesión ──────────────────────────────────────────
   Ocupa todo el alto del panel: la carta se redacta aquí y en una caja de
   ocho líneas no se ve el documento, solo un trozo. El panel es
   redimensionable, así que quien necesite más ancho lo arrastra. */
.tz-letter-wrap {
    display: flex;
    flex-direction: column;
    /* El descuento cubre cabecera, barra de pasos, pie y la linea de cifras que
       va bajo el editor. Con 210 px el editor la empujaba fuera de la vista y
       obligaba a desplazarse para leer pagares, colateral y cobertura, que es
       justo lo que hay que comprobar antes de crear el paquete. */
    height: calc(100vh - 320px);
    min-height: 320px;
}
.tz-letter-wrap .tz-letter-hint {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 10px;
}
.tz-letter-area {
    flex: 1;
    width: 100%;
    resize: none;
    font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
    font-size: 12.5px;
    line-height: 1.7;
    padding: 14px 16px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
}
.tz-letter-area:focus {
    outline: none;
    border-color: var(--color-primary);
}
.tz-letter-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

/* Pestañas del paso 2: resumen del paquete y carta de cesión. */
.tz-p2-tabs {
    display: flex;
    gap: 4px;
    margin-top: 14px;
    border-bottom: 1px solid var(--border-default);
}
.tz-p2-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color .15s, border-color .15s;
}
.tz-p2-tab:hover { color: var(--text-primary); }
.tz-p2-tab.tz-tab-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}

/* Botón de ampliar en el editor de la carta. El panel solo cambia de ancho
   cuando el usuario lo pide: moverlo solo por cambiar de paso marea. */
.tz-letter-max {
    background: none;
    border: 0.5px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 11.5px;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.tz-letter-max:hover { border-color: var(--color-primary); color: var(--color-primary); }
/* Ampliado hay sitio de sobra, pero la linea de cifras sigue necesitando el
   suyo: el editor no puede quedarse con todo el alto. */
.tz-drawer-max .tz-letter-wrap { height: calc(100vh - 280px); }

/* Título de la carta. Sustituye a las tres líneas de instrucciones que había:
   es una tarea repetitiva y el analista ya sabe qué hacer aquí. */
.tz-letter-tit {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

/* Quill dentro del panel: la barra de herramientas y el area de escritura
   comparten el alto del contenedor, sin scroll anidado. */
.tz-letter-wrap .ql-toolbar.ql-snow {
    border: 1px solid var(--border-default);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--bg-surface-2);
    flex-shrink: 0;
}
.tz-letter-wrap .ql-container.ql-snow {
    flex: 1;
    border: 1px solid var(--border-default);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--bg-surface);
    font-family: inherit;
    font-size: 13px;
    overflow: hidden;
}
.tz-letter-wrap .ql-editor {
    line-height: 1.75;
    color: var(--text-primary);
    padding: 14px 16px;
}
.tz-letter-wrap .ql-editor.ql-blank::before {
    color: var(--text-muted);
    font-style: normal;
}

/* ── Control de ancho del panel ────────────────────────────────────────────
   Vive en la cabecera y sirve para todos los paneles. Tres porcentajes con su
   nombre: un botón que cicla obliga a pulsar para descubrir a dónde lleva. */
.tz-drawer-acciones { position: relative; display: flex; align-items: center; gap: 2px; }

.tz-ancho-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 168px;
    padding: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.tz-ancho-menu button {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    font-size: 12.5px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
}
.tz-ancho-menu button:hover { background: var(--bg-surface-2); }
.tz-ancho-menu button i { font-size: 14px; color: var(--text-muted); }
/* El activo marcado: sin eso hay que pulsar para saber dónde se está. */
.tz-ancho-menu button.on { color: var(--color-primary); font-weight: 600; }
.tz-ancho-menu button.on i { color: var(--color-primary); }

/* ── Visor de la carta antes de firmar ─────────────────────────────────────
   Visor nativo del navegador: es un documento de una o dos páginas para leer,
   no para anotar, así que una librería de render no aportaría nada. */
.tz-visor-wrap {
    margin-top: 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-surface-2);
}
.tz-visor {
    display: block;
    width: 100%;
    height: calc(100vh - 250px);
    min-height: 420px;
    border: none;
}

/* Consentimiento antes de firmar. */
.tz-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    cursor: pointer;
}
.tz-consent input {
    width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px;
    accent-color: var(--color-primary); cursor: pointer;
}

/* Mientras llega el PDF: el marco vacío parecería un fallo. */
.tz-visor-cargando {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: calc(100vh - 250px);
    min-height: 420px;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* Carta de cesion: ya no es un textarea editable, es solo vista previa antes
   de crear el paquete -el texto se genera siempre desde los datos reales,
   nadie lo redacta a mano. .tz-letter-area sigue dando el tamaño/tipografia;
   esto agrega el scroll que un <div> no trae por defecto como si trae un
   <textarea>, y un fondo apenas distinto para que se note que no se puede
   escribir ahi. */
.tz-letter-readonly {
    overflow-y: auto;
    cursor: default;
    user-select: text;
    background: var(--bg-surface-2);
}
.tz-letter-readonly p { margin: 0; }