/* Tono suave del color principal para fondos semitransparentes (selección, activo, resaltado) y el texto
   que va encima. En modo oscuro el fondo es un poco más intenso y el texto más claro. */
:root {
    --primario-suave: color-mix(in srgb, var(--primary-500) 12%, transparent);
    --primario-texto: var(--primary-700);
}

html[data-theme="dark"] {
    --primario-suave: color-mix(in srgb, var(--primary-500) 22%, transparent);
    --primario-texto: var(--primary-200);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --primario-suave: color-mix(in srgb, var(--primary-500) 22%, transparent);
        --primario-texto: var(--primary-200);
    }
}

/* ============================================================
   APP — estilos propios de la aplicación sobre el design system.
   Solo tokens semánticos (capa 2). Lo reutilizable va en ds/components.css.
   ============================================================ */

/* ---- Carga inicial de Blazor ---- */
.loading-progress {
    display: block;
    width: 64px;
    height: 64px;
    margin: 30vh auto var(--space-4);
}

.loading-progress circle {
    fill: none;
    stroke: var(--border);
    stroke-width: 6px;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--border-focus);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "Cargando");
}

/* ---- Error no controlado ---- */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    padding: var(--space-3) var(--space-6);
    background: var(--state-danger-bg);
    color: var(--state-danger-text);
    border-top: 1px solid var(--state-danger-border);
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: var(--space-4);
    top: var(--space-3);
    cursor: pointer;
}

.blazor-error-boundary {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--state-danger-bg);
    color: var(--state-danger-text);
}

.blazor-error-boundary::after {
    content: "Ocurrió un error al mostrar esta sección.";
}

/* ---- Página del firmante ---- */
.firmante {
    min-height: 100vh;
    padding: var(--space-6) 0 var(--space-12);
}

.firmante__marca {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

/* Logo en la cabecera del firmante: crece hasta 260 px de ancho o 48 px de alto, lo que llegue primero. */
.firmante__logo {
    display: block;
    width: auto;
    height: auto;
    max-width: min(260px, 100%);
    max-height: 48px;
}

.firmante__tenant {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.firmante__seccion + .firmante__seccion {
    margin-top: var(--space-4);
}

.firmante__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: flex-end;
}

/* Validación facial de FirmaSegura embebida: alta para que quepa la cámara y sus instrucciones. */
/* Validación facial a pantalla completa: el iframe ocupa toda la ventana (un solo desplazamiento, el de
   FirmaSegura) y la página de fondo queda bloqueada. */
.validacion-pantalla {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    background: var(--bg-page);
}

.validacion-pantalla__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 52px;
    padding: var(--space-2) var(--space-4);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

.validacion-pantalla__titulo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-align: center;
}

.validacion-pantalla__marco {
    flex: 1;
    width: 100%;
    border: 0;
    background: var(--bg-card);
}

/* Acciones alineadas a la izquierda (inicio del texto): la acción principal va primero. */
.firmante__acciones--inicio {
    justify-content: flex-start;
}

/* Botón con aspecto de enlace dentro de un texto (por ejemplo, abrir el consentimiento). */
.consentimiento__enlace {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--text-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.consentimiento__enlace:hover {
    color: var(--btn-primary-bg-hover);
}

.firmante__estado {
    text-align: center;
    padding: var(--space-8) var(--space-4);
}

/* "i." gana a la regla i.bi del design system, que fija el tamaño de ícono normal. */
i.firmante__estado-icono {
    font-size: 48px;
    display: block;
    margin-bottom: var(--space-3);
}

.firmante__estado-icono.is-exito { color: var(--text-success); }
.firmante__estado-icono.is-espera { color: var(--text-accent); }
.firmante__estado-icono.is-error { color: var(--text-danger); }

/* Texto legal: respeta los saltos de línea y se lee cómodo en móvil. */
.consentimiento__texto {
    white-space: pre-line;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    max-height: 320px;
    overflow-y: auto;
    padding: var(--space-4);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.consentimiento__aceptar {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-4) 0;
    font-size: var(--text-base);
    color: var(--text-primary);
    cursor: pointer;
}

.consentimiento__aceptar input {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--primary-500);
}

/* Selector de archivos: el botón nativo con el estilo de un botón secundario del design system. */
.ds-input[type="file"] {
    padding: 6px var(--space-2);
    cursor: pointer;
}

.ds-input[type="file"]::file-selector-button {
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-right: var(--space-3);
    padding: 6px var(--space-3);
    border: 1px solid var(--btn-secondary-border);
    border-radius: var(--radius-sm);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.ds-input[type="file"]::file-selector-button:hover {
    background: var(--btn-secondary-bg-hover);
}

/* Visor de documentos */
.documentos__lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.documentos__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.documentos__nombre {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

/* Vista previa del PDF dentro del modal: ocupa todo el cuerpo, sin márgenes. */
.modal-visor .ds-modal__body {
    padding: 0;
    overflow: hidden;
}

.documentos__visor {
    display: block;
    width: 100%;
    height: 72vh;
    border: 0;
    background: var(--bg-subtle);
}

/* El texto del consentimiento dentro del modal usa la altura disponible. */
.ds-modal .consentimiento__texto {
    max-height: 50vh;
}

/* Progreso de firmantes: el stepper del design system, con salto de línea en pantallas pequeñas. */
.firmantes__progreso {
    flex-wrap: wrap;
    row-gap: var(--space-2);
}

/* Indicador de espera (polling) */
.espera {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* No se encoge aunque el texto ocupe varias líneas; alineado con la primera. */
.espera__punto {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-top: 0.45em;
    border-radius: var(--radius-full);
    background: var(--accent);
    animation: espera-pulso 1.4s ease-in-out infinite;
}

@keyframes espera-pulso {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 640px) {
    .firmante { padding-top: var(--space-4); }
    .firmante__acciones { flex-direction: column-reverse; }
    .firmante__acciones--inicio { flex-direction: column; } /* la acción principal (primera) arriba */
    .firmante__acciones .ds-btn { width: 100%; }

}

/* ============================================================
   Panel del tenant
   ============================================================ */

.panel-cargando {
    display: flex;
    justify-content: center;
    padding-top: 30vh;
}

.firmante--panel {
    min-height: 0;
    padding: 0;
}

.firmante--panel > .ds-u-container {
    padding: 0;
    margin: 0;
}

/* Ingreso */
.ingreso {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
    background: var(--bg-page);
}

.ingreso__tarjeta {
    width: 100%;
    max-width: 420px;
}

.ingreso__mantener {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
}

/* Estructura: menú lateral + contenido */
.panel {
    display: flex;
    min-height: 100vh;
    background: var(--bg-page);
}

.panel__lateral {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    flex: 0 0 248px;
    height: 100vh;
    padding: var(--space-5) var(--space-4);
    background: var(--bg-card);
    border-right: 1px solid var(--border);
}

.panel__marca {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin-bottom: var(--space-6);
    padding: 0 var(--space-2);
}

/* Logo en la barra lateral: ocupa todo el ancho disponible (un logo poco alargado no deja hueco a la
   derecha) con un alto máximo, para que uno cuadrado no crezca de más. */
.panel__logo,
.marca__vista-logo {
    display: block;
    width: 100%;
    height: auto;
    max-height: 56px;
    object-fit: contain;
    object-position: left center;
}

/* Con la barra lateral sobrepuesta (pantallas angostas), el logo más contenido. */
@media (max-width: 900px) {
    .panel__logo { max-height: 44px; }
}

.panel__tenant {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.panel__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.panel__enlace {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.panel__enlace:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.panel__enlace.is-active {
    background: var(--primario-suave);
    color: var(--primario-texto);
}

.panel__principal {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.panel__barra {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    min-height: 56px;
    padding: var(--space-2) var(--space-6);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

.panel__menu {
    display: none;
    font-size: var(--text-lg);
}

.panel__usuario {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.panel__contenido {
    width: 100%;
    max-width: 1200px;
    padding: var(--space-6);
}

/* Título y descripción a la izquierda (la descripción con un ancho cómodo de leer); el botón principal a la
   derecha, alineado con el título. */
.panel__encabezado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
    margin-bottom: var(--space-6);
}

.panel__encabezado > div > p {
    max-width: 68ch;
    margin: 0;
}

.panel__encabezado > .ds-btn {
    flex-shrink: 0;
    margin-top: 2px;
}

.panel__titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-1);
    font-size: var(--text-2xl);
}

/* "Volver" en la barra superior, a la izquierda (lo pone cada página en la sección "panel-volver"). */
.panel__barra-inicio {
    display: flex;
    align-items: center;
    min-width: 0;
    margin-right: auto;
}

.panel__volver {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.panel__volver:hover {
    background: var(--primario-suave);
    color: var(--primario-texto);
    text-decoration: none;
}

.panel__velo {
    display: none;
}

/* Listado */
.listado__filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4) 0;
    border-bottom: 1px solid var(--border);
}

.listado__estados {
    border-bottom: 0;
    overflow-x: auto;
}

.listado__buscar {
    flex: 0 1 320px;
    padding-bottom: var(--space-2);
}

.listado__fila {
    cursor: pointer;
}

.listado__fila:hover {
    background: var(--bg-hover);
}

.listado__referencia {
    font-weight: var(--font-medium);
    color: var(--text-primary);
    text-decoration: none;
}

.listado__referencia:hover {
    color: var(--primario-texto);
    text-decoration: none;
}

.listado__secundario {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Badge bajo el texto de la celda: siempre en su propia línea, aunque al lado quede espacio. */
.listado__accion {
    display: flex;
    width: fit-content;
    margin-top: var(--space-1);
}

.listado__sin-corte {
    white-space: nowrap;
}

.listado__paginas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
    font-size: var(--text-sm);
}

/* Nueva transacción */
.nueva {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 840px;
}

.nueva__titulo {
    margin: 0 0 var(--space-4);
    font-size: var(--text-lg);
}

.nueva__pasos {
    display: block;
    margin-top: var(--space-1);
    color: var(--text-secondary);
}

.nueva__firmante {
    position: relative;
    margin: 0 0 var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.nueva__firmante-titulo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-2);
    font-weight: var(--font-semibold);
}

.nueva__orden {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--primario-suave);
    color: var(--primario-texto);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}

.nueva__firmante-acciones {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: flex;
    gap: var(--space-1);
}

.nueva__grilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-4);
}

.nueva__yo {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nueva__check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-medium);
    cursor: pointer;
}

.nueva__mas {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    background: none;
    border: 0;
    color: var(--text-accent);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
}

.nueva__acciones {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

/* Detalle */
.detalle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-5);
    align-items: start;
}

.detalle__principal {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

.detalle__firmantes {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.detalle__firmante {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.detalle__firmante-datos {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.enlace {
    display: flex;
    gap: var(--space-2);
}

.enlace .ds-input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

/* Subida de documentos: el input cubre toda la zona (clic o arrastrar). */
.subida {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-subtle);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.subida:hover,
.subida:focus-within {
    border-color: var(--border-focus);
    background: var(--primario-suave);
}

.subida.is-busy {
    cursor: progress;
    opacity: 0.7;
}

.subida__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: inherit;
}

.subida__icono {
    font-size: var(--icon-xl);
    color: var(--text-accent);
}

.subida__texto {
    font-weight: var(--font-medium);
}

.asignacion__firmante,
.asignacion__celda {
    text-align: center;
}

.asignacion__documento {
    font-weight: var(--font-regular);
    overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
    .detalle { grid-template-columns: minmax(0, 1fr); }
    .detalle__lateral { order: -1; }
}

@media (max-width: 900px) {
    .panel__lateral {
        position: fixed;
        z-index: 30;
        left: 0;
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        box-shadow: var(--shadow-modal);
    }

    .panel__lateral.is-open { transform: translateX(0); }

    .panel__velo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 20;
        background: var(--bg-overlay);
    }

    .panel__menu { display: inline-flex; }
    .panel__barra { padding: var(--space-2) var(--space-4); }
    .panel__contenido { padding: var(--space-4); }
}

@media (max-width: 640px) {
    .panel__encabezado { flex-direction: column; align-items: stretch; }
    .panel__titulo { font-size: var(--text-xl); }
    .listado__buscar { flex-basis: 100%; }
    .nueva__grilla { grid-template-columns: minmax(0, 1fr); }
    .nueva__acciones { flex-direction: column-reverse; }
    .nueva__acciones .ds-btn { width: 100%; }
    .enlace { flex-direction: column; }
}

/* ============================================================
   Plataforma (superadmin)
   ============================================================ */

.panel__seccion {
    margin: var(--space-5) var(--space-3) var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.admin__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.admin__flujos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

.admin__flujo.is-inactivo {
    opacity: 0.65;
}

.admin__flujo-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.admin__responsables {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    font-size: var(--text-sm);
}

.admin__responsables dt {
    color: var(--text-muted);
}

.admin__responsables dd {
    margin: 0;
}

.admin__tipos {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    padding: 0;
    border: 0;
}

.admin__tipo {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.admin__tipo input {
    grid-row: span 2;
}

.admin__tipo.is-active {
    border-color: var(--border-focus);
    background: var(--primario-suave);
}

.admin__campos {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: var(--space-2) var(--space-4);
    align-items: center;
}

.admin__campos .ds-field__label {
    margin: 0;
}

/* ============================================================
   Ubicar firmas sobre el PDF
   ============================================================ */

.ubicar__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.ubicar__firmantes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ubicar__firmante {
    display: inline-grid;
    grid-template-columns: auto 1fr;
    gap: 0 var(--space-2);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
}

.ubicar__firmante .listado__secundario {
    grid-column: 2;
}

.ubicar__firmante.is-active {
    border-color: var(--firma-color, var(--border-focus));
}

.ubicar__punto {
    grid-row: span 2;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--firma-color);
}

.ubicar__paginas {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.ubicar__lienzo {
    position: relative;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
}

.ubicar__lienzo.is-busy {
    opacity: 0.6;
}

.ubicar__canvas {
    display: block;
}

.ubicar__hoja {
    position: relative;
    width: fit-content;
}

.ubicar__capa {
    position: absolute;
    inset: 0;
    cursor: crosshair;
}

.ubicar__caja {
    position: absolute;
    display: flex;
    align-items: flex-end;
    padding: 2px 4px;
    border: 2px solid var(--firma-color);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--firma-color) 18%, transparent);
    color: var(--firma-color);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    overflow: hidden;
    pointer-events: none;
}

.ubicar__caja.is-automatica {
    border-style: dashed;
    background: transparent;
    opacity: 0.8;
}

.ubicar__caja.is-active {
    background: color-mix(in srgb, var(--firma-color) 30%, transparent);
}

.ubicar__caja span {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.ubicar__firmante--1, .ubicar__caja--1 { --firma-color: var(--primary-600); }
.ubicar__firmante--2, .ubicar__caja--2 { --firma-color: var(--accent-600); }
.ubicar__firmante--3, .ubicar__caja--3 { --firma-color: var(--success-600); }
.ubicar__firmante--4, .ubicar__caja--4 { --firma-color: var(--warning-600); }
.ubicar__firmante--5, .ubicar__caja--5 { --firma-color: var(--danger-600); }
.ubicar__firmante--6, .ubicar__caja--6 { --firma-color: var(--neutral-600); }

@media (max-width: 640px) {
    .admin__campos { grid-template-columns: minmax(0, 1fr); }
}

.nueva__ancho {
    grid-column: 1 / -1;
}

/* Ningún enlace ni botón se subraya al pasar el cursor (base.css subraya todo <a>:hover): resaltan con color. */
a:hover,
.ds-btn:hover,
.ds-btn:focus-visible,
.panel__enlace:hover,
.panel__volver:hover {
    text-decoration: none;
}

/* Tabla dentro de una tarjeta: la tarjeta ya es el contenedor, la tabla no lleva borde ni esquinas propias. */
.ds-card > .ds-table-wrap {
    border: 0;
    border-radius: 0;
}

/* Validación rechazada o vencida: mensaje y opción de reintentar. */
.validacion__caida {
    text-align: left;
}

.validacion__caida-icono {
    display: block;
    margin-bottom: var(--space-3);
    font-size: var(--icon-xl);
    color: var(--text-warning);
}

/* Certificados guardados (bóveda) al firmar. */
.certificados__lista {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 0;
}

/* La leyenda de un fieldset no toma el espacio de la grilla: se separa por su cuenta. */
.certificados__lista > legend { margin-bottom: var(--space-3); }

.certificados__opcion {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.certificados__opcion.is-active {
    border-color: var(--border-focus);
    background: var(--primario-suave);
}

/* ============================================================
   Controles nativos con el estilo del design system
   ============================================================ */

/* Los controles del navegador (lista desplegable del select, casillas, calendario) siguen el tema activo. */
:root {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        color-scheme: dark;
    }
}

/* Select: flecha propia y opciones con los colores y la tipografía de la interfaz. */
.ds-select {
    appearance: none;
    padding-right: calc(var(--space-3) * 2 + 12px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238a94a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 12px;
    cursor: pointer;
}

.ds-select:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.ds-select option,
.ds-select optgroup {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    font-family: var(--font-sans);
}

.ds-select option:checked {
    background-color: var(--primario-suave);
    color: var(--primario-texto);
}

/* Casillas y opciones: color de acento de la marca y tamaño uniforme. */
input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--primary-500);
    cursor: pointer;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    cursor: not-allowed;
}

/* Asistente de nueva transacción: un paso a la vez, con el avance arriba. */
.asistente__pasos {
    flex-wrap: wrap;
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
}

.asistente__pasos .ds-step__separator {
    list-style: none;
}

.validacion-pantalla__titulo span:not(.espera__punto) {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Desplegable propio (reemplaza al select nativo): la lista usa los estilos del design system. */
.desplegable {
    position: relative;
}

.desplegable__boton {
    text-align: left;
}

.desplegable__valor {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.desplegable.is-open .desplegable__boton {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.desplegable__velo {
    position: fixed;
    inset: 0;
    z-index: 40;
}

/* Tan ancha como su opción más larga (nunca más angosta que el botón): las opciones no se parten. */
.desplegable__lista {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: min(360px, 90vw);
    z-index: 41;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-modal);
}

.desplegable__opcion {
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
}

.desplegable__opcion.is-active {
    background: var(--bg-hover);
}

.desplegable__opcion.is-selected {
    color: var(--primario-texto);
    font-weight: var(--font-medium);
}

/* Ubicar firmas en la misma pantalla: firmantes y páginas a la izquierda, la hoja completa a la derecha. */
.ubicar__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.ubicar__documento {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    font-weight: var(--font-medium);
}

.ubicar__cuerpo {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.ubicar__panel .ubicar__firmantes {
    flex-direction: column;
    flex-wrap: nowrap;
}

.ubicar__panel .ubicar__firmante {
    width: 100%;
}

.ubicar__paginas {
    justify-content: space-between;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

/* La hoja se dibuja ya ajustada al alto de la ventana: el lienzo no desplaza, solo la centra. */
.ubicar__lienzo {
    display: flex;
    justify-content: center;
    max-height: none;
    overflow: visible;
    padding: var(--space-3);
}

.ubicar__canvas {
    box-shadow: var(--shadow);
}

@media (max-width: 900px) {
    .ubicar__cuerpo { grid-template-columns: minmax(0, 1fr); }
}

/* Ubicar: vista previa al pasar el cursor y arrastre de los recuadros. */
.ubicar__capa {
    cursor: pointer;
    touch-action: none;
    user-select: none;
}

.ubicar__capa.is-arrastrando,
.ubicar__capa.is-arrastrando .ubicar__caja {
    cursor: grabbing;
}

.ubicar__caja {
    padding: 1px 4px;
    border-width: 1.5px;
    font-size: 10px;
    line-height: 1.2;
    pointer-events: auto;
    cursor: grab;
}

.ubicar__caja.is-fantasma {
    border-style: dashed;
    background: color-mix(in srgb, var(--firma-color) 10%, transparent);
    opacity: 0.7;
    pointer-events: none;
}

.ubicar__caja.is-arrastrando {
    box-shadow: 0 6px 14px rgb(0 0 0 / 0.25);
}

/* Mientras se ubican firmas, la vista usa todo el ancho disponible para ver mejor el documento. */
.panel__contenido:has(.ubicar),
.nueva:has(.ubicar) {
    max-width: none;
}

.detalle:has(.ubicar) {
    grid-template-columns: minmax(0, 1fr);
}

.detalle:has(.ubicar) .detalle__lateral {
    display: none;
}

/* "Firmo yo": el usuario firma aquí mismo, al terminar los documentos. */
.firma-propia {
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
}

/* ============================================================
   Tablas responsive (mismo patrón que Facturación): en móvil cada fila es una tarjeta, sin scroll
   horizontal. Se activa con .ds-table--stack y data-label en cada celda; la celda queda en dos
   columnas: la etiqueta a la izquierda y su contenido (una o varias líneas) apilado a la derecha.
   ============================================================ */
@media (max-width: 640px) {
    .ds-table-wrap:has(> .ds-table--stack) {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .ds-card > .ds-table-wrap:has(> .ds-table--stack) {
        padding: var(--space-3) var(--space-3) 0;
    }

    .ds-table--stack,
    .ds-table--stack tbody {
        display: block;
        width: 100%;
    }

    .ds-table--stack thead {
        display: none;
    }

    .ds-table--stack tbody tr {
        display: block;
        margin-bottom: var(--space-3);
        padding: 6px var(--space-3);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background-color: var(--bg-card);
        box-shadow: var(--shadow);
    }

    .ds-table--stack tbody td {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: var(--space-3);
        align-items: start;
        padding: 7px 0;
        border: none;
        text-align: right;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .ds-table--stack tbody td + td {
        border-top: 1px solid var(--border);
    }

    .ds-table--stack tbody td::before {
        content: attr(data-label);
        grid-column: 1;
        grid-row: 1 / span 6;
        color: var(--text-muted);
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        text-align: left;
    }

    .ds-table--stack tbody td > * {
        grid-column: 2;
        justify-self: end;
    }

    /* Celdas de acción (sin data-label): solo el botón, a la derecha. */
    .ds-table--stack tbody td:not([data-label]) {
        display: flex;
        justify-content: flex-end;
    }

    .ds-table--stack tbody td:not([data-label])::before {
        content: none;
    }
}

/* Pestañas de estado del listado en móvil: completas y en dos filas si hace falta, sin desplazarse. */
@media (max-width: 640px) {
    .listado__estados {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .listado__estados .ds-tab {
        padding: var(--space-2) var(--space-3);
        white-space: nowrap;
    }
}

/* ============================================================
   Etiquetas de estado (reemplazan la píldora genérica del design system): fondo sólido del color del
   estado, texto de alto contraste, esquinas casi rectas y un punto al inicio. "En curso" late.
   Cada variante define --fondo y --texto; se usan los tonos oscuros (700) para que el texto blanco
   tenga buen contraste, salvo advertencia (ámbar claro), que lleva texto oscuro.
   ============================================================ */
.ds-badge {
    --fondo: var(--neutral-600);
    --texto: #ffffff;
    gap: 6px;
    padding: 3px 9px 3px 7px;
    border-radius: 5px;
    border: 1px solid var(--fondo);
    background: var(--fondo);
    color: var(--texto);
    font-size: 11.5px;
    font-weight: var(--font-semibold);
    letter-spacing: 0.01em;
    line-height: 1.25;
    white-space: nowrap;
}

.ds-badge::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: currentColor;
}

.ds-badge--success { --fondo: var(--success-700); }
.ds-badge--danger { --fondo: var(--danger-600); } /* en el DS, danger-700 es el rojo claro */
.ds-badge--info { --fondo: var(--primary-700); }
.ds-badge--accent { --fondo: var(--accent-700); }
.ds-badge--warning { --fondo: var(--warning-500); --texto: var(--neutral-950); }

/* En curso: el punto late (crece y suelta un anillo) para indicar que algo está pasando. */
.ds-badge--info::before {
    animation: badge-latido 1.4s ease-out infinite;
}

@keyframes badge-latido {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 75%, transparent);
    }
    45% {
        transform: scale(1.3);
        box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 0%, transparent);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 0%, transparent);
    }
}

/* Completado: visto. Falló: X. El icono se dibuja con una máscara y toma el color del texto. */
.ds-badge--success::before,
.ds-badge--danger::before {
    width: 9px;
    height: 9px;
    border-radius: 0;
    -webkit-mask: var(--icono) center / contain no-repeat;
    mask: var(--icono) center / contain no-repeat;
}

.ds-badge--success {
    --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E");
}

.ds-badge--danger {
    --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' d='M3.5 3.5l9 9M12.5 3.5l-9 9'/%3E%3C/svg%3E");
}

/* Con "reducir movimiento" el punto parpadea en lugar de crecer. */
@media (prefers-reduced-motion: reduce) {
    .ds-badge--info::before { animation: badge-parpadeo 1.6s ease-in-out infinite; }
}

@keyframes badge-parpadeo {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ============================================================
   Movimiento: transiciones entre pantallas y microinteracciones. Cortas (≤ 0,5 s), con una curva de
   salida suave, y desactivadas si el sistema pide reducir el movimiento.
   Van con fill-mode "backwards", nunca "both"/"forwards": una animación de transform que queda aplicada
   crea una capa propia y los modales y elementos fijos de adentro quedarían bajo la barra superior.
   ============================================================ */
:root {
    --curva-salida: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes aparecer {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes aparecer-lateral {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: none; }
}

@keyframes surgir {
    0% { opacity: 0; transform: scale(0.5); }
    65% { opacity: 1; transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes desplegar {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@keyframes onda-exito {
    from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success-500) 45%, transparent); }
    to { box-shadow: 0 0 0 22px color-mix(in srgb, var(--success-500) 0%, transparent); }
}

/* Pantallas, pasos del asistente y pasos de la firma */
.transicion {
    animation: aparecer 0.42s var(--curva-salida) backwards;
}

.transicion--lateral {
    animation-name: aparecer-lateral;
}

/* Entrada escalonada de listas: filas, documentos, firmantes, flujos y certificados. */
.ds-table tbody tr,
.documentos__item,
.detalle__firmante,
.admin__flujo,
.ubicar__firmante,
.certificados__opcion,
.nueva__firmante {
    animation: aparecer 0.38s var(--curva-salida) backwards;
}

:is(.ds-table tbody tr, .documentos__item, .detalle__firmante, .admin__flujo, .ubicar__firmante, .certificados__opcion, .nueva__firmante):nth-child(2) { animation-delay: 40ms; }
:is(.ds-table tbody tr, .documentos__item, .detalle__firmante, .admin__flujo, .ubicar__firmante, .certificados__opcion, .nueva__firmante):nth-child(3) { animation-delay: 80ms; }
:is(.ds-table tbody tr, .documentos__item, .detalle__firmante, .admin__flujo, .ubicar__firmante, .certificados__opcion, .nueva__firmante):nth-child(4) { animation-delay: 120ms; }
:is(.ds-table tbody tr, .documentos__item, .detalle__firmante, .admin__flujo, .ubicar__firmante, .certificados__opcion, .nueva__firmante):nth-child(5) { animation-delay: 160ms; }
:is(.ds-table tbody tr, .documentos__item, .detalle__firmante, .admin__flujo, .ubicar__firmante, .certificados__opcion, .nueva__firmante):nth-child(6) { animation-delay: 200ms; }
:is(.ds-table tbody tr, .documentos__item, .detalle__firmante, .admin__flujo, .ubicar__firmante, .certificados__opcion, .nueva__firmante):nth-child(n+7) { animation-delay: 240ms; }

/* Ingreso al panel y marca del firmante */
.ingreso__tarjeta {
    animation: aparecer 0.55s var(--curva-salida) backwards;
}

.firmante__marca,
.panel__marca {
    animation: aparecer 0.5s var(--curva-salida) backwards;
}

/* Estados del firmante (listo, ya firmaste, error…): el ícono aparece con un rebote; el de éxito
   además suelta una onda verde. */
.firmante__estado-icono {
    animation: surgir 0.6s var(--curva-salida) 0.12s backwards;
}

.firmante__estado-icono.is-exito {
    border-radius: var(--radius-full);
    animation: surgir 0.6s var(--curva-salida) 0.12s backwards, onda-exito 0.9s ease-out 0.45s;
}

/* Avance (pasos del asistente y orden de firma): el visto aparece con rebote y el círculo cambia de
   color con suavidad. */
.ds-step__circle {
    transition: background-color 0.3s var(--curva-salida), border-color 0.3s var(--curva-salida), color 0.3s var(--curva-salida);
}

.ds-step.is-completed .ds-step__circle i,
.ds-step.is-active .ds-step__circle {
    animation: surgir 0.45s var(--curva-salida) backwards;
}

/* Botones y elementos que se presionan: se hunden levemente. */
.ds-btn,
.ubicar__firmante,
.certificados__opcion,
.admin__tipo,
.desplegable__opcion {
    transition: transform 0.12s ease, background-color var(--transition-fast), border-color var(--transition-fast),
        box-shadow var(--transition-fast), color var(--transition-fast);
}

.ds-btn:active:not(:disabled),
.ubicar__firmante:active,
.certificados__opcion:active,
.admin__tipo:active {
    transform: scale(0.97);
}

/* Filas del listado: al pasar el cursor se elevan un poco. */
.listado__fila {
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.listado__fila:hover {
    box-shadow: inset 3px 0 0 var(--primary-500);
}

/* Desplegable y validación a pantalla completa */
.desplegable__lista {
    transform-origin: top center;
    animation: desplegar 0.16s ease-out backwards;
}

.validacion-pantalla {
    animation: aparecer 0.3s var(--curva-salida) backwards;
}

/* Recuadro de firma: al soltarlo se asienta con suavidad. */
.ubicar__caja:not(.is-arrastrando):not(.is-fantasma) {
    transition: box-shadow 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .transicion,
    .ds-table tbody tr,
    .documentos__item,
    .detalle__firmante,
    .admin__flujo,
    .ubicar__firmante,
    .certificados__opcion,
    .nueva__firmante,
    .ingreso__tarjeta,
    .firmante__marca,
    .panel__marca,
    .firmante__estado-icono,
    .ds-step.is-completed .ds-step__circle i,
    .ds-step.is-active .ds-step__circle,
    .desplegable__lista,
    .validacion-pantalla {
        animation: none;
    }

    .ds-btn:active:not(:disabled),
    .ubicar__firmante:active,
    .certificados__opcion:active,
    .admin__tipo:active {
        transform: none;
    }
}

/* Número de orden del firmante: círculo con el color principal de la marca y el número del color del
   fondo de la tarjeta (se lee "recortado" sobre el círculo). */
.nueva__orden {
    background: var(--primary-500);
    color: var(--bg-card);
    font-weight: var(--font-bold);
}


/* Separación entre un badge y el texto o badge que lo acompaña (antes quedaban pegados). */
:is(span, a, strong, .ds-badge) + .ds-badge,
.ds-badge + :is(span, a) {
    margin-left: 0.5em;
}

/* Grupo de badges que puede ocupar varias líneas: la separación la da el gap, así al bajar de línea
   ninguno queda corrido por el margen anterior. */
.etiquetas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
:is(.etiquetas, .ds-u-flex) > .ds-badge,
:is(.etiquetas, .ds-u-flex) > .ds-badge + * {
    margin-left: 0;
}

/* Radios y casillas propios: un solo borde (los nativos dibujan anillo y punto con borde doble).
   Radio elegido: un solo aro grueso del color principal. Casilla marcada: relleno con un visto. */
input[type="radio"],
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid var(--border-strong);
    background: var(--bg-card);
    transition: border-color var(--transition-fast), border-width var(--transition-fast), background-color var(--transition-fast);
}

input[type="radio"] {
    border-radius: var(--radius-full);
}

input[type="radio"]:checked {
    border: 5px solid var(--primary-500);
}

input[type="checkbox"] {
    border-radius: 4px;
}

input[type="checkbox"]:checked {
    border-color: var(--primary-500);
    background: var(--primary-500);
}

input[type="checkbox"]:checked::after {
    content: "";
    width: 11px;
    height: 11px;
    background: #ffffff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
}

input[type="radio"]:hover:not(:disabled):not(:checked),
input[type="checkbox"]:hover:not(:disabled):not(:checked) {
    border-color: var(--primary-500);
}

input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
    opacity: 0.55;
}

/* Badge en su propia línea bajo un texto secundario (bloque): sin sangría. */
.listado__secundario + .ds-badge {
    margin-left: 0;
}

/* La casilla del consentimiento se alinea con la primera línea del texto. */
.consentimiento__aceptar input[type="checkbox"] {
    margin-top: 2px;
}

/* ============================================================
   Marca del tenant: logo según el tema y página de Personalización
   ============================================================ */
/* Logo claro u oscuro según el tema. Con !important: ningún estilo de tamaño (display: block de cada logo) puede
   hacer que se vean los dos a la vez. */
.logo-marca--oscuro { display: none !important; }
html[data-theme="dark"] .logo-marca--claro { display: none !important; }
html[data-theme="dark"] .logo-marca--oscuro { display: block !important; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .logo-marca--claro { display: none !important; }
    html:not([data-theme="light"]) .logo-marca--oscuro { display: block !important; }
}

.marca {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-6);
    align-items: start;
}

.marca__ajustes {
    display: grid;
    gap: var(--space-6);
}

.marca__color {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.marca__muestra {
    inline-size: 44px;
    block-size: 40px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: none;
    cursor: pointer;
}
.marca__muestra::-webkit-color-swatch-wrapper { padding: 3px; }
.marca__muestra::-webkit-color-swatch { border: none; border-radius: 5px; }
.marca__muestra::-moz-color-swatch { border: none; border-radius: 5px; }

.marca__hex {
    max-inline-size: 140px;
    font-family: var(--font-mono, ui-monospace, monospace);
    text-transform: lowercase;
}

.marca__logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.marca__logo {
    display: grid;
    gap: var(--space-2);
}

.marca__logo-titulo {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
}

.marca__logo-lienzo {
    display: grid;
    place-items: center;
    block-size: 112px;
    padding: var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
}
.marca__logo-lienzo img {
    max-block-size: 100%;
    max-inline-size: 100%;
    object-fit: contain;
}
/* Cada logo se ve sobre el fondo del tema para el que es, sin importar el tema actual. */
.marca__logo--claro .marca__logo-lienzo { background: #ffffff; color: #5b6478; }
.marca__logo--oscuro .marca__logo-lienzo { background: #0b0f19; color: #9aa3b5; border-color: #2f3a52; }

.marca__logo-vacio { font-size: var(--text-sm); }

.marca__logo-acciones {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.marca__subir { position: relative; cursor: pointer; }
.marca__subir input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    inline-size: 100%;
}

.marca__vista { position: sticky; top: calc(var(--space-6) + 64px); }
.marca__vista-cabecera {
    display: flex;
    align-items: center;
    min-block-size: 48px;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-strong);
}
.marca__vista-fila { flex-wrap: wrap; }
/* El enlace activo del menú se muestra sobre el fondo oscuro del menú, como en el panel real. */
.marca__vista-lateral { padding: 8px; border-radius: 16px; background: var(--pn-oscuro, var(--primary-900)); }
.marca__vista-menu { pointer-events: none; }

@media (max-width: 900px) {
    .marca { grid-template-columns: minmax(0, 1fr); }
    .marca__vista { position: static; order: -1; }
}
@media (max-width: 520px) {
    .marca__logos { grid-template-columns: minmax(0, 1fr); }
}

/* Favicon: cómo se ve en una pestaña clara y en una oscura */
.marca__favicon { display: grid; gap: var(--space-3); }
.marca__favicon-pestanas { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.marca__pestana {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 180px;
    padding: 8px 14px;
    border-radius: 10px 10px 0 0;
    font-size: var(--text-sm);
}
.marca__pestana img { inline-size: 16px; block-size: 16px; object-fit: contain; }
.marca__pestana--clara { background: #ffffff; color: #141a28; border: 1px solid #dde3ec; border-bottom: none; }
.marca__pestana--oscura { background: #202636; color: #e7ebf2; border: 1px solid #2f3a52; border-bottom: none; }

/* Invitación: crear contraseña */
.solo-lector {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.invitacion__marca {
    display: flex;
    align-items: center;
    min-block-size: 40px;
    margin-bottom: var(--space-4);
}

.invitacion__reglas {
    display: grid;
    gap: 4px;
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.invitacion__reglas li { display: flex; align-items: center; gap: var(--space-2); transition: color 0.2s; }
.invitacion__reglas li.is-ok { color: var(--success-600); }

.admin__seccion {
    margin: var(--space-2) 0 0;
    padding: var(--space-4) 0 0;
    border: none;
    border-top: 1px solid var(--border);
}
.admin__seccion-titulo {
    padding: 0;
    margin-bottom: var(--space-1);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}
.admin__usuario-acciones { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

/* Editor de recorte del logo y el favicon */
.recorte { display: grid; gap: var(--space-3); }
.recorte__lienzo {
    position: relative;
    block-size: min(52vh, 380px);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-subtle);
}
.recorte__lienzo img { display: block; max-inline-size: 100%; }
.recorte__cargando { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-6); }
.recorte__barra { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.recorte__medida { margin-inline-start: auto; font-size: var(--text-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.recorte__titulo-previa { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-secondary); }
.recorte__previas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
/* Mismo ancho útil que la barra lateral del panel (248 px menos el relleno). */
.recorte__previa {
    display: flex;
    align-items: center;
    inline-size: min(100%, 216px);
    min-block-size: 64px;
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.recorte__previa--clara { background: #ffffff; border: 1px solid #dde3ec; }
.recorte__previa--oscura { background: #0b0f19; border: 1px solid #2f3a52; }
.recorte__previa-logo { display: block; inline-size: 100%; block-size: auto; max-block-size: 56px; object-fit: contain; object-position: left center; }
.recorte__previa-favicon { inline-size: 16px; block-size: 16px; }
/* Cropper.js: el recuadro con el color de la marca */
.recorte .cropper-view-box { outline: 2px solid var(--primary-500); }
.recorte .cropper-line, .recorte .cropper-point { background-color: var(--primary-500); }
.recorte .cropper-point { opacity: 1; }
@media (max-width: 520px) {
    .recorte__previas { grid-template-columns: minmax(0, 1fr); }
}
.recorte__etiqueta { display: block; margin-bottom: var(--space-1); font-size: var(--text-xs); color: var(--text-muted); }
/* La vista previa de Personalización imita el ancho útil de la barra lateral. */
.marca__vista-logo { max-width: 200px; }

/* Mi perfil */
a.panel__usuario {
    padding: 6px 10px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background-color var(--transition-base), color var(--transition-base);
}
a.panel__usuario:hover { background: var(--primario-suave); color: var(--primario-texto); text-decoration: none; }

.perfil {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    align-items: start;
}
@media (max-width: 900px) {
    .perfil { grid-template-columns: minmax(0, 1fr); }
}

/* Representante legal: empresa del certificado o del firmante */
.certificados__empresa {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--primario-texto);
}
.certificados__empresa--no { color: var(--text-muted); }
.nueva__representacion .nueva__check { margin-bottom: var(--space-2); }

/* Recuperar contraseña */
.ingreso__olvido {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--primario-texto);
    text-decoration: none;
}
.ingreso__olvido:hover { text-decoration: none; opacity: 0.85; }
.ingreso__pie { margin: var(--space-4) 0 0; text-align: center; font-size: var(--text-sm); }
.ingreso__pie a { color: var(--primario-texto); text-decoration: none; }

/* ============================================================
   Títulos con el color principal del tenant (modo claro). Un tono más oscuro que el de la marca (600):
   se lee bien aunque el color del tenant sea claro. En modo oscuro siguen en el color de texto.
   ============================================================ */
:root { --color-titulo: var(--primary-600); }
html[data-theme="dark"] { --color-titulo: var(--text-primary); }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) { --color-titulo: var(--text-primary); }
}

.panel__titulo,
.nueva__titulo,
.ds-card__title,
.ds-modal__title,
.firmante__seccion :is(h1, h2) {
    color: var(--color-titulo);
}

/* Mis certificados: "Agregar firma" como última fila de la lista */
.certificados__agregar,
.lista__agregar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: calc(100% - 2 * var(--space-4));
    margin: var(--space-3) var(--space-4) var(--space-4);
    padding: var(--space-3);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--primario-texto);
    font: inherit;
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base);
}
.certificados__agregar:hover,
.lista__agregar:hover {
    background: var(--primario-suave);
    border-color: var(--primary-500);
}
.certificados__agregar:focus-visible,
.lista__agregar:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Detalle: el número de orden a la derecha, a la altura del nombre */
.detalle__firmante .nueva__orden { flex-shrink: 0; }
.detalle__firmante .certificados__empresa { margin-top: var(--space-2); }
.detalle__firmantes .detalle__firmante + .detalle__firmante {
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

/* Barra superior en pantallas angostas: solo íconos (volver, perfil, cerrar sesión). */
@media (max-width: 640px) {
    .panel__volver-texto,
    .panel__usuario-nombre { display: none; }
    .panel__volver,
    a.panel__usuario { padding: 8px; }
    .panel__volver .bi,
    a.panel__usuario .bi { font-size: 1.15rem; }
}

/* Documentos en pantallas angostas: "Descargar" solo con el ícono, para dejarle espacio al nombre. */
.documentos__descargar { gap: var(--space-2); }
@media (max-width: 640px) {
    .documentos__descargar-texto { display: none; }
    .documentos__descargar { padding-inline: 10px; }
    .documentos__item { padding: var(--space-3); }
}

/* Mi equipo */
.equipo__rol { min-width: 170px; }
.equipo__rol .desplegable { display: inline-block; min-width: 170px; }
/* En la tabla el campo queda contra el borde derecho: el menú se abre hacia la izquierda. */
.equipo__rol .desplegable__lista { left: auto; right: 0; }
.equipo__acciones { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.ds-table tr.is-inactivo td:first-child { opacity: 0.6; }
@media (max-width: 640px) {
    .equipo__rol { min-width: 0; }
    .equipo__acciones { justify-content: flex-start; }
}

/* Dirección de ingreso del tenant */
.direccion-ingreso { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.direccion-ingreso__url {
    padding: 6px 10px;
    border-radius: var(--radius-md);
    background: var(--primario-suave);
    color: var(--primario-texto);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}
/* Logo del tenant en las pantallas de acceso: centrado y contenido. */
.ingreso__tarjeta .invitacion__marca { justify-content: center; }
.ingreso__tarjeta .invitacion__marca .panel__logo { max-width: 220px; object-position: center; }
.ingreso__tarjeta .ds-empty .invitacion__marca { margin-bottom: var(--space-4); }

/* Inicio: logo de la plataforma */
.inicio__logo { display: block; margin: 0 auto; width: min(260px, 70vw); height: auto; }
/* ============================================================
   Pantallas de acceso (ingresar, recuperar, restablecer, invitación) — modelo del portal de Firmas:
   panel oscuro con la marca a la izquierda (solo escritorio) y el formulario a la derecha.
   ============================================================ */
.acceso {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    background: var(--bg-page);
}

.acceso__marca {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-10);
    overflow: hidden;
    background-color: var(--primary-900);
    color: #ffffff;
}

.acceso__marca-contenido {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    animation: aparecer-lateral 0.55s var(--curva-salida) backwards;
}

.acceso__marca-logo { margin-bottom: var(--space-8); }
.acceso__marca-logo img { display: block; max-width: 220px; max-height: 64px; width: auto; height: auto; }
.acceso__marca-placa { display: inline-flex; padding: 10px 14px; border-radius: var(--radius-md); background: #ffffff; }
.acceso__marca-placa img { max-height: 44px; }
.acceso__marca-nombre { font-size: var(--text-2xl); font-weight: var(--font-bold); }

.acceso__titular {
    margin: 0 0 var(--space-3);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: #ffffff;
}

.acceso__resalte { display: inline-block; color: var(--accent-400); }

.acceso__lead {
    margin: 0 0 var(--space-8);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: rgba(255, 255, 255, 0.85);
}

.acceso__puntos {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-bottom: var(--space-10);
}

.acceso__punto { display: flex; align-items: flex-start; gap: var(--space-3); }

.acceso__punto-icono {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--accent-500) 20%, transparent);
    color: var(--accent-300);
    font-size: 18px;
}

.acceso__punto-titulo { display: block; margin-bottom: 2px; font-weight: var(--font-semibold); color: #ffffff; }
.acceso__punto-detalle { display: block; font-size: var(--text-sm); line-height: var(--leading-normal); color: rgba(255, 255, 255, 0.7); }

.acceso__marca-pie {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.7);
}
.acceso__marca-pie i { flex-shrink: 0; color: var(--accent-400); font-size: 16px; }

.acceso__contenido {
    display: flex;
    flex-direction: column;
    padding: var(--space-5) var(--space-6);
    background-color: var(--bg-card);
}

.acceso__barra { display: flex; align-items: center; min-height: 32px; margin-bottom: var(--space-4); }
.acceso__barra .ds-btn { text-decoration: none; }

.acceso__interior {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding-bottom: var(--space-10);
    animation: aparecer 0.5s var(--curva-salida) backwards;
}

/* Logo solo en móvil (en escritorio está en el panel de la marca). */
.acceso__logo-movil { display: none; justify-content: center; margin-bottom: var(--space-6); }
.acceso__logo { display: block; max-width: 200px; max-height: 52px; width: auto; height: auto; }

.acceso__icono { display: block; margin-bottom: var(--space-3); text-align: center; font-size: 44px; color: var(--primario-texto); }

.acceso__titulo {
    margin: 0 0 var(--space-2);
    text-align: center;
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--color-titulo);
}

.acceso__subtitulo {
    margin: 0 0 var(--space-6);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}

.acceso__formulario { display: flex; flex-direction: column; gap: var(--space-1); }
.acceso__formulario .ds-alert { margin: var(--space-2) 0 0; }

.acceso__opciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-2);
}
.acceso__opciones .ingreso__mantener { margin: 0; }
.acceso__opciones .ingreso__olvido { margin: 0; }

.acceso__enviar { margin-top: var(--space-4); gap: var(--space-2); }

.acceso__pie {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-8);
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.acceso__pie i { color: var(--primario-texto); }

/* Contraseña con botón para mostrarla */
.acceso__clave { position: relative; }
.acceso__clave .ds-input { padding-right: 44px; }
.acceso__ojo {
    position: absolute;
    top: 50%;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.acceso__ojo:hover { background-color: var(--bg-hover); color: var(--text-primary); }
.acceso__ojo:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }

@media (max-width: 900px) {
    .acceso { grid-template-columns: 1fr; }
    .acceso__marca { display: none; }
    .acceso__logo-movil { display: flex; }
    .acceso__contenido { padding: var(--space-4); }
    .acceso__titulo { font-size: var(--text-xl); }
}

@media (prefers-reduced-motion: reduce) {
    .acceso__marca-contenido,
    .acceso__interior { animation: none; }
}

/* Plazo del proceso y seguimiento de lectura */
.detalle__plazo { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--space-2); }
.detalle__plazo.is-cerca { color: var(--warning-700, #b45309); font-weight: var(--font-medium); }
.detalle__visto { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); }
.detalle__visto.is-pendiente { color: var(--text-muted); }
.nueva__plazo { max-width: 220px; }

/* ============================================================
   Por firmar (firma en lote)
   ============================================================ */

.panel__contador { margin-left: auto; min-width: 1.5rem; justify-content: center; }

.lote__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
}
.lote__todos { margin: 0; }

.lote__lista { list-style: none; margin: 0; padding: 0; }

.lote__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border);
    transition: background-color 0.15s;
}
.lote__item:last-child { border-bottom: 0; }
.lote__item.is-active { background: var(--primario-suave); }

.lote__eleccion { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; min-width: 0; }
.lote__eleccion input { margin-top: 3px; flex-shrink: 0; }
.lote__datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.lote__lateral { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }

/* Los documentos van debajo, alineados con el texto (después de la casilla). */
.lote__documentos { grid-column: 1 / -1; padding-left: calc(16px + var(--space-3)); }

@media (max-width: 640px) {
    .lote__item { grid-template-columns: minmax(0, 1fr); }
    .lote__lateral { justify-content: flex-start; padding-left: calc(16px + var(--space-3)); }
    .lote__documentos { padding-left: 0; }
}

/* ============================================================
   Personalización > Correos
   ============================================================ */

.correos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}
.correos__editor { display: grid; gap: var(--space-4); min-width: 0; }
.correos__tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.correos__tipo {
    width: 100%;
    text-align: left;
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit;
    align-items: flex-start;
}
.correos__tipo > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.correos__mensaje { min-height: 140px; resize: vertical; font-family: inherit; line-height: 1.6; }
.correos__boton { max-width: 320px; }
.correos__variables { margin-bottom: var(--space-4); }
.correos__variables ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.correos__variables code {
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--primario-suave);
    color: var(--primario-texto);
    font-size: var(--text-xs);
}

.correos__vista { position: sticky; top: var(--space-4); overflow: hidden; }
.correos__asunto { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); font-size: var(--text-sm); overflow-wrap: anywhere; }
/* El correo es siempre claro (como se ve en el cliente de correo), también en el tema oscuro del panel. */
.correos__marco { display: block; width: 100%; height: 720px; border: 0; background: #f5f7fb; }
.correos__nota { padding: var(--space-2) var(--space-4) var(--space-3); margin: 0; }

@media (max-width: 1100px) {
    .correos { grid-template-columns: minmax(0, 1fr); }
    .correos__vista { position: static; }
}
@media (max-width: 640px) {
    .correos__tipos { grid-template-columns: minmax(0, 1fr); }
    .correos__marco { height: 560px; }
}

/* ============================================================
   Planes (superadmin)
   ============================================================ */

.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--space-6); align-items: start; }
.planes__plan { display: flex; flex-direction: column; gap: var(--space-3); }
.planes__plan.is-inactivo { opacity: 0.7; }
.planes__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.planes__descripcion { margin: 0; font-size: var(--text-sm); }
.planes__precio { margin: 0; font-size: var(--text-lg); }
.planes__precio strong { font-size: 1.75rem; color: var(--primario-texto); }
.planes__mensual { display: block; font-size: var(--text-sm); color: var(--text-muted); }
.planes__lista { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.planes__lista li { display: flex; gap: var(--space-2); align-items: baseline; }
.planes__lista li.is-no { color: var(--text-muted); text-decoration: line-through; }
.planes__activo { align-self: end; margin-bottom: var(--space-4); }

.plan-tenant__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.plan-tenant__datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--space-4);
    margin: var(--space-6) 0 0;
}
.plan-tenant__datos dt { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.plan-tenant__datos dd { margin: 2px 0 0; font-weight: var(--font-medium); }

.creditos__saldo { font-size: 1.75rem; color: var(--primario-texto); }
.creditos__agregar { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.creditos__paquetes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--space-3); }
.creditos__paquetes .certificados__opcion > span { display: flex; flex-direction: column; }
.creditos__inactivo td { color: var(--text-muted); }

/* ============================================================
   Mi plan (panel del tenant)
   ============================================================ */

.mi-plan__funciones { margin-bottom: 0; }

/* Planes sin marca blanca: crédito discreto a la plataforma. */
.acceso__tecnologia { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-muted); text-align: center; }
.firmante__tecnologia { margin-top: var(--space-6); }

/* Excedentes (superadmin) */
.excedentes__mes { margin: 0; min-width: 180px; }
.excedentes__monto { text-align: right; white-space: nowrap; }
.excedentes__total-etiqueta { text-align: right; font-weight: var(--font-medium); }
@media (max-width: 640px) {
    .excedentes__monto, .excedentes__total-etiqueta { text-align: left; }
}

/* Integraciones */
.integraciones__url { overflow-wrap: anywhere; }
.integraciones__secreto { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-hover); }
.integraciones__secreto code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--text-sm); }