/* =============================================
   VARIABLES
============================================= */
:root {
    --color-primary: #8FAEE0;
    --color-success: #8ED8B4;
    --color-accent: #F79477;
    --color-muted: #A89F96;
    --color-bg: #F8F9FA;
    --color-white: #FFFFFF;
    --color-text: #3D3D3D;
    --color-text-light: #6B6B6B;
    --color-border: #E2E8F0;
    --color-primary-hover: #7A9DD4;
    --color-primary-light: #EEF3FB;
    --radius: 12px;
    --radius-sm: 6px;
    --shadow-sm: 0 2px 8px rgba(143, 174, 224, 0.12);
    --shadow-md: 0 4px 20px rgba(143, 174, 224, 0.18);
    --shadow-lg: 0 8px 40px rgba(143, 174, 224, 0.22);
    --color-surface: #FFFFFF;
    --color-hover: #EEF3FB;
    --transition: all 0.2s ease;
}

/* =============================================
   BASE
============================================= */
html {
    font-size: 14px;
    height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100%;
    margin-bottom: 60px;
}

/* =============================================
   FOCUS STATES
============================================= */
.btn:focus,
.btn:active:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.15rem rgba(143, 174, 224, 0.35);
    border-color: var(--color-primary);
    outline: none;
}

/* =============================================
   NAVBAR PRINCIPAL
============================================= */
.navbar-main {
    background-color: var(--color-white) !important;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    padding: 0.75rem 0;
}

.navbar-brand-text {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary) !important;
    letter-spacing: -0.3px;
}

    .navbar-brand-text span {
        color: var(--color-muted);
    }

.nav-link-main {
    color: var(--color-text-light) !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

    .nav-link-main:hover {
        color: var(--color-primary) !important;
        background-color: var(--color-primary-light);
    }

    .nav-link-main.active {
        color: var(--color-primary) !important;
        background-color: var(--color-primary-light);
    }

/* =============================================
   FOOTER PRINCIPAL
============================================= */
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 60px;
    white-space: nowrap;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.85rem;
}

    .footer a {
        color: var(--color-primary);
        text-decoration: none;
    }

        .footer a:hover {
            color: var(--color-primary-hover);
            text-decoration: underline;
        }

/* =============================================
   BOTONES
============================================= */
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-radius: var(--radius-sm);
    font-weight: 600;
    padding: 0.55rem 1.5rem;
    transition: var(--transition);
}

    .btn-primary:hover {
        background-color: var(--color-primary-hover) !important;
        border-color: var(--color-primary-hover) !important;
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

.btn-outline-primary {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: var(--transition);
}

    .btn-outline-primary:hover {
        background-color: var(--color-primary) !important;
        color: var(--color-white) !important;
    }

.btn-success-ly {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: var(--transition);
}

.btn-accent-ly {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: var(--transition);
}

/* =============================================
   FORMULARIOS
============================================= */
.form-control,
.form-select {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    background-color: var(--color-white);
    transition: var(--transition);
    padding: 0.6rem 0.9rem;
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--color-primary);
        background-color: var(--color-white);
    }

.form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text);
    margin-bottom: 0.35rem;
}

.form-text {
    color: var(--color-muted);
    font-size: 0.8rem;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--color-muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* =============================================
   ALERTAS / VALIDACIONES
============================================= */
.alert-success-ly {
    background-color: rgba(142, 216, 180, 0.15);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-sm);
    color: #2d7a56;
}

.alert-error-ly {
    background-color: rgba(247, 148, 119, 0.12);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    color: #c0522a;
}

.text-danger {
    color: var(--color-accent) !important;
}

/* =============================================
   AUTH LAYOUT — pantalla completa
============================================= */
body.auth-body {
    background: linear-gradient(135deg, #EEF3FB 0%, #F8F9FA 60%, #F0FAF5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 2rem 1rem;
}

.auth-wrapper {
    width: 100%;
    max-width: 460px;
}

.auth-card {
    background-color: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem 2.5rem;
    border: 1px solid var(--color-border);
}

@media (max-width: 480px) {
    .auth-card {
        padding: 2rem 1.5rem;
    }
}

.auth-logo {
    text-align: center;
    margin-bottom: 1.75rem;
}

.auth-logo-text {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.5px;
}

    .auth-logo-text span {
        color: var(--color-muted);
    }

.auth-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.3rem;
    text-align: center;
}

.auth-subtitle {
    font-size: 0.9rem;
    color: var(--color-muted);
    text-align: center;
    margin-bottom: 1.75rem;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--color-muted);
    font-size: 0.8rem;
}

    .auth-divider::before,
    .auth-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background-color: var(--color-border);
    }

.auth-footer-link {
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-muted);
    margin-top: 1.5rem;
}

    .auth-footer-link a {
        color: var(--color-primary);
        font-weight: 600;
        text-decoration: none;
    }

        .auth-footer-link a:hover {
            color: var(--color-primary-hover);
            text-decoration: underline;
        }

.auth-register-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.auth-register-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-white);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: var(--transition);
    cursor: pointer;
}

    .auth-register-btn:hover,
    .auth-register-btn.active {
        border-color: var(--color-primary);
        background-color: var(--color-primary-light);
        color: var(--color-primary);
    }

    .auth-register-btn .icon {
        font-size: 1.4rem;
    }

/* RUT spinner */
.rut-validating {
    display: none;
    font-size: 0.78rem;
    color: var(--color-primary);
    margin-top: 0.25rem;
}

.rut-valid {
    display: none;
    font-size: 0.78rem;
    color: #2d7a56;
    margin-top: 0.25rem;
}

.rut-invalid {
    display: none;
    font-size: 0.78rem;
    color: #c0522a;
    margin-top: 0.25rem;
}

/* =============================================
   CARDS GENERALES
============================================= */
.card-ly {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
}

.card-ly-header {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

/* =============================================
   BADGES
============================================= */
.badge-primary-ly {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.badge-success-ly {
    background-color: rgba(142, 216, 180, 0.2);
    color: #2d7a56;
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.badge-accent-ly {
    background-color: rgba(247, 148, 119, 0.15);
    color: #c0522a;
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
}
/* =============================================
   SWEETALERT2 — override paleta
============================================= */
.swal2-confirm {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
}

    .swal2-confirm:focus {
        box-shadow: 0 0 0 0.15rem rgba(143, 174, 224, 0.4) !important;
    }

.swal2-cancel {
    background-color: var(--color-muted) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
}

.swal2-deny {
    background-color: var(--color-accent) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
}

.swal2-title {
    color: var(--color-text) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
}

.swal2-html-container {
    color: var(--color-text-light) !important;
    font-size: 0.95rem !important;
}

.swal2-popup {
    border-radius: var(--radius) !important;
    padding: 2rem !important;
}
/* =============================================
   PASSWORD TOGGLE + STRENGTH
============================================= */
.input-password-wrapper {
    position: relative;
}

    .input-password-wrapper .form-control {
        padding-right: 2.8rem;
    }

.btn-toggle-password {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-muted);
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    transition: var(--transition);
}

    .btn-toggle-password:hover {
        color: var(--color-primary);
    }

.password-strength {
    margin-top: 0.4rem;
    height: 4px;
    border-radius: 10px;
    background-color: var(--color-border);
    overflow: hidden;
}

.password-strength-bar {
    height: 100%;
    width: 0%;
    border-radius: 10px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.strength-weak {
    background-color: var(--color-accent);
    width: 33%;
}

.strength-medium {
    background-color: #f0c040;
    width: 66%;
}

.strength-strong {
    background-color: var(--color-success);
    width: 100%;
}

.password-strength-label {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    font-weight: 600;
}

.label-weak {
    color: var(--color-accent);
}

.label-medium {
    color: #c89a00;
}

.label-strong {
    color: #2d7a56;
}

/* Nombre persona bajo RUT */
.rut-nombre {
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: 0.3rem;
    color: #2d7a56;
}
.section-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-primary-light);
}
/* Verificación de correo */
.verifica-icon {
    font-size: 3rem;
    margin: 8px 0 16px;
}

.verifica-hint {
    font-size: 0.875rem;
    color: var(--color-muted);
    margin-bottom: 1rem;
}
/* =============================================
   DASHBOARD
   ============================================= */

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e5e5;
}

.dashboard-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-dark, #1a1a2e);
    margin: 0;
}

.dashboard-subtitle {
    color: var(--color-muted, #6c757d);
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
}

.space-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-dark, #1a1a2e);
    margin-bottom: 1rem;
}

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dash-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    transition: box-shadow .2s;
}

    .dash-card:hover {
        box-shadow: 0 4px 14px rgba(0,0,0,.09);
    }

.dash-card-icon {
    font-size: 1.8rem;
    margin-bottom: .5rem;
}

.dash-card-label {
    font-size: .8rem;
    color: var(--color-muted, #6c757d);
    margin-bottom: .3rem;
}

.dash-card-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-dark, #1a1a2e);
}
/* =============================================
   2FA
   ============================================= */
.codigo-2fa-input {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.5rem;
    text-align: center;
    color: var(--color-primary);
    border: 2px solid var(--color-border);
    border-radius: 10px;
    padding: 14px;
    transition: border-color 0.2s;
}

    .codigo-2fa-input:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(27, 110, 194, 0.15);
        outline: none;
    }
/* =============================================
   DOCUMENTS — explorador
   ============================================= */

.docs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.docs-breadcrumb {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-top: 4px;
}

    .docs-breadcrumb a {
        color: var(--color-primary);
        text-decoration: none;
    }

        .docs-breadcrumb a:hover {
            text-decoration: underline;
        }

.docs-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* sidebar carpetas */
.docs-sidebar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.75rem;
}

.docs-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 0.5rem;
    padding: 0 0.25rem;
}

.folder-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px;
    padding: 6px 8px;
    gap: 4px;
}

    .folder-item:hover,
    .folder-item.active {
        background: var(--color-hover);
    }

    .folder-item.subfolder {
        padding-left: 1.5rem;
    }

.folder-link {
    flex: 1;
    font-size: 0.9rem;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-actions {
    display: none;
    gap: 2px;
}

.folder-item:hover .folder-actions {
    display: flex;
}

.folder-actions button,
.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 4px;
    border-radius: 4px;
    color: var(--color-muted);
}

    .folder-actions button:hover,
    .btn-icon:hover {
        background: var(--color-border);
        color: var(--color-text);
    }

/* panel documentos */
.docs-main {
    min-height: 300px;
}

.docs-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-muted);
}

.docs-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

.doc-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1rem 0.75rem 0.75rem;
    position: relative;
    transition: box-shadow .15s;
}

    .doc-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,.08);
    }

.doc-card-link {
    text-decoration: none;
    color: var(--color-text);
    display: block;
}

.doc-card-icon {
    font-size: 2rem;
    margin-bottom: 0.4rem;
}

.doc-card-name {
    font-size: 0.82rem;
    font-weight: 500;
    word-break: break-word;
    margin-bottom: 0.25rem;
}

.doc-card-date {
    font-size: 0.75rem;
    color: var(--color-muted);
}

.doc-card-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity .15s;
    padding: 2px 4px;
    border-radius: 4px;
}

.doc-card:hover .doc-card-delete {
    opacity: 1;
}

.doc-card-delete:hover {
    background: #fee2e2;
}

/* upload drop zone */
.upload-drop-zone {
    border: 2px dashed var(--color-border);
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s;
    position: relative;
}

    .upload-drop-zone:hover {
        border-color: var(--color-primary);
    }

.upload-drop-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.upload-file-name {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-top: 0.5rem;
    text-align: center;
}

/* =============================================
   DOCUMENTS — detalle
   ============================================= */

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.btn-back {
    font-size: 0.85rem;
    color: var(--color-primary);
    text-decoration: none;
}

    .btn-back:hover {
        text-decoration: underline;
    }

.detail-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    align-items: start;
}

.pdf-iframe {
    width: 100%;
    height: 75vh;
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

/* firmantes */
.detail-signers {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1rem;
}

.signers-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.signers-empty {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.signers-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.signer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    gap: 0.5rem;
}

.signer-name {
    font-size: 0.88rem;
    font-weight: 500;
}

.signer-rut {
    font-size: 0.75rem;
    color: var(--color-muted);
}

.signer-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.signer-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
}

.status-pending {
    background: #fef9c3;
    color: #854d0e;
}

.status-registered {
    background: #dbeafe;
    color: #1e40af;
}

.status-signed {
    background: #dcfce7;
    color: #166534;
}

.btn-icon-sm {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 2px 5px;
    border-radius: 4px;
    color: var(--color-muted);
}

    .btn-icon-sm:hover {
        background: #fee2e2;
        color: #dc2626;
    }
a.dash-card {
    color: var(--color-text);
    cursor: pointer;
}

    a.dash-card:hover {
        box-shadow: 0 4px 14px rgba(0,0,0,.09);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }
.folder-item-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.folder-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 20px;
    padding: 1px 7px;
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.detail-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.doc-description {
    font-size: 0.88rem;
    color: var(--color-text-light);
    margin-top: 0.25rem;
    margin-bottom: 0;
}

.doc-card-filename {
    font-size: 0.72rem;
    color: var(--color-muted);
    word-break: break-word;
    margin-bottom: 0.2rem;
}
/* =============================================
   PAYMENTS
   ============================================= */
.pay-layout {
    max-width: 520px;
    margin: 0 auto;
    padding: 2rem 0;
}

.pay-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
}

.pay-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--color-border);
}

.pay-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 0;
    font-size: .9rem;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}

.pay-total {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-primary);
    border-bottom: none;
    padding-top: 1rem;
    margin-top: .25rem;
}

.pay-hint {
    font-size: .8rem;
    color: var(--color-muted);
    margin: 1.25rem 0 1.5rem;
    line-height: 1.5;
}

.badge-paid {
    display: inline-block;
    background: #d1fae5;
    color: #065f46;
    font-size: .8rem;
    font-weight: 600;
    padding: .3rem .75rem;
    border-radius: 999px;
}
/* =============================================
   SIGNATURE MODULE
   ============================================= */

.sig-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
    .sig-layout {
        grid-template-columns: 1fr;
    }
}

.sig-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
}

.sig-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #1e293b;
}

/* Firmantes */
.sig-signers-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.sig-signer-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    background: #f8fafc;
    border-radius: 8px;
}

.sig-signer-icon {
    font-size: 1.2rem;
}

.sig-signer-info {
    flex: 1;
}

.sig-signer-name {
    font-weight: 600;
    font-size: .9rem;
}

.sig-signer-email {
    font-size: .8rem;
    color: #64748b;
}

.sig-signer-date {
    font-size: .75rem;
    color: #94a3b8;
    margin-top: 2px;
}

/* Opciones de flujo */
.sig-flow-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sig-flow-option {
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

    .sig-flow-option:hover,
    .sig-flow-option.selected {
        border-color: #1b6ec2;
        background: #f0f7ff;
    }

    .sig-flow-option input[type="radio"] {
        display: none;
    }

.sig-flow-option-body {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.sig-flow-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.sig-flow-name {
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: 4px;
}

.sig-flow-desc {
    font-size: .82rem;
    color: #64748b;
}

/* Badges */
.sig-badge {
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    white-space: nowrap;
}

.sig-badge-pending {
    background: #fef3c7;
    color: #92400e;
}

.sig-badge-signed {
    background: #d1fae5;
    color: #065f46;
}

.sig-badge-completed {
    background: #d1fae5;
    color: #065f46;
}

.sig-badge-failed {
    background: #fee2e2;
    color: #991b1b;
}

.sig-badge-lg {
    font-size: .85rem;
    padding: 5px 14px;
}

/* Alertas */
.sig-alert {
    border-radius: 10px;
    padding: .9rem 1.2rem;
    margin-bottom: 1.25rem;
    font-size: .9rem;
}

.sig-alert-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a5f;
}

.sig-alert-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #78350f;
}

/* Estado header */
.sig-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-top: 1.25rem;
}

.sig-status-meta {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .85rem;
    color: #475569;
}

    .sig-status-meta code {
        background: #f1f5f9;
        padding: 1px 6px;
        border-radius: 4px;
        font-size: .8rem;
    }

/* Barra de progreso */
.sig-progress-bar {
    background: #e5e7eb;
    border-radius: 99px;
    height: 10px;
    overflow: hidden;
}

.sig-progress-fill {
    height: 100%;
    background: #1b6ec2;
    border-radius: 99px;
    transition: width .5s ease;
}

.sig-progress-label {
    font-size: .82rem;
    color: #64748b;
    margin-top: .4rem;
}