/* ===== index.css | scope .page-index ===== */
body.page-index {
    --dash-bg: #f6f9ff;
    --dash-card: #ffffff;
    --dash-text: #0f172a;
    --dash-muted: #64748b;
    --dash-border: #e4ebf5;
    --dash-blue: #1468f3;
    --dash-blue-dark: #0d55d8;
    --dash-blue-soft: #eef5ff;
    --dash-green: #16a34a;
    --dash-green-soft: #eefcf4;
    --dash-purple: #7c3aed;
    --dash-purple-soft: #f6f1ff;
    --dash-orange: #ea7a14;
    --dash-orange-soft: #fff7ec;
    --dash-red: #ef3340;
    --dash-red-soft: #fff1f2;
    --dash-amber: #d88a00;
    --dash-amber-soft: #fff8e9;
    --dash-radius: 16px;
    --dash-shadow: 0 10px 30px rgba(30, 64, 175, .07);
}

body.page-index .dashboard-page,
body.page-index .dashboard-page * {
    box-sizing: border-box;
}

body.page-index .dashboard-page {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px;
    color: var(--dash-text);
}


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

body.page-index .dashboard-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

body.page-index .dashboard-eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--dash-blue);
}

body.page-index .dashboard-hero h1 {
    margin: 0;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.05;
    letter-spacing: -.04em;
}

body.page-index .dashboard-hero-copy > p:last-child {
    margin: 8px 0 0;
    color: var(--dash-muted);
    font-size: 16px;
}

body.page-index .dashboard-date {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--dash-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--dash-shadow);
    color: #334155;
    font-weight: 600;
    white-space: nowrap;
}

body.page-index .dashboard-date-icon {
    color: var(--dash-blue);
    font-size: 20px;
}


/* =========================================================
   ACCIONES RÁPIDAS
   ========================================================= */

body.page-index .dashboard-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

body.page-index .quick-action {
    min-width: 0;
    min-height: 86px;

    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;

    padding: 16px;

    border: 1px solid var(--dash-border);
    border-radius: 14px;

    background: #fff;
    color: #17305f;

    text-decoration: none;
    font-weight: 700;

    box-shadow: var(--dash-shadow);

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

body.page-index .quick-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
}

body.page-index .quick-action-icon {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    font-size: 25px;

    background: rgba(20, 104, 243, .10);
    color: var(--dash-blue);
}

body.page-index .quick-action b {
    font-size: 20px;
    font-weight: 500;
    opacity: .75;
}

body.page-index .quick-action-primary {
    background: linear-gradient(135deg, #2676ff, #0f63ef);
    color: #fff;
    border-color: transparent;
}

body.page-index .quick-action-primary .quick-action-icon {
    color: #fff;
    background: rgba(255, 255, 255, .11);
}

body.page-index .quick-action-purple {
    background: linear-gradient(180deg, #fff, #fbf8ff);
}

body.page-index .quick-action-purple .quick-action-icon {
    color: var(--dash-purple);
    background: var(--dash-purple-soft);
}

body.page-index .quick-action-green {
    background: linear-gradient(180deg, #fff, #f6fff9);
}

body.page-index .quick-action-green .quick-action-icon {
    color: var(--dash-green);
    background: var(--dash-green-soft);
}

body.page-index .quick-action-orange {
    background: linear-gradient(180deg, #fff, #fff9f2);
}

body.page-index .quick-action-orange .quick-action-icon {
    color: var(--dash-orange);
    background: var(--dash-orange-soft);
}

body.page-index .quick-action-neutral .quick-action-icon {
    color: #48618f;
    background: #f3f6fb;
}

body.page-index .dashboard-mobile-config {
    display: none;
}


/* =========================================================
   ESTADÍSTICAS
   ========================================================= */

body.page-index .dashboard-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

body.page-index .metric-card {
    min-width: 0;
    min-height: 118px;

    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    align-items: start;

    padding: 16px;

    background: #fff;

    border: 1px solid var(--dash-border);
    border-radius: 14px;

    box-shadow: var(--dash-shadow);
}

body.page-index .metric-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    font-size: 24px;
    font-weight: 800;

    background: var(--dash-blue-soft);
    color: var(--dash-blue);
}

body.page-index .metric-content {
    min-width: 0;
}

body.page-index .metric-content > span {
    display: block;
    margin-bottom: 5px;

    color: #52627f;
    font-size: 13px;
}

body.page-index .metric-content strong {
    display: block;

    font-size: clamp(20px, 1.65vw, 30px);
    line-height: 1.15;
    letter-spacing: -.03em;

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

body.page-index .metric-content small {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 8px;

    color: #7a879d;
    font-size: 12px;
}

body.page-index .metric-content em {
    padding: 2px 7px;

    border-radius: 999px;

    background: #eafaf0;
    color: var(--dash-green);

    font-style: normal;
    font-weight: 800;
}

body.page-index .metric-green .metric-icon {
    color: var(--dash-green);
    background: #eafaf0;
}

body.page-index .metric-amber {
    background: linear-gradient(180deg, #fff, #fffbf0);
}

body.page-index .metric-amber .metric-icon {
    color: var(--dash-amber);
    background: #fff2c9;
}

body.page-index .metric-red {
    background: linear-gradient(180deg, #fff, #fff5f5);
}

body.page-index .metric-red .metric-icon {
    color: var(--dash-red);
    background: #ffe0e3;
}

body.page-index .metric-red strong {
    color: #e52531;
}


/* =========================================================
   FACTURACIÓN
   ========================================================= */

body.page-index .billing-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(320px, .8fr);

    gap: 18px;
    margin-bottom: 18px;
}

body.page-index .dashboard-card {
    background: var(--dash-card);

    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);

    box-shadow: var(--dash-shadow);
}

body.page-index .chart-card {
    min-width: 0;
    padding: 20px;
}

body.page-index .card-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;
    margin-bottom: 14px;
}

body.page-index .card-heading-row h2 {
    margin: 0;

    font-size: 21px;
    letter-spacing: -.02em;
}

body.page-index .chart-select {
    min-height: 38px;

    padding: 0 34px 0 12px;

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

    background: #fff;
    color: #53627d;

    font: inherit;
    font-size: 13px;
}


/* =========================================================
   GRÁFICO LINEAL
   ========================================================= */

body.page-index .line-chart {
    width: 100%;
    min-height: 290px;

    position: relative;
}

body.page-index .line-chart svg {
    width: 100%;
    height: auto;
    min-height: 270px;

    overflow: visible;
    display: block;
}

body.page-index .chart-grid-line {
    stroke: #e8eef7;
    stroke-width: 1;
}

body.page-index .chart-axis-label {
    fill: #71809a;
    font-size: 12px;
}

body.page-index .chart-line {
    fill: none;

    stroke: var(--dash-blue);
    stroke-width: 3;

    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-index .chart-area {
    fill: url(#billingAreaGradient);
}

body.page-index .chart-point {
    fill: var(--dash-blue);

    stroke: #fff;
    stroke-width: 3;

    cursor: pointer;
}

body.page-index .chart-tooltip-bg {
    fill: #fff;

    stroke: #dbe5f2;
    stroke-width: 1;

    filter:
        drop-shadow(
            0 6px 12px rgba(15, 23, 42, .12)
        );
}

body.page-index .chart-tooltip-label {
    fill: #64748b;
    font-size: 11px;
}

body.page-index .chart-tooltip-value {
    fill: #0f172a;

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

body.page-index .chart-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;
    margin-top: 8px;

    font-size: 13px;
}

body.page-index .chart-footer span {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #334155;
}

body.page-index .legend-dot {
    width: 10px;
    height: 10px;

    display: inline-block;

    border-radius: 50%;
}

body.page-index .legend-dot-blue {
    background: var(--dash-blue);
}


/* =========================================================
   GRÁFICO DONUT
   ========================================================= */

body.page-index .donut-chart-wrap {
    min-height: 300px;

    display: grid;
    place-items: center;
}

body.page-index .donut-layout {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr;

    place-items: center;
    gap: 18px;
}

body.page-index .billing-pie {
    width: 195px;
    aspect-ratio: 1;

    position: relative;

    border-radius: 50%;

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

body.page-index .billing-pie-center {
    position: absolute;

    inset: 12px;

    display: grid;
    place-items: center;
    align-content: center;

    background: #fff;

    border-radius: 50%;

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

    text-align: center;
}

body.page-index .billing-pie-center span {
    color: #71809a;
    font-size: 12px;
}

body.page-index .billing-pie-center strong {
    margin-top: 4px;
    font-size: 18px;
}

body.page-index .billing-chart-legend {
    width: 100%;

    display: grid;
    gap: 8px;
}

body.page-index .billing-legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    font-size: 12px;
}

body.page-index .billing-legend-left {
    min-width: 0;

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

    color: #64748b;
}

body.page-index .billing-legend-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;
}

body.page-index .billing-legend-value {
    font-weight: 800;
    white-space: nowrap;
}

body.page-index .billing-empty {
    min-height: 220px;

    display: grid;
    place-items: center;

    color: #94a3b8;

    text-align: center;
}


/* =========================================================
   BUSCADOR DE CLIENTES
   ========================================================= */

body.page-index .client-search-card {
    display: block;
    width: 100%;

    padding: 16px 18px;
    margin-bottom: 18px;
}

body.page-index .search-field-wrap {
    display: block;

    width: 100%;
    min-width: 0;
}

body.page-index .search-field-wrap label {
    display: block;

    margin: 0 0 8px 0;

    color: var(--dash-text);

    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

body.page-index .search-field-wrap input {
    display: block;

    width: 100%;
    height: 44px;
    min-height: 44px;

    margin: 0;
    padding: 0 14px;

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

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

    outline: none;

    font: inherit;
    font-size: 14px;

    box-sizing: border-box;

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

body.page-index .search-field-wrap input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

body.page-index .search-field-wrap input:hover {
    border-color: #bdcce0;
}

body.page-index .search-field-wrap input:focus {
    border-color: #8bb7ff;

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

body.page-index .filter-result {
    display: block;

    min-height: 14px;
    margin-top: 6px;

    color: #7b879a;

    font-size: 11px;
    line-height: 1.3;
}

body.page-index .secondary-button {
    min-height: 42px;

    padding: 0 18px;

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

    background: #f7fbff;
    color: var(--dash-blue);

    font-weight: 700;

    cursor: pointer;
}


/* =========================================================
   LISTADO DE CLIENTES DEL DASHBOARD
   ========================================================= */

body.page-index .clients-card {
    overflow: hidden;
}

body.page-index .clients-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 15px 18px;

    border-bottom: 1px solid #edf1f7;
}

body.page-index .clients-card-header > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-index .clients-card-header h2 {
    margin: 0;
    font-size: 18px;
}

body.page-index .clients-title-icon {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: var(--dash-blue-soft);
    color: var(--dash-blue);
}

body.page-index .view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 12px;

    border-radius: 9px;

    background: #f2f7ff;
    color: var(--dash-blue);

    text-decoration: none;

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

body.page-index .table-wrap {
    width: 100%;
    overflow-x: auto;
}

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

    border-collapse: collapse;

    font-size: 13px;
}

body.page-index .clients-table th {
    padding: 12px 16px;

    text-align: left;

    color: #71809a;

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

    font-size: 10px;

    background: #fbfcfe;
}

body.page-index .clients-table td {
    padding: 11px 16px;

    border-top: 1px solid #eef2f7;

    color: #3d4b63;

    vertical-align: top;
}

body.page-index .clients-table a {
    color: var(--dash-blue);
    text-decoration: none;
}

body.page-index .invoice-links {
    display: grid;
    gap: 4px;
}

body.page-index .invoice-links a {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

body.page-index .invoice-links small {
    color: #93a0b3;
    font-size: 10px;
}

body.page-index .row-menu {
    width: 34px;
    height: 30px;

    display: grid;
    place-items: center;

    border: 1px solid #d7e1ee;
    border-radius: 8px;

    color: #52627f !important;

    font-weight: 800;
}

body.page-index .muted {
    color: #94a3b8;
}

body.page-index .empty-state {
    padding: 36px;

    color: #94a3b8;

    text-align: center;
}

body.page-index #noFilterResults td {
    padding: 24px;

    color: #64748b;

    text-align: center;
}


/* =========================================================
   CALCULADORA
   ========================================================= */

body.page-index .calculator-floating-button {
    position: fixed;

    right: 22px;
    bottom: 22px;

    width: 56px;
    height: 56px;

    padding: 0;

    border: 0;
    border-radius: 50%;

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

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

    cursor: pointer;

    z-index: 50;
}

body.page-index .calculator-floating-button img {
    width: 54%;
    height: 54%;

    object-fit: contain;

    display: block;
    margin: auto;

    filter:
        brightness(0)
        invert(1);
}

body.page-index .calculator-modal {
    position: fixed;
    inset: 0;

    z-index: 1000;

    display: none;
    place-items: center;

    padding: 18px;

    background: rgba(15, 23, 42, .48);

    backdrop-filter: blur(5px);
}

body.page-index .calculator-modal.calculator-modal-open {
    display: grid;
}

body.page-index .calculator-box {
    width: min(360px, 100%);

    overflow: hidden;

    background: #fff;

    border-radius: 20px;

    box-shadow:
        0 28px 70px rgba(15, 23, 42, .28);
}

body.page-index .calculator-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px 18px;

    border-bottom: 1px solid #edf1f7;
}

body.page-index .calculator-header h2 {
    margin: 0;
    font-size: 18px;
}

body.page-index .calculator-close {
    border: 0;

    background: transparent;
    color: #64748b;

    font-size: 28px;

    cursor: pointer;
}

body.page-index .calculator-display {
    padding: 16px;
    background: #f8fafc;
}

body.page-index .calculator-display input {
    width: 100%;
    height: 64px;

    padding: 0 14px;

    border: 1px solid #dce5f0;
    border-radius: 12px;

    background: #fff;

    text-align: right;

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

body.page-index .calculator-keypad {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 8px;

    padding: 16px;
}

body.page-index .calculator-key {
    min-height: 54px;

    border: 1px solid #e1e8f2;
    border-radius: 12px;

    background: #fff;

    font-size: 18px;

    cursor: pointer;
}

body.page-index .calculator-operator {
    background: #eff5ff;
    color: var(--dash-blue);

    font-weight: 800;
}

body.page-index .calculator-clear {
    color: #e22e3a;
}

body.page-index .calculator-equals {
    background: var(--dash-blue);
    color: #fff;

    font-weight: 800;
}

body.page-index .calculator-zero {
    grid-column: span 2;
}

body.page-index.calculator-open {
    overflow: hidden;
}


/* =========================================================
   NUEVA FACTURA - BLANCO
   ========================================================= */

body.page-index .quick-action-primary,
body.page-index .quick-action-primary:link,
body.page-index .quick-action-primary:visited,
body.page-index .quick-action-primary:hover,
body.page-index .quick-action-primary:focus,
body.page-index .quick-action-primary:active {
    color: #fff !important;

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

    border-color: transparent;
}

body.page-index .quick-action-primary span,
body.page-index .quick-action-primary b,
body.page-index .quick-action-primary .quick-action-icon,
body.page-index .quick-action-primary:hover span,
body.page-index .quick-action-primary:hover b,
body.page-index .quick-action-primary:hover .quick-action-icon,
body.page-index .quick-action-primary:focus span,
body.page-index .quick-action-primary:focus b,
body.page-index .quick-action-primary:focus .quick-action-icon {
    color: #fff !important;
}

body.page-index .quick-action-primary .quick-action-icon {
    background:
        rgba(255, 255, 255, .11);
}

body.page-index .quick-action-primary:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 34px rgba(0, 0, 0, .12);
}


/* =========================================================
   ESTILO UNIFORME DEL PANEL
   ========================================================= */

body.page-index .page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;
    flex-wrap: wrap;

    padding: 20px 22px;
    margin-bottom: 18px;

    background: #fff;

    border: 1px solid #dfe8f4;
    border-radius: 16px;

    box-shadow:
        0 10px 30px rgba(30, 64, 175, .06);
}

body.page-index .page-heading h1,
body.page-index .page-heading h2 {
    margin: 0;

    color: #0f172a;

    letter-spacing: -.03em;
}

body.page-index .eyebrow {
    color: #1468f3 !important;

    font-size: 11px !important;
    font-weight: 900 !important;

    letter-spacing: .12em;

    text-transform: uppercase;
}

body.page-index .page-description {
    color: #6b7a94;

    line-height: 1.55;
}

body.page-index .panel,
body.page-index .contracts-panel {
    padding: 20px 22px !important;
    margin-bottom: 18px;

    background: #fff;

    border: 1px solid #dfe8f4 !important;
    border-radius: 16px !important;

    box-shadow:
        0 10px 30px rgba(30, 64, 175, .06) !important;
}

body.page-index .btn {
    min-height: 42px;

    padding: 0 17px !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border-radius: 9px !important;

    font-weight: 800 !important;

    transition: .18s ease !important;
}

body.page-index .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-index .btn-outline,
body.page-index .btn-secondary {
    background: #fff !important;
    color: #465875 !important;

    border: 1px solid #cbd8ea !important;
}

body.page-index input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
body.page-index select,
body.page-index textarea {
    border: 1px solid #cfdaea !important;
    border-radius: 10px !important;

    background: #fff;

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

body.page-index input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
body.page-index select:focus,
body.page-index textarea:focus {
    outline: none !important;

    border-color: #87b4ff !important;

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

body.page-index .table-wrap {
    overflow: auto;

    background: #fff;

    border: 1px solid #e5ebf4;
    border-radius: 12px;
}

body.page-index table {
    border-collapse: collapse;
}

body.page-index thead th {
    background: #f5f8fc !important;
    color: #51617c !important;

    text-transform: uppercase;

    font-size: 11px !important;

    letter-spacing: .035em;
}

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

body.page-index tbody tr:hover {
    background: #fbfdff;
}

body.page-index .alert,
body.page-index .contract-alert {
    border-radius: 11px !important;
}


/* =========================================================
   RESPONSIVE - 1220px
   ========================================================= */

@media (max-width: 1220px) {


    body.page-index .dashboard-stats {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    body.page-index .dashboard-actions {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    body.page-index .dashboard-mobile-config {
        display: grid;
    }


}


/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 1023px) {


    body.page-index .dashboard-page {
        padding: 18px;
    }

    body.page-index .dashboard-actions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    body.page-index .quick-action {
        min-height: 72px;
    }

    body.page-index .dashboard-stats {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 12px;
    }

    body.page-index .billing-grid {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(280px, .75fr);
    }

    body.page-index .metric-card {
        min-height: 108px;
    }


}


/* =========================================================
   RESPONSIVE - MÓVIL
   ========================================================= */

@media (max-width: 767px) {


    body.page-index .dashboard-page {
        padding: 14px 12px 86px;
    }

    body.page-index .dashboard-hero {
        display: grid;
        gap: 12px;
    }

    body.page-index .dashboard-hero h1 {
        font-size: 28px;
    }

    body.page-index .dashboard-date {
        width: 100%;
        min-height: 42px;

        justify-content: center;

        box-shadow: none;
    }


    /* Acciones */

    body.page-index .dashboard-actions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    body.page-index .quick-action {
        min-height: 66px;

        grid-template-columns:
            38px 1fr auto;

        gap: 8px;

        padding: 12px;

        border-radius: 12px;

        font-size: 13px;
    }

    body.page-index .quick-action-icon {
        width: 38px;
        height: 38px;

        font-size: 21px;
    }


    /* Estadísticas */

    body.page-index .dashboard-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    body.page-index .metric-card {
        min-height: 105px;

        grid-template-columns:
            42px 1fr;

        gap: 9px;

        padding: 12px;

        border-radius: 12px;
    }

    body.page-index .metric-icon {
        width: 42px;
        height: 42px;

        font-size: 21px;
    }

    body.page-index .metric-content strong {
        font-size:
            clamp(18px, 5.2vw, 23px);
    }

    body.page-index .metric-content small {
        font-size: 10px;
    }


    /* Gráficos */

    body.page-index .billing-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body.page-index .chart-card {
        padding: 14px;
    }

    body.page-index .card-heading-row h2 {
        font-size: 18px;
    }

    body.page-index .chart-select {
        min-height: 34px;
        font-size: 11px;
    }

    body.page-index .line-chart {
        min-height: 230px;
        overflow: hidden;
    }

    body.page-index .line-chart svg {
        min-height: 225px;
    }

    body.page-index .donut-chart-wrap {
        min-height: 240px;
    }

    body.page-index .billing-pie {
        width: 195px;
    }


    /* Buscador */

    body.page-index .client-search-card {
        display: block;

        width: 100%;

        padding: 12px;
    }

    body.page-index .search-field-wrap {
        width: 100%;
    }

    body.page-index .search-field-wrap label {
        display: none;
    }

    body.page-index .search-field-wrap input {
        width: 100%;
        height: 44px;
        min-height: 44px;
    }

    body.page-index .filter-result {
        display: none;
    }


    /* Clientes */

    body.page-index .clients-card-header {
        padding: 12px;
    }

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

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

    body.page-index .clients-table tr.client-row {
        display: grid;

        grid-template-columns:
            1fr 1.1fr 1.35fr 28px;

        align-items: center;

        gap: 8px;

        padding: 10px 12px;

        border-top: 1px solid #eef2f7;
    }

    body.page-index .clients-table td {
        min-width: 0;

        padding: 0;

        border: 0;

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

        font-size: 11px;
    }

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

    body.page-index .clients-table td:last-child {
        display: block;
    }

    body.page-index .row-menu {
        width: 28px;
        height: 28px;

        border: 0;

        font-size: 0;
    }

    body.page-index .row-menu::after {
        content: none;
    }


    /* Calculadora */

    body.page-index .calculator-floating-button {
        right: 14px;
        bottom: 74px;

        width: 50px;
        height: 50px;
    }


    /* Estilo uniforme */

    body.page-index .page-heading {
        padding: 16px;

        border-radius: 13px;

        align-items: flex-start;
    }

    body.page-index .panel,
body.page-index .contracts-panel {
        padding: 15px !important;

        border-radius: 13px !important;
    }

    body.page-index .hero-actions {
        width: 100%;

        display: flex;

        gap: 8px;

        flex-wrap: wrap;
    }

    body.page-index .hero-actions .btn {
        flex: 1 1 auto;
    }


}


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

@media (max-width: 420px) {


    body.page-index .dashboard-page {
        padding-inline: 10px;
    }

    body.page-index .quick-action {
        padding: 10px;

        font-size: 12px;
    }

    body.page-index .metric-card {
        padding: 10px;
    }

    body.page-index .metric-content > span {
        font-size: 11px;
    }

    body.page-index .metric-content strong {
        font-size: 18px;
    }

    body.page-index .chart-footer {
        font-size: 11px;
    }


}

/* =========================================================
   CANCELADAS + DATOS DE EMPRESA
   ========================================================= */

body.page-index .dashboard-status-row {

    display: grid;

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

    gap: 14px;

    width: 100%;

    margin-bottom: 18px;

}


/* =========================================================
   CARD CANCELADAS
   ========================================================= */

body.page-index .dashboard-status-row .dashboard-half-card {

    width: 100%;

    min-width: 0;

    min-height: 118px;

    margin: 0;

}


/* =========================================================
   DATOS DE EMPRESA
   ========================================================= */

body.page-index .company-status-card {

    min-width: 0;

    min-height: 118px;

    display: grid;

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

    align-items: center;

    gap: 12px;

    padding: 16px;

    border-radius: 14px;

    overflow: hidden;

}


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

body.page-index .company-status-icon {

    width: 48px;

    height: 48px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    flex: 0 0 48px;

}


body.page-index .company-status-icon svg {

    width: 24px;

    height: 24px;

    display: block;

}


/* =========================================================
   CONFIGURACIÓN COMPLETA
   ========================================================= */

body.page-index .company-status-complete {

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f6fff9
        );

}


body.page-index .company-status-complete
.company-status-icon {

    color: var(--dash-green);

    background: var(--dash-green-soft);

}


body.page-index .company-status-complete
.company-status-dot {

    background: var(--dash-green);

    box-shadow:
        0 0 0 4px
        rgba(22, 163, 74, .10);

}


/* =========================================================
   CONFIGURACIÓN INCOMPLETA
   ========================================================= */

body.page-index .company-status-incomplete {

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fffaf3
        );

}


body.page-index .company-status-incomplete
.company-status-icon {

    color: var(--dash-orange);

    background: var(--dash-orange-soft);

}


body.page-index .company-status-incomplete
.company-status-dot {

    background: var(--dash-orange);

    box-shadow:
        0 0 0 4px
        rgba(234, 122, 20, .11);

}


/* =========================================================
   CONTENIDO
   ========================================================= */

body.page-index .company-status-content {

    min-width: 0;

}


body.page-index .company-status-title {

    display: block;

    margin-bottom: 5px;

    color: #52627f;

    font-size: 13px;

    line-height: 1.2;

}


body.page-index .company-status-state {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 7px;

}


body.page-index .company-status-state strong {

    color: var(--dash-text);

    font-size: clamp(
        20px,
        1.65vw,
        30px
    );

    line-height: 1.15;

    letter-spacing: -.03em;

}


body.page-index .company-status-dot {

    width: 8px;

    height: 8px;

    display: block;

    flex: 0 0 8px;

    border-radius: 50%;

}


body.page-index .company-status-content small {

    display: block;

    color: #7a879d;

    font-size: 12px;

    line-height: 1.35;

}


/* =========================================================
   BOTÓN CONFIGURAR
   ========================================================= */

body.page-index .company-status-link {

    min-height: 38px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 0 13px;

    border: 1px solid #d7e1ee;

    border-radius: 9px;

    background: #fff;

    color: var(--dash-blue);

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    white-space: nowrap;

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

}


body.page-index .company-status-link:hover {

    transform: translateY(-1px);

    border-color: #aac8f7;

    background: #f5f9ff;

}


/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 1023px) {


    body.page-index .dashboard-status-row {

        gap: 12px;

    }


    body.page-index .company-status-card {

        min-height: 108px;

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

        gap: 10px;

        padding: 14px;

    }


    body.page-index .company-status-icon {

        width: 44px;

        height: 44px;

        border-radius: 12px;

    }


    body.page-index .company-status-icon svg {

        width: 21px;

        height: 21px;

    }


}


/* =========================================================
   RESPONSIVE - MÓVIL
   ========================================================= */

@media (max-width: 767px) {


    body.page-index .dashboard-status-row {

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

        gap: 10px;

    }


    body.page-index .dashboard-status-row
    .dashboard-half-card {

        min-height: 105px;

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

        gap: 9px;

        padding: 12px;

        border-radius: 12px;

    }


    body.page-index .company-status-card {

        min-height: 105px;

        display: grid;

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

        align-content: center;

        gap: 8px;

        padding: 12px;

        border-radius: 12px;

    }


    body.page-index .company-status-icon {

        width: 38px;

        height: 38px;

        border-radius: 10px;

    }


    body.page-index .company-status-icon svg {

        width: 18px;

        height: 18px;

    }


    body.page-index .company-status-title {

        font-size: 10px;

        margin-bottom: 3px;

    }


    body.page-index .company-status-state {

        gap: 6px;

        margin-bottom: 3px;

    }


    body.page-index .company-status-state strong {

        font-size: 16px;

    }


    body.page-index .company-status-content small {

        font-size: 9px;

    }


    body.page-index .company-status-link {

        grid-column: 1 / -1;

        width: 100%;

        min-height: 30px;

        padding: 0 7px;

        margin-top: 2px;

        font-size: 10px;

    }


}


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

@media (max-width: 420px) {


    body.page-index .dashboard-status-row {

        gap: 8px;

    }


    body.page-index .dashboard-status-row
    .dashboard-half-card {

        padding: 10px;

    }


    body.page-index .company-status-card {

        padding: 10px;

    }


    body.page-index .company-status-title {

        font-size: 9px;

    }


    body.page-index .company-status-state strong {

        font-size: 14px;

    }


    body.page-index .company-status-content small {

        font-size: 8px;

    }


    body.page-index .company-status-link {

        min-height: 28px;

        font-size: 9px;

    }


}

/* ===== invoice-create.css | scope .page-invoice-create ===== */
/* =========================================================
   BOTÓN VOLVER
   ========================================================= */

body.page-invoice-create .invoice-form-actions {
    width: 100%;
}


body.page-invoice-create .invoice-save-cancel {

    width: 100%;

    display: grid;

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

    gap: 10px;

    margin-top: 25px;

    box-sizing: border-box;

}


/* =========================================================
   BOTÓN GUARDAR
   ========================================================= */

body.page-invoice-create .invoice-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-invoice-create .invoice-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-invoice-create .invoice-save-btn:active {

    transform: translateY(0);

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

}


body.page-invoice-create .invoice-save-btn:disabled {

    background: #94a3b8 !important;

    border-color: #94a3b8 !important;

    color: #ffffff !important;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

}


/* =========================================================
   BOTÓN CANCELAR
   ========================================================= */

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

    width: 100%;

    min-height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    padding: 10px 14px;

    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-invoice-create .invoice-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-invoice-create .invoice-cancel-btn:active {

    transform: translateY(0);

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

}


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

@media (max-width: 600px) {


    body.page-invoice-create .invoice-save-cancel {

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

        gap: 8px;

    }


}


/* ===== Modernización uniforme del panel ===== */
body.page-invoice-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-invoice-create .page-heading h1,
body.page-invoice-create .page-heading h2 {margin:0;color:#0f172a;letter-spacing:-.03em;}
body.page-invoice-create .eyebrow {color:#1468f3!important;font-size:11px!important;font-weight:900!important;letter-spacing:.12em;text-transform:uppercase;}
body.page-invoice-create .page-description {color:#6b7a94;line-height:1.55;}
body.page-invoice-create .panel,
body.page-invoice-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-invoice-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-invoice-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-invoice-create .btn-outline,
body.page-invoice-create .btn-secondary {background:#fff!important;color:#465875!important;border:1px solid #cbd8ea!important;}
body.page-invoice-create input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
body.page-invoice-create select,
body.page-invoice-create textarea {border:1px solid #cfdaea!important;border-radius:10px!important;background:#fff;transition:border-color .18s ease,box-shadow .18s ease;}
body.page-invoice-create input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
body.page-invoice-create select:focus,
body.page-invoice-create textarea:focus {outline:none!important;border-color:#87b4ff!important;box-shadow:0 0 0 3px rgba(20,104,243,.09)!important;}
body.page-invoice-create .table-wrap {border:1px solid #e5ebf4;border-radius:12px;overflow:auto;background:#fff;}
body.page-invoice-create table {border-collapse:collapse;}
body.page-invoice-create thead th {background:#f5f8fc!important;color:#51617c!important;text-transform:uppercase;font-size:11px!important;letter-spacing:.035em;}
body.page-invoice-create tbody tr {transition:background .16s ease;}
body.page-invoice-create tbody tr:hover {background:#fbfdff;}
body.page-invoice-create .alert,
body.page-invoice-create .contract-alert {border-radius:11px!important;}
@media (max-width:768px) {
body.page-invoice-create .page-heading {padding:16px;border-radius:13px;align-items:flex-start}body.page-invoice-create .panel,
body.page-invoice-create .contracts-panel {padding:15px!important;border-radius:13px!important}body.page-invoice-create .hero-actions {width:100%;display:flex;gap:8px;flex-wrap:wrap}body.page-invoice-create .hero-actions .btn {flex:1 1 auto}
}

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



/* ===== invoice-public.css | scope .page-invoice-public ===== */
/*
|--------------------------------------------------------------------------
| PÁGINA
|--------------------------------------------------------------------------
*/

body.page-invoice-public .public-invoice-body {

    background: #f4f6fa;

    min-height: 100vh;

    padding:
        35px 15px;

}


/*
|--------------------------------------------------------------------------
| CONTENEDOR
|--------------------------------------------------------------------------
*/

body.page-invoice-public .public-container {

    width:
        min(950px, 100%);

    margin:
        0 auto;

}


/*
|--------------------------------------------------------------------------
| FACTURA
|--------------------------------------------------------------------------
*/

body.page-invoice-public .public-invoice {

    background: #ffffff;

    padding: 55px;

    border-radius: 0;

    box-shadow:
        0 20px 60px rgba(23,32,51,.10);

}


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

body.page-invoice-public .invoice-header {

    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap: 40px;

    padding-bottom: 35px;

    border-bottom:
        1px solid #e4e8ef;

}


/*
|--------------------------------------------------------------------------
| EMPRESA
|--------------------------------------------------------------------------
*/

body.page-invoice-public .company-info {

    display: flex;

    align-items: center;

    gap: 18px;

}


/*
|--------------------------------------------------------------------------
| LOGO
|--------------------------------------------------------------------------
*/

body.page-invoice-public .invoice-logo {

    width: 100px;

    height: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 0;

    flex-shrink: 0;

}


body.page-invoice-public .invoice-logo img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

}


/*
|--------------------------------------------------------------------------
| NOMBRE EMPRESA
|--------------------------------------------------------------------------
*/

body.page-invoice-public .company-info h1 {

    margin:
        0 0 8px;

    font-size:
        1.45rem;

}


/*
|--------------------------------------------------------------------------
| DATOS EMPRESA
|--------------------------------------------------------------------------
*/

body.page-invoice-public .company-details {

    margin: 0;

    color: #647087;

    font-size: .9rem;

    line-height: 1.6;

}


/*
|--------------------------------------------------------------------------
| REDES SOCIALES
|--------------------------------------------------------------------------
*/

body.page-invoice-public .invoice-socials {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 14px;

}


body.page-invoice-public .invoice-social-link {

    width: 32px;

    height: 32px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid #dce2ea;

    background: #ffffff;

    color: #172033;

    text-decoration: none;

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

}


body.page-invoice-public .invoice-social-link:hover {

    background: #3f7658;

    border-color: #3f7658;

    color: #ffffff;

    transform:
        translateY(-1px);

}


/*
|--------------------------------------------------------------------------
| ICONOS SOCIALES
|--------------------------------------------------------------------------
*/

body.page-invoice-public .invoice-social-link svg {

    width: 17px;

    height: 17px;

    display: block;

    fill: none;

    stroke: #475569;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


body.page-invoice-public .invoice-social-link:hover svg {

    stroke: #ffffff;

}


/*
|--------------------------------------------------------------------------
| NÚMERO DE FACTURA
|--------------------------------------------------------------------------
*/

body.page-invoice-public .invoice-number {

    text-align: right;

}


body.page-invoice-public .invoice-number-label {

    display: block;

    color: #647087;

    font-size: .7rem;

    font-weight: 900;

    letter-spacing: .12em;

}


body.page-invoice-public .invoice-number strong {

    display: block;

    font-size: 1.5rem;

    margin-top: 4px;

}


/*
|--------------------------------------------------------------------------
| INFORMACIÓN CLIENTE + QR
|--------------------------------------------------------------------------
*/

body.page-invoice-public .invoice-info {

    display: grid;

    grid-template-columns:
        1fr 170px;

    gap: 25px;

    align-items: center;

    margin:
        35px 0;

}


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

body.page-invoice-public .info-card {

    border:
        1px solid #e4e8ef;

    padding: 22px;

    display: grid;

    gap: 5px;

    border-radius: 0;

}


body.page-invoice-public .info-label {

    color: #3f7658;

    font-size: .7rem;

    font-weight: 900;

    letter-spacing: .12em;

    margin-bottom: 5px;

}


body.page-invoice-public .info-card strong {

    font-size: 1.05rem;

}


body.page-invoice-public .info-card span:not(.info-label) {

    color: #647087;

    font-size: .9rem;

}


/*
|--------------------------------------------------------------------------
| QR
|--------------------------------------------------------------------------
*/

body.page-invoice-public .invoice-qr {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}


body.page-invoice-public .invoice-qr img {

    display: block;

    width: 135px;

    height: 135px;

    max-width: 100%;

}


body.page-invoice-public .invoice-qr-label {

    margin-top: 8px;

    color: #647087;

    font-size: .7rem;

    font-weight: 700;

}


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

body.page-invoice-public .table-wrap {

    overflow-x: auto;

}


body.page-invoice-public .invoice-table {

    width: 100%;

    border-collapse:
        collapse;

    min-width: 650px;

}


body.page-invoice-public .invoice-table th {

    text-align: left;

    padding:
        14px 12px;

    background: #f7f8fb;

    color: #647087;

    font-size: .72rem;

    text-transform: uppercase;

    letter-spacing: .08em;

}


body.page-invoice-public .invoice-table td {

    padding:
        17px 12px;

    border-bottom:
        1px solid #e4e8ef;

}


body.page-invoice-public .text-center {

    text-align:
        center !important;

}


body.page-invoice-public .text-right {

    text-align:
        right !important;

}


/*
|--------------------------------------------------------------------------
| TOTALES
|--------------------------------------------------------------------------
*/

body.page-invoice-public .invoice-summary {

    width: 340px;

    max-width: 100%;

    margin:
        30px 0 0 auto;

}


body.page-invoice-public .summary-row {

    display: flex;

    justify-content:
        space-between;

    padding:
        7px 0;

    color: #647087;

}


body.page-invoice-public .summary-row strong {

    color: #172033;

}


/*
|--------------------------------------------------------------------------
| TOTAL
|--------------------------------------------------------------------------
*/

body.page-invoice-public .summary-total {

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    margin-top: 12px;

    padding-top: 16px;

    border-top:
        2px solid #172033;

    font-size: 1.1rem;

}


body.page-invoice-public .summary-total strong {

    font-size: 1.4rem;

    color: #3f7658;

}


/*
|--------------------------------------------------------------------------
| NOTAS
|--------------------------------------------------------------------------
*/

body.page-invoice-public .invoice-notes {

    margin-top: 40px;

    padding:
        20px;

    background: #f7f8fb;

    border-radius: 0;

}


body.page-invoice-public .invoice-notes strong {

    display: block;

    color: #3f7658;

    font-size: .75rem;

    letter-spacing: .1em;

}


body.page-invoice-public .invoice-notes p {

    margin:
        8px 0 0;

    color: #647087;

}


/*
|--------------------------------------------------------------------------
| PAGO
|--------------------------------------------------------------------------
*/

body.page-invoice-public .invoice-payment {

    margin-top: 30px;

    padding-top: 25px;

    border-top:
        1px solid #e4e8ef;

    text-align:
        center;

}


body.page-invoice-public .btn-payment {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        13px 90px;

    border:
        1px solid #3f7658;

    border-radius: 0;

    background: #3f7658;

    color: #ffffff;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    box-shadow: none;

    text-decoration: none;

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

}


body.page-invoice-public .btn-payment:hover {

    background: #35654b;

    border-color: #35654b;

    color: #ffffff;

    text-decoration: none;

}


/*
|--------------------------------------------------------------------------
| MENSAJE DE PAGO
|--------------------------------------------------------------------------
*/

body.page-invoice-public .payment-message {

    margin:
        12px 0 0;

    color: #647087;

    font-size: .9rem;

}


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

body.page-invoice-public .invoice-footer {

    display: flex;

    justify-content:
        center;

    align-items:
        center;

    text-align:
        center;

    flex-direction:
        column;

    gap: 6px;

    margin-top: 50px;

    padding-top: 20px;

    border-top:
        1px solid #e4e8ef;

    color: #647087;

    font-size: .8rem;

}


body.page-invoice-public .invoice-footer strong {

    display: block;

    color: #172033;

    font-size: .9rem;

}


body.page-invoice-public .invoice-footer span {

    display: block;

}


/*
|--------------------------------------------------------------------------
| IMPRESIÓN
|--------------------------------------------------------------------------
*/

@media print {


    @page  {

        size: A4;

        margin: 12mm;

    }


    html:has(> body.page-invoice-public),
body.page-invoice-public {

        background: #ffffff !important;

        margin: 0 !important;

        padding: 0 !important;

    }


    body.page-invoice-public .public-invoice-body {

        background: #ffffff !important;

        padding: 0 !important;

        min-height: auto;

    }


    body.page-invoice-public .public-invoice {

        width: 100%;

        max-width: none;

        padding: 15px;

        margin: 0;

        border: 0;

        border-radius: 0;

        box-shadow: none;

    }


    body.page-invoice-public .public-actions,
body.page-invoice-public .public-notice,
body.page-invoice-public .invoice-status,
body.page-invoice-public .invoice-payment {

        display: none !important;

    }


    /*
    | QR oculto al imprimir,
    | igual que en la versión anterior.
    */

    body.page-invoice-public .invoice-qr {

        display: none !important;

    }


    /*
    | Las redes y la web sí se imprimen.
    */

    body.page-invoice-public .invoice-socials {

        display: flex !important;

    }


    body.page-invoice-public .invoice-social-link {

        color: #172033 !important;

        border-color: #dce2ea !important;

        background: #ffffff !important;

    }


    body.page-invoice-public .invoice-social-link svg {

        stroke: #475569 !important;

    }


    body.page-invoice-public .invoice-table {

        min-width: 0;

    }


    body.page-invoice-public .invoice-table tr {

        break-inside:
            avoid;

        page-break-inside:
            avoid;

    }


    body.page-invoice-public .invoice-notes {

        break-inside:
            avoid;

        page-break-inside:
            avoid;

    }


    body.page-invoice-public .invoice-footer {

        break-inside:
            avoid;

        page-break-inside:
            avoid;

    }


}


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

@media (max-width:768px) {


    body.page-invoice-public .public-invoice-body {

        padding:
            15px 10px;

    }


    body.page-invoice-public .public-invoice {

        padding:
            25px 18px;

        border-radius: 0;

    }


    body.page-invoice-public .invoice-header {

        flex-direction:
            column;

        gap: 25px;

    }


    body.page-invoice-public .company-info {

        align-items:
            flex-start;

    }


    body.page-invoice-public .invoice-number {

        text-align:
            left;

    }


    body.page-invoice-public .invoice-info {

        grid-template-columns:
            1fr;

    }


    body.page-invoice-public .invoice-qr {

        padding:
            10px 0 5px;

    }


    body.page-invoice-public .invoice-summary {

        width: 100%;

    }


    body.page-invoice-public .invoice-footer {

        text-align:
            center;

    }


    body.page-invoice-public .btn-payment {

        width: 100%;

        padding-left:
            20px;

        padding-right:
            20px;

    }


}


/* ===== invoice-view.css | scope .page-invoice-view ===== */
/*
|--------------------------------------------------------------------------
| CABECERA
|--------------------------------------------------------------------------
*/

body.page-invoice-view .invoice-heading {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 5px;

}


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

body.page-invoice-view .invoice-client-id {

    display: block;

    font-size: 13px;

    font-weight: 600;

    color: #64748b;

    letter-spacing: 0.3px;

}


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

body.page-invoice-view .invoice-status {

    display: inline-block !important;

    margin-top: 4px;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.5px;

}


body.page-invoice-view .invoice-status-pending {

    background: #fef3c7;

    color: #92400e;

}


body.page-invoice-view .invoice-status-paid {

    background: #dcfce7;

    color: #166534;

}


body.page-invoice-view .invoice-status-cancelled {

    background: #fee2e2;

    color: #991b1b;

}


/*
|--------------------------------------------------------------------------
| SITIO WEB DE LA EMPRESA
|--------------------------------------------------------------------------
|
| IMPORTANTE:
| Aquí se muestra solamente el dominio.
|
| Ejemplo:
| https://www.joseluistaveras.com
| se muestra como:
| www.joseluistaveras.com
|
|--------------------------------------------------------------------------
*/

body.page-invoice-view .company-website {

    display: block;

    margin-top: 5px;

    color: #2563eb;

    font-size: 11px;

    font-weight: 600;

    line-height: 1.3;

    text-decoration: none;

    word-break: break-word;

}


body.page-invoice-view .company-website:hover {

    text-decoration: underline;

}


/*
|--------------------------------------------------------------------------
| CLIENTE + QR
|--------------------------------------------------------------------------
*/

body.page-invoice-view .invoice-client-qr-grid {

    display: grid !important;

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

    gap: 24px;

    width: 100%;

    align-items: stretch;

    margin-bottom: 40px !important;

}


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

body.page-invoice-view .invoice-client-box {

    min-width: 0;

}


/*
|--------------------------------------------------------------------------
| QR
|--------------------------------------------------------------------------
*/

body.page-invoice-view .invoice-qr-box {

    width: 190px;

    min-height: 190px;

    box-sizing: border-box;

    padding: 14px;

    border: 1px solid #e2e8f0;

    border-radius: 0;

    background: #fff;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    gap: 8px;

}


body.page-invoice-view .invoice-qr-box img {

    display: block;

    width: 145px;

    height: 145px;

    object-fit: contain;

}


/*
|--------------------------------------------------------------------------
| FECHAS EN PANTALLA
|--------------------------------------------------------------------------
*/

body.page-invoice-view .invoice-dates-full {

    display: grid !important;

    grid-template-columns:
        1fr
        1fr;

    gap: 20px;

    width: 100%;

    margin-top: 24px;

    margin-bottom: 24px;

}


body.page-invoice-view .invoice-date-box {

    width: 100%;

    box-sizing: border-box;

    padding: 16px 20px;

    border: 1px solid #e2e8f0;

    border-radius: 0;

    background: #f8fafc;

    display: flex;

    flex-direction: column;

    gap: 5px;

}


body.page-invoice-view .invoice-date-box strong {

    font-size: 15px;

    color: #0f172a;

}


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

body.page-invoice-view .invoice-footer-modern {

    display: flex !important;

    width: 100%;

    justify-content: center !important;

    align-items: center !important;

    text-align: center !important;

}


body.page-invoice-view .invoice-footer-message {

    display: flex !important;

    flex-direction: column;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

}


/*
|--------------------------------------------------------------------------
| REDES SOCIALES
|--------------------------------------------------------------------------
*/

body.page-invoice-view .invoice-socials {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 9px;

    margin-top: 12px;

}


body.page-invoice-view .invoice-socials a {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #dbe3ec;

    border-radius: 50%;

    background: #ffffff;

    text-decoration: none;

    transition:
        transform 0.15s ease,
        background 0.15s ease;

}


body.page-invoice-view .invoice-socials a:hover {

    transform: translateY(-2px);

    background: #f8fafc;

}


body.page-invoice-view .invoice-socials svg {

    width: 16px;

    height: 16px;

    display: block;

    fill: #475569;

}


body.page-invoice-view .invoice-socials svg rect {

    fill: none;

    stroke: #475569;

    stroke-width: 2;

}


body.page-invoice-view .invoice-socials svg circle {

    fill: none;

    stroke: #475569;

    stroke-width: 2;

}


body.page-invoice-view .invoice-socials svg path {

    fill: none;

    stroke: #475569;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


body.page-invoice-view .invoice-socials svg .social-fill {

    fill: #475569;

    stroke: none;

}


/*
|--------------------------------------------------------------------------
| IMPRESIÓN / PDF
|--------------------------------------------------------------------------
*/

@media print {



    @page  {

        size: A4 portrait;

        margin: 8mm;

    }


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

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        background: #fff !important;

    }


    /*
    |--------------------------------------------------------------------------
    | OCULTAR ADMINISTRACIÓN
    |--------------------------------------------------------------------------
    */

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

        display: none !important;

    }


    /*
    |--------------------------------------------------------------------------
    | OCULTAR FECHAS AL GUARDAR PDF
    |--------------------------------------------------------------------------
    */

    body.page-invoice-view .invoice-dates-no-print,
body.page-invoice-view .invoice-dates-full {

        display: none !important;

        visibility: hidden !important;

        height: 0 !important;

        min-height: 0 !important;

        max-height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

    }


    /*
    |--------------------------------------------------------------------------
    | FACTURA
    |--------------------------------------------------------------------------
    */

    body.page-invoice-view .invoice-paper {

        display: block !important;

        width: 100% !important;

        max-width: none !important;

        min-height: 0 !important;

        height: auto !important;

        box-sizing: border-box !important;

        margin: 0 !important;

        padding: 18px 12px 20px 12px !important;

        background: #fff !important;

        border: none !important;

        border-radius: 0 !important;

        box-shadow: none !important;

        overflow: visible !important;

        transform: none !important;

    }


    body.page-invoice-view .invoice-heading {

        text-align: right !important;

        margin-left: auto !important;

        justify-self: end !important;

    }


    body.page-invoice-view .invoice-heading .eyebrow,
body.page-invoice-view .invoice-heading h1,
body.page-invoice-view .invoice-heading .invoice-client-code {

        text-align: right !important;

    }


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

    body.page-invoice-view .invoice-company-header {

        display: flex !important;

        align-items: flex-start !important;

        justify-content: space-between !important;

        width: 100% !important;

        margin-bottom: 8px !important;

        break-inside: avoid !important;

        page-break-inside: avoid !important;

    }


    body.page-invoice-view .company-brand {

        display: flex !important;

        align-items: center !important;

        gap: 12px !important;

        min-width: 0 !important;

    }


    /*
    |--------------------------------------------------------------------------
    | LOGO
    |--------------------------------------------------------------------------
    */

    body.page-invoice-view .company-logo {

        width: 82px !important;

        height: 82px !important;

        min-width: 82px !important;

        min-height: 82px !important;

        max-width: 82px !important;

        max-height: 82px !important;

        box-sizing: border-box !important;

        padding: 0 !important;

        margin: 0 !important;

        border: none !important;

        border-radius: 0 !important;

        background: transparent !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        overflow: visible !important;

        flex-shrink: 0 !important;

    }


    body.page-invoice-view .company-logo img {

        display: block !important;

        width: 82px !important;

        height: 82px !important;

        min-width: 82px !important;

        min-height: 82px !important;

        max-width: 82px !important;

        max-height: 82px !important;

        object-fit: contain !important;

        object-position: center !important;

        margin: 0 !important;

        padding: 0 !important;

        border: none !important;

    }


    /*
    |--------------------------------------------------------------------------
    | EMPRESA
    |--------------------------------------------------------------------------
    */

    body.page-invoice-view .company-info {

        min-width: 0 !important;

    }


    body.page-invoice-view .company-info h2 {

        margin: 0 0 3px 0 !important;

        font-size: 18px !important;

        line-height: 1.15 !important;

    }


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

        font-size: 10px !important;

        line-height: 1.35 !important;

    }


    /*
    |--------------------------------------------------------------------------
    | SITIO WEB EN PDF
    |--------------------------------------------------------------------------
    */

    body.page-invoice-view .company-website {

        color: #334155 !important;

        font-size: 9px !important;

        font-weight: 600 !important;

        line-height: 1.3 !important;

        text-decoration: none !important;

        margin-top: 3px !important;

        word-break: break-word !important;

    }


    /*
    |--------------------------------------------------------------------------
    | DATOS FACTURA
    |--------------------------------------------------------------------------
    */

    body.page-invoice-view .invoice-heading {

        gap: 3px !important;

        flex-shrink: 0 !important;

    }


    body.page-invoice-view .invoice-label {

        font-size: 10px !important;

    }


    body.page-invoice-view .invoice-number {

        font-size: 20px !important;

        line-height: 1.1 !important;

    }


    body.page-invoice-view .invoice-client-id {

        font-size: 10px !important;

    }


    body.page-invoice-view .invoice-status {

        display: none !important;

    }


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

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

        margin: 7px 0 12px 0 !important;

    }


    /*
    |--------------------------------------------------------------------------
    | CLIENTE + QR
    |--------------------------------------------------------------------------
    */

    body.page-invoice-view .invoice-client-qr-grid {

        display: grid !important;

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

        gap: 18px !important;

        width: 100% !important;

        align-items: stretch !important;

        margin-bottom: 40px !important;

        break-inside: avoid !important;

        page-break-inside: avoid !important;

    }


    body.page-invoice-view .invoice-client-box {

        min-width: 0 !important;

        padding: 13px 16px !important;

        box-sizing: border-box !important;

        border-radius: 0 !important;

        break-inside: avoid !important;

        page-break-inside: avoid !important;

    }


    body.page-invoice-view .invoice-info-title {

        font-size: 9px !important;

        line-height: 1.2 !important;

        letter-spacing: 0.5px !important;

    }


    body.page-invoice-view .invoice-client-box strong {

        font-size: 13px !important;

        line-height: 1.25 !important;

    }


    body.page-invoice-view .invoice-client-box span {

        font-size: 10px !important;

        line-height: 1.35 !important;

    }


    /*
    |--------------------------------------------------------------------------
    | QR
    |--------------------------------------------------------------------------
    */

    body.page-invoice-view .invoice-qr-box {

        width: 150px !important;

        min-width: 150px !important;

        max-width: 150px !important;

        height: 150px !important;

        min-height: 150px !important;

        max-height: 150px !important;

        box-sizing: border-box !important;

        padding: 8px !important;

        border: 1px solid #d1d5db !important;

        border-radius: 0 !important;

        gap: 5px !important;

        break-inside: avoid !important;

        page-break-inside: avoid !important;

    }


    body.page-invoice-view .invoice-qr-box img {

        width: 115px !important;

        height: 115px !important;

        max-width: 115px !important;

        max-height: 115px !important;

        object-fit: contain !important;

    }


    /*
    |--------------------------------------------------------------------------
    | FECHAS
    |--------------------------------------------------------------------------
    */

    body.page-invoice-view .invoice-dates-full,
body.page-invoice-view .invoice-dates-no-print {

        display: none !important;

        visibility: hidden !important;

        height: 0 !important;

        min-height: 0 !important;

        max-height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

    }


    /*
    |--------------------------------------------------------------------------
    | TABLA / DESCRIPCIÓN
    |--------------------------------------------------------------------------
    */

    body.page-invoice-view .invoice-table-wrap {

        display: block !important;

        width: 100% !important;

        overflow: visible !important;

        margin-top: 0 !important;

        break-inside: auto !important;

        page-break-inside: auto !important;

    }


    body.page-invoice-view .invoice-table {

        display: table !important;

        width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        border-collapse: collapse !important;

        table-layout: fixed !important;

    }


    body.page-invoice-view .invoice-table thead {

        display: table-header-group !important;

    }


    body.page-invoice-view .invoice-table tbody {

        display: table-row-group !important;

    }


    body.page-invoice-view .invoice-table tr {

        display: table-row !important;

        break-inside: avoid !important;

        page-break-inside: avoid !important;

    }


    body.page-invoice-view .invoice-table th,
body.page-invoice-view .invoice-table td {

        display: table-cell !important;

        box-sizing: border-box !important;

    }


    body.page-invoice-view .invoice-table th {

        font-size: 9px !important;

        padding: 7px 8px !important;

        line-height: 1.2 !important;

    }


    body.page-invoice-view .invoice-table td {

        font-size: 10px !important;

        padding: 7px 8px !important;

        line-height: 1.25 !important;

    }


    /*
    |--------------------------------------------------------------------------
    | ANCHOS
    |--------------------------------------------------------------------------
    */

    body.page-invoice-view .invoice-table th:first-child,
body.page-invoice-view .invoice-table td:first-child {

        width: 55% !important;

    }


    body.page-invoice-view .invoice-table th:nth-child(2),
body.page-invoice-view .invoice-table td:nth-child(2) {

        width: 12% !important;

    }


    body.page-invoice-view .invoice-table th:nth-child(3),
body.page-invoice-view .invoice-table td:nth-child(3) {

        width: 16.5% !important;

    }


    body.page-invoice-view .invoice-table th:nth-child(4),
body.page-invoice-view .invoice-table td:nth-child(4) {

        width: 16.5% !important;

    }


    /*
    |--------------------------------------------------------------------------
    | TOTALES
    |--------------------------------------------------------------------------
    */

    body.page-invoice-view .invoice-summary {

        display: block !important;

        width: 100% !important;

        margin-top: 10px !important;

        break-inside: avoid !important;

        page-break-inside: avoid !important;

    }


    body.page-invoice-view .invoice-summary-row {

        display: flex !important;

        justify-content: flex-end !important;

        align-items: center !important;

        gap: 30px !important;

        padding: 3px 0 !important;

        font-size: 10px !important;

        line-height: 1.25 !important;

    }


    body.page-invoice-view .invoice-summary-total {

        display: flex !important;

        justify-content: flex-end !important;

        align-items: center !important;

        gap: 30px !important;

        margin-top: 5px !important;

        padding: 8px 10px !important;

        font-size: 14px !important;

        line-height: 1.2 !important;

        break-inside: avoid !important;

        page-break-inside: avoid !important;

    }


    /*
    |--------------------------------------------------------------------------
    | NOTAS
    |--------------------------------------------------------------------------
    */

    body.page-invoice-view .invoice-notes-modern {

        margin-top: 12px !important;

        padding: 9px 12px !important;

        border-radius: 0 !important;

        break-inside: avoid !important;

        page-break-inside: avoid !important;

    }


    body.page-invoice-view .invoice-notes-modern > span {

        font-size: 9px !important;

    }


    body.page-invoice-view .invoice-notes-modern p {

        margin: 4px 0 0 0 !important;

        font-size: 10px !important;

        line-height: 1.3 !important;

    }


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

    body.page-invoice-view .invoice-footer-modern {

        display: flex !important;

        width: 100% !important;

        margin-top: 14px !important;

        padding-top: 10px !important;

        justify-content: center !important;

        align-items: center !important;

        text-align: center !important;

        break-inside: avoid !important;

        page-break-inside: avoid !important;

    }


    body.page-invoice-view .invoice-footer-message {

        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;

        align-items: center !important;

        text-align: center !important;

        gap: 2px !important;

    }


    body.page-invoice-view .invoice-footer-message strong {

        font-size: 10px !important;

        line-height: 1.2 !important;

    }


    body.page-invoice-view .invoice-footer-message span {

        font-size: 9px !important;

        line-height: 1.2 !important;

    }


    /*
    |--------------------------------------------------------------------------
    | REDES EN PDF
    |--------------------------------------------------------------------------
    */

    body.page-invoice-view .invoice-socials {

        display: flex !important;

        justify-content: center !important;

        align-items: center !important;

        gap: 7px !important;

        margin-top: 9px !important;

    }


    body.page-invoice-view .invoice-socials a {

        width: 25px !important;

        height: 25px !important;

        border: 1px solid #d1d5db !important;

        border-radius: 50% !important;

        background: #fff !important;

    }


    body.page-invoice-view .invoice-socials svg {

        width: 13px !important;

        height: 13px !important;

    }


    body.page-invoice-view .invoice-socials svg path {

        fill: none !important;

        stroke: #475569 !important;

        stroke-width: 2 !important;

        stroke-linecap: round !important;

        stroke-linejoin: round !important;

    }


    /*
    |--------------------------------------------------------------------------
    | SIN BORDES REDONDEADOS
    |--------------------------------------------------------------------------
    */

    body.page-invoice-view .invoice-paper,
body.page-invoice-view .invoice-company-header,
body.page-invoice-view .invoice-info-box,
body.page-invoice-view .invoice-notes-modern,
body.page-invoice-view .invoice-date-box,
body.page-invoice-view .invoice-qr-box {

        border-radius: 0 !important;

    }


    /*
    |--------------------------------------------------------------------------
    | SIN SOMBRAS
    |--------------------------------------------------------------------------
    */

    body.page-invoice-view * {

        box-shadow: none !important;

    }


    /*
    |--------------------------------------------------------------------------
    | OCULTAR HEADER / FOOTER
    |--------------------------------------------------------------------------
    */

    body.page-invoice-view > header,
body.page-invoice-view > footer {

        display: none !important;

    }


}


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

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



    body.page-invoice-view .invoice-client-qr-grid {

        grid-template-columns: 1fr !important;

        margin-bottom: 40px !important;

    }


    body.page-invoice-view .invoice-qr-box {

        width: 100%;

        min-width: 0;

        max-width: none;

        min-height: auto;

        height: auto;

        max-height: none;

        padding: 14px;

    }


    body.page-invoice-view .invoice-qr-box img {

        width: 145px;

        height: 145px;

        max-width: 145px;

        max-height: 145px;

    }


    body.page-invoice-view .invoice-dates-full {

        grid-template-columns: 1fr;

        margin-top: 20px;

        margin-bottom: 20px;

    }


    body.page-invoice-view .company-website {

        font-size: 10px;

        margin-top: 4px;

    }


}


/* ===== Modernización uniforme del panel ===== */
body.page-invoice-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-invoice-view .page-heading h1,
body.page-invoice-view .page-heading h2 {margin:0;color:#0f172a;letter-spacing:-.03em;}
body.page-invoice-view .eyebrow {color:#1468f3!important;font-size:11px!important;font-weight:900!important;letter-spacing:.12em;text-transform:uppercase;}
body.page-invoice-view .page-description {color:#6b7a94;line-height:1.55;}
body.page-invoice-view .panel,
body.page-invoice-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-invoice-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-invoice-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-invoice-view .btn-outline,
body.page-invoice-view .btn-secondary {background:#fff!important;color:#465875!important;border:1px solid #cbd8ea!important;}
body.page-invoice-view input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
body.page-invoice-view select,
body.page-invoice-view textarea {border:1px solid #cfdaea!important;border-radius:10px!important;background:#fff;transition:border-color .18s ease,box-shadow .18s ease;}
body.page-invoice-view input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
body.page-invoice-view select:focus,
body.page-invoice-view textarea:focus {outline:none!important;border-color:#87b4ff!important;box-shadow:0 0 0 3px rgba(20,104,243,.09)!important;}
body.page-invoice-view .table-wrap {border:1px solid #e5ebf4;border-radius:12px;overflow:auto;background:#fff;}
body.page-invoice-view table {border-collapse:collapse;}
body.page-invoice-view thead th {background:#f5f8fc!important;color:#51617c!important;text-transform:uppercase;font-size:11px!important;letter-spacing:.035em;}
body.page-invoice-view tbody tr {transition:background .16s ease;}
body.page-invoice-view tbody tr:hover {background:#fbfdff;}
body.page-invoice-view .alert,
body.page-invoice-view .contract-alert {border-radius:11px!important;}
@media (max-width:768px) {
body.page-invoice-view .page-heading {padding:16px;border-radius:13px;align-items:flex-start}body.page-invoice-view .panel,
body.page-invoice-view .contracts-panel {padding:15px!important;border-radius:13px!important}body.page-invoice-view .hero-actions {width:100%;display:flex;gap:8px;flex-wrap:wrap}body.page-invoice-view .hero-actions .btn {flex:1 1 auto}
}

/* ===== Botones de acciones equilibrados ===== */
body.page-invoice-view .hero-actions { display:flex !important; gap:10px !important; flex-wrap:wrap; }
body.page-invoice-view .hero-actions > .btn,
body.page-invoice-view .hero-actions > a,
body.page-invoice-view .hero-actions > button { flex:1 1 calc(50% - 5px); min-width:180px; justify-content:center; }