/* ===== clients.css | scope .page-clients ===== */
/* =========================================================
   CLIENTES
   /assets/dashboard/css/clients.css
   ========================================================= */

body.page-clients .clients-page {
    --clients-blue: #1468f3;
    --clients-blue-dark: #0d55d8;
    --clients-blue-soft: #eef5ff;
    --clients-text: #0f172a;
    --clients-text-soft: #334155;
    --clients-muted: #6b7a94;
    --clients-border: #dfe8f4;
    --clients-bg-soft: #f8fbff;
    --clients-danger: #ef3340;

    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 22px;
    display: grid;
    gap: 18px;
    color: var(--clients-text);
}


/* =========================================================
   TARJETAS
   ========================================================= */

body.page-clients .clients-page .dashboard-card {
    background: #fff;
    border: 1px solid var(--clients-border);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(30, 64, 175, .07);
}


/* =========================================================
   CABECERA CLIENTES
   ========================================================= */

body.page-clients .clients-hero {
    min-height: 112px;
    padding: 20px 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

body.page-clients .clients-hero-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

body.page-clients .clients-hero-icon {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;

    display: grid;
    place-items: center;

    border-radius: 15px;
    background: var(--clients-blue-soft);
    color: var(--clients-blue);
}

body.page-clients .clients-hero-icon svg {
    display: block;
}

body.page-clients .clients-eyebrow {
    margin: 0 0 5px;

    color: var(--clients-blue);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
}

body.page-clients .clients-hero h1 {
    margin: 0;

    color: var(--clients-text);

    font-size: clamp(27px, 3vw, 38px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.035em;
}

body.page-clients .clients-hero-copy {
    margin: 7px 0 0;

    color: var(--clients-muted);

    font-size: 14px;
    line-height: 1.45;
}


/* =========================================================
   CONTADOR DE CLIENTES
   ========================================================= */

body.page-clients .clients-count-card {
    min-width: 210px;
    padding: 13px 16px;

    display: flex;
    align-items: center;
    gap: 12px;

    border: 1px solid var(--clients-border);
    border-radius: 12px;

    background: var(--clients-bg-soft);
}

body.page-clients .clients-count-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: #fff;
    color: var(--clients-blue);

    box-shadow: 0 4px 14px rgba(20, 104, 243, .08);
}

body.page-clients .clients-count-icon svg {
    display: block;
}

body.page-clients .clients-count-card strong {
    display: block;

    color: var(--clients-text);

    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}

body.page-clients .clients-count-card span {
    display: block;
    margin-top: 4px;

    color: var(--clients-muted);

    font-size: 12px;
}


/* =========================================================
   MENSAJES
   ========================================================= */

body.page-clients .clients-alert {
    min-height: 48px;
    padding: 10px 14px;

    display: flex;
    align-items: center;
    gap: 10px;

    border-radius: 11px;

    font-size: 13px;
    font-weight: 700;
}

body.page-clients .clients-alert-success {
    color: #15803d;
    background: #effcf4;
    border: 1px solid #c6f0d4;
}

body.page-clients .clients-alert-error {
    color: #c62834;
    background: #fff3f4;
    border: 1px solid #ffd6da;
}


/* =========================================================
   TARJETA FORMULARIO
   ========================================================= */

body.page-clients .clients-card {
    padding: 22px;
}

body.page-clients .clients-section-heading {
    margin-bottom: 20px;

    display: flex;
    align-items: center;
    gap: 13px;
}

body.page-clients .clients-section-heading-compact {
    margin-bottom: 0;
}

body.page-clients .clients-section-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #2676ff,
        #0f63ef
    );

    color: #fff;

    box-shadow: 0 8px 18px rgba(20, 104, 243, .20);
}

body.page-clients .clients-section-icon svg {
    display: block;
}

body.page-clients .clients-section-heading h2 {
    margin: 0;

    color: var(--clients-text);

    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
}

body.page-clients .clients-section-heading p {
    margin: 4px 0 0;

    color: var(--clients-muted);

    font-size: 12px;
    line-height: 1.45;
}


/* =========================================================
   FORMULARIO
   ========================================================= */

body.page-clients .clients-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 22px;
}

body.page-clients .clients-field {
    display: block;
    min-width: 0;

    color: #24334e;

    font-size: 12px;
    font-weight: 800;
}

body.page-clients .clients-field > span {
    display: block;
    margin-bottom: 7px;
}

body.page-clients .clients-field-full {
    grid-column: 1 / -1;
}

body.page-clients .clients-input-wrap {
    position: relative;
    min-width: 0;
}


/* =========================================================
   INPUTS
   ========================================================= */

body.page-clients .clients-input-wrap input,
body.page-clients .clients-input-wrap textarea {
    width: 100%;
    min-width: 0;

    box-sizing: border-box;

    border: 1px solid #cfdaea;
    border-radius: 10px;

    background: #fff;
    color: var(--clients-text);

    font-family: var(--app-font-family);
    font-size: 13px;
    font-weight: 500;

    outline: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

body.page-clients .clients-input-wrap input {
    height: 46px;
    padding: 0 14px;
}

body.page-clients .clients-input-wrap textarea {
    min-height: 78px;
    padding: 13px 14px;

    resize: vertical;

    line-height: 1.45;
}

body.page-clients .clients-input-wrap input::placeholder,
body.page-clients .clients-input-wrap textarea::placeholder {
    color: #9aa8bd;
    opacity: 1;
}

body.page-clients .clients-input-wrap input:hover,
body.page-clients .clients-input-wrap textarea:hover {
    border-color: #b9c9df;
}

body.page-clients .clients-input-wrap input:focus,
body.page-clients .clients-input-wrap textarea:focus {
    border-color: #87b4ff;

    box-shadow:
        0 0 0 3px rgba(20, 104, 243, .09);
}

body.page-clients .clients-input-wrap input[readonly] {
    background: #f7f9fc;
    color: #64748b;
}


/* =========================================================
   BOTONES FORMULARIO
   ========================================================= */

body.page-clients .clients-form-actions {
    margin-top: 2px;

    display: flex;
    align-items: center;
    gap: 12px;
}

body.page-clients .clients-btn {
    min-height: 44px;
    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border-radius: 9px;

    font-family: var(--app-font-family);
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        border-color .18s ease;
}


/* Crear cliente */

body.page-clients .clients-btn-primary {
    min-width: 290px;

    border: 1px solid transparent;

    background: linear-gradient(
        135deg,
        #2676ff,
        #0f63ef
    );

    color: #fff;

    box-shadow:
        0 8px 18px rgba(20, 104, 243, .18);
}

body.page-clients .clients-btn-primary:hover {
    color: #fff;

    transform: translateY(-1px);

    box-shadow:
        0 12px 24px rgba(20, 104, 243, .23);
}

body.page-clients .clients-btn-primary:active {
    transform: translateY(0);
}


/* Cancelar */

body.page-clients .clients-btn-secondary {
    min-width: 170px;

    border: 1px solid #cbd8ea;

    background: #fff;
    color: #465875;
}

body.page-clients .clients-btn-secondary:hover {
    background: #f8fbff;
    border-color: #abc5eb;
    color: #263a59;
}


/* =========================================================
   LISTADO
   ========================================================= */

body.page-clients .clients-list-card {
    overflow: hidden;
    padding-bottom: 14px;
}

body.page-clients .clients-list-heading {
    margin-bottom: 17px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}


/* =========================================================
   BUSCADOR
   ========================================================= */

body.page-clients .clients-search {
    position: relative;

    width: min(330px, 100%);
    flex: 0 1 330px;
}

body.page-clients .clients-search input {
    width: 100%;
    height: 42px;

    box-sizing: border-box;

    padding: 0 14px 0 42px;

    border: 1px solid #cfdaea;
    border-radius: 10px;

    background: #fff;
    color: var(--clients-text);

    font-family: var(--app-font-family);
    font-size: 12px;

    outline: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

body.page-clients .clients-search::before {
    content: "";

    position: absolute;
    left: 14px;
    top: 50%;

    width: 14px;
    height: 14px;

    border: 2px solid #6b7a94;
    border-radius: 50%;

    transform: translateY(-58%);

    pointer-events: none;
}

body.page-clients .clients-search::after {
    content: "";

    position: absolute;
    left: 27px;
    top: 25px;

    width: 7px;
    height: 2px;

    border-radius: 2px;

    background: #6b7a94;

    transform: rotate(45deg);

    transform-origin: left center;

    pointer-events: none;
}

body.page-clients .clients-search input::placeholder {
    color: #9aa8bd;
}

body.page-clients .clients-search input:focus {
    border-color: #87b4ff;

    box-shadow:
        0 0 0 3px rgba(20, 104, 243, .08);
}


/* =========================================================
   TABLA
   ========================================================= */

body.page-clients .clients-table-wrap {
    width: 100%;

    overflow-x: auto;

    border: 1px solid #e5ebf4;
    border-radius: 11px;

    background: #fff;
}

body.page-clients .clients-table {
    width: 100%;

    border-collapse: collapse;
    border-spacing: 0;

    background: #fff;

    font-size: 12px;
}


/* Cabecera */

body.page-clients .clients-table thead th {
    padding: 13px 14px;

    border: 0;

    background: #f5f8fc;
    color: #51617c;

    text-align: left;

    text-transform: uppercase;
    letter-spacing: .035em;

    font-size: 10px;
    font-weight: 900;

    white-space: nowrap;
}


/* Celdas */

body.page-clients .clients-table tbody td {
    padding: 12px 14px;

    border: 0;
    border-top: 1px solid #edf1f6;

    color: var(--clients-text-soft);

    vertical-align: middle;
}

body.page-clients .clients-table tbody tr {
    transition: background .16s ease;
}

body.page-clients .clients-table tbody tr:hover {
    background: #f9fbff;
}


/* ID */

body.page-clients .client-id {
    color: #24334e;

    font-size: 11px;
    font-weight: 800;
}


/* Nombre */

body.page-clients .client-name {
    color: #253650;

    font-weight: 700;
}


/* =========================================================
   ACCIONES
   ========================================================= */

body.page-clients .clients-actions {
    display: flex;
    align-items: center;
    gap: 6px;

    white-space: nowrap;
}

body.page-clients .client-delete-form {
    display: inline-flex;
    margin: 0;
}

body.page-clients .client-action {
    width: 34px;
    height: 32px;
    padding: 0;

    display: inline-grid;
    place-items: center;

    box-sizing: border-box;

    border: 0;
    border-radius: 8px;

    font-family: var(--app-font-family);
    font-size: 15px;
    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

body.page-clients .client-action:hover {
    text-decoration: none;

    transform: translateY(-1px);
}


/* Ver */

body.page-clients .client-action-view {
    background: #eef5ff;
    color: #1468f3;
}

body.page-clients .client-action-view:hover {
    background: #dfeeff;
    color: #1468f3;
}


/* Editar */

body.page-clients .client-action-edit {
    background: #f1f4ff;
    color: #4262d8;
}

body.page-clients .client-action-edit:hover {
    background: #e5eaff;
    color: #4262d8;
}


/* Eliminar */

body.page-clients .client-action-delete {
    background: #fff0f1;
    color: var(--clients-danger);
}

body.page-clients .client-action-delete:hover {
    background: #ffe1e4;
    color: var(--clients-danger);
}


/* =========================================================
   SIN CLIENTES
   ========================================================= */

body.page-clients .clients-empty {
    padding: 38px 20px;

    display: grid;
    justify-items: center;
    gap: 7px;

    text-align: center;

    color: var(--clients-muted);
}

body.page-clients .clients-empty strong {
    color: var(--clients-text);

    font-size: 15px;
}

body.page-clients .clients-empty span {
    font-size: 12px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 1000px) {


    body.page-clients .clients-page {
        padding: 18px;
    }

    body.page-clients .clients-hero {
        align-items: flex-start;
    }

    body.page-clients .clients-count-card {
        min-width: 185px;
    }


}


/* =========================================================
   TABLET PEQUEÑA
   ========================================================= */

@media screen and (max-width: 850px) {


    body.page-clients .clients-list-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    body.page-clients .clients-search {
        width: 100%;
        max-width: none;
        flex-basis: auto;
    }


}


/* =========================================================
   MÓVIL
   ========================================================= */

@media screen and (max-width: 767px) {


    body.page-clients .clients-page {
        gap: 12px;

        padding:
            12px
            10px
            84px;
    }


    /* Tarjetas */

    body.page-clients .clients-page .dashboard-card {
        border-radius: 13px;
    }


    /* Cabecera */

    body.page-clients .clients-hero {
        min-height: 0;

        padding: 15px;

        display: grid;
        gap: 14px;
    }

    body.page-clients .clients-hero-main {
        align-items: flex-start;
    }

    body.page-clients .clients-hero-icon {
        width: 50px;
        height: 50px;
        flex-basis: 50px;

        border-radius: 13px;
    }

    body.page-clients .clients-hero-icon svg {
        width: 25px;
        height: 25px;
    }

    body.page-clients .clients-hero h1 {
        font-size: 27px;
    }

    body.page-clients .clients-hero-copy {
        font-size: 12px;
    }


    /* Contador */

    body.page-clients .clients-count-card {
        width: 100%;
        min-width: 0;

        box-sizing: border-box;
    }


    /* Tarjetas interiores */

    body.page-clients .clients-card {
        padding: 15px;
    }


    /* Títulos */

    body.page-clients .clients-section-heading {
        align-items: flex-start;

        margin-bottom: 16px;
    }

    body.page-clients .clients-section-heading-compact {
        margin-bottom: 0;
    }

    body.page-clients .clients-section-heading h2 {
        font-size: 18px;
    }


    /* Formulario */

    body.page-clients .clients-form {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    body.page-clients .clients-field-full {
        grid-column: auto;
    }


    /* Inputs */

    body.page-clients .clients-input-wrap input {
        height: 45px;
    }

    body.page-clients .clients-input-wrap textarea {
        min-height: 88px;
    }


    /* Botones */

    body.page-clients .clients-form-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    body.page-clients .clients-btn,
body.page-clients .clients-btn-primary,
body.page-clients .clients-btn-secondary {
        width: 100%;
        min-width: 0;

        padding-left: 10px;
        padding-right: 10px;

        font-size: 12px;
    }


    /* Listado */

    body.page-clients .clients-list-heading {
        gap: 14px;
    }


    /* Tabla convertida en tarjetas */

    body.page-clients .clients-table-wrap {
        border: 0;
        overflow: visible;

        background: transparent;
    }

    body.page-clients .clients-table,
body.page-clients .clients-table tbody {
        display: block;
        width: 100%;
    }

    body.page-clients .clients-table thead {
        display: none;
    }

    body.page-clients .clients-table tr.client-list-row {
        width: 100%;

        box-sizing: border-box;

        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px 12px;

        margin-bottom: 9px;
        padding: 13px;

        border: 1px solid #e5ebf4;
        border-radius: 11px;

        background: #fff;

        box-shadow:
            0 4px 14px rgba(30, 64, 175, .04);
    }

    body.page-clients .clients-table tbody td {
        display: block;

        width: auto;
        min-width: 0;

        padding: 0;

        border: 0;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    /* Nombre */

    body.page-clients .clients-table td:nth-child(2) {
        grid-column: 1 / 2;
        grid-row: 1;

        font-size: 14px;
    }


    /* ID */

    body.page-clients .clients-table td:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 2;

        color: #6b7a94;

        font-size: 11px;
    }


    /* Ocultamos datos secundarios en móvil */

    body.page-clients .clients-table td:nth-child(3),
body.page-clients .clients-table td:nth-child(4),
body.page-clients .clients-table td:nth-child(5) {
        display: none;
    }


    /* Acciones */

    body.page-clients .clients-table td.clients-actions {
        grid-column: 2;
        grid-row: 1 / span 2;

        align-self: center;
        justify-self: end;

        display: flex;

        overflow: visible;
    }

    body.page-clients .client-action {
        width: 32px;
        height: 32px;
    }


}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media screen and (max-width: 420px) {


    body.page-clients .clients-form-actions {
        grid-template-columns: 1fr;
    }

    body.page-clients .clients-btn {
        min-height: 43px;
    }

    body.page-clients .clients-section-heading p {
        font-size: 11px;
    }


}

/* ===== Modernización uniforme del panel ===== */
body.page-clients .page-heading {background:#fff;border:1px solid #dfe8f4;border-radius:16px;padding:20px 22px;margin-bottom:18px;box-shadow:0 10px 30px rgba(30,64,175,.06);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
body.page-clients .page-heading h1,
body.page-clients .page-heading h2 {margin:0;color:#0f172a;letter-spacing:-.03em;}
body.page-clients .eyebrow {color:#1468f3!important;font-size:11px!important;font-weight:900!important;letter-spacing:.12em;text-transform:uppercase;}
body.page-clients .page-description {color:#6b7a94;line-height:1.55;}
body.page-clients .panel,
body.page-clients .contracts-panel {background:#fff;border:1px solid #dfe8f4!important;border-radius:16px!important;box-shadow:0 10px 30px rgba(30,64,175,.06)!important;padding:20px 22px!important;margin-bottom:18px;}
body.page-clients .btn {border-radius:9px!important;min-height:42px;padding:0 17px!important;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;font-weight:800!important;transition:.18s ease!important;}
body.page-clients .btn:not(.btn-outline):not(.btn-secondary):not(.btn-whatsapp) {background:linear-gradient(135deg,#2676ff,#0f63ef)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 18px rgba(20,104,243,.16);}
body.page-clients .btn-outline,
body.page-clients .btn-secondary {background:#fff!important;color:#465875!important;border:1px solid #cbd8ea!important;}
body.page-clients input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
body.page-clients select,
body.page-clients textarea {border:1px solid #cfdaea!important;border-radius:10px!important;background:#fff;transition:border-color .18s ease,box-shadow .18s ease;}
body.page-clients input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
body.page-clients select:focus,
body.page-clients textarea:focus {outline:none!important;border-color:#87b4ff!important;box-shadow:0 0 0 3px rgba(20,104,243,.09)!important;}
body.page-clients .table-wrap {border:1px solid #e5ebf4;border-radius:12px;overflow:auto;background:#fff;}
body.page-clients table {border-collapse:collapse;}
body.page-clients thead th {background:#f5f8fc!important;color:#51617c!important;text-transform:uppercase;font-size:11px!important;letter-spacing:.035em;}
body.page-clients tbody tr {transition:background .16s ease;}
body.page-clients tbody tr:hover {background:#fbfdff;}
body.page-clients .alert,
body.page-clients .contract-alert {border-radius:11px!important;}
@media (max-width:768px) {
body.page-clients .page-heading {padding:16px;border-radius:13px;align-items:flex-start}body.page-clients .panel,
body.page-clients .contracts-panel {padding:15px!important;border-radius:13px!important}body.page-clients .hero-actions {width:100%;display:flex;gap:8px;flex-wrap:wrap}body.page-clients .hero-actions .btn {flex:1 1 auto}
}

/* ===== Botones 50% ===== */
body.page-clients .clients-form-actions { display:flex; gap:12px; width:100%; }
body.page-clients .clients-form-actions > .clients-btn { flex:1 1 50%; width:50%; min-width:0 !important; }
@media (max-width:420px) {
 body.page-clients .clients-form-actions { flex-direction:column; } body.page-clients .clients-form-actions > .clients-btn { width:100%; flex-basis:auto; } 
}



/* ===== contract-create.css | scope .page-contract-create ===== */
body.page-contract-create .contract-create-form {
    width: 100%;
}

body.page-contract-create .contract-panel {
    margin-bottom: 24px;
}

body.page-contract-create .contract-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

body.page-contract-create .contract-section-header h2 {
    margin: 0;
}

body.page-contract-create .contract-section-header p:not(.eyebrow) {
    margin-top: 6px;
    color: #64748b;
}


/* CAMPOS */

body.page-contract-create .contract-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.page-contract-create .contract-field > span {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

body.page-contract-create .contract-field input,
body.page-contract-create .contract-field textarea,
body.page-contract-create .contract-field select {

    width: 100%;

    box-sizing: border-box;

    padding: 13px 14px;

    border: 1px solid #cbd5e1;

    border-radius: 0;

    background: #ffffff;

    color: #0f172a;

    font-family: var(--app-font-family);

    font-size: 14px;

    outline: none;
}

body.page-contract-create .contract-field input:focus,
body.page-contract-create .contract-field textarea:focus,
body.page-contract-create .contract-field select:focus {

    border-color: #2563eb;
}

body.page-contract-create .contract-field textarea {

    resize: vertical;

    line-height: 1.6;
}


/* INFORMACIÓN DEL CLIENTE */

body.page-contract-create .selected-client-info {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;

    margin-top: 20px;

    padding: 20px;

    border: 1px solid #e2e8f0;

    background: #f8fafc;
}

body.page-contract-create .client-info-item {

    display: flex;

    flex-direction: column;

    gap: 5px;
}

body.page-contract-create .client-info-item span {

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .7px;

    color: #64748b;
}

body.page-contract-create .client-info-item strong {

    font-size: 14px;

    color: #0f172a;

    word-break: break-word;
}

body.page-contract-create .client-info-address {

    grid-column: 1 / -1;
}


/* DOCUMENTO IDENTIFICACIÓN */

body.page-contract-create .identification-box {

    margin-top: 22px;

    padding: 20px;

    border: 1px solid #bfdbfe;

    background: #eff6ff;
}

body.page-contract-create .identification-title {

    display: flex;

    flex-direction: column;

    gap: 5px;

    margin-bottom: 18px;
}

body.page-contract-create .identification-title strong {

    font-size: 15px;

    color: #1e3a8a;
}

body.page-contract-create .identification-title span {

    font-size: 13px;

    color: #475569;

    line-height: 1.5;
}


/* MONTO */

body.page-contract-create .contract-amount-box {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 24px;

    align-items: stretch;
}

body.page-contract-create .contract-money-input {

    display: flex;

    align-items: stretch;
}

body.page-contract-create .contract-money-input > span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    border: 1px solid #cbd5e1;

    border-right: none;

    background: #f8fafc;

    font-size: 18px;

    font-weight: 700;
}

body.page-contract-create .contract-money-input input {

    border-left: none;
}

body.page-contract-create .contract-amount-words {

    min-height: 100%;

    padding: 18px;

    border: 1px solid #e2e8f0;

    background: #f8fafc;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 10px;
}

body.page-contract-create .contract-amount-words > span {

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .7px;

    color: #64748b;
}

body.page-contract-create .contract-amount-words strong {

    font-size: 15px;

    line-height: 1.6;

    color: #0f172a;
}


/* PREVISUALIZACIÓN */

body.page-contract-create .contract-preview {

    padding: 30px;

    border: 1px solid #cbd5e1;

    background: #ffffff;

    font-family: var(--app-font-family);

    font-size: 17px;

    line-height: 2;
}

body.page-contract-create .contract-preview p {

    margin: 0 0 20px 0;
}

body.page-contract-create .contract-preview p:last-child {

    margin-bottom: 0;
}

body.page-contract-create .contract-preview strong {

    font-weight: 700;
}

body.page-contract-create .preview-date {

    font-size: 15px;
}


/* CLÁUSULAS */

body.page-contract-create .clauses-textarea {

    font-family: var(--app-font-family);

    font-weight: 700;

    line-height: 1.7;
}

body.page-contract-create .clauses-note {

    margin-top: 12px;

    padding: 12px 15px;

    background: #f8fafc;

    border-left: 3px solid #2563eb;

    color: #475569;

    font-size: 13px;
}


/* ALERTA */

body.page-contract-create .contract-alert {

    width: 100%;

    box-sizing: border-box;

    padding: 15px 18px;

    margin-bottom: 24px;

    border: 1px solid;
}

body.page-contract-create .contract-alert-error {

    background: #fee2e2;

    border-color: #fecaca;

    color: #991b1b;
}


/* =========================================================
   BOTONES GUARDAR / CANCELAR
   ========================================================= */

body.page-contract-create .contract-actions {

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 10px;

    margin-top: 8px;

    margin-bottom: 40px;

    box-sizing: border-box;
}


body.page-contract-create .contract-save-btn {

    width: 100% !important;

    min-height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px 14px;

    background: #2563eb !important;

    color: #ffffff !important;

    border: 1px solid #2563eb !important;

    border-radius: 0 !important;

    font-size: 13px;

    font-weight: 700;

    line-height: 1;

    box-sizing: border-box;

    cursor: pointer;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .08);

    transition:
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}


body.page-contract-create .contract-save-btn:hover {

    background: #1d4ed8 !important;

    border-color: #1d4ed8 !important;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 3px 8px rgba(37, 99, 235, .22);
}


body.page-contract-create .contract-save-btn:active {

    transform: translateY(0);

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .08);
}


body.page-contract-create .contract-cancel-btn {

    width: 100%;

    min-height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px 14px;

    box-sizing: border-box;

    background: #dc2626 !important;

    color: #ffffff !important;

    border: 1px solid #dc2626 !important;

    border-radius: 0 !important;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .08);

    transition:
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}


body.page-contract-create .contract-cancel-btn:hover {

    background: #b91c1c !important;

    border-color: #b91c1c !important;

    color: #ffffff !important;

    text-decoration: none;

    transform: translateY(-1px);

    box-shadow:
        0 3px 8px rgba(220, 38, 38, .22);
}


body.page-contract-create .contract-cancel-btn:active {

    transform: translateY(0);

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .08);
}


/* MÓVIL */

@media screen and (max-width: 768px) {


    body.page-contract-create .selected-client-info,
body.page-contract-create .contract-amount-box {

        grid-template-columns: 1fr;
    }

    body.page-contract-create .client-info-address {

        grid-column: auto;
    }

    body.page-contract-create .contract-preview {

        padding: 20px;

        font-size: 15px;

        line-height: 1.8;
    }

    body.page-contract-create .contract-actions {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap: 8px;

        margin-top: 8px;
    }

    body.page-contract-create .contract-actions .btn,
body.page-contract-create .contract-actions a {

        width: 100%;

        text-align: center;
    }

}


/* ===== Modernización uniforme del panel ===== */
body.page-contract-create .page-heading {background:#fff;border:1px solid #dfe8f4;border-radius:16px;padding:20px 22px;margin-bottom:18px;box-shadow:0 10px 30px rgba(30,64,175,.06);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
body.page-contract-create .page-heading h1,
body.page-contract-create .page-heading h2 {margin:0;color:#0f172a;letter-spacing:-.03em;}
body.page-contract-create .eyebrow {color:#1468f3!important;font-size:11px!important;font-weight:900!important;letter-spacing:.12em;text-transform:uppercase;}
body.page-contract-create .page-description {color:#6b7a94;line-height:1.55;}
body.page-contract-create .panel,
body.page-contract-create .contracts-panel {background:#fff;border:1px solid #dfe8f4!important;border-radius:16px!important;box-shadow:0 10px 30px rgba(30,64,175,.06)!important;padding:20px 22px!important;margin-bottom:18px;}
body.page-contract-create .btn {border-radius:9px!important;min-height:42px;padding:0 17px!important;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;font-weight:800!important;transition:.18s ease!important;}
body.page-contract-create .btn:not(.btn-outline):not(.btn-secondary):not(.btn-whatsapp) {background:linear-gradient(135deg,#2676ff,#0f63ef)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 18px rgba(20,104,243,.16);}
body.page-contract-create .btn-outline,
body.page-contract-create .btn-secondary {background:#fff!important;color:#465875!important;border:1px solid #cbd8ea!important;}
body.page-contract-create input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
body.page-contract-create select,
body.page-contract-create textarea {border:1px solid #cfdaea!important;border-radius:10px!important;background:#fff;transition:border-color .18s ease,box-shadow .18s ease;}
body.page-contract-create input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
body.page-contract-create select:focus,
body.page-contract-create textarea:focus {outline:none!important;border-color:#87b4ff!important;box-shadow:0 0 0 3px rgba(20,104,243,.09)!important;}
body.page-contract-create .table-wrap {border:1px solid #e5ebf4;border-radius:12px;overflow:auto;background:#fff;}
body.page-contract-create table {border-collapse:collapse;}
body.page-contract-create thead th {background:#f5f8fc!important;color:#51617c!important;text-transform:uppercase;font-size:11px!important;letter-spacing:.035em;}
body.page-contract-create tbody tr {transition:background .16s ease;}
body.page-contract-create tbody tr:hover {background:#fbfdff;}
body.page-contract-create .alert,
body.page-contract-create .contract-alert {border-radius:11px!important;}
@media (max-width:768px) {
body.page-contract-create .page-heading {padding:16px;border-radius:13px;align-items:flex-start}body.page-contract-create .panel,
body.page-contract-create .contracts-panel {padding:15px!important;border-radius:13px!important}body.page-contract-create .hero-actions {width:100%;display:flex;gap:8px;flex-wrap:wrap}body.page-contract-create .hero-actions .btn {flex:1 1 auto}
}

/* ===== Botones 50% ===== */
body.page-contract-create .contract-actions { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; width:100%; }
body.page-contract-create .contract-actions > .contract-save-btn,
body.page-contract-create .contract-actions > .contract-cancel-btn { width:100% !important; min-width:0 !important; border-radius:9px !important; }



/* ===== contract-send.css | scope .page-contract-send ===== */
/*
|--------------------------------------------------------------------------
| PANEL
|--------------------------------------------------------------------------
*/

body.page-contract-send .send-contract-panel {

    margin-bottom: 24px;

}


body.page-contract-send .contract-section-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 24px;

}


body.page-contract-send .contract-section-header h2 {

    margin: 0;

}


body.page-contract-send .contract-section-header p:not(.eyebrow) {

    margin-top: 6px;

    color: #64748b;

}


/*
|--------------------------------------------------------------------------
| INFORMACIÓN
|--------------------------------------------------------------------------
*/

body.page-contract-send .contract-information-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

}


body.page-contract-send .contract-information-item {

    padding: 18px;

    border: 1px solid #e2e8f0;

    background: #f8fafc;

}


body.page-contract-send .contract-information-item span {

    display: block;

    margin-bottom: 7px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .7px;

    color: #64748b;

}


body.page-contract-send .contract-information-item strong {

    display: block;

    color: #0f172a;

    font-size: 14px;

    word-break: break-word;

}


/*
|--------------------------------------------------------------------------
| ALERTAS
|--------------------------------------------------------------------------
*/

body.page-contract-send .contract-alert {

    width: 100%;

    box-sizing: border-box;

    padding: 15px 18px;

    margin-bottom: 24px;

    border: 1px solid;

}


body.page-contract-send .contract-alert-error {

    background: #fef2f2;

    border-color: #fecaca;

    color: #991b1b;

}


/*
|--------------------------------------------------------------------------
| ÉXITO
|--------------------------------------------------------------------------
*/

body.page-contract-send .send-success-box {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;

    padding: 18px;

    background: #ecfdf5;

    border: 1px solid #a7f3d0;

    color: #065f46;

}


body.page-contract-send .send-success-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: #10b981;

    color: #ffffff;

    font-size: 20px;

    font-weight: 800;

}


/*
|--------------------------------------------------------------------------
| URL
|--------------------------------------------------------------------------
*/

body.page-contract-send .sign-url-box {

    margin-top: 20px;

}


body.page-contract-send .sign-url-box label {

    display: block;

    margin-bottom: 8px;

    font-size: 13px;

    font-weight: 700;

    color: #334155;

}


body.page-contract-send .sign-url-row {

    display: flex;

    align-items: stretch;

}


body.page-contract-send .sign-url-row input {

    flex: 1;

    min-width: 0;

    box-sizing: border-box;

    padding: 13px 14px;

    border: 1px solid #cbd5e1;

    border-right: none;

    background: #ffffff;

    color: #334155;

    font-family: var(--app-font-family);

    font-size: 12px;

    outline: none;

}


body.page-contract-send .copy-button {

    padding: 0 18px;

    border: 1px solid #0f172a;

    background: #0f172a;

    color: #ffffff;

    font-family: var(--app-font-family);

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

}


body.page-contract-send .copy-button:hover {

    background: #1e293b;

}


body.page-contract-send .sign-url-help {

    margin: 10px 0 0;

    color: #64748b;

    font-size: 12px;

}


/*
|--------------------------------------------------------------------------
| ACCIONES
|--------------------------------------------------------------------------
*/

body.page-contract-send .send-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 24px;

}


/*
|--------------------------------------------------------------------------
| WHATSAPP
|--------------------------------------------------------------------------
*/

body.page-contract-send .whatsapp-button {

    background: #16a34a;

    border-color: #16a34a;

    color: #ffffff;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

}


body.page-contract-send .whatsapp-button:hover {

    background: #15803d;

    border-color: #15803d;

    color: #ffffff;

}


body.page-contract-send .whatsapp-icon {

    width: 22px;

    height: 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,.20);

    font-size: 12px;

    font-weight: 800;

}


body.page-contract-send .whatsapp-disabled {

    opacity: .55;

    cursor: not-allowed;

}


/*
|--------------------------------------------------------------------------
| AVISO WHATSAPP
|--------------------------------------------------------------------------
*/

body.page-contract-send .whatsapp-notice {

    margin-top: 18px;

    padding: 14px 16px;

    background: #f0fdf4;

    border-left: 3px solid #16a34a;

    color: #166534;

    font-size: 13px;

    line-height: 1.6;

}


body.page-contract-send .whatsapp-notice strong {

    display: block;

    margin-bottom: 4px;

}


body.page-contract-send .whatsapp-notice p {

    margin: 0;

}


/*
|--------------------------------------------------------------------------
| CORREO
|--------------------------------------------------------------------------
*/

body.page-contract-send .email-simple-box {

    border: 1px solid #e2e8f0;

    background: #f8fafc;

}


body.page-contract-send .email-simple-row {

    display: grid;

    grid-template-columns: 90px 1fr;

    gap: 15px;

    padding: 13px 16px;

    border-bottom: 1px solid #e2e8f0;

}


body.page-contract-send .email-simple-row:last-child {

    border-bottom: none;

}


body.page-contract-send .email-simple-row span {

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .7px;

    color: #64748b;

}


body.page-contract-send .email-simple-row strong {

    font-size: 13px;

    font-weight: 600;

    color: #0f172a;

    word-break: break-word;

}


/*
|--------------------------------------------------------------------------
| BOTÓN ENVIAR POR CORREO
|--------------------------------------------------------------------------
*/

body.page-contract-send .email-send-action {

    margin-top: 18px;

}


body.page-contract-send .email-send-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 11px 16px;

    border: 1px solid #cbd5e1;

    background: #ffffff;

    color: #334155;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;

}


body.page-contract-send .email-send-button:hover {

    background: #f8fafc;

    border-color: #94a3b8;

    color: #0f172a;

}


body.page-contract-send .email-send-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 15px;

}


/*
|--------------------------------------------------------------------------
| AVISO CORREO
|--------------------------------------------------------------------------
*/

body.page-contract-send .email-notice {

    margin-top: 15px;

    padding: 13px 15px;

    background: #f8fafc;

    border-left: 3px solid #94a3b8;

    color: #475569;

    font-size: 13px;

    line-height: 1.6;

}


body.page-contract-send .email-notice strong {

    margin-right: 4px;

}


/*
|--------------------------------------------------------------------------
| MÓVIL
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 768px) {



    body.page-contract-send .contract-information-grid {

        grid-template-columns: 1fr;

    }


    body.page-contract-send .sign-url-row {

        flex-direction: column;

    }


    body.page-contract-send .sign-url-row input {

        border-right: 1px solid #cbd5e1;

        border-bottom: none;

    }


    body.page-contract-send .copy-button {

        min-height: 45px;

    }


    body.page-contract-send .send-actions {

        flex-direction: column;

    }


    body.page-contract-send .send-actions .btn {

        width: 100%;

        text-align: center;

        box-sizing: border-box;

    }


    body.page-contract-send .whatsapp-button {

        width: 100%;

    }


    body.page-contract-send .email-send-button {

        width: 100%;

        box-sizing: border-box;

    }


    body.page-contract-send .email-simple-row {

        grid-template-columns: 1fr;

        gap: 5px;

    }


}


/* ===== Modernización uniforme del panel ===== */
body.page-contract-send .page-heading {background:#fff;border:1px solid #dfe8f4;border-radius:16px;padding:20px 22px;margin-bottom:18px;box-shadow:0 10px 30px rgba(30,64,175,.06);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
body.page-contract-send .page-heading h1,
body.page-contract-send .page-heading h2 {margin:0;color:#0f172a;letter-spacing:-.03em;}
body.page-contract-send .eyebrow {color:#1468f3!important;font-size:11px!important;font-weight:900!important;letter-spacing:.12em;text-transform:uppercase;}
body.page-contract-send .page-description {color:#6b7a94;line-height:1.55;}
body.page-contract-send .panel,
body.page-contract-send .contracts-panel {background:#fff;border:1px solid #dfe8f4!important;border-radius:16px!important;box-shadow:0 10px 30px rgba(30,64,175,.06)!important;padding:20px 22px!important;margin-bottom:18px;}
body.page-contract-send .btn {border-radius:9px!important;min-height:42px;padding:0 17px!important;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;font-weight:800!important;transition:.18s ease!important;}
body.page-contract-send .btn:not(.btn-outline):not(.btn-secondary):not(.btn-whatsapp) {background:linear-gradient(135deg,#2676ff,#0f63ef)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 18px rgba(20,104,243,.16);}
body.page-contract-send .btn-outline,
body.page-contract-send .btn-secondary {background:#fff!important;color:#465875!important;border:1px solid #cbd8ea!important;}
body.page-contract-send input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
body.page-contract-send select,
body.page-contract-send textarea {border:1px solid #cfdaea!important;border-radius:10px!important;background:#fff;transition:border-color .18s ease,box-shadow .18s ease;}
body.page-contract-send input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
body.page-contract-send select:focus,
body.page-contract-send textarea:focus {outline:none!important;border-color:#87b4ff!important;box-shadow:0 0 0 3px rgba(20,104,243,.09)!important;}
body.page-contract-send .table-wrap {border:1px solid #e5ebf4;border-radius:12px;overflow:auto;background:#fff;}
body.page-contract-send table {border-collapse:collapse;}
body.page-contract-send thead th {background:#f5f8fc!important;color:#51617c!important;text-transform:uppercase;font-size:11px!important;letter-spacing:.035em;}
body.page-contract-send tbody tr {transition:background .16s ease;}
body.page-contract-send tbody tr:hover {background:#fbfdff;}
body.page-contract-send .alert,
body.page-contract-send .contract-alert {border-radius:11px!important;}
@media (max-width:768px) {
body.page-contract-send .page-heading {padding:16px;border-radius:13px;align-items:flex-start}body.page-contract-send .panel,
body.page-contract-send .contracts-panel {padding:15px!important;border-radius:13px!important}body.page-contract-send .hero-actions {width:100%;display:flex;gap:8px;flex-wrap:wrap}body.page-contract-send .hero-actions .btn {flex:1 1 auto}
}

/* ===== Botones 50% ===== */
body.page-contract-send .send-actions { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; width:100%; }
body.page-contract-send .send-actions > a,
body.page-contract-send .send-actions > button,
body.page-contract-send .send-actions > .btn { width:100% !important; min-width:0 !important; box-sizing:border-box; }



/* ===== contract-sign.css | scope .page-contract-sign ===== */
body.page-contract-sign * {
        box-sizing: border-box;
    }


    html:has(> body.page-contract-sign),
body.page-contract-sign {
        margin: 0;
        padding: 0;
    }


    body.page-contract-sign {

        background: #f1f5f9;

        color: #0f172a;

        font-family: var(--app-font-family);

        line-height: 1.6;

    }


    body.page-contract-sign .sign-page {

        width: 100%;

        padding: 30px 15px 60px;

    }


    body.page-contract-sign .sign-container {

        max-width: 950px;

        margin: 0 auto;

    }


    /* HEADER */

    body.page-contract-sign .sign-top {

        background: #ffffff;

        border: 1px solid #e2e8f0;

        padding: 22px 25px;

        margin-bottom: 20px;

        display: flex;

        justify-content: space-between;

        align-items: center;

        gap: 20px;

    }


    body.page-contract-sign .company {

        display: flex;

        align-items: center;

        gap: 15px;

    }


    body.page-contract-sign .company-logo {

        width: 65px;

        height: 65px;

        display: flex;

        align-items: center;

        justify-content: center;

        flex-shrink: 0;

    }


    body.page-contract-sign .company-logo img {

        width: 65px;

        height: 65px;

        object-fit: contain;

    }


    body.page-contract-sign .company h1 {

        margin: 0;

        font-size: 20px;

    }


    body.page-contract-sign .company-details {

        margin-top: 3px;

        color: #64748b;

        font-size: 12px;

    }


    body.page-contract-sign .contract-number {

        padding: 12px 18px;

        border: 1px solid #cbd5e1;

        text-align: center;

        min-width: 150px;

    }


    body.page-contract-sign .contract-number span {

        display: block;

        font-size: 9px;

        font-weight: 800;

        letter-spacing: .8px;

        color: #64748b;

    }


    body.page-contract-sign .contract-number strong {

        font-size: 14px;

    }


    /* STATUS */

    body.page-contract-sign .status {

        margin-bottom: 20px;

        padding: 16px 18px;

        border: 1px solid;

        background: #ffffff;

    }


    body.page-contract-sign .status.success {

        border-color: #a7f3d0;

        background: #ecfdf5;

        color: #065f46;

    }


    body.page-contract-sign .status.error {

        border-color: #fecaca;

        background: #fef2f2;

        color: #991b1b;

    }


    body.page-contract-sign .status.pending {

        border-color: #bfdbfe;

        background: #eff6ff;

        color: #1e40af;

    }


    /* PAPER */

    body.page-contract-sign .contract-paper {

        background: #ffffff;

        border: 1px solid #e2e8f0;

        padding: 50px 55px;

        box-shadow:
            0 10px 30px
            rgba(15, 23, 42, .06);

    }


    body.page-contract-sign .contract-title {

        text-align: center;

        margin-bottom: 35px;

    }


    body.page-contract-sign .contract-title h2 {

        margin: 0;

        font-size: 23px;

    }


    body.page-contract-sign .contract-title p {

        margin: 7px 0 0;

        color: #64748b;

        font-size: 12px;

    }


    body.page-contract-sign .blue-line {

        height: 3px;

        background: #2563eb;

        margin: 0 0 30px;

    }


    /* CLIENT */

    body.page-contract-sign .client-card {

        border: 1px solid #cbd5e1;

        margin-bottom: 30px;

    }


    body.page-contract-sign .client-card-title {

        padding: 11px 15px;

        background: #f8fafc;

        border-bottom: 1px solid #cbd5e1;

        font-size: 10px;

        font-weight: 800;

        letter-spacing: .8px;

    }


    body.page-contract-sign .client-grid {

        display: grid;

        grid-template-columns: 1fr 1fr;

    }


    body.page-contract-sign .client-item {

        padding: 16px;

    }


    body.page-contract-sign .client-item + .client-item {

        border-left: 1px solid #cbd5e1;

    }


    body.page-contract-sign .client-item span {

        display: block;

        font-size: 9px;

        font-weight: 800;

        color: #64748b;

        margin-bottom: 5px;

    }


    body.page-contract-sign .client-item strong {

        font-size: 14px;

    }


    /* BODY */

    body.page-contract-sign .contract-body {

        font-family: var(--app-font-family);

        font-size: 15px;

        line-height: 1.9;

    }


    body.page-contract-sign .contract-body p {

        margin: 0 0 20px;

    }


    body.page-contract-sign .work-box {

        padding: 18px;

        margin: 15px 0 25px;

        border-left: 4px solid #2563eb;

        background: #f8fafc;

    }


    body.page-contract-sign .amount-box {

        padding: 18px;

        margin: 15px 0 25px;

        border: 1px solid #cbd5e1;

    }


    /* CLAUSES */

    body.page-contract-sign .clauses {

        margin-top: 30px;

        border: 1px solid #94a3b8;

    }


    body.page-contract-sign .clauses-title {

        padding: 12px 15px;

        background: #f1f5f9;

        border-bottom: 1px solid #94a3b8;

        font-size: 10px;

        font-weight: 900;

        letter-spacing: .8px;

    }


    body.page-contract-sign .clauses-content {

        padding: 20px;

        font-size: 13px;

        line-height: 1.8;

    }


    /* SIGN */

    body.page-contract-sign .signature-section {

        margin-top: 50px;

        padding-top: 30px;

        border-top: 1px solid #e2e8f0;

    }


    body.page-contract-sign .signature-section h3 {

        margin: 0 0 8px;

        font-size: 18px;

    }


    body.page-contract-sign .signature-section > p {

        margin: 0 0 20px;

        color: #64748b;

        font-size: 13px;

    }


    body.page-contract-sign .signature-box {

        border: 1px solid #cbd5e1;

        background: #ffffff;

    }


    body.page-contract-sign .signature-canvas-wrap {

        position: relative;

        width: 100%;

        height: 220px;

        background: #ffffff;

    }


    body.page-contract-sign #signatureCanvas {

        display: block;

        width: 100%;

        height: 100%;

        touch-action: none;

        cursor: crosshair;

    }


    body.page-contract-sign .signature-placeholder {

        position: absolute;

        left: 0;

        right: 0;

        top: 50%;

        transform: translateY(-50%);

        text-align: center;

        color: #cbd5e1;

        pointer-events: none;

        font-size: 14px;

    }


    body.page-contract-sign .signature-tools {

        display: flex;

        justify-content: space-between;

        align-items: center;

        gap: 10px;

        padding: 12px;

        border-top: 1px solid #e2e8f0;

        background: #f8fafc;

    }


    body.page-contract-sign .signature-tools small {

        color: #64748b;

    }


    body.page-contract-sign .clear-button {

        border: 1px solid #cbd5e1;

        background: #ffffff;

        color: #334155;

        padding: 9px 13px;

        cursor: pointer;

        font-weight: 700;

    }


    body.page-contract-sign .clear-button:hover {

        background: #f1f5f9;

    }


    body.page-contract-sign .confirm-box {

        margin-top: 18px;

        padding: 16px;

        background: #f8fafc;

        border: 1px solid #e2e8f0;

    }


    body.page-contract-sign .confirm-label {

        display: flex;

        align-items: flex-start;

        gap: 10px;

        font-size: 13px;

        color: #334155;

        cursor: pointer;

    }


    body.page-contract-sign .confirm-label input {

        margin-top: 4px;

    }


    body.page-contract-sign .sign-actions {

        margin-top: 20px;

        display: flex;

        justify-content: flex-end;

    }


    body.page-contract-sign .sign-button {

        border: none;

        background: #0f172a;

        color: #ffffff;

        padding: 14px 24px;

        font-size: 14px;

        font-weight: 800;

        cursor: pointer;

    }


    body.page-contract-sign .sign-button:hover {

        opacity: .92;

    }


    body.page-contract-sign .sign-button:disabled {

        opacity: .5;

        cursor: not-allowed;

    }


    /* SIGNED */

    body.page-contract-sign .signed-box {

        margin-top: 40px;

        padding: 25px;

        border: 1px solid #a7f3d0;

        background: #ecfdf5;

    }


    body.page-contract-sign .signed-box h3 {

        margin: 0 0 8px;

        color: #065f46;

    }


    body.page-contract-sign .signed-box p {

        margin: 5px 0;

        color: #047857;

        font-size: 13px;

    }


    body.page-contract-sign .saved-signature {

        margin-top: 20px;

        padding: 15px;

        background: #ffffff;

        border: 1px solid #a7f3d0;

    }


    body.page-contract-sign .saved-signature img {

        display: block;

        max-width: 100%;

        height: 140px;

        object-fit: contain;

    }


    /* FOOTER */

    body.page-contract-sign .sign-footer {

        text-align: center;

        margin-top: 20px;

        color: #64748b;

        font-size: 11px;

    }


    /* MOBILE */

    @media screen and (max-width: 768px) {


        body.page-contract-sign .sign-page {

            padding: 10px 8px 40px;

        }


        body.page-contract-sign .sign-top {

            flex-direction: column;

            align-items: stretch;

            padding: 18px;

        }


        body.page-contract-sign .contract-number {

            width: 100%;

        }


        body.page-contract-sign .contract-paper {

            padding: 25px 18px;

        }


        body.page-contract-sign .client-grid {

            grid-template-columns: 1fr;

        }


        body.page-contract-sign .client-item + .client-item {

            border-left: none;

            border-top: 1px solid #cbd5e1;

        }


        body.page-contract-sign .contract-body {

            font-size: 14px;

        }


        body.page-contract-sign .signature-canvas-wrap {

            height: 200px;

        }


        body.page-contract-sign .sign-actions {

            display: block;

        }


        body.page-contract-sign .sign-button {

            width: 100%;

        }

    
}


    @media print {


        body.page-contract-sign {

            background: #ffffff;

        }


        body.page-contract-sign .sign-top,
body.page-contract-sign .status,
body.page-contract-sign .signature-section,
body.page-contract-sign .sign-footer {

            display: none !important;

        }


        body.page-contract-sign .contract-paper {

            border: none;

            box-shadow: none;

            padding: 0;

        }

    
}

/* ===== Botón de firma 50% ===== */
body.page-contract-sign .sign-actions { display:flex !important; width:100%; }
body.page-contract-sign .sign-actions > .sign-button { width:50% !important; min-width:0 !important; }
@media (max-width:600px) {
 body.page-contract-sign .sign-actions > .sign-button { width:100% !important; } 
}



/* ===== contract-view.css | scope .page-contract-view ===== */
/* =========================================================
   BOTÓN ENVIAR
   ========================================================= */

body.page-contract-view .contract-send-btn {

    background: #2563eb;

    color: #fff;

    border-color: #2563eb;

}


body.page-contract-view .contract-send-btn:hover {

    background: #1d4ed8;

    border-color: #1d4ed8;

}


/* =========================================================
   BOTÓN DESCARGAR CONTRATO FIRMADO
   ========================================================= */

body.page-contract-view .contract-download-signed-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 36px;

    padding: 8px 14px;

    background: #2563eb;

    color: #fff;

    border: 1px solid #2563eb;

    border-radius: 0;

    font-size: 12px;

    font-weight: 700;

    line-height: 1;

    box-sizing: border-box;

    cursor: pointer;

    box-shadow:
        0 1px 2px
        rgba(15, 23, 42, .08);

    transition:
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;

}


body.page-contract-view .contract-download-signed-btn:hover {

    background: #1d4ed8;

    border-color: #1d4ed8;

    color: #fff;

    transform: translateY(-1px);

    box-shadow:
        0 3px 8px
        rgba(37, 99, 235, .22);

}


body.page-contract-view .contract-download-signed-btn:active {

    transform: translateY(0);

}


body.page-contract-view .contract-download-signed-btn:focus-visible {

    outline: 3px solid
        rgba(37, 99, 235, .25);

    outline-offset: 2px;

}


/* =========================================================
   ICONO
   ========================================================= */

body.page-contract-view .contract-download-icon {

    width: 17px;

    height: 17px;

    display: block;

    flex-shrink: 0;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =========================================================
   DESACTIVADO
   ========================================================= */

body.page-contract-view .contract-download-disabled {

    background: #e2e8f0 !important;

    border-color: #cbd5e1 !important;

    color: #94a3b8 !important;

    cursor: not-allowed !important;

    box-shadow: none !important;

    transform: none !important;

    opacity: 1 !important;

}


body.page-contract-view .contract-download-disabled:hover {

    background: #e2e8f0 !important;

    border-color: #cbd5e1 !important;

    color: #94a3b8 !important;

    box-shadow: none !important;

    transform: none !important;

}


/* =========================================================
   FIRMAS
   ========================================================= */

body.page-contract-view .contract-signatures {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 70px;

    margin-top: 50px;

    width: 100%;

    align-items: start;

}


body.page-contract-view .signature-box {

    width: 100%;

    min-width: 0;

    box-sizing: border-box;

    text-align: center;

}


body.page-contract-view .signature-area {

    width: 100%;

    height: 75px;

    min-height: 75px;

    max-height: 75px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    box-sizing: border-box;

    overflow: hidden;

}


body.page-contract-view .client-digital-signature {

    width: 100%;

    height: 75px;

    min-height: 75px;

    max-height: 75px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    box-sizing: border-box;

}


body.page-contract-view .client-digital-signature img {

    display: block;

    max-width: 190px;

    max-height: 70px;

    width: auto;

    height: auto;

    object-fit: contain;

    margin: 0 auto;

}


body.page-contract-view .company-seal {

    width: 66px;

    height: 66px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    color: #2563eb;

    box-sizing: border-box;

}


body.page-contract-view .company-seal svg {

    width: 47px;

    height: 47px;

    display: block;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


body.page-contract-view .company-seal .seal-check {

    stroke-width: 3;

}


body.page-contract-view .company-seal-text {

    display: block;

    margin-top: 1px;

    color: #2563eb !important;

    font-size: 6px !important;

    line-height: 1;

    font-weight: 900 !important;

    letter-spacing: .45px;

    white-space: nowrap;

}


body.page-contract-view .signature-empty-space {

    width: 100%;

    height: 75px;

    min-height: 75px;

    max-height: 75px;

    box-sizing: border-box;

}


body.page-contract-view .signature-line {

    width: 100%;

    border-top: 1px solid #0f172a;

    margin: 0 0 8px;

    box-sizing: border-box;

}


body.page-contract-view .signature-box strong {

    display: block;

    font-size: 13px;

}


body.page-contract-view .signature-box span {

    display: block;

    margin-top: 3px;

    font-size: 10px;

    font-weight: 800;

    color: #64748b;

}


body.page-contract-view .signature-box .signed-provider-status {

    color: #2563eb;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .2px;

}


body.page-contract-view .signature-box small {

    display: block;

    margin-top: 5px;

    color: #64748b;

    font-size: 10px;

}


/* =========================================================
   CONTRATO
   ========================================================= */

body.page-contract-view .contract-paper {

    max-width: 900px;

    margin: 0 auto 40px;

    padding: 50px 55px;

    background: #fff;

    border: 1px solid #e2e8f0;

    border-radius: 0;

    box-shadow:
        0 10px 35px
        rgba(15, 23, 42, .08);

    box-sizing: border-box;

    color: #0f172a;

}


/* =========================================================
   CABECERA
   ========================================================= */

body.page-contract-view .contract-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 30px;

}


body.page-contract-view .contract-company {

    display: flex;

    align-items: center;

    gap: 18px;

}


body.page-contract-view .contract-logo {

    width: 90px;

    height: 90px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}


body.page-contract-view .contract-logo img {

    width: 90px;

    height: 90px;

    object-fit: contain;

}


body.page-contract-view .contract-company h2 {

    margin: 0 0 7px;

    font-size: 22px;

}


body.page-contract-view .contract-company-details {

    font-size: 12px;

    line-height: 1.5;

    color: #64748b;

}


body.page-contract-view .contract-number-box {

    min-width: 150px;

    padding: 14px;

    border: 1px solid #cbd5e1;

    text-align: center;

}


body.page-contract-view .contract-number-box span {

    display: block;

    font-size: 10px;

    letter-spacing: 1px;

    font-weight: 800;

    color: #64748b;

    margin-bottom: 5px;

}


body.page-contract-view .contract-number-box strong {

    font-size: 14px;

}


/* =========================================================
   LÍNEA
   ========================================================= */

body.page-contract-view .contract-blue-line {

    height: 3px;

    background: #2563eb;

    margin: 25px 0 35px;

}


/* =========================================================
   TÍTULO
   ========================================================= */

body.page-contract-view .contract-title {

    text-align: center;

    margin-bottom: 35px;

}


body.page-contract-view .contract-title h1 {

    margin: 0;

    font-size: 22px;

    letter-spacing: .4px;

}


body.page-contract-view .contract-title p {

    margin: 8px 0 0;

    color: #64748b;

    font-size: 12px;

}


/* =========================================================
   CLIENTE
   ========================================================= */

body.page-contract-view .contract-client-card {

    border: 1px solid #cbd5e1;

    margin-bottom: 35px;

}


body.page-contract-view .contract-card-title {

    padding: 11px 15px;

    background: #f8fafc;

    border-bottom: 1px solid #cbd5e1;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .8px;

}


body.page-contract-view .contract-client-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

}


body.page-contract-view .contract-client-grid > div {

    padding: 16px;

}


body.page-contract-view .contract-client-grid > div + div {

    border-left: 1px solid #cbd5e1;

}


body.page-contract-view .contract-client-grid span,
body.page-contract-view .contract-client-email span {

    display: block;

    font-size: 9px;

    font-weight: 800;

    color: #64748b;

    margin-bottom: 6px;

}


body.page-contract-view .contract-client-grid strong,
body.page-contract-view .contract-client-email strong {

    font-size: 14px;

}


body.page-contract-view .contract-client-email {

    padding: 14px 16px;

    border-top: 1px solid #cbd5e1;

}


/* =========================================================
   CUERPO
   ========================================================= */

body.page-contract-view .contract-body {

    font-size: 14px;

    line-height: 1.8;

}


body.page-contract-view .contract-body p {

    margin: 0 0 22px;

}


body.page-contract-view .contract-work-box {

    margin: 15px 0 25px;

    padding: 18px;

    border-left: 4px solid #2563eb;

    background: #f8fafc;

    line-height: 1.7;

}


body.page-contract-view .contract-amount-words {

    padding: 18px;

    margin: 15px 0 25px;

    border: 1px solid #cbd5e1;

    background: #fff;

    line-height: 1.6;

}


/* =========================================================
   CLÁUSULAS
   ========================================================= */

body.page-contract-view .contract-clauses {

    margin-top: 30px;

    border: 1px solid #94a3b8;

}


body.page-contract-view .contract-clauses-title {

    padding: 12px 15px;

    background: #f1f5f9;

    border-bottom: 1px solid #94a3b8;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .8px;

}


body.page-contract-view .contract-clauses-content {

    padding: 20px;

    font-size: 13px;

    line-height: 1.8;

}


body.page-contract-view .contract-clauses-content strong {

    font-weight: 800;

}


/* =========================================================
   FECHA
   ========================================================= */

body.page-contract-view .contract-date {

    margin-top: 45px;

    text-align: right;

    font-size: 11px;

    color: #64748b;

}


body.page-contract-view .contract-date strong {

    color: #0f172a;

}


/* =========================================================
   INFORMACIÓN
   ========================================================= */

body.page-contract-view .contract-sent-info {

    margin-top: 20px;

    padding: 12px 15px;

    border: 1px solid #bbf7d0;

    background: #f0fdf4;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    font-size: 11px;

}


body.page-contract-view .contract-sent-info span {

    font-weight: 800;

    color: #166534;

    letter-spacing: .5px;

}


body.page-contract-view .contract-sent-info strong {

    color: #166534;

}


/* =========================================================
   PIE
   ========================================================= */

body.page-contract-view .contract-footer {

    margin-top: 45px;

    padding-top: 15px;

    border-top: 1px solid #e2e8f0;

    display: flex;

    justify-content: space-between;

    font-size: 10px;

    color: #64748b;

}


/* =========================================================
   =========================================================
   IMPRESIÓN / PDF — UNA SOLA PÁGINA A4
   =========================================================
   ========================================================= */

@media print {


    /*
    |--------------------------------------------------------------------------
    | HOJA A4
    |--------------------------------------------------------------------------
    */

    @page  {

        size: A4 portrait;

        margin: 5mm;

    }


    /*
    |--------------------------------------------------------------------------
    | RESET
    |--------------------------------------------------------------------------
    */

    html:has(> body.page-contract-view),
body.page-contract-view {

        width: 100% !important;

        height: auto !important;

        margin: 0 !important;

        padding: 0 !important;

        background: #fff !important;

    }


    /*
    |--------------------------------------------------------------------------
    | OCULTAR INTERFAZ
    |--------------------------------------------------------------------------
    */

    body.page-contract-view .no-print,
body.page-contract-view .page-heading,
body.page-contract-view .site-header,
body.page-contract-view .dash-header,
body.page-contract-view .sidebar,
body.page-contract-view nav,
body.page-contract-view header,
body.page-contract-view footer {

        display: none !important;

    }


    /*
    |--------------------------------------------------------------------------
    | PAPEL
    |--------------------------------------------------------------------------
    */

    body.page-contract-view .contract-paper {

        width: 100% !important;

        max-width: none !important;

        min-height: 0 !important;

        height: auto !important;

        margin: 0 !important;

        padding: 12px 18px !important;

        border: none !important;

        border-radius: 0 !important;

        box-shadow: none !important;

        box-sizing: border-box !important;

        page-break-before: avoid !important;

        page-break-after: avoid !important;

        break-before: avoid !important;

        break-after: avoid !important;

    }


    /*
    |--------------------------------------------------------------------------
    | EVITAR SALTOS INTERNOS
    |--------------------------------------------------------------------------
    */

    body.page-contract-view .contract-header,
body.page-contract-view .contract-title,
body.page-contract-view .contract-client-card,
body.page-contract-view .contract-work-box,
body.page-contract-view .contract-amount-words,
body.page-contract-view .contract-clauses,
body.page-contract-view .contract-signatures,
body.page-contract-view .signature-box,
body.page-contract-view .contract-footer {

        page-break-inside: avoid !important;

        break-inside: avoid !important;

    }


    /*
    |--------------------------------------------------------------------------
    | CABECERA
    |--------------------------------------------------------------------------
    */

    body.page-contract-view .contract-header {

        gap: 15px !important;

    }


    body.page-contract-view .contract-company {

        gap: 12px !important;

    }


    body.page-contract-view .contract-logo,
body.page-contract-view .contract-logo img {

        width: 58px !important;

        height: 58px !important;

    }


    body.page-contract-view .contract-company h2 {

        margin: 0 0 3px !important;

        font-size: 16px !important;

    }


    body.page-contract-view .contract-company-details {

        font-size: 8.5px !important;

        line-height: 1.25 !important;

    }


    body.page-contract-view .contract-number-box {

        min-width: 110px !important;

        padding: 8px !important;

    }


    body.page-contract-view .contract-number-box span {

        font-size: 7px !important;

        margin-bottom: 3px !important;

    }


    body.page-contract-view .contract-number-box strong {

        font-size: 10px !important;

    }


    /*
    |--------------------------------------------------------------------------
    | LÍNEA AZUL
    |--------------------------------------------------------------------------
    */

    body.page-contract-view .contract-blue-line {

        height: 2px !important;

        margin: 9px 0 13px !important;

    }


    /*
    |--------------------------------------------------------------------------
    | TÍTULO
    |--------------------------------------------------------------------------
    */

    body.page-contract-view .contract-title {

        margin-bottom: 12px !important;

    }


    body.page-contract-view .contract-title h1 {

        font-size: 15px !important;

        letter-spacing: .2px !important;

    }


    body.page-contract-view .contract-title p {

        margin-top: 3px !important;

        font-size: 8.5px !important;

    }


    /*
    |--------------------------------------------------------------------------
    | CLIENTE
    |--------------------------------------------------------------------------
    */

    body.page-contract-view .contract-client-card {

        margin-bottom: 12px !important;

    }


    body.page-contract-view .contract-card-title {

        padding: 6px 9px !important;

        font-size: 7px !important;

        letter-spacing: .5px !important;

    }


    body.page-contract-view .contract-client-grid > div {

        padding: 7px 9px !important;

    }


    body.page-contract-view .contract-client-grid span,
body.page-contract-view .contract-client-email span {

        font-size: 6.5px !important;

        margin-bottom: 2px !important;

    }


    body.page-contract-view .contract-client-grid strong,
body.page-contract-view .contract-client-email strong {

        font-size: 9.5px !important;

    }


    body.page-contract-view .contract-client-email {

        padding: 6px 9px !important;

    }


    /*
    |--------------------------------------------------------------------------
    | CUERPO
    |--------------------------------------------------------------------------
    */

    body.page-contract-view .contract-body {

        font-size: 9.5px !important;

        line-height: 1.35 !important;

    }


    body.page-contract-view .contract-body p {

        margin: 0 0 7px !important;

    }


    /*
    |--------------------------------------------------------------------------
    | DESCRIPCIÓN DEL TRABAJO
    |--------------------------------------------------------------------------
    */

    body.page-contract-view .contract-work-box {

        margin: 5px 0 8px !important;

        padding: 7px 9px !important;

        border-left-width: 3px !important;

        line-height: 1.3 !important;

    }


    /*
    |--------------------------------------------------------------------------
    | IMPORTE EN LETRAS
    |--------------------------------------------------------------------------
    */

    body.page-contract-view .contract-amount-words {

        padding: 7px 9px !important;

        margin: 5px 0 8px !important;

        line-height: 1.3 !important;

    }


    /*
    |--------------------------------------------------------------------------
    | CLÁUSULAS
    |--------------------------------------------------------------------------
    */

    body.page-contract-view .contract-clauses {

        margin-top: 8px !important;

    }


    body.page-contract-view .contract-clauses-title {

        padding: 6px 9px !important;

        font-size: 7px !important;

        letter-spacing: .5px !important;

    }


    body.page-contract-view .contract-clauses-content {

        padding: 7px 9px !important;

        font-size: 8px !important;

        line-height: 1.3 !important;

    }


    /*
    |--------------------------------------------------------------------------
    | FIRMAS
    |--------------------------------------------------------------------------
    */

    body.page-contract-view .contract-signatures {

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        width: 100% !important;

        margin-top: 15px !important;

        gap: 35px !important;

        align-items: start !important;

    }


    body.page-contract-view .signature-box {

        width: 100% !important;

        min-width: 0 !important;

        text-align: center !important;

    }


    /*
    |--------------------------------------------------------------------------
    | ÁREA DE FIRMA
    |--------------------------------------------------------------------------
    */

    body.page-contract-view .signature-area {

        width: 100% !important;

        height: 42px !important;

        min-height: 42px !important;

        max-height: 42px !important;

        display: flex !important;

        align-items: flex-end !important;

        justify-content: center !important;

        overflow: hidden !important;

    }


    body.page-contract-view .client-digital-signature {

        width: 100% !important;

        height: 42px !important;

        min-height: 42px !important;

        max-height: 42px !important;

        display: flex !important;

        align-items: flex-end !important;

        justify-content: center !important;

    }


    body.page-contract-view .client-digital-signature img {

        max-width: 125px !important;

        max-height: 40px !important;

        width: auto !important;

        height: auto !important;

        object-fit: contain !important;

    }


    /*
    |--------------------------------------------------------------------------
    | SELLO
    |--------------------------------------------------------------------------
    */

    body.page-contract-view .company-seal {

        width: 42px !important;

        height: 42px !important;

        color: #2563eb !important;

        -webkit-print-color-adjust: exact !important;

        print-color-adjust: exact !important;

    }


    body.page-contract-view .company-seal svg {

        width: 31px !important;

        height: 31px !important;

        stroke: currentColor !important;

    }


    body.page-contract-view .company-seal-text {

        margin-top: 0 !important;

        color: #2563eb !important;

        font-size: 4px !important;

        letter-spacing: .2px !important;

    }


    body.page-contract-view .signature-empty-space {

        width: 100% !important;

        height: 42px !important;

        min-height: 42px !important;

        max-height: 42px !important;

    }


    /*
    |--------------------------------------------------------------------------
    | LÍNEA DE FIRMA
    |--------------------------------------------------------------------------
    */

    body.page-contract-view .signature-line {

        width: 100% !important;

        margin: 0 0 4px !important;

        border-top: 1px solid #0f172a !important;

    }


    body.page-contract-view .signature-box strong {

        font-size: 9px !important;

    }


    body.page-contract-view .signature-box span {

        margin-top: 1px !important;

        font-size: 7px !important;

    }


    body.page-contract-view .signature-box small {

        margin-top: 2px !important;

        font-size: 6.5px !important;

    }


    body.page-contract-view .signature-box .signed-provider-status {

        font-size: 6.5px !important;

    }


    /*
    |--------------------------------------------------------------------------
    | FECHA
    |--------------------------------------------------------------------------
    */

    body.page-contract-view .contract-date {

        margin-top: 8px !important;

        font-size: 7px !important;

    }


    /*
    |--------------------------------------------------------------------------
    | PIE
    |--------------------------------------------------------------------------
    */

    body.page-contract-view .contract-footer {

        margin-top: 9px !important;

        padding-top: 5px !important;

        font-size: 6.5px !important;

        line-height: 1.2 !important;

    }


    /*
    |--------------------------------------------------------------------------
    | COLORES EN PDF
    |--------------------------------------------------------------------------
    */

    body.page-contract-view .contract-blue-line,
body.page-contract-view .company-seal,
body.page-contract-view .signed-provider-status {

        -webkit-print-color-adjust: exact !important;

        print-color-adjust: exact !important;

    }


}


/* =========================================================
   MÓVIL
   ========================================================= */

@media screen and (max-width: 768px) {


    body.page-contract-view .contract-paper {

        margin: 10px;

        padding: 25px 20px;

    }


    body.page-contract-view .contract-header {

        flex-direction: column;

    }


    body.page-contract-view .contract-number-box {

        width: 100%;

        box-sizing: border-box;

    }


    body.page-contract-view .contract-client-grid {

        grid-template-columns: 1fr;

    }


    body.page-contract-view .contract-client-grid > div + div {

        border-left: none;

        border-top: 1px solid #cbd5e1;

    }


    body.page-contract-view .contract-signatures {

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap: 20px;

        width: 100%;

        margin-left: 0;

        margin-right: 0;

        align-items: start;

    }


    body.page-contract-view .signature-box {

        width: 100%;

        min-width: 0;

        box-sizing: border-box;

        text-align: center;

    }


    body.page-contract-view .signature-area {

        width: 100%;

        height: 65px;

        min-height: 65px;

        max-height: 65px;

        display: flex;

        align-items: flex-end;

        justify-content: center;

        box-sizing: border-box;

        overflow: hidden;

    }


    body.page-contract-view .client-digital-signature {

        width: 100%;

        height: 65px;

        min-height: 65px;

        max-height: 65px;

        margin: 0;

        display: flex;

        align-items: flex-end;

        justify-content: center;

        box-sizing: border-box;

    }


    body.page-contract-view .client-digital-signature img {

        max-width: 100%;

        max-height: 60px;

        width: auto;

        height: auto;

        object-fit: contain;

        margin: 0 auto;

    }


    body.page-contract-view .company-seal {

        width: 55px;

        height: 55px;

    }


    body.page-contract-view .company-seal svg {

        width: 40px;

        height: 40px;

    }


    body.page-contract-view .company-seal-text {

        font-size: 5px !important;

        letter-spacing: .3px;

    }


    body.page-contract-view .signature-empty-space {

        width: 100%;

        height: 65px;

        min-height: 65px;

        max-height: 65px;

        box-sizing: border-box;

    }


    body.page-contract-view .signature-line {

        width: 100%;

        margin: 0 0 8px;

        box-sizing: border-box;

    }


    body.page-contract-view .signature-box strong {

        font-size: 11px;

    }


    body.page-contract-view .signature-box span {

        font-size: 9px;

    }


    body.page-contract-view .signature-box small {

        font-size: 8px;

    }


    body.page-contract-view .contract-footer {

        flex-direction: column;

        gap: 5px;

    }


}


/* ===== Modernización uniforme del panel ===== */
body.page-contract-view .page-heading {background:#fff;border:1px solid #dfe8f4;border-radius:16px;padding:20px 22px;margin-bottom:18px;box-shadow:0 10px 30px rgba(30,64,175,.06);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
body.page-contract-view .page-heading h1,
body.page-contract-view .page-heading h2 {margin:0;color:#0f172a;letter-spacing:-.03em;}
body.page-contract-view .eyebrow {color:#1468f3!important;font-size:11px!important;font-weight:900!important;letter-spacing:.12em;text-transform:uppercase;}
body.page-contract-view .page-description {color:#6b7a94;line-height:1.55;}
body.page-contract-view .panel,
body.page-contract-view .contracts-panel {background:#fff;border:1px solid #dfe8f4!important;border-radius:16px!important;box-shadow:0 10px 30px rgba(30,64,175,.06)!important;padding:20px 22px!important;margin-bottom:18px;}
body.page-contract-view .btn {border-radius:9px!important;min-height:42px;padding:0 17px!important;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;font-weight:800!important;transition:.18s ease!important;}
body.page-contract-view .btn:not(.btn-outline):not(.btn-secondary):not(.btn-whatsapp) {background:linear-gradient(135deg,#2676ff,#0f63ef)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 18px rgba(20,104,243,.16);}
body.page-contract-view .btn-outline,
body.page-contract-view .btn-secondary {background:#fff!important;color:#465875!important;border:1px solid #cbd8ea!important;}
body.page-contract-view input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
body.page-contract-view select,
body.page-contract-view textarea {border:1px solid #cfdaea!important;border-radius:10px!important;background:#fff;transition:border-color .18s ease,box-shadow .18s ease;}
body.page-contract-view input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
body.page-contract-view select:focus,
body.page-contract-view textarea:focus {outline:none!important;border-color:#87b4ff!important;box-shadow:0 0 0 3px rgba(20,104,243,.09)!important;}
body.page-contract-view .table-wrap {border:1px solid #e5ebf4;border-radius:12px;overflow:auto;background:#fff;}
body.page-contract-view table {border-collapse:collapse;}
body.page-contract-view thead th {background:#f5f8fc!important;color:#51617c!important;text-transform:uppercase;font-size:11px!important;letter-spacing:.035em;}
body.page-contract-view tbody tr {transition:background .16s ease;}
body.page-contract-view tbody tr:hover {background:#fbfdff;}
body.page-contract-view .alert,
body.page-contract-view .contract-alert {border-radius:11px!important;}
@media (max-width:768px) {
body.page-contract-view .page-heading {padding:16px;border-radius:13px;align-items:flex-start}body.page-contract-view .panel,
body.page-contract-view .contracts-panel {padding:15px!important;border-radius:13px!important}body.page-contract-view .hero-actions {width:100%;display:flex;gap:8px;flex-wrap:wrap}body.page-contract-view .hero-actions .btn {flex:1 1 auto}
}


/* ===== contracts.css | scope .page-contracts ===== */
/*
|--------------------------------------------------------------------------
| PANEL
|--------------------------------------------------------------------------
*/

body.page-contracts .contracts-panel {

    background: #fff;

    border: 1px solid #e2e8f0;

    border-radius: 0;

    overflow: hidden;

}


/*
|--------------------------------------------------------------------------
| ALERTAS
|--------------------------------------------------------------------------
*/

body.page-contracts .contract-alert {

    width: 100%;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 14px 18px;

    margin-bottom: 20px;

    border: 1px solid;

    border-radius: 0;

    font-size: 14px;

}


body.page-contracts .contract-alert-icon {

    width: 24px;

    height: 24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    font-weight: 800;

    border-radius: 0;

}


body.page-contracts .contract-alert-success {

    background: #ecfdf5;

    border-color: #a7f3d0;

    color: #065f46;

}


body.page-contracts .contract-alert-success
.contract-alert-icon {

    background: #10b981;

    color: #fff;

}


body.page-contracts .contract-alert-error {

    background: #fef2f2;

    border-color: #fecaca;

    color: #991b1b;

}


body.page-contracts .contract-alert-error
.contract-alert-icon {

    background: #ef4444;

    color: #fff;

}


/*
|--------------------------------------------------------------------------
| TABLA
|--------------------------------------------------------------------------
*/

body.page-contracts .contracts-table-wrap {

    width: 100%;

    overflow-x: auto;

}


body.page-contracts .contracts-table {

    width: 100%;

    border-collapse: collapse;

    min-width: 1180px;

}


body.page-contracts .contracts-table th {

    padding: 14px 16px;

    background: #f8fafc;

    border-bottom: 1px solid #e2e8f0;

    text-align: left;

    font-size: 10px;

    letter-spacing: .7px;

    color: #64748b;

}


body.page-contracts .contracts-table td {

    padding: 16px;

    border-bottom: 1px solid #e2e8f0;

    font-size: 13px;

    color: #334155;

    vertical-align: middle;

}


body.page-contracts .contracts-table tbody tr:hover {

    background: #f8fafc;

}


body.page-contracts .contracts-table tbody tr:last-child td {

    border-bottom: none;

}


/*
|--------------------------------------------------------------------------
| TRABAJO
|--------------------------------------------------------------------------
*/

body.page-contracts .contract-work-preview {

    max-width: 250px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


/*
|--------------------------------------------------------------------------
| ESTADO
|--------------------------------------------------------------------------
*/

body.page-contracts .contract-status {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-width: 125px;

    padding: 8px 11px;

    text-decoration: none;

    border: 1px solid;

    border-radius: 0;

    box-sizing: border-box;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;

}


body.page-contracts .contract-status:hover {

    transform: translateY(-1px);

}


body.page-contracts .contract-status-icon {

    width: 23px;

    height: 23px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    font-size: 13px;

    font-weight: 900;

    border-radius: 0;

}


body.page-contracts .contract-status strong {

    display: block;

    font-size: 12px;

    line-height: 1.2;

}


body.page-contracts .contract-status small {

    display: block;

    margin-top: 3px;

    font-size: 9px;

    line-height: 1.2;

}


/*
|--------------------------------------------------------------------------
| FIRMADO
|--------------------------------------------------------------------------
*/

body.page-contracts .contract-status-signed {

    background: #ecfdf5;

    border-color: #a7f3d0;

    color: #047857;

}


body.page-contracts .contract-status-signed
.contract-status-icon {

    background: #10b981;

    color: #fff;

}


body.page-contracts .contract-status-signed:hover {

    background: #d1fae5;

}


/*
|--------------------------------------------------------------------------
| PENDIENTE
|--------------------------------------------------------------------------
*/

body.page-contracts .contract-status-pending {

    background: #fffbeb;

    border-color: #fde68a;

    color: #92400e;

}


body.page-contracts .contract-status-pending
.contract-status-icon {

    background: #f59e0b;

    color: #fff;

}


body.page-contracts .contract-status-pending:hover {

    background: #fef3c7;

}


/*
|--------------------------------------------------------------------------
| RECHAZADO
|--------------------------------------------------------------------------
*/

body.page-contracts .contract-status-rejected {

    background: #fef2f2;

    border-color: #fecaca;

    color: #b91c1c;

}


body.page-contracts .contract-status-rejected
.contract-status-icon {

    background: #ef4444;

    color: #fff;

}


body.page-contracts .contract-status-rejected:hover {

    background: #fee2e2;

}


/*
|--------------------------------------------------------------------------
| ACCIONES
|--------------------------------------------------------------------------
*/

body.page-contracts .contract-actions {

    display: flex;

    align-items: center;

    gap: 8px;

    white-space: nowrap;

}


/*
|--------------------------------------------------------------------------
| BOTÓN VER CONTRATO
|--------------------------------------------------------------------------
*/

body.page-contracts .contract-view-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 36px;

    padding: 8px 14px;

    background: #2563eb;

    color: #fff;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    line-height: 1;

    border: 1px solid #2563eb;

    border-radius: 0;

    box-sizing: border-box;

    cursor: pointer;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .08);

    transition:
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;

}


/*
|--------------------------------------------------------------------------
| ASEGURAR TEXTO E ICONO BLANCOS
|--------------------------------------------------------------------------
*/

body.page-contracts .contract-view-btn span,
body.page-contracts .contract-view-btn .contract-view-icon {

    color: #fff;

}


/*
|--------------------------------------------------------------------------
| HOVER BOTÓN VER
|--------------------------------------------------------------------------
*/

body.page-contracts .contract-view-btn:hover {

    background: #1d4ed8;

    border-color: #1d4ed8;

    color: #fff;

    transform: translateY(-1px);

    box-shadow:
        0 3px 8px rgba(37, 99, 235, .22);

}


body.page-contracts .contract-view-btn:hover span,
body.page-contracts .contract-view-btn:hover .contract-view-icon {

    color: #fff;

}


body.page-contracts .contract-view-btn:active {

    transform: translateY(0);

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .08);

}


body.page-contracts .contract-view-btn:focus-visible {

    outline: 3px solid rgba(37, 99, 235, .25);

    outline-offset: 2px;

}


/*
|--------------------------------------------------------------------------
| ICONO DEL BOTÓN VER
|--------------------------------------------------------------------------
*/

body.page-contracts .contract-view-icon {

    width: 17px;

    height: 17px;

    display: block;

    flex-shrink: 0;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/*
|--------------------------------------------------------------------------
| BOTÓN ELIMINAR
|--------------------------------------------------------------------------
*/

body.page-contracts .contract-delete-form {

    margin: 0;

    padding: 0;

}


body.page-contracts .contract-delete-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 36px;

    padding: 8px 12px;

    background: #fff;

    color: #b91c1c;

    border: 1px solid #fecaca;

    border-radius: 0;

    font-family: var(--app-font-family);

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;

}


body.page-contracts .contract-delete-btn:hover {

    background: #fef2f2;

    border-color: #fca5a5;

    color: #991b1b;

}


/*
|--------------------------------------------------------------------------
| VACÍO
|--------------------------------------------------------------------------
*/

body.page-contracts .contracts-empty {

    padding: 70px 30px;

    text-align: center;

}


body.page-contracts .contracts-empty-icon {

    width: 60px;

    height: 60px;

    margin: 0 auto 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #0f172a;

    color: #fff;

    font-size: 22px;

    font-weight: 800;

    border-radius: 0;

}


body.page-contracts .contracts-empty h2 {

    margin: 0 0 8px;

    color: #0f172a;

}


body.page-contracts .contracts-empty p {

    margin: 0 0 25px;

    color: #64748b;

}


/*
|--------------------------------------------------------------------------
| MÓVIL
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 768px) {


    body.page-contracts .contract-alert {

        align-items: flex-start;

    }


    body.page-contracts .contract-view-btn {

        padding: 8px 12px;

    }


}


/* ===== Modernización uniforme del panel ===== */
body.page-contracts .page-heading {background:#fff;border:1px solid #dfe8f4;border-radius:16px;padding:20px 22px;margin-bottom:18px;box-shadow:0 10px 30px rgba(30,64,175,.06);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
body.page-contracts .page-heading h1,
body.page-contracts .page-heading h2 {margin:0;color:#0f172a;letter-spacing:-.03em;}
body.page-contracts .eyebrow {color:#1468f3!important;font-size:11px!important;font-weight:900!important;letter-spacing:.12em;text-transform:uppercase;}
body.page-contracts .page-description {color:#6b7a94;line-height:1.55;}
body.page-contracts .panel,
body.page-contracts .contracts-panel {background:#fff;border:1px solid #dfe8f4!important;border-radius:16px!important;box-shadow:0 10px 30px rgba(30,64,175,.06)!important;padding:20px 22px!important;margin-bottom:18px;}
body.page-contracts .btn {border-radius:9px!important;min-height:42px;padding:0 17px!important;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;font-weight:800!important;transition:.18s ease!important;}
body.page-contracts .btn:not(.btn-outline):not(.btn-secondary):not(.btn-whatsapp) {background:linear-gradient(135deg,#2676ff,#0f63ef)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 18px rgba(20,104,243,.16);}
body.page-contracts .btn-outline,
body.page-contracts .btn-secondary {background:#fff!important;color:#465875!important;border:1px solid #cbd8ea!important;}
body.page-contracts input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
body.page-contracts select,
body.page-contracts textarea {border:1px solid #cfdaea!important;border-radius:10px!important;background:#fff;transition:border-color .18s ease,box-shadow .18s ease;}
body.page-contracts input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
body.page-contracts select:focus,
body.page-contracts textarea:focus {outline:none!important;border-color:#87b4ff!important;box-shadow:0 0 0 3px rgba(20,104,243,.09)!important;}
body.page-contracts .table-wrap {border:1px solid #e5ebf4;border-radius:12px;overflow:auto;background:#fff;}
body.page-contracts table {border-collapse:collapse;}
body.page-contracts thead th {background:#f5f8fc!important;color:#51617c!important;text-transform:uppercase;font-size:11px!important;letter-spacing:.035em;}
body.page-contracts tbody tr {transition:background .16s ease;}
body.page-contracts tbody tr:hover {background:#fbfdff;}
body.page-contracts .alert,
body.page-contracts .contract-alert {border-radius:11px!important;}
@media (max-width:768px) {
body.page-contracts .page-heading {padding:16px;border-radius:13px;align-items:flex-start}body.page-contracts .panel,
body.page-contracts .contracts-panel {padding:15px!important;border-radius:13px!important}body.page-contracts .hero-actions {width:100%;display:flex;gap:8px;flex-wrap:wrap}body.page-contracts .hero-actions .btn {flex:1 1 auto}
}

/* ===== Acción principal 50% ===== */
body.page-contracts .page-heading .hero-actions { width:min(420px,100%); display:flex; }
body.page-contracts .page-heading .hero-actions > .btn { width:50% !important; min-width:190px; justify-content:center; }