/* styles.css - Hoja de estilos principal completa */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

:root {
    --case-brand: #559853;
    --case-brand-dark: #457843;
    --case-brand-light: rgba(85, 152, 83, 0.1);
    --case-brand-border: #c8e6c7;
    --case-error: #991b1b;
    --case-error-dark: #7f1d1d;
    --case-error-light: rgba(153, 27, 27, 0.1);
    --case-error-border: #fecaca;
    --case-bg-wash: rgba(255, 255, 255, 0.15);
    --case-bg-image: url('/bg.jpg');
    --case-header: #282A2E;
}

/* ====== RESET Y BASE ====== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Asegurar texto oscuro en todos los campos de entrada */
input, textarea, select {
    color: #1a1a1a !important;
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #333;
    line-height: 1.6;
    min-height: 100vh;
    /* El fondo va en html (ver bloque al final). body.page-hub usa flex y rompe fixed en body. */
    background: transparent;
}




.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* ====== COMPONENTES GLASS MORPHISM ====== */
.glass {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    padding: 30px;
    margin: 20px 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.glass:hover {
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
}

.transparente {
    padding: 30px;
    margin: 20px 0;
}

/* ====== HEADER UNIFICADO CASE HUB ====== */
.case-header {
    background: transparent;
    padding: 18px 0;
    margin-bottom: 20px;
    position: relative;
    z-index: 1000;
}

.case-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.case-header-brand {
    color: #1a1a1a;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -0.02em;
}

.case-header-brand:hover {
    color: #333;
}

.case-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.case-header-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #1a1a1a;
    padding: 4px 8px 4px 4px;
    border-radius: 999px;
    transition: background 0.2s ease;
    max-width: min(220px, 42vw);
}

.case-header-profile:hover {
    background: rgba(0, 0, 0, 0.06);
}

.case-header-profile-name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.case-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.case-header-avatar-fallback {
    background: var(--case-brand);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.case-nav-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    margin-bottom: 12px;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.case-nav-profile:hover {
    background: rgba(0, 0, 0, 0.05);
}

.case-nav-profile-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.case-nav-profile-text strong {
    font-size: 14px;
    color: #1a1a1a;
    text-transform: uppercase;
}

.case-nav-profile-text small {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.case-nav-avatar {
    width: 40px;
    height: 40px;
}

.perfil-card {
    max-width: 520px;
    margin: 0 auto;
    padding: 28px 32px;
}

.perfil-card h1 {
    margin: 0 0 8px;
    font-size: 22px;
}

.perfil-subtitle {
    color: #64748b;
    margin: 0 0 24px;
    font-size: 14px;
}

.perfil-form .form-group {
    margin-bottom: 20px;
}

.perfil-photo-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
}

.perfil-photo-preview img,
.perfil-avatar-lg {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
}

.perfil-avatar-lg.case-header-avatar-fallback {
    font-size: 32px;
}

.perfil-delete-photo {
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
}

.perfil-card .form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 28px;
    padding: 0;
    background: none;
    border: none;
    backdrop-filter: none;
    text-align: left;
}

.perfil-card .form-actions .btn {
    margin: 0;
    min-width: auto;
}

.ajustes-section {
    margin-top: 8px;
}

.ajustes-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: 600;
    color: #334155;
}

.ajustes-section-title .material-symbols-outlined {
    font-size: 22px;
    color: var(--case-brand);
}

.case-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #1a1a1a;
    padding: 6px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.case-burger:hover {
    background: rgba(0, 0, 0, 0.06);
}

.case-burger-icon {
    font-size: 28px !important;
}

.case-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1100;
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
}

.case-nav-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.case-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: min(300px, 88vw);
    height: 100vh;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s ease;
}

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

.case-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.case-nav-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #444;
}

.case-nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #1a1a1a;
    padding: 4px;
    border-radius: 6px;
}

.case-nav-close:hover {
    background: rgba(0, 0, 0, 0.06);
}

.case-nav-list {
    list-style: none;
    margin: 0;
    padding: 12px 10px;
    flex: 1;
    overflow-y: auto;
}

.case-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.case-nav-link .material-symbols-outlined {
    font-size: 22px;
    color: #444;
}

.case-nav-link:hover {
    background: rgba(85, 152, 83, 0.1);
}

.case-nav-link.is-active {
    background: rgba(85, 152, 83, 0.15);
    font-weight: 600;
}

.case-nav-footer {
    padding: 16px 20px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.case-nav-user {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.case-nav-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    color: #991b1b;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.case-nav-logout:hover {
    background: rgba(153, 27, 27, 0.08);
}

body.case-nav-open {
    overflow: hidden;
}

body.page-hub .case-header {
    flex-shrink: 0;
    margin-bottom: 0;
}

body.page-admin-presupuestos .case-header-inner,
body.page-tarifario .case-header-inner {
    max-width: 1440px;
}

/* Legacy — mantener compatibilidad mínima */
.admin-header,
.hub-header {
    display: none;
}

.hub-home {
    max-width: 900px;
    margin: 40px auto;
}

body.page-hub {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.page-hub .hub-home {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
    padding: 20px 32px;
}

body.page-hub .hub-grid-index {
    display: grid;
    grid-template-columns: repeat(6, 148px);
    gap: 14px;
    width: max-content;
    max-width: none;
    margin: 0 auto;
    justify-content: center;
}

body.page-hub .hub-grid-index .hub-card-group {
    display: flex;
    gap: 14px;
    grid-column: span 2;
}

body.page-hub .hub-grid-index .hub-card {
    width: 148px;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
    border-radius: 8px;
}

body.page-hub .hub-grid-index .hub-card-icon {
    margin-bottom: 10px;
}

body.page-hub .hub-grid-index .hub-card-icon .material-symbols-outlined {
    font-size: 40px;
}

body.page-hub .hub-grid-index .hub-card h3 {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
    color: #1a1a1a;
}

@media (max-width: 767px) {
    .case-header-profile-name {
        display: none;
    }

    .case-header-profile {
        padding: 2px;
    }

    body.page-hub {
        min-height: auto;
        display: block;
    }

    body.page-hub .case-header {
        margin-bottom: 22px;
    }

    body.page-hub .hub-home {
        display: block;
        margin: 16px auto 32px;
        padding: 20px;
        max-width: 100%;
    }

    body.page-hub .hub-grid-index {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        max-width: 340px;
    }

    body.page-hub .hub-grid-index .hub-card-group {
        grid-column: span 2;
        justify-content: center;
    }

    body.page-hub .hub-grid-index .hub-card {
        max-width: 148px;
    }

    body.page-hub .hub-grid-index .hub-card-group .hub-card {
        flex: 1;
        max-width: 148px;
    }

    body.page-hub .hub-grid-index .hub-card h3 {
        font-size: 12px;
    }
}

.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.hub-card {
    display: block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 28px 22px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    text-align: center;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
    cursor: pointer;
}

.hub-card:hover {
    border-color: var(--case-brand);
    box-shadow: 0 10px 32px rgba(85, 152, 83, 0.22);
    transform: translateY(-2px);
}

.hub-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.hub-card-icon .material-symbols-outlined {
    font-size: 48px;
    color: var(--case-brand);
}

.hub-card h3 {
    color: #333;
    margin: 0 0 8px;
    font-size: 18px;
}

.hub-card p {
    color: #666;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}

.hub-placeholder-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px);
    padding: 32px 20px;
}

.hub-placeholder-card {
    max-width: 480px;
    width: 100%;
    text-align: center;
    padding: 48px 36px;
}

.hub-placeholder-icon .material-symbols-outlined {
    font-size: 64px;
    color: var(--case-brand);
}

.hub-placeholder-card h1 {
    margin: 16px 0 12px;
    color: #333;
}

.hub-placeholder-badge {
    display: inline-block;
    margin: 0 0 16px;
    padding: 8px 20px;
    border-radius: 999px;
    background: rgba(85, 152, 83, 0.15);
    color: var(--case-brand-dark);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
}

.hub-placeholder-text {
    color: #666;
    margin-bottom: 28px;
}

/* Gestor de presupuestos: layout más ancho */
body.page-admin-presupuestos .container,
body.page-admin-presupuestos .admin-nav {
    max-width: 1440px;
}

body.page-admin-presupuestos .budget-table th,
body.page-admin-presupuestos .budget-table td {
    padding: 12px 14px;
}

body.page-admin-presupuestos .budget-date-number-cell {
    white-space: nowrap;
}

body.page-admin-presupuestos .budget-date {
    display: block;
    font-weight: 700;
    margin-bottom: 4px;
}

body.page-admin-presupuestos .budget-number-line {
    font-size: 13px;
    line-height: 1.35;
}

body.page-admin-presupuestos .budget-number-label {
    color: #666;
    font-weight: 600;
    margin-right: 4px;
}

body.page-admin-presupuestos .action-buttons {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

body.page-admin-presupuestos .action-buttons-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.page-admin-presupuestos .budget-table td:last-child {
    min-width: 220px;
}

.admin-nav .user-info {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}



.admin-nav .user-info a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.admin-nav .user-info a:hover {
    color: white;
}

/* ====== ESTADÍSTICAS ====== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-number {
    font-size: 28px;
    font-weight: bold;
    color: #559853;
    margin-bottom: 5px;
}

.stat-label {
    color: #666;
    font-size: 14px;
}

.stat-card-approved .stat-number {
    color: #457843;
}

.stat-card-expired .stat-number {
    color: #991b1b;
}

.currency-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.currency-stat {
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.currency-stat .amount {
    font-weight: bold;
    font-size: 14px;
}

.currency-stat .currency {
    font-size: 12px;
    opacity: 0.8;
}

/* ====== TABLA ADMIN ====== */
.table-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
    flex-wrap: wrap;
}

.search-box {
    flex: 1;
    max-width: 400px;
    position: relative;
}

.search-box input {
    width: 100%;
    padding: 12px 40px 12px 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

.search-box .search-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
}

.table-wrapper {
    overflow-x: auto;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.budget-table {
    width: 100%;
    background: white;
    border-collapse: collapse;
    border-radius: 15px;
    overflow: hidden;
}

.budget-table th {
    background: linear-gradient(135deg, #559853, #457843);
    color: white;
    padding: 15px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.budget-table td {
    padding: 15px;
    border-bottom: 1px solid #f1f1f1;
    font-size: 14px;
}

.budget-table tbody tr:hover {
    background: rgba(85, 152, 83, 0.05);
    transform: scale(1.001);
    transition: all 0.2s ease;
}

.budget-table tbody tr:last-child td {
    border-bottom: none;
}

.budget-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.client-info {
    color: #666;
    font-size: 12px;
}

.budget-id {
    font-family: monospace;
    background: #f8f9fa;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.budget-id:hover {
    background: #e9ecef;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active {
    background: #e8f4e7;
    color: var(--case-brand);
}

.status-expired {
    background: var(--case-error);
    color: #fff;
}

.status-approved {
    background: var(--case-brand);
    color: #fff;
}

.currency-totals {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.currency-total {
    font-size: 12px;
    font-weight: bold;
}

.currency-total.ars { color: var(--case-brand); }
.currency-total.usd { color: #3b82f6; }
.currency-total.eur { color: #8b5cf6; }

.action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

.material-symbols-outlined.file-type-icon {
    font-size: 40px;
}

.search-box .search-icon .material-symbols-outlined {
    font-size: 20px;
}

.message-with-icon {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.empty-state h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.action-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.action-btn .material-symbols-outlined {
    font-size: 17px;
}

.action-btn.btn-approve .material-symbols-outlined,
.action-btn.btn-delete .material-symbols-outlined {
    font-size: 18px;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-view {
    background: #4a5568;
    color: #fff;
}

.btn-view:hover {
    background: #3d4654;
}

.btn-edit {
    background: #e2c454;
    color: #4a4218;
}

.btn-edit:hover {
    background: #d4b63f;
}

.btn-delete {
    background: var(--case-error);
    color: white;
}

.btn-delete:hover {
    background: var(--case-error-dark);
}

.btn-approve {
    background: var(--case-brand);
    color: white;
}

.btn-approve:hover {
    background: var(--case-brand-dark);
}

.btn-tarifario {
    background: #3b82f6;
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.btn-tarifario:hover {
    background: #2563eb;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.42);
    filter: none;
}

.btn-copy {
    background: #8b5cf6;
    color: white;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.empty-state h3 {
    margin-bottom: 10px;
    color: #333;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    gap: 10px;
}

.pagination a,
.pagination span {
    padding: 8px 15px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pagination a {
    background: rgba(255, 255, 255, 0.2);
    color: #333;
}

.pagination a:hover {
    background: #559853;
    color: white;
}

.pagination .current {
    background: #559853;
    color: white;
}

/* ====== FORMULARIOS ====== */
.form-header {
    text-align: center;
    margin-bottom: 40px;
}

.form-header h1 {
    color: #559853;
    margin-bottom: 10px;
}

.form-header .breadcrumb {
    color: #666;
    font-size: 14px;
}

.form-header .breadcrumb a {
    color: #559853;
    text-decoration: none;
}

.form-section {
    margin: 40px 0;
}

.form-section-title {
    background: #6d6d6d;
    color: white;
    padding: 15px 25px;
    border-radius: 10px;
    font-weight: bold;
    margin-bottom: 25px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.form-group label .required {
    color: #559853;
    margin-left: 4px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: white;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #559853;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.file-upload {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 100%;
}

.file-upload input[type="file"] {
    position: absolute;
    left: -9999px;
}

.file-upload-label {
    display: block;
    padding: 12px 15px;
    border: 2px dashed #cbd5e0;
    border-radius: 8px;
    text-align: center;
    background: #f8fafc;
    color: #64748b;
    transition: all 0.3s ease;
    cursor: pointer;
}

.file-upload:hover .file-upload-label {
    border-color: #559853;
    background: rgba(85, 152, 83, 0.05);
}

.file-preview {
    margin-top: 10px;
    text-align: center;
}

.file-preview img {
    max-width: 150px;
    max-height: 100px;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
}

/* ====== COMPONENTES FORM ====== */
.components-container {
    border: 2px dashed #cbd5e0;
    border-radius: 12px;
    padding: 20px;
    background: #f8fafc;
}

.component-item {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid #e2e8f0;
    position: relative;
}

.component-item .remove-component {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #559853;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.component-header {
    font-weight: bold;
    color: #559853;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #c8e6c7;
}

.component-amount-currency {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}

.currency-select {
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    font-size: 14px;
}

.add-component {
    width: 100%;
    padding: 15px;
    border: 2px dashed var(--case-brand);
    background: rgba(16, 185, 129, 0.05);
    color: var(--case-brand);
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-component:hover {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--case-brand);
}

.total-preview {
    background: #559853;
    color: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    margin: 20px 0;
    font-size: 16px;
    font-weight: bold;
}

.form-actions {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    margin-top: 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.form-actions .btn {
    margin: 0 10px;
    min-width: 150px;
}

.btn-save {
    background: var(--case-brand);
}

.btn-save:hover {
    background: var(--case-brand-dark);
}

.char-counter {
    font-size: 12px;
    color: #64748b;
    text-align: right;
    margin-top: 4px;
}

.validation-error {
    color: var(--case-error);
    font-size: 12px;
    margin-top: 4px;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    margin-bottom: 30px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #559853;
    width: 0%;
    transition: width 0.5s ease;
}

/* ====== NOTIFICACIONES ====== */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 25px;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    z-index: 1000;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.notification-success {
    background: var(--case-brand);
}

.notification-error {
    background: var(--case-error);
}

.notification-info {
    background: #3b82f6;
}

/* ====== HEADER VENCIDO ====== */
.approved-header,
.expired-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.approved-header {
    background: linear-gradient(135deg, var(--case-brand-dark), #3a6340);
    color: white;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
    animation: pulseApproved 2s infinite;
    box-shadow: 0 4px 15px rgba(69, 120, 67, 0.35);
}

@keyframes pulseApproved {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}

.expired-header {
    background: linear-gradient(135deg, #ff4757, #c44569);
    color: white;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
    animation: pulseRed 2s infinite;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3);
}

@keyframes pulseRed {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* ====== HEADER DEL PRESUPUESTO ====== */
.header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    gap: 30px;
    flex-wrap: wrap;
}

.logo-section {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.client-section {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.budget-title {
    text-align: center;
    flex: 2;
    min-width: 300px;
}
.budget-title-lista {
    flex: 2;
    min-width: 300px;
    font-weight: 800;
}

.budget-title h1 {
    color: #559853;
    font-size: 28px;
    font-weight: 700;
    margin-top: 25px;
}

.budget-title h2 {
    color: #333;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px;
}

.logo-placeholder {
    width: 150px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: gray;
    font-size: 12px;
    text-align: right;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.logo-container {
    width: 150px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.logoemisor-container {
    width: auto;
    min-width: 0;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}
.logologin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

.logo-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.logoemisor-container img.logo-case {
    width: 140px;
    height: auto;
    max-height: 112px;
    object-fit: contain;
}

.budget-number {
    background: #878787;
    color: white;
    padding: 8px 15px;
    border-radius: 10px;
    font-weight: bold;
    display: inline-block;
    margin: 15px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.budget-date {
    color: #666;
    font-size: 14px;
    font-weight: 500;
}

.company-info,
.client-info {
    margin-top: 15px;
    font-size: 12px;
    color: #555;
    line-height: 1.4;
}

/* ====== SECCIONES ====== */
.section {
    margin: 40px 0;
}

.section-title {
    color: #b7b7b7;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #a6a6a6;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 50px;
    height: 3px;
    border-radius: 2px;
}

/* ====== DESCRIPCIÓN DEL PROYECTO ====== */
.project-description {
    margin: 25px 0;
}

.project-item {
    margin-bottom: 25px;
}

.project-item h3 {
    color: #559853;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.project-item h4 {
    color: #559853;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.project-item p {
    color: #555;
    line-height: 1.6;
    text-align: left;
}

.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 25px 0;
}

/* ====== COMPONENTES ECONÓMICOS ====== */
.components-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    align-items: start;
    margin: 25px 0;
}

.component-box {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}

.component-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #559853;
    border-radius: 12px 12px 0 0;
}

.component-box:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.25);
}

.component-currency-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(85, 152, 83, 0.8);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.component-currency-badge.ars { background: rgba(5, 150, 105, 0.8); }
.component-currency-badge.usd { background: rgba(59, 130, 246, 0.8); }
.component-currency-badge.eur { background: rgba(139, 92, 246, 0.8); }

.component-title {
    font-weight: bold;
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
    padding-right: 60px;
}

.component-description {
    color: #666;
    margin-bottom: 15px;
    line-height: 1.5;
}

.component-amount {
    font-size: 20px;
    font-weight: bold;
    color: #4a4a4a;
    text-align: right;
    padding: 15px;
    border-top: 1px solid rgba(201, 201, 201, 0.3);
    background: rgba(255, 255, 255, 0.1);
    margin: -20px -20px -20px -20px;
    margin-top: 20px;
    border-radius: 0 0 12px 12px;
    font-family: 'Montserrat', monospace;
}

.component-amount.negative {
    color: var(--case-error);
}

/* ====== TOTALES POR MONEDA ====== */
.currency-totals-section {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 25px;
    border: 2px solid rgba(85, 152, 83, 0.2);
    margin: 20px 0;
}

.currency-totals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.currency-total-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.currency-total-card.ars {
    border-left: 4px solid var(--case-brand);
}

.currency-total-card.usd {
    border-left: 4px solid #3b82f6;
}

.currency-total-card.eur {
    border-left: 4px solid #8b5cf6;
}

.currency-name {
    font-size: 14px;
    font-weight: bold;
    color: #666;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.currency-amount {
    font-size: 28px;
    font-weight: bold;
    color: #414141;
}

.currency-code {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

.total-section-multicurrency {
    background:#d6d6d6;
    color: white;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    margin: 30px 0;
}

.total-section-multicurrency .section-title {
    color: rgb(100, 100, 100);
    margin-bottom: 20px;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hidden-currency {
    display: none;
}

/* ====== SECCIÓN TOTAL LEGACY ====== */
.total-section {
    background: #8f8f8f;
    color: white;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    margin: 40px 0;
    position: relative;
    overflow: hidden;
}

.total-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.total-section div:first-child {
    font-size: 16px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.9;
}

.total-amount {
    font-size: 32px;
    font-weight: bold;
    margin: 15px 0;
    font-family: 'Montserrat', monospace;
}

/* ====== CONDICIONES COMERCIALES ====== */
.commercial-terms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin: 25px 0;
}

.term-box {
    background: rgba(255, 255, 255, 0.15);
    padding: 25px;
    border-radius: 5px;
    border-left: 5px solid #559853;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.term-box:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.2);
}

.term-title {
    font-weight: bold;
    color: #559853;
    margin-bottom: 12px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.term-box div:last-child {
    color: #555;
    line-height: 1.5;
}

/* ====== INFORMACIÓN DE VIGENCIA ====== */
.validity-info {
    background: rgba(16, 185, 129, 0.1);
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 5px;
    padding: 20px;
    margin: 25px 0;
    text-align: center;
    transition: all 0.3s ease;
}

.validity-expired {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    animation: pulseRed 2s infinite;
}

.validity-approved {
    background: rgba(69, 120, 67, 0.15);
    border-color: rgba(69, 120, 67, 0.4);
    color: var(--case-brand-dark);
}

/* ====== BOTONES ====== */
.btn {
    background: #559853;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    text-align: center;
    margin: 10px 5px;
    box-shadow: 0 4px 15px rgba(85, 152, 83, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn:hover {
    box-shadow: 0 15px 35px rgba(85, 152, 83, 0.4);
    filter: brightness(1.1);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: #333;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* ====== FORMULARIOS BASE ====== */
.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.9);
    color: #1a1a1a;
    transition: all 0.3s ease;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #559853;
    box-shadow: 0 0 0 4px rgba(85, 152, 83, 0.1);
    background: white;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}
.btn-share {
    background: #8c8c8c;
    color: white;
}

.botones-container {
  display: flex; /* Habilita Flexbox */
  justify-content: center; /* Centra los divs horizontalmente */
  align-items: center; /* Centra los divs verticalmente (útil si tienen diferentes alturas) */
  gap: 10px; /* Agrega un espacio de 10px entre cada div */
  padding: 10px;
}


/* ====== FORMULARIO DE ACCESO ====== */
.access-form {
    max-width: 450px;
    margin: 50px auto;
    text-align: center;
}
        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .login-header h1 {
            color: white;
            font-size: 24px;
            margin-bottom: 10px;
        }

.login-header h2 {
    color: gray;
    margin-bottom: 15px;
    font-size: 28px;
    font-weight: 700;
}

.login-header p {
    color: gray;
    margin-bottom: 30px;
    font-size: 14px;
}

.input-help {
    font-size: 12px;
    color: gray;
    margin-top: 5px;
}

        .login-container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(15px);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.2);
            width: 100%;
            max-width: 400px;
            
        }
        
        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .login-header h1 {
            color:gray;
            font-size: 24px;
            margin-bottom: 10px;
        }
        
        .login-header p {
            color: gray;
            font-size: 14px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            color: gray;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .form-group input {
            width: 100%;
            padding: 15px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            color:gray;
            font-size: 16px;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }
        
        .form-group input:focus {
            outline: none;
            border-color: #559853;
            box-shadow: 0 0 0 3px rgba(85, 152, 83, 0.2);
            background: rgba(255, 255, 255, 0.15);
        }
        
        .form-group input::placeholder {
            color: rgba(131, 131, 131, 0.6);
        }

        /* Toggle Switch Styles */
        .toggle-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
        }

        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
            margin: 0;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: 0.4s;
            border-radius: 34px;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: 0.4s;
            border-radius: 50%;
        }

        .toggle-switch input:checked + .toggle-slider {
            background-color: var(--case-brand);
        }

        .toggle-switch input:focus + .toggle-slider {
            box-shadow: 0 0 1px var(--case-brand);
        }

        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(26px);
        }

        .toggle-label {
            flex: 1;
        }

        .toggle-label span {
            font-weight: 500;
            color: #333;
            font-size: 16px;
        }
        
        .btn-login {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #559853, #457843);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 20px;
        }
        
        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(85, 152, 83, 0.3);
        }
        
        .error-message {
            background: rgba(239, 68, 68, 0.2);
            border: 1px solid rgba(239, 68, 68, 0.5);
            color: white;
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 20px;
            text-align: center;
            font-size: 14px;
        }
        
        .back-link {
            text-align: center;
            margin-top: 20px;
        }
        
        .back-link a {
            color: gray;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s ease;
        }
        
        .back-link a:hover {
            color:rgb(41, 41, 41);
        }
        
        .security-info {
            margin-top: 30px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            font-size: 12px;
            color: gray;
        }
        
        .password-strength {
            margin-top: 5px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
        }
        
        .login-attempts {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.1);
            padding: 10px 15px;
            border-radius: 8px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.8);
        }

        /* Estilos para adjuntos múltiples */
        .attachments-preview {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 15px;
            max-height: 300px;
            overflow-y: auto;
            padding: 10px 0;
        }
        
        .attachment-item {
            background: white;
            border-radius: 8px;
            padding: 15px;
            border: 2px solid #e2e8f0;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .attachment-item:hover {
            border-color: #559853;
            box-shadow: 0 4px 15px rgba(85, 152, 83, 0.1);
        }
        
        .attachment-item img {
            max-width: 100%;
            max-height: 80px;
            object-fit: cover;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        
        .file-icon {
            font-size: 40px;
            margin-bottom: 10px;
            opacity: 0.7;
        }
        
        .attachment-info {
            width: 100%;
        }
        
        .attachment-name {
            font-size: 12px;
            font-weight: bold;
            color: #333;
            margin-bottom: 4px;
            word-break: break-word;
        }
        
        .attachment-size {
            font-size: 11px;
            color: #666;
        }
        
        .remove-attachment {
            position: absolute;
            top: 5px;
            right: 5px;
            background: #559853;
            color: white;
            border: none;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .attachment-item:hover .remove-attachment {
            opacity: 1;
        }
        
        @media (max-width: 768px) {
            .attachments-preview {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                gap: 10px;
            }
        }

        .existing-attachments {
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
    background: #f8fafc;
}

.existing-attachment {
    position: relative;
}

.existing-attachment .remove-attachment {
    background: #559853;
    opacity: 1;
}

.existing-attachment:hover .remove-attachment {
    opacity: 1;
}

.delete-notice {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.attachment-item.marked-for-deletion {
    opacity: 0.5;
    border: 2px dashed #559853 !important;
}

.attachment-item.marked-for-deletion .remove-attachment {
    background: var(--case-brand);
}

/* Separación visual entre adjuntos existentes y nuevos */
#newAttachmentsPreview {
    border-top: 1px dashed #cbd5e0;
    padding-top: 15px;
}

#newAttachmentsPreview:empty {
    border-top: none;
    padding-top: 0;
}

/* ====== ESTILOS PARA ADJUNTOS DEL PROYECTO (INDEX.PHP) ====== */
.project-attachments {
    margin-top: 30px;
}

.project-attachments h3 {
    color: #559853;
    font-size: 18px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.project-images {
    margin-bottom: 30px;
}

.image-row {
    display: grid;
    gap: 15px;
    margin-bottom: 15px;
    justify-content: center;
}

.image-row.columns-1 {
    grid-template-columns: 1fr;
    max-width: 60%;
    margin: 0 auto 15px auto;
}

.image-row.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.image-row.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.image-row.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.image-item {
    text-align: center;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.image-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.image-item img:hover {
    transform: scale(1.02);
}

.image-caption {
    padding: 12px;
    font-size: 12px;
    color: #666;
    font-weight: 500;
    word-break: break-word;
}

.project-files {
    margin-top: 20px;
}

.project-files h4 {
    color: #666;
    font-size: 16px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.files-list {
    display: grid;
    gap: 10px;
}

.file-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.file-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.file-icon {
    font-size: 24px;
    margin-right: 15px;
    min-width: 40px;
    text-align: center;
}

.file-info {
    flex: 1;
}

.file-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    word-break: break-word;
}

.file-size {
    font-size: 12px;
    color: #666;
}

.file-download {
    font-size: 20px;
    text-decoration: none;
    color: #559853;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.file-download:hover {
    background: rgba(85, 152, 83, 0.1);
    transform: scale(1.1);
}

/* Modal para imágenes */
.image-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(5px);
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 95vw;
    max-height: 95vh;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content img {
    max-width: 95vw;
    max-height: 95vh;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
}

.modal-download {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    opacity: 0;
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

.modal-content:hover .modal-download {
    opacity: 1;
}

.modal-download:hover {
    background: rgba(85, 152, 83, 0.9);
    transform: scale(1.05);
}

.period-text {
    color: #559853;
    font-weight: normal;
    margin-left: 8px;
    font-size: 16px;
}

.tax-text {
    color: #666;
    font-weight: normal;
    margin-left: 4px;
    font-size: 14px;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: rgba(85, 152, 83, 0.8);
    transform: scale(1.1);
}

/* Responsive para adjuntos del proyecto */
@media (max-width: 768px) {
    .image-row.columns-1 {
        max-width: 100%;
    }
    
    .image-row.columns-2,
    .image-row.columns-3,
    .image-row.columns-4 {
        grid-template-columns: 1fr;
    }
    
    .image-item img {
        height: 250px;
    }
    
    .file-item {
        padding: 12px;
    }
    
    .file-icon {
        font-size: 20px;
        margin-right: 12px;
        min-width: 35px;
    }
}

@media print {
    .project-attachments {
        page-break-inside: avoid;
    }
    
    .image-item {
        break-inside: avoid;
        margin-bottom: 10px;
    }
    
    .file-download {
        display: none;
    }
}

/* ====== ESTILOS PARA FORMULARIO DE PRESUPUESTO (BUDGET_FORM.PHP) ====== */
.form-header {
    text-align: center;
    margin-bottom: 40px;
}

.form-header h1 {
    color: #559853;
    margin-bottom: 10px;
}

.form-header .breadcrumb {
    color: #666;
    font-size: 14px;
}

.form-header .breadcrumb a {
    color: #559853;
    text-decoration: none;
}

.form-section {
    margin: 40px 0;
}

.form-section-title {
    background: #6d6d6d;
    color: white;
    padding: 15px 25px;
    border-radius: 10px;
    font-weight: bold;
    margin-bottom: 25px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.form-group label .required {
    color: #559853;
    margin-left: 4px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    background: white;
    color: #1a1a1a;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #559853;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.file-upload {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 100%;
}

.file-upload input[type="file"] {
    position: absolute;
    left: -9999px;
}

.file-upload-label {
    display: block;
    padding: 12px 15px;
    border: 2px dashed #cbd5e0;
    border-radius: 8px;
    text-align: center;
    background: #f8fafc;
    color: #64748b;
    transition: all 0.3s ease;
    cursor: pointer;
}

.file-upload:hover .file-upload-label {
    border-color: #559853;
    background: rgba(85, 152, 83, 0.05);
}

.file-preview {
    margin-top: 10px;
    text-align: center;
}

.file-preview img {
    max-width: 150px;
    max-height: 100px;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
}

.attachments-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.attachment-item {
    position: relative;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
}

.attachment-item:hover {
    border-color: #559853;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.attachment-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

.attachment-info {
    margin-top: 10px;
}

.attachment-name {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    word-break: break-word;
    line-height: 1.2;
}

.attachment-size {
    font-size: 11px;
    color: #666;
}

.remove-attachment {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #559853;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

.remove-attachment:hover {
    background: #dc2626;
    transform: scale(1.1);
}

.file-upload-container {
    margin-bottom: 20px;
}

.components-container {
    border: 2px dashed #cbd5e0;
    border-radius: 12px;
    padding: 20px;
    background: #f8fafc;
}

.component-item {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid #e2e8f0;
    position: relative;
}

.component-item .remove-component {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #559853;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.component-header {
    font-weight: bold;
    color: #559853;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #c8e6c7;
}

.component-amount-currency {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}

.currency-select {
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    font-size: 14px;
}

.add-component {
    width: 100%;
    padding: 15px;
    border: 2px dashed var(--case-brand);
    background: rgba(16, 185, 129, 0.05);
    color: var(--case-brand);
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-component:hover {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--case-brand);
}

.total-preview {
    background: #559853;
    color: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    margin: 20px 0;
    font-size: 16px;
    font-weight: bold;
}

.currency-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.currency-total {
    background: rgba(255, 255, 255, 0.2);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.form-actions {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    margin-top: 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.form-actions .btn {
    margin: 0 10px;
    min-width: 150px;
}

.btn-save {
    background: var(--case-brand);
}

.btn-save:hover {
    background: var(--case-brand-dark);
}

.char-counter {
    font-size: 12px;
    color: #64748b;
    text-align: right;
    margin-top: 4px;
}

.validation-error {
    color: var(--case-error);
    font-size: 12px;
    margin-top: 4px;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    margin-bottom: 30px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #559853;
    width: 0%;
    transition: width 0.5s ease;
}

/* ====== ESTILOS PARA IMPRESIÓN (PRINT STYLES) ====== */
@media print {
    .no-print { 
        display: none !important; 
    }
    
    body { 
        background: white !important; 
        color: black !important; 
    }
    
    .glass { 
        background: white !important; 
        border: 1px solid #ddd !important; 
        box-shadow: none !important; 
    }
    
    .expired-header { 
        background: #ff4757 !important; 
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ====== ESTILOS PARA PANEL DE ADMINISTRACIÓN (ADMIN_PANEL.PHP) ====== */
.admin-header {
    background: var(--case-header);
    padding: 20px 0;
    margin-bottom: 30px;
}

.admin-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.admin-nav h1 {
    color: white;
    margin: 0;
    font-size: 24px;
}

.admin-nav .user-info {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-number {
    font-size: 28px;
    font-weight: bold;
    color: #559853;
    margin-bottom: 5px;
}

.stat-label {
    color: #666;
    font-size: 14px;
}

.stat-card-approved .stat-number {
    color: #457843;
}

.stat-card-expired .stat-number {
    color: #991b1b;
}

.currency-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.currency-stat {
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.currency-stat .amount {
    font-weight: bold;
    font-size: 14px;
}

.currency-stat .currency {
    font-size: 12px;
    opacity: 0.8;
}

.table-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
    flex-wrap: wrap;
}

.search-box {
    flex: 1;
    max-width: 400px;
    position: relative;
}

.search-box input {
    width: 100%;
    padding: 12px 40px 12px 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

.search-box .search-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
}

.table-wrapper {
    overflow-x: auto;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.budget-table {
    width: 100%;
    background: white;
    border-collapse: collapse;
    border-radius: 15px;
    overflow: hidden;
}

.budget-table th {
    background: #6b7280;
    color: white;
    padding: 15px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.budget-table td {
    padding: 15px;
    border-bottom: 1px solid #f1f1f1;
    font-size: 14px;
}

.budget-table tbody tr:hover {
    background: rgba(85, 152, 83, 0.05);
    transform: scale(1.001);
    transition: all 0.2s ease;
}

.budget-table tbody tr:last-child td {
    border-bottom: none;
}

.budget-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.client-info {
    color: #666;
    font-size: 12px;
}

.budget-id {
    font-family: monospace;
    background: #f8f9fa;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.budget-id:hover {
    background: #e9ecef;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active {
    background: #e8f4e7;
    color: var(--case-brand);
}

.status-expired {
    background: var(--case-error);
    color: #fff;
}

.status-approved {
    background: var(--case-brand);
    color: #fff;
}

.currency-totals {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.currency-total {
    font-size: 12px;
    font-weight: bold;
}

.currency-total.ars { color: var(--case-brand); }
.currency-total.usd { color: #3b82f6; }
.currency-total.eur { color: #8b5cf6; }

.action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

.material-symbols-outlined.file-type-icon {
    font-size: 40px;
}

.search-box .search-icon .material-symbols-outlined {
    font-size: 20px;
}

.message-with-icon {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.empty-state h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.action-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.action-btn .material-symbols-outlined {
    font-size: 17px;
}

.action-btn.btn-approve .material-symbols-outlined,
.action-btn.btn-delete .material-symbols-outlined {
    font-size: 18px;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-view {
    background: #4a5568;
    color: #fff;
}

.btn-view:hover {
    background: #3d4654;
}

.btn-edit {
    background: #e2c454;
    color: #4a4218;
}

.btn-edit:hover {
    background: #d4b63f;
}

.btn-delete {
    background: var(--case-error);
    color: white;
}

.btn-delete:hover {
    background: var(--case-error-dark);
}

.btn-approve {
    background: var(--case-brand);
    color: white;
}

.btn-approve:hover {
    background: var(--case-brand-dark);
}

.btn-tarifario {
    background: #3b82f6;
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.btn-tarifario:hover {
    background: #2563eb;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.42);
    filter: none;
}

.btn-copy {
    background: #8b5cf6;
    color: white;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.empty-state h3 {
    margin-bottom: 10px;
    color: #333;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    gap: 10px;
}

.pagination a,
.pagination span {
    padding: 8px 15px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pagination a {
    background: rgba(255, 255, 255, 0.2);
    color: #333;
}

.pagination a:hover {
    background: #559853;
    color: white;
}

.pagination .current {
    background: #559853;
    color: white;
}

/* ====== ESTILOS PARA LOGIN DE ADMINISTRADOR (ADMIN_LOGIN.PHP) ====== */
body.admin-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    /* Mantener el fondo heredado del body base */
}

/* ====== ESTILOS ADICIONALES PARA ELEMENTOS INLINE ====== */
.logo-case {
    width: 140px;
    height: auto;
    max-height: 112px;
    object-fit: contain;
    display: block;
    margin-right: auto;
}

.logologin .logo-case {
    width: 154px;
    max-height: 126px;
    margin: 0 auto;
}

.logo-image {
    max-width: 150px;
    max-height: 150px;
    object-fit: contain;
}

.logo-image-small {
    max-width: 150px;
    max-height: 100px;
    object-fit: contain;
}

.access-key-input {
    text-transform: uppercase;
    text-align: center;
    font-family: monospace;
    font-size: 18px;
    letter-spacing: 2px;
}

.admin-separator {
    margin: 30px 0;
    border: 1px solid rgba(255,255,255,0.2);
}

.text-center {
    text-align: center;
}

.expired-text {
    color: var(--case-error);
    font-weight: bold;
}

.approved-text {
    color: var(--case-brand-dark);
    font-weight: bold;
}

.currency-info-text {
    color: #666;
    font-size: 14px;
    text-align: center;
}

.logo-preview-container {
    position: relative;
    display: inline-block;
}

.logo-preview-image {
    max-width: 150px;
    max-height: 100px;
    object-fit: cover;
    border-radius: 8px;
}

.remove-logo {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #559853;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bullet-info {
    color: #666;
    display: block;
    margin-top: 5px;
}

.bullet-copy {
    max-width: 3ch;
    text-align: center;
}

.project-description-helpers {
    margin-bottom: 16px;
}

.project-description-helpers-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.format-helper-box {
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.bullets-helper-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}

.bullets-helper-box .bullet-info {
    margin-top: 0;
    text-align: center;
}

.bullets-copy-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.format-syntax-guide {
    flex: 1 1 320px;
    max-width: 560px;
}

.format-syntax-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.45;
}

.format-syntax-table th {
    padding: 0 12px 8px 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
}

.format-syntax-table td {
    padding: 10px 12px 0 0;
    vertical-align: middle;
    color: #334155;
}

.format-syntax-table tr:last-child td {
    padding-bottom: 0;
}

.format-syntax-code {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    padding: 3px 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s;
}

.format-syntax-code:hover {
    border-color: var(--case-brand);
    background: var(--case-brand-light);
}

.highlight-symbol {
    font-weight: bold;
    color: #559853;
}

.budget-ultra-bold {
    font-weight: bold;
    font-size: 1.4em;
    text-transform: uppercase;
}

.budget-ultra-bold-green {
    color: var(--case-brand);
}

.budget-content-separator {
    margin: 20px 0;
    padding: 0;
    border: none;
    border-bottom: 1px solid #a6a6a6;
    height: 0;
    position: relative;
}

.budget-content-separator::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--case-brand);
    border-radius: 2px;
}

.budget-multiline-content {
    line-height: 1.6;
    white-space: normal;
}

.budget-multiline-content .budget-content-separator {
    margin: 16px 0;
}

.format-syntax-separator-hint {
    display: inline-block;
    width: 48px;
    vertical-align: middle;
    margin-right: 6px;
    border-bottom: 1px solid #a6a6a6;
    position: relative;
}

.format-syntax-separator-hint::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 20px;
    height: 2px;
    background: var(--case-brand);
    border-radius: 1px;
}

.admin-logout-link {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
}

/* ====== TARIFARIO ====== */
body.page-tarifario .container,
body.page-tarifario .admin-nav {
    max-width: 1320px;
}

.table-actions-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.table-actions-buttons .btn {
    margin: 0;
}

.tarifario-container {
    padding-bottom: 48px;
}

.tarifario-toolbar-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 16px;
    align-items: stretch;
}

.tarifario-toolbar-box {
    padding: 22px 26px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tarifario-toolbar-header {
    margin-bottom: 0;
}

.tarifario-toolbar-header h2 {
    font-size: 16px;
}

.tarifario-toolbar-header p {
    font-size: 12px;
}

.tarifario-topbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}

.tarifario-topbar-actions .tarifario-action-btn {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.2;
    text-transform: none;
    gap: 6px;
    justify-content: center;
}

.tarifario-topbar-actions .tarifario-action-btn .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
}

.btn-tarifario-plantilla {
    background: #3b82f6;
    color: #fff;
    border: none;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.32);
}

.btn-tarifario-plantilla:hover {
    background: #2563eb;
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.38);
    filter: none;
}

.tarifario-btn-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.btn-sm {
    padding: 10px 18px;
    font-size: 12px;
    margin: 0;
}

.tarifario-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

.tarifario-card {
    padding: 26px 28px;
    margin: 16px 0;
}

.tarifario-card-header {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
    align-items: flex-start;
}

.tarifario-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--case-brand-light);
    border: 1px solid var(--case-brand-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--case-brand);
    flex-shrink: 0;
}

.tarifario-card-header h2 {
    margin: 0 0 4px;
    font-size: 18px;
    color: #222;
}

.tarifario-card-header p {
    margin: 0;
    font-size: 13px;
    color: #666;
}

.tarifario-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.tarifario-grid-3 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
}

.tarifario-grid-3 > .form-group {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
}

.tarifario-grid-3 .form-group small {
    display: block;
    font-size: 11px;
    line-height: 1.35;
    margin-top: 6px;
    color: #666;
}

.tarifario-grid-3 .tarifario-stepper {
    max-width: none;
    width: 100%;
}

.tarifario-stepper {
    display: flex;
    align-items: stretch;
    max-width: 220px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.92);
}

.tarifario-stepper input {
    flex: 1;
    border: none;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    padding: 12px;
    min-width: 0;
}

.stepper-btn {
    width: 48px;
    border: none;
    background: var(--case-brand);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    transition: filter 0.2s;
}

.stepper-btn:hover {
    filter: brightness(1.08);
}

.tarifario-slider-wrap input[type="range"] {
    width: 100%;
    accent-color: var(--case-brand);
    height: 8px;
}

.tarifario-slider-labels {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin-top: 10px;
    font-size: 10px;
    color: #888;
    text-align: center;
}

.tarifario-slider-labels span.active {
    color: var(--case-brand);
    font-weight: 700;
}

.tarifario-factor-config {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.tarifario-factor-tiles {
    display: grid;
    gap: 10px;
}

.tarifario-factor-tiles-5 {
    grid-template-columns: repeat(5, 1fr);
}

.tarifario-factor-tiles-4 {
    grid-template-columns: repeat(4, 1fr);
}

.tarifario-factor-tiles-3 {
    grid-template-columns: repeat(3, 1fr);
}

.tarifario-card .tarifario-section {
    margin-top: 28px;
}

.tarifario-card .tarifario-section-first {
    margin-top: 0;
}

.tarifario-card .tarifario-section-cliente {
    margin-top: 40px;
}

.tarifario-segmented-3 .segment-btn {
    flex: 1;
    min-width: 0;
    font-size: 10px;
    line-height: 1.4;
    padding: 10px 8px;
    white-space: normal;
    text-align: center;
}

.tarifario-factor-tiles .config-hint {
    grid-column: 1 / -1;
    margin-bottom: 2px;
}

.tarifario-factor-tiles .factor-config-row {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    margin-bottom: 0;
    padding: 12px 8px;
    gap: 8px;
    min-height: 88px;
}

.tarifario-factor-tiles .factor-config-label {
    font-size: 11px;
    line-height: 1.35;
    font-weight: 600;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.tarifario-factor-tiles-3 .factor-config-row {
    min-height: 0;
}

.tarifario-factor-tiles-3 .factor-config-label {
    font-size: 10px;
    line-height: 1.4;
}

.tarifario-factor-tiles .factor-pct-wrap {
    justify-content: center;
    width: 100%;
}

.tarifario-factor-tiles .factor-pct-wrap input {
    width: 100%;
    max-width: none;
}

.config-hint {
    font-size: 12px;
    color: #888;
    margin: 0 0 10px;
}

.factor-config-label {
    font-size: 13px;
    color: #444;
    flex: 1;
    min-width: 0;
}

.factor-config-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.35);
    transition: background 0.2s;
}

.factor-config-row.is-active {
    background: var(--case-brand-light);
    border: 1px solid var(--case-brand-border);
}

.factor-pct-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

.factor-pct-wrap input {
    width: 72px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    text-align: right;
}

.tarifario-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}

.tarifario-segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.segment-btn {
    flex: 1 1 auto;
    min-width: 120px;
    padding: 12px 14px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: #444;
    transition: all 0.2s;
}

.segment-btn:hover:not(:disabled) {
    border-color: var(--case-brand);
}

.segment-btn.active {
    background: var(--case-brand);
    color: #fff;
    border-color: var(--case-brand);
    box-shadow: 0 4px 14px rgba(85, 152, 83, 0.35);
}

.segment-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.tarifario-fin-block {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.tarifario-fin-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.tarifario-fin-block-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

/* Switch tarifario: gris apagado, verde encendido */
.tarifario-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.tarifario-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.tarifario-switch-track {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: #b0b0b0;
    border-radius: 26px;
    transition: background 0.25s ease, box-shadow 0.25s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

.tarifario-switch-track::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.tarifario-switch input:checked + .tarifario-switch-track {
    background: var(--case-brand);
    box-shadow: 0 0 0 2px rgba(85, 152, 83, 0.25);
}

.tarifario-switch input:checked + .tarifario-switch-track::before {
    transform: translateX(22px);
}

.tarifario-switch input:focus-visible + .tarifario-switch-track {
    outline: 2px solid var(--case-brand);
    outline-offset: 2px;
}

.tarifario-extra-fields {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px 16px;
    margin-top: 12px;
    align-items: end;
}

.tarifario-extra-fields.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.tarifario-extra-fields .tarifario-field-hint {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 12px;
    color: #888;
}

.tarifario-fin-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.tarifario-fin-pct {
    margin: 0;
    flex: 0 0 140px;
}

.tarifario-load-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    flex: 1;
}

.tarifario-load-col label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 13px;
}

.tarifario-load-col select {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.9);
}

.tarifario-load-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tarifario-load-actions .btn {
    margin: 0;
}

.btn-danger-outline {
    color: var(--case-error) !important;
    border-color: var(--case-error-border) !important;
}

.tarifario-sidebar {
    position: sticky;
    top: 20px;
}

.tarifario-results {
    padding: 28px 24px;
}

.tarifario-results h2 {
    margin: 0 0 20px;
    font-size: 17px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #222;
}

.tarifario-result-block {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.tarifario-result-block.highlight {
    background: rgba(85, 152, 83, 0.06);
    margin: 0 -12px 18px;
    padding: 14px 12px 18px;
    border-radius: 10px;
    border-bottom: none;
}

.tarifario-result-block.total {
    border-bottom: none;
    padding-bottom: 0;
}

.tarifario-result-block.total .result-usd {
    font-size: 30px;
    color: #1a1a1a;
}

.tarifario-result-block.total .result-ars {
    font-size: 24px;
    color: #559853;
}

.tarifario-result-block.financed .result-usd {
    font-size: 20px;
    color: #1a1a1a;
}

.tarifario-result-block.financed .result-ars {
    font-size: 17px;
    color: #559853;
}

.result-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #888;
    margin-bottom: 6px;
    font-weight: 600;
}

.result-dual {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.result-usd {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
}

.result-ars {
    font-size: 15px;
    font-weight: 600;
    color: #559853;
}

.result-formula {
    display: block;
    margin-top: 6px;
    color: #999;
    font-size: 12px;
}

.tarifario-mult-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.tarifario-mult-list li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: #555;
}

.tarifario-mult-list strong {
    color: #333;
    white-space: nowrap;
}

.tarifario-footnote {
    font-size: 11px;
    color: #999;
    margin: 16px 0 0;
    line-height: 1.45;
}

.tarifario-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tarifario-modal[hidden] {
    display: none;
}

.tarifario-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(40, 42, 46, 0.55);
    backdrop-filter: blur(4px);
}

.tarifario-modal-box {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 28px;
    z-index: 1;
}

.tarifario-modal-box h3 {
    margin: 0 0 18px;
}

.tarifario-modal-message {
    margin: 0 0 20px;
    color: #444;
    font-size: 14px;
    line-height: 1.55;
}

.tarifario-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

.tarifario-modal-actions .btn {
    margin: 0;
}

@media (max-width: 960px) {
    .tarifario-toolbar-row {
        grid-template-columns: 1fr;
    }

    .tarifario-layout {
        grid-template-columns: 1fr;
    }

    .tarifario-sidebar {
        position: static;
    }

    .tarifario-grid-2,
    .tarifario-load-grid {
        grid-template-columns: 1fr;
    }

    .tarifario-factor-tiles-5 {
        grid-template-columns: repeat(2, 1fr);
    }

    .tarifario-factor-tiles-4,
    .tarifario-factor-tiles-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .tarifario-slider-labels {
        font-size: 9px;
    }
}

@media (max-width: 720px) {
    .tarifario-grid-3 {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .tarifario-grid-3 > .form-group {
        flex: 1 1 auto;
        width: 100%;
        margin-bottom: 12px;
    }

    .tarifario-grid-3 > .form-group:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 520px) {
    .tarifario-factor-tiles-5,
    .tarifario-factor-tiles-4,
    .tarifario-factor-tiles-3 {
        grid-template-columns: 1fr;
    }
}

/* ====== RECURSOS HUMANOS ====== */
body.page-rrhh .rrhh-wrap {
    max-width: 1280px;
    padding-bottom: 48px;
}

.rrhh-page-head {
    margin-bottom: var(--rrhh-gap, 16px);
}

.rrhh-page-head h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #1a1a1a;
    font-size: 26px;
}

.rrhh-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: var(--rrhh-gap, 16px);
    flex-wrap: wrap;
}

.rrhh-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #444;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
}

.rrhh-tab:hover {
    background: rgba(255, 255, 255, 0.55);
    color: var(--case-brand-dark);
}

.rrhh-tab.is-active {
    background: var(--case-brand);
    color: #fff;
    border-color: var(--case-brand);
    box-shadow: 0 4px 14px rgba(85, 152, 83, 0.35);
}

body.page-rrhh {
    --rrhh-gap: 16px;
}

body.page-rrhh .rrhh-wrap .glass {
    margin: 0;
    padding: 20px 24px;
}

body.page-rrhh .rrhh-wrap .glass:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.rrhh-stack {
    display: flex;
    flex-direction: column;
    gap: var(--rrhh-gap);
}

.rrhh-toolbar-form {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.rrhh-toolbar-form label {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
}

.rrhh-toolbar-form .rrhh-field {
    width: auto;
    min-width: 110px;
}

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

.rrhh-team-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rrhh-team-card:hover:not(.is-selected) {
    border-color: rgba(85, 152, 83, 0.45);
}

body.page-rrhh .rrhh-team-card.glass.is-selected {
    background: var(--case-brand);
    border-color: var(--case-brand);
    box-shadow: 0 4px 16px rgba(85, 152, 83, 0.4);
    color: #fff;
}

body.page-rrhh .rrhh-team-card.glass.is-selected:hover {
    background: var(--case-brand-dark);
    border-color: var(--case-brand-dark);
    box-shadow: 0 6px 20px rgba(69, 120, 67, 0.45);
}

.rrhh-team-card.is-selected .rrhh-team-name,
.rrhh-team-card.is-selected .rrhh-team-label,
.rrhh-team-card.is-selected .rrhh-team-dias {
    color: #fff;
}

.rrhh-team-card.is-selected .rrhh-team-avatar.case-header-avatar {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.rrhh-team-card.is-selected .rrhh-team-avatar.case-header-avatar-fallback {
    background: #fff;
    color: var(--case-brand-dark);
}

.rrhh-team-card-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.rrhh-team-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
    gap: 2px;
}

.rrhh-team-card .rrhh-team-avatar.case-header-avatar,
.rrhh-team-card .rrhh-team-avatar.case-header-avatar-fallback {
    width: 56px;
    height: 56px;
    font-size: 22px;
    flex-shrink: 0;
    margin: 0;
}

.rrhh-team-name {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rrhh-team-label {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.rrhh-team-dias {
    font-size: 32px;
    font-weight: 800;
    color: var(--case-brand-dark);
    line-height: 1;
}

.rrhh-saldo-compact .rrhh-saldo-edit--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0;
}

.rrhh-saldo-compact-label {
    flex: 1 1 220px;
    font-size: 13px;
    color: #555;
    line-height: 1.45;
}

.rrhh-saldo-compact-field-label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    margin: 0;
}

.rrhh-field--narrow {
    width: 72px;
    min-width: 72px;
}

.rrhh-modo-switch-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.rrhh-modo-switch-text {
    font-size: 14px;
    font-weight: 500;
    color: #888;
    transition: color 0.2s, font-weight 0.2s;
}

.rrhh-modo-switch-text.is-active {
    color: var(--case-brand-dark);
    font-weight: 700;
}

.rrhh-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.rrhh-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.rrhh-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    transition: background 0.2s;
}

.rrhh-switch-slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.rrhh-switch input:checked + .rrhh-switch-slider {
    background: var(--case-brand);
}

.rrhh-switch input:checked + .rrhh-switch-slider::before {
    transform: translateX(22px);
}

.rrhh-modo-hint {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.4;
    color: #888;
}

.rrhh-layout {
    display: grid;
    grid-template-columns: minmax(260px, 300px) 1fr;
    gap: 20px;
    align-items: start;
}

.rrhh-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rrhh-main {
    display: flex;
    flex-direction: column;
    gap: var(--rrhh-gap, 16px);
}

.rrhh-panel {
    padding: 24px 28px;
}

.rrhh-panel h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    font-size: 18px;
    color: #333;
}

.rrhh-saldo-user {
    margin: -8px 0 16px;
    color: #666;
    font-size: 14px;
}

.rrhh-saldo-formula {
    font-size: 12px;
    color: #666;
    line-height: 1.45;
    margin: 0 0 14px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.rrhh-saldo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}

.rrhh-saldo-item {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.rrhh-saldo-item small {
    display: block;
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.rrhh-saldo-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #777;
    margin-bottom: 4px;
    font-weight: 700;
}

.rrhh-saldo-item strong {
    font-size: 22px;
    color: #1a1a1a;
}

.rrhh-saldo-disponible {
    grid-column: span 2;
    background: rgba(85, 152, 83, 0.12);
    border-color: rgba(85, 152, 83, 0.35);
}

.rrhh-saldo-disponible strong {
    color: var(--case-brand-dark);
    font-size: 28px;
}

.rrhh-saldo-acum {
    color: #5b6b8a;
}

.rrhh-saldo-edit label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
}

.rrhh-saldo-edit-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.rrhh-saldo-edit-row input.rrhh-field {
    flex: 1;
    min-width: 0;
}

/* Campos RRHH (incluye selects fuera de .form-group) */
body.page-rrhh .rrhh-wrap .rrhh-field,
body.page-rrhh .rrhh-wrap .form-group input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
body.page-rrhh .rrhh-wrap .form-group select,
body.page-rrhh .rrhh-wrap .form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: rgba(255, 255, 255, 0.92);
    box-sizing: border-box;
    color: #1a1a1a;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.page-rrhh .rrhh-wrap .rrhh-field:focus,
body.page-rrhh .rrhh-wrap .form-group input:focus,
body.page-rrhh .rrhh-wrap .form-group select:focus,
body.page-rrhh .rrhh-wrap .form-group textarea:focus {
    outline: none;
    border-color: var(--case-brand);
    box-shadow: 0 0 0 3px rgba(85, 152, 83, 0.15);
}

body.page-rrhh .rrhh-wrap .form-group label,
body.page-rrhh .rrhh-wrap .rrhh-saldo-edit label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #444;
}

.btn-sm {
    padding: 8px 12px;
    font-size: 13px;
}

.rrhh-licencia-form .form-row,
.rrhh-feriado-form .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.rrhh-modo-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.rrhh-modo-opt {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    gap: 4px 10px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    min-height: 100%;
}

.rrhh-modo-opt:has(input:checked) {
    border-color: var(--case-brand);
    background: rgba(85, 152, 83, 0.08);
}

.rrhh-modo-opt input {
    margin: 2px 0 0;
    grid-row: 1 / span 2;
}

.rrhh-modo-opt span {
    font-weight: 600;
    color: #333;
    grid-column: 2;
}

.rrhh-modo-opt small {
    grid-column: 2;
    margin: 0;
    color: #777;
    font-size: 11px;
    line-height: 1.35;
}

.rrhh-fechas-row {
    grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(130px, 180px);
    align-items: end;
}

.rrhh-dias-box .rrhh-dias-display {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    color: #888;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 10px;
    border: 2px dashed rgba(0, 0, 0, 0.1);
}

.rrhh-dias-display.rrhh-dias-ok {
    color: var(--case-brand-dark);
    border-style: solid;
    border-color: var(--case-brand-border);
    background: rgba(85, 152, 83, 0.1);
}

.rrhh-hint {
    font-size: 13px;
    color: #666;
    margin: 0 0 16px;
    line-height: 1.5;
}

.rrhh-empty {
    color: #888;
    text-align: center;
    padding: 24px;
}

.rrhh-table-wrap {
    overflow-x: auto;
}

.rrhh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.rrhh-table th,
.rrhh-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    vertical-align: top;
}

.rrhh-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #777;
    background: rgba(0, 0, 0, 0.03);
}

.rrhh-cell-small {
    font-size: 12px;
    color: #666;
}

.rrhh-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.rrhh-badge-vacaciones {
    background: rgba(85, 152, 83, 0.2);
    color: var(--case-brand-dark);
}

.rrhh-badge-licencia_especial {
    background: rgba(59, 130, 246, 0.15);
    color: #1e40af;
}

.rrhh-badge-it {
    background: rgba(239, 68, 68, 0.12);
    color: #991b1b;
}

.rrhh-inline-form {
    display: inline;
    margin: 0;
}

.rrhh-feriados-layout {
    display: flex;
    flex-direction: column;
    gap: var(--rrhh-gap, 16px);
    max-width: 720px;
}

body.page-rrhh .rrhh-feriados-layout .glass {
    margin: 0;
}

.rrhh-normas-layout {
    display: flex;
    flex-direction: column;
    gap: var(--rrhh-gap, 16px);
    max-width: 640px;
}

body.page-rrhh .rrhh-normas-layout .glass {
    margin: 0;
}

.rrhh-normas-hero h2 {
    margin-bottom: 8px;
}

.rrhh-normas-intro {
    margin: 0;
    font-size: 14px;
    color: #555;
    line-height: 1.55;
}

.rrhh-horario-panel {
    padding: 28px 32px;
}

.rrhh-horario-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.rrhh-horario-head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 17px;
    color: #333;
}

.rrhh-horario-sub {
    margin: 0;
}

.rrhh-horario-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 14px 20px;
    background: rgba(85, 152, 83, 0.1);
    border: 1px solid rgba(85, 152, 83, 0.25);
    border-radius: 12px;
    min-width: 200px;
}

.rrhh-horario-preview-from,
.rrhh-horario-preview-to {
    font-size: 26px;
    font-weight: 800;
    color: var(--case-brand-dark);
    letter-spacing: 0.02em;
}

.rrhh-horario-preview-sep .material-symbols-outlined {
    font-size: 22px;
    color: var(--case-brand);
    vertical-align: middle;
}

.rrhh-horario-preview-dur {
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rrhh-horario-fields {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px 16px;
    align-items: end;
    margin-bottom: 24px;
}

.rrhh-horario-field label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rrhh-horario-field label .material-symbols-outlined {
    font-size: 20px;
    color: var(--case-brand);
}

.rrhh-time-input {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.04em;
    padding: 14px 16px;
}

.rrhh-horario-field-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 12px;
    color: #aaa;
}

.rrhh-horario-field-separator .material-symbols-outlined {
    font-size: 28px;
}

.rrhh-horario-save {
    width: 100%;
    max-width: 280px;
}

@media (max-width: 560px) {
    .rrhh-horario-fields {
        grid-template-columns: 1fr;
    }

    .rrhh-horario-field-separator {
        display: none;
    }

    .rrhh-horario-preview {
        width: 100%;
    }

    .rrhh-horario-save {
        max-width: none;
        width: 100%;
    }
}

.rrhh-feriados-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.rrhh-feriados-head h2 {
    margin: 0;
}

.rrhh-filter-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.rrhh-filter-inline-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
    margin: 0;
}

.rrhh-filter-inline .rrhh-field,
.rrhh-filter-inline select {
    width: auto;
    min-width: 110px;
}

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

.rrhh-feriado-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.rrhh-feriado-fecha {
    font-weight: 700;
    color: var(--case-brand-dark);
    min-width: 100px;
}

.rrhh-feriado-nombre {
    flex: 1;
    color: #333;
}

.rrhh-feriado-submit .btn {
    width: 100%;
}

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

    .rrhh-saldo-disponible {
        grid-column: span 2;
    }
}

@media (max-width: 720px) {
    .rrhh-team-grid {
        grid-template-columns: 1fr;
    }

    .rrhh-modo-options {
        grid-template-columns: 1fr;
    }

    .rrhh-fechas-row {
        grid-template-columns: 1fr;
    }
}

/* ====== FONDO DEL SITIO ======
   En html (no en body): body.page-hub y body.admin-login usan display:flex
   y en Chrome/Safari eso hace que background-attachment:fixed en body no se vea. */
html {
    min-height: 100%;
    background-color: #e8e8e8;
    background-image: linear-gradient(var(--case-bg-wash), var(--case-bg-wash)), var(--case-bg-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body {
    background: transparent !important;
}