/* =====================================================
   NATURSOFT DESIGN SYSTEM
   ===================================================== */

:root {
    --natursoft-primary: #1f6f8b;
    --natursoft-primary-dark: #155a73;
    --natursoft-primary-light: #3f8fa6;

    --lumo-primary-color: #1f6f8b;
    --lumo-primary-color-50pct: rgba(31,111,139,0.5);
    --lumo-primary-color-10pct: rgba(31,111,139,0.1);

    --ui-bg: #f8fafc;
    --ui-border: #e5e7eb;
    --ui-text: #374151;

    --shadow-soft: 0 2px 6px rgba(0,0,0,0.15);
    --shadow: 0 4px 12px rgba(0,0,0,0.25);
}

body {
    background: var(--ui-bg);
}

/* =====================================================
   HEADER REDISEÑADO
   ===================================================== */

.top-header {
       background-color: #ffffff;
       border-bottom: 1px solid var(--ui-border);
       padding: 4px 20px;
       box-shadow: var(--shadow-soft);
       min-height: 56px;
       box-sizing: border-box;
	   gap: 16px;
   }

/* =====================================================
   LOGO
   ===================================================== */

.top-header img {
    transition: transform .2s ease;
}

.top-header img:hover {
    transform: scale(1.02);
}

/* =====================================================
   ROUTERLINK (MENÚ)
   ===================================================== */

.top-link {
       display: inline-flex;
       align-items: center;
       justify-content: center;

       color: var(--ui-text);
       font-weight: 500;
       text-decoration: none;

       padding: 8px 14px;
       border-radius: 8px;
       transition: all .15s ease;

       text-align: center;
       line-height: 1.2;
       min-height: 38px;
       box-sizing: border-box;
   }

.top-link:hover {
    background-color: #f1f5f9;
    color: #111827;
}

.top-link[highlight] {
    background-color: rgba(31,111,139,0.12);
    color: var(--natursoft-primary-dark);
    font-weight: 600;
}

/* =====================================================
   USER INFO
   ===================================================== */

.top-user {
    font-size: 0.9rem;
    font-weight: 500;
    color: #4b5563;
    white-space: nowrap;
}

/* =====================================================
   LOGOUT
   ===================================================== */

.topbar-button-ns {
    color: var(--natursoft-primary-dark);
    font-weight: 600;
    border-radius: 8px;
    padding: 6px 12px;
    transition: all .15s ease;
}

.topbar-button-ns:hover {
    background-color: rgba(31,111,139,0.12);
}

/* =====================================================
   LOGIN BUTTON
   ===================================================== */

.natursoft-login-button {
    background: linear-gradient(
        180deg,
        var(--natursoft-primary),
        var(--natursoft-primary-dark)
    );
    color: white;
    font-weight: 600;
    border-radius: 10px;
    padding: 0.6em 1.4em;
    box-shadow: var(--shadow-soft);
    transition: all .2s ease;
}

.natursoft-login-button:hover {
    background: linear-gradient(
        180deg,
        var(--natursoft-primary-light),
        var(--natursoft-primary)
    );
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.natursoft-login-button:active {
    transform: translateY(0);
}

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

.menu-button {
    font-size: 1.05rem;
}

.btn-large {
    --lumo-button-size: 60px;
    min-width: 320px;
}

.btn-mid {
    --lumo-button-size: 40px;
    min-width: 220px;
}

.btn-small {
    --lumo-button-size: 28px;
    --lumo-font-size-m: 12px;
    min-width: 28px;
}

/* =====================================================
   BOTÓN NATURSOFT
   ===================================================== */

.btn-natursoft {
    background: linear-gradient(
        180deg,
        var(--natursoft-primary),
        var(--natursoft-primary-dark)
    );
    color: white;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.btn-natursoft:hover {
    background: linear-gradient(
        180deg,
        var(--natursoft-primary-light),
        var(--natursoft-primary)
    );
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

/* =====================================================
   PAGINACIÓN
   ===================================================== */

.pager-button {
    background: linear-gradient(
        180deg,
        var(--natursoft-primary),
        var(--natursoft-primary-dark)
    );
    color: white;
    border-radius: 6px;
    box-shadow: var(--shadow-soft);
}

.pager-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.pager-button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

vaadin-button {
    cursor: pointer;
}

.pager-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text);
    min-width: 120px;
    text-align: center;
}

/* =====================================================
   FOOTER
   ===================================================== */

vaadin-app-layout::part(content) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-footer {
    flex-shrink: 0;
    margin-top: auto;
    border-top: 1px solid var(--ui-border);
    background: #f9fafb;
}

/* =====================================================
   NOTIFICACIONES
   ===================================================== */

.notif-grande {
    font-size: 18px;
}

.notif-grande::part(container) {
    padding: 20px 28px;
    min-width: 320px;
}

.notif-grande::part(content) {
    font-size: 18px;
    font-weight: 600;
}

.notif-error::part(content) {
    background-color: #b91c1c;
    color: white;
    font-weight: 600;
    border-radius: 6px;
    padding: 12px 20px;
}

.notif-ok::part(content) {
    background-color: #16a34a;
    color: white;
    font-weight: 600;
    border-radius: 6px;
    padding: 12px 20px;
}

.notif-warning::part(content) {
    background-color: #d97706;
    color: white;
    font-weight: 600;
    border-radius: 6px;
    padding: 12px 20px;
}

/* =====================================================
   TESORERIA
   ===================================================== */

.teso-ingreso {
    background-color: #d1fae5;
    color: #065f46;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
}

.teso-gasto {
    background-color: #fee2e2;
    color: #7f1d1d;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
}

.teso-balance {
    background-color: #dbeafe;
    color: #1e3a8a;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
}

/* =====================================================
   SALDOS
   ===================================================== */

.saldo-positivo {
    color: #16a34a;
    font-weight: 700;
}

.saldo-negativo {
    color: #dc2626;
    font-weight: 700;
}

.saldo-cero {
    color: #6b7280;
    font-weight: 600;
}

/* =====================================================
   GRID TESORERIA
   ===================================================== */

.grid-tesoreria::part(header-cell) {
    background-color: #f1f5f9;
    font-weight: 600;
    text-align: center;
}

.grid-tesoreria::part(body-cell) {
    border-bottom: 1px solid #e5e7eb;
}

/* =====================================================
   UTILIDADES
   ===================================================== */

.verde {
    background: #9fd18b;
    padding: 4px 8px;
    font-weight: bold;
}

.amarillo {
    background: #ffe066;
    padding: 4px 8px;
    font-weight: bold;
}

.rojo {
    background: #f28b82;
    padding: 4px 8px;
    font-weight: bold;
}

.celda-verde {
    background-color: #d4edda;
}

.celda-amarilla {
    background-color: #fff3cd;
}

.celda-roja {
    background-color: #ffcccc;
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 120px);
}

/* =====================================================
   DASHBOARD CARDS
   ===================================================== */

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.dashboard-card {
    background: white;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    padding: 16px;
    box-shadow: var(--shadow-soft);
    transition: all .15s ease;
    display: flex;
    flex-direction: column;
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.dashboard-card-title {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 6px;
}

.dashboard-card-value {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
}

.dashboard-card-sub {
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
}

/* =====================================================
   GRID SAAS
   ===================================================== */

.grid-saas {
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    --lumo-header-background-color: #f1f5f9;
    --lumo-row-hover-color: #f9fafb;
}

.grid-saas::part(header-cell) {
    background: linear-gradient(
        180deg,
        var(--natursoft-primary),
        var(--natursoft-primary-dark)
    );
    color: white;
    font-weight: 600;
    font-size: 13px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--natursoft-primary-dark);
}

.grid-saas::part(body-cell) {
    font-size: 13px;
    border-bottom: 1px solid #f1f5f9;
}

.grid-saas::part(row):hover {
    background: #eef5f8;
}

.grid-saas::part(row):nth-child(even) {
    background: #fbfdfe;
}

.form-big::part(input-field) {
    min-height: 46px;
    font-size: 15px;
}

.form-big {
    font-size: 15px;
}

.teso-ok {
    background-color: rgba(34, 197, 94, 0.14);
}

.teso-warning {
    background-color: rgba(234, 179, 8, 0.16);
}

.teso-error {
    background-color: rgba(239, 68, 68, 0.14);
}

.teso-legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.teso-ok-dot {
    background-color: #22c55e;
}

.teso-warning-dot {
    background-color: #eab308;
}

.teso-error-dot {
    background-color: #ef4444;
}

.dashboard-card-value.saldo-positivo,
.saldo-positivo {
    color: #16a34a;
    font-weight: 700;
}

.dashboard-card-value.saldo-negativo,
.saldo-negativo {
    color: #dc2626;
    font-weight: 700;
}

.dashboard-card-value.saldo-cero,
.saldo-cero {
    color: #6b7280;
    font-weight: 600;
}

/* =====================================================
   LOGIN
   ===================================================== */

.login-background {
    min-height: 100vh;
    width: 100%;
    background:
        linear-gradient(135deg, rgba(31,111,139,0.10), rgba(21,90,115,0.06)),
        #f8fafc;
}

.login-card {
    background: #ffffff;
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 28px;
    max-width: 380px;
    width: 100%;
    box-sizing: border-box;
}

.login-logo {
    max-width: 220px;
    height: auto;
    margin-bottom: 8px;
}
vaadin-grid.grid-saas::part(fila-pendiente-cobro),
vaadin-grid.grid-saas::part(fila-pendiente-cobro-cell) {
    background-color: #eff6ff;
}

vaadin-grid.grid-saas::part(fila-cobro-parcial),
vaadin-grid.grid-saas::part(fila-cobro-parcial-cell) {
    background-color: #fef3c7;
}

vaadin-grid.grid-saas::part(fila-cobro-vencido),
vaadin-grid.grid-saas::part(fila-cobro-vencido-cell) {
    background-color: #fef2f2;
}

vaadin-grid.grid-saas::part(fila-cobrada),
vaadin-grid.grid-saas::part(fila-cobrada-cell) {
    background-color: #f0fdf4;
}