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

.tz-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 2000;
    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: 2001;
    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; }