body { margin: 0; font-family: system-ui, sans-serif; color: #111827; background: #f8fafc; }
header { background: #fff; border-bottom: 1px solid #e5e7eb; }
nav { max-width: 1100px; margin: 0 auto; padding: 16px 20px; display: flex; gap: 16px; align-items: center; justify-content: space-between; }
main { max-width: 1100px; margin: 0 auto; padding: 32px 20px; }
a { color: #2563eb; text-decoration: none; font-weight: 600; }
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid #e5e7eb; }
th, td { text-align: left; padding: 14px; border-bottom: 1px solid #e5e7eb; vertical-align: middle; }
th { background: #f1f5f9; }
.table-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; white-space: nowrap; }
.table-actions-sep { color: #94a3b8; font-weight: 400; user-select: none; }
label { display: block; font-weight: 700; margin: 18px 0 8px; }
.checkbox-label { align-items: flex-start; cursor: pointer; display: flex; font-weight: 600; gap: 10px; margin: 0 !important; }
.checkbox-label input[type="checkbox"] { flex-shrink: 0; height: 18px; margin-top: 2px; width: 18px; }
.form-checkbox-option { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; margin-top: 14px; padding: 14px 16px; }
input, select, textarea { width: 100%; box-sizing: border-box; border: 1px solid #d1d5db; border-radius: 10px; padding: 12px; font: inherit; }
.password-field { align-items: stretch; display: flex; gap: 8px; }
.password-field input { flex: 1; min-width: 0; }
.password-toggle { background: #e2e8f0; border: 1px solid #cbd5e1; border-radius: 10px; color: #334155; cursor: pointer; flex-shrink: 0; font: inherit; font-size: .88rem; font-weight: 700; min-width: 92px; padding: 0 12px; }
.org-context-banner { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-bottom: 2px solid #2563eb; padding: 14px 20px; text-align: center; }
.impersonation-banner { align-items: center; background: linear-gradient(135deg, #fff7ed, #ffedd5); border-bottom: 2px solid #ea580c; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 14px 20px; text-align: center; }
.impersonation-banner p { color: #9a3412; font-weight: 700; margin: 0; }
.impersonation-banner form { margin: 0; }
.impersonation-banner button { background: #ea580c; font-size: .9rem; padding: 8px 14px; }
.org-context-label { color: #1e40af; display: block; font-size: .75rem; font-weight: 800; letter-spacing: .05em; margin-bottom: 4px; text-transform: uppercase; }
.org-context-name { align-items: center; color: #1e3a8a; display: flex; font-size: 1.35rem; font-weight: 800; gap: 10px; justify-content: center; line-height: 1.2; }
.org-context-logo { height: 32px; max-width: 100px; object-fit: contain; width: auto; }
.org-preview-banner { background: #f0fdf4; border: 2px solid #86efac; border-radius: 14px; margin-bottom: 20px; padding: 16px 18px; text-align: center; }
.org-preview-banner strong { color: #14532d; display: block; font-size: 1.35rem; margin-top: 6px; }
button, .button { display: inline-block; border: 0; border-radius: 10px; background: #2563eb; color: #fff; padding: 11px 16px; font-weight: 700; cursor: pointer; text-decoration: none; }
.voluntariado-button-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }
.voluntariado-button-row .button { margin: 0; }
.button.secondary { background: #475569; }
.button.ghost { background: transparent; border: 1px solid #cbd5e1; color: #334155; }
.button.compact { font-size: .82rem; min-height: 34px; padding: 7px 12px; }
.button.danger { background: #dc2626; }
.booking-email-details { max-width: 220px; }
.booking-email-details summary { cursor: pointer; font-weight: 600; list-style: none; }
.booking-email-details summary::-webkit-details-marker { display: none; }
.booking-email-form { display: grid; gap: 8px; margin-top: 8px; }
.booking-email-form input[type="email"] { border: 1px solid var(--voluntariado-border, #d8dee8); border-radius: 8px; padding: 8px 10px; width: 100%; }
.booking-reminder-cell { display: grid; gap: 8px; max-width: 280px; }
.booking-reminder-status { font-size: .84rem; font-weight: 700; margin: 0; }
.booking-reminder-status.is-pending { color: #b45309; }
.booking-reminder-status.is-sent { color: #166534; }
.booking-consent-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.booking-consent-badge { border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .02em; padding: 2px 7px; text-transform: uppercase; }
.booking-consent-badge.is-on { background: #dcfce7; color: #166534; }
.booking-consent-badge.is-off { background: #f1f5f9; color: #94a3b8; }
.booking-reminder-actions-row { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.booking-reminder-note { color: var(--voluntariado-muted, #64748b); font-size: .8rem; line-height: 1.35; max-width: 240px; }
table.voluntariado-responsive-table td.booking-reminder-column { align-items: flex-start; flex-direction: column; }
table.voluntariado-responsive-table td.booking-reminder-column::before { margin-bottom: 2px; }
.pagination-nav { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }
.pagination-summary { font-size: .92rem; margin: 0; }
.pagination-links { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.pagination-links a,
.pagination-links span { border: 1px solid #e2e8f0; border-radius: 8px; display: inline-block; font-size: .9rem; font-weight: 600; line-height: 1; min-width: 36px; padding: 8px 12px; text-align: center; text-decoration: none; }
.pagination-links a { background: #fff; color: #2563eb; }
.pagination-links a:hover { background: #eff6ff; }
.pagination-links .pagination-current { background: #2563eb; border-color: #2563eb; color: #fff; }
.pagination-links .pagination-disabled { background: #f8fafc; color: #94a3b8; cursor: default; }
.pagination-links .pagination-ellipsis { border-color: transparent; color: #64748b; min-width: auto; padding-inline: 4px; }
.grant-compliance-bookings-hint { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; margin: 16px 0 0; padding: 12px 14px; }
.timesheet-steps { align-items: center; display: flex; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 10px; }
.timesheet-step { color: #94a3b8; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.timesheet-step.is-done { color: #16a34a; }
.timesheet-step.is-current { color: #2563eb; }
.timesheet-step-sep { color: #cbd5e1; font-size: .75rem; }
.timesheet-action-block { margin-bottom: 8px; }
.timesheet-grant-label { display: block; font-size: .85rem; font-weight: 700; margin: 0 0 6px; }
.timesheet-grant-select { margin-bottom: 0; max-width: 220px; }
.timesheet-volunteer-link { display: inline-block; font-size: .85rem; margin-top: 8px; }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px; box-shadow: 0 10px 24px rgba(15, 23, 42, .05); }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.muted { color: #64748b; }
.alert { border-radius: 10px; padding: 12px; margin-bottom: 18px; background: #fee2e2; color: #7f1d1d; }
.alert-warning { background: #fef3c7; color: #92400e; }
.success { border-radius: 10px; padding: 12px; margin-bottom: 18px; background: #dcfce7; color: #14532d; }
.portal-link-box { background: #eff6ff; border: 2px solid #2563eb; border-radius: 14px; margin: 0 0 20px; padding: 16px 18px; }
.portal-link-box strong { color: #1e3a8a; display: block; font-size: 1.05rem; margin-bottom: 6px; }
.portal-link-row { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.portal-link-input { background: #fff; flex: 1; font-size: .92rem; min-width: 220px; }
.portal-copy-feedback { font-size: .88rem; font-weight: 700; margin: 10px 0 0; }
.portal-qr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.portal-qr-panel { background: #fff; border: 1px solid #bfdbfe; border-radius: 12px; margin-top: 14px; padding: 18px; text-align: center; }
.portal-qr-canvas-wrap { display: inline-block; line-height: 0; }
.portal-qr-canvas-wrap canvas { border-radius: 8px; display: block; height: auto; max-width: 100%; }
.portal-qr-hint { font-size: .95rem; font-weight: 600; margin: 14px 0 6px; }
.portal-qr-url-text { color: #1e40af; font-size: .88rem; margin: 0; word-break: break-all; }
.portal-qr-inline-link { margin: 12px 0 0; }
.portal-qr-page { text-align: center; }
.portal-qr-page-logo { display: block; margin: 0 auto 16px; max-height: 88px; max-width: 220px; object-fit: contain; }
.portal-qr-page-org { color: #0f172a; font-size: 1.35rem; font-weight: 800; margin: 0 0 6px; }
.portal-qr-page-subtitle { color: #1e40af; font-weight: 700; margin: 0 0 20px; }
.portal-qr-page-panel { background: #f8fafc; border: 1px solid #bfdbfe; border-radius: 12px; margin: 0 auto 20px; max-width: 360px; padding: 20px; }
.portal-qr-page-actions { justify-content: center; }
.onboarding-box { background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%); border: 2px solid #86efac; border-radius: 16px; margin: 0 0 20px; padding: 20px 22px; }
.onboarding-box-header { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 16px; }
.onboarding-box strong { color: #14532d; display: block; font-size: 1.08rem; margin-bottom: 8px; }
.onboarding-welcome { color: #166534; margin: 0 0 6px; }
.onboarding-subtitle { margin: 0; }
.onboarding-progress { background: #dcfce7; border-radius: 999px; color: #166534; flex-shrink: 0; font-size: .82rem; font-weight: 700; padding: 6px 12px; white-space: nowrap; }
.onboarding-steps { counter-reset: onboarding-step; list-style: none; margin: 0; padding: 0; }
.onboarding-steps > li { align-items: center; border: 1px solid #d1fae5; border-radius: 12px; display: flex; gap: 14px; justify-content: space-between; margin-bottom: 10px; padding: 14px 16px 14px 52px; position: relative; }
.onboarding-steps > li::before { align-items: center; background: #e2e8f0; border-radius: 999px; color: #475569; content: counter(onboarding-step); counter-increment: onboarding-step; display: flex; font-size: .82rem; font-weight: 800; height: 28px; justify-content: center; left: 14px; position: absolute; top: 14px; width: 28px; }
.onboarding-steps > li.is-done { background: #f8fafc; border-color: #e2e8f0; opacity: .88; }
.onboarding-steps > li.is-done::before { background: #16a34a; color: #fff; content: "✓"; }
.onboarding-steps > li.is-next { background: #fff; border-color: #4ade80; box-shadow: 0 8px 20px rgba(22, 163, 74, .08); }
.onboarding-steps > li.is-next::before { background: #2563eb; color: #fff; }
.onboarding-step-body { display: grid; gap: 4px; min-width: 0; }
.onboarding-step-title { color: #0f172a; font-weight: 700; }
.onboarding-steps > li.is-done .onboarding-step-title { color: #64748b; text-decoration: line-through; }
.onboarding-step-hint { font-size: .92rem; line-height: 1.45; }
.onboarding-tutorial { border-top: 1px solid #bbf7d0; margin: 14px 0 0; padding-top: 14px; }
.onboarding-tutorial a { color: #166534; font-weight: 700; text-decoration: none; }
.onboarding-tutorial a:hover { text-decoration: underline; }
#waiver_text, #contact_email { scroll-margin-top: 120px; }
.empty-state { padding: 24px 0; text-align: center; }
.empty-state .button { margin-top: 14px; }
.app-nav { flex-wrap: wrap; }
.nav-brand { flex: 0 1 auto; min-width: 0; }
.app-nav-shell { align-items: center; display: flex; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
.nav-lang { flex: 0 0 auto; }
.lang-switch { background: #fff; border: 1px solid #dbeafe; border-radius: 999px; display: inline-flex; flex-shrink: 0; gap: 4px; padding: 4px; }
.lang-switch a { border-radius: 999px; color: #64748b; font-size: .82rem; font-weight: 700; padding: 6px 12px; text-decoration: none; }
.lang-switch a.is-active { background: #2563eb; color: #fff; }
.nav-desktop { align-items: center; display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: flex-end; }
.nav-link, .nav-dropdown-trigger { align-items: center; border-radius: 8px; color: #2563eb; cursor: pointer; display: inline-flex; font-size: .92rem; font-weight: 700; gap: 4px; padding: 6px 8px; text-decoration: none; white-space: nowrap; }
.nav-link:hover, .nav-dropdown-trigger:hover { background: #eff6ff; }
.nav-link.is-active, .nav-dropdown-trigger.is-active { background: #eff6ff; color: #1e40af; text-decoration: underline; text-underline-offset: 4px; }
.nav-dropdown { position: relative; }
.nav-dropdown[open]::after { content: ''; height: 10px; left: 0; position: absolute; right: 0; top: 100%; }
.nav-dropdown > summary { list-style: none; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown-trigger::after { content: '▾'; font-size: .72rem; opacity: .75; }
.nav-dropdown-menu { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 14px 36px rgba(15, 23, 42, .14); min-width: 210px; padding: 8px; position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; }
.nav-dropdown-item { background: transparent; border: 0; border-radius: 8px; color: #334155; cursor: pointer; display: block; font: inherit; font-size: .92rem; font-weight: 700; padding: 10px 12px; text-align: left; text-decoration: none; width: 100%; }
.nav-dropdown-item:hover { background: #f1f5f9; color: #1e40af; }
.nav-dropdown-item.is-active { background: #eff6ff; color: #1e40af; }
.nav-dropdown-logout { margin: 0; }
.nav-mobile-toggle { align-items: center; background: #fff; border: 1px solid #dbeafe; border-radius: 10px; color: #1e40af; cursor: pointer; display: none; font: inherit; font-size: .88rem; font-weight: 800; gap: 8px; padding: 8px 12px; }
.nav-mobile-toggle-icon { background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; display: inline-block; height: 2px; width: 16px; }
.nav-mobile-panel { inset: 0; position: fixed; z-index: 220; }
.nav-mobile-panel[hidden] { display: none; }
.nav-mobile-backdrop { background: rgba(15, 23, 42, .45); inset: 0; position: absolute; }
.nav-mobile-sheet { background: #fff; box-shadow: -10px 0 36px rgba(15, 23, 42, .16); display: flex; flex-direction: column; height: 100%; max-width: 100%; position: absolute; right: 0; top: 0; width: min(340px, 90vw); }
.nav-mobile-header { align-items: center; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; padding: 16px 18px; }
.nav-mobile-close { background: transparent; border: 0; color: #64748b; cursor: pointer; font-size: 1.6rem; line-height: 1; padding: 0; }
.nav-mobile-body { flex: 1; overflow-y: auto; padding: 8px 0 24px; }
.nav-mobile-section { padding: 8px 0; }
.nav-mobile-section-title { color: #64748b; font-size: .72rem; font-weight: 800; letter-spacing: .06em; margin: 0; padding: 8px 18px 6px; text-transform: uppercase; }
.nav-mobile-links { display: grid; gap: 2px; }
.nav-mobile-link { background: transparent; border: 0; color: #1e293b; cursor: pointer; display: block; font: inherit; font-size: 1rem; font-weight: 700; padding: 12px 18px; text-align: left; text-decoration: none; width: 100%; }
.nav-mobile-link:hover, .nav-mobile-link.is-active { background: #eff6ff; color: #1e40af; }
.nav-mobile-logout { margin: 0; }
body.nav-mobile-open { overflow: hidden; }
.inline { display: inline; }
.voluntariado-admin { --voluntariado-primary: #2563eb; --voluntariado-primary-dark: #1d4ed8; --voluntariado-border: #d8dee8; --voluntariado-muted: #64748b; --voluntariado-surface: #ffffff; }
.voluntariado-card { background: var(--voluntariado-surface); border: 1px solid var(--voluntariado-border); border-radius: 12px; box-shadow: 0 8px 24px rgba(15, 23, 42, .06); margin: 0 0 24px; padding: 24px; }
main > .card[style*="max-width"],
main > .voluntariado-card[style*="max-width"],
.voluntariado-admin > .voluntariado-card[style*="max-width"],
.voluntariado-admin > .card[style*="max-width"] {
    margin-left: auto;
    margin-right: auto;
}
.voluntariado-admin-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); }
.voluntariado-calendar-header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 16px; }
.voluntariado-month-label { font-size: 1.15rem; }
.voluntariado-month-nav { align-items: center; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 999px; color: var(--voluntariado-primary-dark); display: inline-flex; font-size: 24px; height: 40px; justify-content: center; line-height: 1; width: 40px; }
.voluntariado-weekdays, .voluntariado-days { display: grid; gap: 8px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.voluntariado-weekdays .weekday-short { display: none; }
.voluntariado-calendar-mobile-hint { color: var(--voluntariado-muted); display: none; font-size: .88rem; font-weight: 600; margin: 10px 0 0; text-align: center; }
.voluntariado-weekdays { color: var(--voluntariado-muted); font-size: .85rem; font-weight: 700; margin: 18px 0 8px; text-align: center; text-transform: uppercase; }
.voluntariado-day { background: #f8fafc; border: 1px solid var(--voluntariado-border); border-radius: 10px; color: #0f172a; min-height: 82px; padding: 10px 8px; text-align: left; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.voluntariado-day:hover { border-color: var(--voluntariado-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); transform: translateY(-1px); }
.voluntariado-day.is-active { background: #eefdf3; border-color: #86efac; }
.voluntariado-day.is-full { background: #fff7ed; border-color: #fdba74; }
.voluntariado-day.is-outside-month { opacity: .45; }
.voluntariado-day.is-past-empty { cursor: not-allowed; opacity: .5; pointer-events: none; }
.voluntariado-day.is-past { opacity: .78; }
.voluntariado-day.is-past:hover { opacity: 1; }
.voluntariado-day-number { display: block; font-size: 1.1rem; font-weight: 800; margin-bottom: 8px; }
.voluntariado-day-meta { color: var(--voluntariado-muted); display: block; font-size: .8rem; line-height: 1.25; }
.voluntariado-filter-form { align-items: end; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.voluntariado-location-select { border: 1px solid var(--voluntariado-border); border-radius: 8px; display: block; margin-top: 6px; max-width: 420px; padding: 10px 12px; width: 100%; }
.voluntariado-location-banner { background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 2px solid #2563eb; border-radius: 14px; margin: 0 0 20px; padding: 16px 18px; }
.voluntariado-location-banner-label { color: #1e40af; font-size: .78rem; font-weight: 800; letter-spacing: .05em; margin-bottom: 8px; text-transform: uppercase; }
.voluntariado-location-banner-name { color: #1e3a8a; font-size: 1.45rem; font-weight: 800; line-height: 1.2; }
.voluntariado-location-banner-form { margin: 0; }
.voluntariado-location-banner-select { background: #fff; border: 2px solid #2563eb; border-radius: 10px; box-sizing: border-box; color: #1e3a8a; font-size: 1.15rem; font-weight: 800; margin: 0; max-width: 100%; padding: 12px 14px; width: 100%; }
.voluntariado-location-banner-select-wrap .voluntariado-location-banner-select { background-color: transparent; border: 0; max-width: none; padding: 2px 28px 2px 0; width: auto; }
.voluntariado-location-banner-hint { color: #1d4ed8; font-size: .9rem; font-weight: 600; margin: 10px 0 0; }
.voluntariado-calendar-context { color: #1e40af; display: block; font-size: .95rem; font-weight: 700; margin-top: 4px; }
.location-pin-line { align-items: center; display: inline-flex; gap: 8px; }
.location-pin-icon { color: #dc2626; flex-shrink: 0; height: 1.2em; width: 1.2em; }
.voluntariado-location-banner-name.location-pin-line .location-pin-icon { height: 1.45rem; width: 1.45rem; }
.voluntariado-calendar-context.location-pin-line { display: flex; justify-content: center; }
.voluntariado-location-banner-select-wrap { align-items: center; background: #fff; border: 2px solid #2563eb; border-radius: 10px; display: flex; gap: 10px; padding: 10px 12px; }
.voluntariado-location-banner-select-wrap .location-pin-icon { flex-shrink: 0; height: 1.35rem; position: static; transform: none; width: 1.35rem; }
.voluntariado-location-banner-select-wrap .voluntariado-location-banner-select { -webkit-appearance: none; appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%231e3a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center; border: 0; flex: 1; margin: 0; min-width: 0; padding: 2px 28px 2px 0; width: auto; }
.voluntariado-coverage-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.voluntariado-coverage-legend span { border-radius: 8px; font-weight: 700; padding: 10px 12px; }
.voluntariado-coverage-legend .is-empty { background: #fee2e2; border: 1px solid #fecaca; color: #991b1b; }
.voluntariado-coverage-legend .is-low { background: #ffedd5; border: 1px solid #fed7aa; color: #9a3412; }
.voluntariado-coverage-legend .is-high { background: #dcfce7; border: 1px solid #bbf7d0; color: #166534; }
.voluntariado-coverage-legend .is-past { background: #f1f5f9; border: 1px solid #cbd5e1; color: #475569; }
.voluntariado-coverage-grid { display: grid; gap: 10px; margin-top: 18px; }
.voluntariado-coverage-row { align-items: center; border: 1px solid transparent; border-radius: 8px; display: flex; font-weight: 700; justify-content: space-between; padding: 12px 14px; }
.voluntariado-coverage-row.is-empty { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.voluntariado-coverage-row.is-low { background: #ffedd5; border-color: #fed7aa; color: #9a3412; }
.voluntariado-coverage-row.is-medium { background: #dbeafe; border-color: #bfdbfe; color: #1e40af; }
.voluntariado-coverage-row.is-high { background: #dcfce7; border-color: #bbf7d0; color: #166534; }
.voluntariado-error { background: #fee2e2; border-radius: 8px; color: #b91c1c; padding: 12px 14px; }
.time-presets { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.time-presets span { color: #64748b; font-weight: 800; }
.time-presets button { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 999px; color: #1d4ed8; padding: 10px 14px; }
.time-select-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.billing-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; margin: 0 0 24px; padding: 18px 20px; }
.billing-box h2 { font-size: 1.1rem; margin: 0 0 8px; }
.billing-box p { margin: 0 0 12px; }
.billing-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.billing-extra-locations { border-top: 1px solid #e2e8f0; margin-top: 16px; padding-top: 16px; }
.billing-extra-form { display: grid; gap: 10px; max-width: 320px; }
.app-logo-link { align-items: center; display: inline-flex; flex-shrink: 0; text-decoration: none; }
.app-logo { display: block; height: 36px; max-width: min(220px, 52vw); object-fit: contain; width: auto; }
.org-brand { align-items: center; display: flex; gap: 10px; }
.org-brand-logo { height: 36px; max-width: 120px; object-fit: contain; width: auto; }
.org-brand-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.org-brand-platform { color: #64748b; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.org-brand-platform-logo { display: block; height: 18px; max-width: 110px; object-fit: contain; width: auto; }
.org-brand-name { font-size: .95rem; font-weight: 800; }
.logo-upload-box { margin: 18px 0; }
.logo-preview { margin: 10px 0; }
.logo-preview-image { height: 48px; max-width: 160px; object-fit: contain; }
.booking-task-form select { font-size: .9rem; max-width: 220px; }
.task-template-list { list-style: none; margin: 0 0 16px; padding: 0; }
.task-template-list li { align-items: center; border-bottom: 1px solid #e2e8f0; display: flex; gap: 12px; justify-content: space-between; padding: 10px 0; }
.task-template-form { display: grid; gap: 10px; max-width: 420px; }
.monitor-platform-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.monitor-badge { border-radius: 999px; font-size: .85rem; font-weight: 700; padding: 8px 12px; }
.monitor-badge.is-ok { background: #dcfce7; color: #166534; }
.monitor-badge.is-warn { background: #fef3c7; color: #92400e; }
.monitor-activity-list { list-style: none; margin: 0; padding: 0; }
.monitor-activity-list li { border-bottom: 1px solid #e5e7eb; padding: 12px 0; }
.monitor-activity-list li:last-child { border-bottom: 0; }
.monitor-activity-meta { display: block; font-size: .85rem; margin-top: 4px; }
.monitor-log-box { background: #0f172a; border-radius: 10px; color: #e2e8f0; max-height: 420px; overflow: auto; padding: 12px; }
.monitor-log-box pre { font-size: .72rem; margin: 0 0 10px; white-space: pre-wrap; word-break: break-word; }
.monitor-log-box pre:last-child { margin-bottom: 0; }
.monitor-help-list { margin: 0; padding-left: 20px; }
.monitor-help-list li { margin-bottom: 8px; }
.monitor-capacity-card { margin-bottom: 24px; }
.monitor-capacity-header { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 18px; }
.monitor-live-indicator { align-items: center; color: #64748b; display: flex; font-size: .85rem; font-weight: 700; gap: 8px; }
.monitor-live-dot { background: #cbd5e1; border-radius: 999px; display: inline-block; height: 10px; width: 10px; }
.monitor-live-dot.is-live { background: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, .15); }
.monitor-meter-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 18px; }
.monitor-meter { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; }
.monitor-meter-top { align-items: center; display: flex; justify-content: space-between; margin-bottom: 10px; }
.monitor-meter-track { background: #e2e8f0; border-radius: 999px; height: 10px; overflow: hidden; }
.monitor-meter-fill { background: #16a34a; border-radius: 999px; height: 100%; transition: width .35s ease; }
.monitor-meter-fill.is-warn { background: #f59e0b; }
.monitor-meter-fill.is-critical { background: #dc2626; }
.monitor-meter-detail { font-size: .82rem; margin: 8px 0 0; }
.monitor-stats-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 18px 0; }
.monitor-stat { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; }
.monitor-stat span { color: #64748b; display: block; font-size: .78rem; font-weight: 700; margin-bottom: 6px; text-transform: uppercase; }
.monitor-stat strong { font-size: 1.15rem; }
.monitor-health-alerts { display: grid; gap: 8px; margin-bottom: 16px; }
.monitor-health-alert { border-radius: 10px; font-size: .9rem; font-weight: 700; padding: 10px 12px; }
.monitor-health-alert.is-ok, .monitor-health-alert.is-info { background: #eff6ff; color: #1d4ed8; }
.monitor-health-alert.is-warn { background: #fef3c7; color: #92400e; }
.monitor-health-alert.is-critical { background: #fee2e2; color: #991b1b; }
.monitor-sparkline { align-items: end; display: flex; gap: 4px; height: 72px; }
.monitor-sparkline span { background: #2563eb; border-radius: 4px 4px 0 0; display: block; flex: 1; min-width: 4px; }
.monitor-stress-section { border-top: 1px solid #e2e8f0; margin-top: 20px; padding-top: 20px; }
.monitor-stress-form { align-items: end; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 12px; }
.monitor-stress-form label { display: grid; font-weight: 700; gap: 6px; }
.monitor-stress-form select, .monitor-stress-form input { font: inherit; padding: 10px; }
.monitor-stress-live { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; margin-top: 16px; padding: 14px; }
.monitor-compare-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 16px 0 8px; }
.monitor-compare-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; }
.monitor-compare-bars { align-items: end; display: flex; gap: 6px; height: 140px; margin-top: 12px; overflow-x: auto; }
.monitor-compare-bar-wrap { align-items: center; display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 36px; }
.monitor-compare-bar { background: #2563eb; border-radius: 4px 4px 0 0; display: block; width: 100%; }
.monitor-compare-bar.is-alt { background: #16a34a; }
.monitor-compare-bar-wrap small { color: #64748b; font-size: .68rem; text-align: center; }
.developed-by-footer { color: #94a3b8; font-size: .72rem; margin-top: 28px; padding: 0 20px 20px; text-align: center; }
.notification-bell { position: relative; display: inline-flex; align-items: center; font-size: 1.1rem; text-decoration: none; }
.notification-badge { background: #dc2626; border-radius: 999px; color: #fff; font-size: .65rem; font-weight: 800; line-height: 1; min-width: 18px; padding: 3px 5px; position: absolute; right: -10px; text-align: center; top: -8px; }
.nav-dropdown-divider { border-top: 1px solid #e2e8f0; margin: 6px 0; }
.nav-dropdown-search-trigger { text-align: left; }
.nav-dropdown-search-title { align-items: center; display: flex; font-weight: 700; gap: 8px; }
.nav-dropdown-search-hint { color: #64748b; display: block; font-size: .78rem; font-weight: 600; margin-top: 4px; }
.nav-mobile-search-trigger { text-align: left; }
.nav-mobile-search-title { display: block; font-weight: 700; }
.nav-mobile-search-hint { color: #64748b; display: block; font-size: .82rem; font-weight: 600; margin-top: 4px; }
.contextual-help-overlay { inset: 0; position: fixed; z-index: 300; }
.contextual-help-overlay[hidden] { display: none; }
.contextual-help-backdrop { background: rgba(15, 23, 42, .45); inset: 0; position: absolute; }
.contextual-help-modal { background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, .2); display: flex; flex-direction: column; left: 50%; max-height: min(82vh, 720px); max-width: min(680px, calc(100vw - 32px)); position: absolute; top: 8vh; transform: translateX(-50%); width: 100%; }
.contextual-help-header { align-items: flex-start; border-bottom: 1px solid #e5e7eb; display: flex; gap: 12px; justify-content: space-between; padding: 18px 20px 14px; }
.contextual-help-header h2 { font-size: 1.15rem; margin: 0 0 4px; }
.contextual-help-hint { color: #64748b; font-size: .88rem; margin: 0; }
.contextual-help-close { background: transparent; border: 0; color: #64748b; cursor: pointer; font-size: 1.6rem; line-height: 1; padding: 0; }
.contextual-help-search-wrap { padding: 0 20px 12px; }
.contextual-help-input { border: 2px solid #bfdbfe; border-radius: 12px; font-size: 1rem; margin: 0; padding: 12px 14px; }
.contextual-help-input:focus { border-color: #2563eb; outline: none; }
.contextual-help-results { flex: 1; overflow-y: auto; padding: 0 20px 20px; }
.contextual-help-empty { margin: 8px 0 0; }
.contextual-help-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; margin-top: 12px; padding: 16px 18px; }
.contextual-help-card.is-blocked { background: #fff7ed; border-color: #fed7aa; }
.contextual-help-card.is-fallback { background: #eff6ff; border-color: #bfdbfe; }
.contextual-help-card h3 { font-size: 1.02rem; margin: 0 0 6px; }
.contextual-help-card p { color: #475569; line-height: 1.55; margin: 0 0 10px; }
.contextual-help-card h4 { color: #0f172a; font-size: .88rem; margin: 12px 0 6px; }
.contextual-help-card ul { color: #475569; margin: 0; padding-left: 18px; }
.contextual-help-card li { margin-bottom: 4px; }
.contextual-help-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.contextual-help-actions a { background: #2563eb; border-radius: 8px; color: #fff; font-size: .88rem; font-weight: 700; padding: 8px 12px; text-decoration: none; }
.contextual-help-actions a.secondary { background: #475569; }
.contextual-help-blocked-title { color: #9a3412; font-size: .82rem; font-weight: 800; letter-spacing: .04em; margin: 0 0 6px; text-transform: uppercase; }
.contextual-help-footer { border-top: 1px solid #e5e7eb; margin-top: auto; padding: 14px 20px 18px; }
.contextual-help-footer-label { color: #64748b; display: block; font-size: .82rem; font-weight: 700; margin-bottom: 8px; }
.contextual-help-footer-links { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.contextual-help-footer-links a { color: #2563eb; font-size: .9rem; font-weight: 700; text-decoration: none; }
.contextual-help-footer-links a:hover { text-decoration: underline; }
.sla-badge { border-radius: 999px; display: inline-block; font-size: .72rem; font-weight: 800; padding: 4px 8px; }
.sla-billing { background: #fef3c7; color: #92400e; }
.sla-overdue { background: #fee2e2; color: #991b1b; }
.sla-waiting { background: #ffedd5; color: #9a3412; }
.developed-by-link { color: #64748b; font-weight: 600; text-decoration: none; }
.developed-by-link:hover { color: #2563eb; text-decoration: underline; }
.tutorial-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 20px; }
.tutorial-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; color: inherit; display: block; padding: 20px; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.tutorial-card:hover { border-color: #2563eb; transform: translateY(-1px); }
.tutorial-card strong { display: block; margin-bottom: 8px; }
.tutorial-steps { counter-reset: tutorial-step; list-style: none; margin: 24px 0 0; padding: 0; }
.tutorial-steps > li { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; counter-increment: tutorial-step; margin-bottom: 14px; padding: 18px 18px 18px 58px; position: relative; }
.tutorial-steps > li::before { align-items: center; background: #2563eb; border-radius: 999px; color: #fff; content: counter(tutorial-step); display: flex; font-size: .88rem; font-weight: 800; height: 28px; justify-content: center; left: 16px; position: absolute; top: 18px; width: 28px; }
.tutorial-steps > li strong { color: #0f172a; display: block; font-size: 1.02rem; margin-bottom: 8px; }
.tutorial-steps > li p { color: #475569; line-height: 1.65; margin: 0; }
.tutorial-tip { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; color: #1e40af; font-size: .92rem; margin-top: 10px; padding: 10px 12px; }
@media (max-width: 782px) {
    nav { align-items: center; flex-wrap: nowrap; gap: 10px 12px; }
    .nav-brand { flex: 1 1 auto; min-width: 0; }
    .app-nav-shell { flex: 0 0 auto; }
    .app-nav-shell--auth .nav-desktop { display: none; }
    .app-nav-shell--auth .nav-mobile-toggle { display: inline-flex; }
    .app-nav-shell--guest .nav-desktop { display: flex; flex-wrap: wrap; gap: 8px; }
    .app-nav-shell--guest .nav-mobile-toggle { display: none; }
    .app-nav-shell--guest .nav-mobile-panel { display: none !important; }
    .nav-lang { flex: 0 0 auto; }
    .voluntariado-admin-grid { grid-template-columns: 1fr; }
    .voluntariado-weekdays { font-size: .68rem; gap: 4px; margin: 12px 0 6px; }
    .voluntariado-weekdays .weekday-long { display: none; }
    .voluntariado-weekdays .weekday-short { display: inline; }
    .voluntariado-days { gap: 4px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .voluntariado-day { align-items: center; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 4px 2px; text-align: center; }
    .voluntariado-day-number { font-size: .95rem; margin-bottom: 0; }
    .voluntariado-day-meta { display: none; }
    .voluntariado-calendar-mobile-hint { display: block; }
    table.voluntariado-responsive-table { background: transparent; border: 0; display: block; overflow: visible; white-space: normal; }
    table.voluntariado-responsive-table thead { display: none; }
    table.voluntariado-responsive-table tbody { display: grid; gap: 12px; }
    table.voluntariado-responsive-table tr { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 4px 12px rgba(15, 23, 42, .04); display: block; padding: 14px; }
    table.voluntariado-responsive-table tr.muted { opacity: .75; }
    table.voluntariado-responsive-table td { align-items: flex-start; border-bottom: 1px solid #f1f5f9; display: flex; gap: 12px; justify-content: space-between; padding: 10px 0; white-space: normal; }
    table.voluntariado-responsive-table td:last-child { border-bottom: 0; padding-bottom: 0; }
    table.voluntariado-responsive-table td:first-child { padding-top: 0; }
    table.voluntariado-responsive-table td::before { color: #64748b; content: attr(data-label); flex: 0 0 38%; font-size: .78rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
    table.voluntariado-responsive-table td.table-actions,
    table.voluntariado-responsive-table td:has(.table-actions) { flex-direction: column; }
    table.voluntariado-responsive-table td.table-actions::before,
    table.voluntariado-responsive-table td:has(.table-actions)::before { margin-bottom: 4px; }
    table:not(.voluntariado-responsive-table) { display: block; overflow-x: auto; white-space: nowrap; }
    button, .button { min-height: 44px; }
}
@media (max-width: 480px) {
    main { padding: 20px 12px; }
    .card, .voluntariado-card { padding: 18px; }
    .voluntariado-weekdays { font-size: .62rem; }
    .voluntariado-days { gap: 3px; }
    .voluntariado-day { min-height: 40px; }
    .voluntariado-day-number { font-size: .85rem; }
    .voluntariado-calendar-header { gap: 12px; }
    .voluntariado-month-label { text-align: center; }
    .time-presets button { flex: 1 1 100%; }
    .voluntariado-coverage-row { align-items: flex-start; flex-direction: column; gap: 6px; }
}