/* Reviewed visual subset of BA-090; see docs/FASE_1E2_UI_MOVIL.md. */
:root {--bg-primary: #0a0a12;--bg-secondary: #12121e;--bg-card: rgba(18, 18, 30, 0.7);--bg-card-solid: #12121e;--border-subtle: #1e1e3a;--border-glow: rgba(240, 192, 64, 0.15);--accent-gold: #f0c040;--accent-gold-dim: rgba(240, 192, 64, 0.15);--accent-indigo: #6366f1;--accent-indigo-dim: rgba(99, 102, 241, 0.15);--success: #22c55e;--danger: #ef4444;--warning: #f59e0b;--text-primary: #e2e8f0;--text-secondary: #94a3b8;--text-muted: #64748b;--radius-card: 12px;--radius-btn: 8px;--radius-full: 9999px;--transition: 0.2s ease;--transition-slow: 0.35s ease;--sidebar-width: 240px;--bottom-nav-height: 72px;--header-height: 64px;}
*,
*::before,
*::after {box-sizing: border-box;margin: 0;padding: 0;}
html {font-size: 16px;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
body {font-family: "Inter", sans-serif;background: var(--bg-primary);color: var(--text-primary);min-height: 100vh;overflow-x: hidden;}
::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-track {background: var(--bg-primary);}
::-webkit-scrollbar-thumb {background: var(--border-subtle);border-radius: var(--radius-full);}
::-webkit-scrollbar-thumb:hover {background: var(--text-muted);}
.hidden {display: none !important;}
.login-screen {position: fixed;inset: 0;display: flex;align-items: center;justify-content: center;background: var(--bg-primary);z-index: 1000;}
.login-container {text-align: center;padding: 2rem;max-width: 380px;width: 100%;}
.login-title {font-size: 2rem;font-weight: 800;background: linear-gradient(135deg, var(--accent-gold), #fde68a);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;letter-spacing: -0.5px;}
.login-subtitle {color: var(--text-secondary);font-size: 0.875rem;margin-top: 0.25rem;font-weight: 400;}
.btn {display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;padding: 0.75rem 1.5rem;border: none;border-radius: var(--radius-btn);font-family: inherit;font-size: 0.875rem;font-weight: 600;cursor: pointer;transition: all var(--transition);min-height: 44px;white-space: nowrap;}
.btn-primary {background: linear-gradient(135deg, var(--accent-gold), #e0a820);color: #0a0a12;box-shadow: 0 4px 14px rgba(240, 192, 64, 0.25);}
.btn-primary:hover {box-shadow: 0 6px 20px rgba(240, 192, 64, 0.4);transform: translateY(-1px);}
.btn-primary:active {transform: translateY(0);}
.btn-primary:disabled {opacity: 0.4;cursor: not-allowed;transform: none;box-shadow: none;}
.btn-secondary {background: var(--accent-indigo);color: white;box-shadow: 0 4px 14px rgba(99, 102, 241, 0.2);}
.btn-secondary:hover {box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);transform: translateY(-1px);}
.btn-ghost {background: transparent;color: var(--text-secondary);border: 1px solid var(--border-subtle);}
.btn-ghost:hover {background: var(--bg-secondary);color: var(--text-primary);border-color: var(--text-muted);}
.btn-sm {padding: 0.4rem 0.8rem;font-size: 0.75rem;min-height: 32px;border-radius: 6px;}
.btn-full {width: 100%;}
.btn-login {width: 100%;padding: 1rem;font-size: 1rem;border-radius: var(--radius-card);}
.main-app {display: flex;min-height: 100vh;}
.sidebar {width: var(--sidebar-width);height: 100vh;position: fixed;left: 0;top: 0;background: var(--bg-secondary);border-right: 1px solid var(--border-subtle);display: flex;flex-direction: column;padding: 1.5rem 0;z-index: 50;transition: transform var(--transition-slow);}
.sidebar-brand {display: flex;align-items: center;gap: 0.75rem;padding: 0 1.5rem;margin-bottom: 2rem;}
.brand-text {font-size: 1.25rem;font-weight: 800;background: linear-gradient(135deg, var(--accent-gold), #fde68a);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
.brand-subtext {display: block;margin-top: 0.08rem;color: var(--text-muted);font-size: 0.68rem;font-weight: 700;}
.sidebar-nav {flex: 1;display: flex;flex-direction: column;gap: 0.25rem;padding: 0 0.75rem;}
.sidebar .nav-item {display: flex;align-items: center;gap: 0.75rem;padding: 0.75rem 1rem;border-radius: var(--radius-btn);color: var(--text-secondary);text-decoration: none;font-size: 0.9rem;font-weight: 500;transition: all var(--transition);min-height: 44px;}
.sidebar .nav-item:hover {background: rgba(255, 255, 255, 0.04);color: var(--text-primary);}
.sidebar .nav-item.active {background: var(--accent-gold-dim);color: var(--accent-gold);}
.sidebar-footer {padding: 0.75rem;}
.content {flex: 1;margin-left: var(--sidebar-width);padding: 0 1.5rem 2rem;max-width: 100%;min-height: 100vh;}
.top-header {display: flex;align-items: center;justify-content: space-between;height: var(--header-height);position: sticky;top: 0;background: rgba(10, 10, 18, 0.85);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);z-index: 40;margin: 0 -1.5rem;padding: 0 1.5rem;border-bottom: 1px solid var(--border-subtle);}
.header-title {font-size: 1.25rem;font-weight: 700;}
.header-right {display: flex;align-items: center;gap: 1rem;}
.bottom-nav {display: none;position: fixed;bottom: 0;left: 0;right: 0;height: var(--bottom-nav-height);background: rgba(18, 18, 30, 0.95);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border-top: 1px solid var(--border-subtle);z-index: 100;padding: 0 0.5rem;padding-bottom: env(safe-area-inset-bottom, 0);}
.bottom-nav-item {display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 0.25rem;flex: 1;color: var(--text-muted);text-decoration: none;font-size: 0.65rem;font-weight: 500;transition: all var(--transition);min-height: 44px;padding: 0.5rem 0;position: relative;border: 0;background: transparent;font-family: inherit;cursor: pointer;}
.bottom-nav-item.active {color: var(--accent-gold);}
.bottom-nav-item.active::before {content: "";position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 24px;height: 3px;background: var(--accent-gold);border-radius: 0 0 4px 4px;}
.view {display: none;padding-top: 1.25rem;padding-bottom: 1rem;}
.view.active {display: block;}
.status-badge {display: inline-flex;align-items: center;gap: 0.4rem;padding: 0.25rem 0.7rem;border-radius: var(--radius-full);font-size: 0.7rem;font-weight: 600;text-transform: capitalize;}
.status-badge::before {content: "";width: 6px;height: 6px;border-radius: 50%;flex-shrink: 0;}
.appointment-card {background: rgba(18, 18, 30, 0.82);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border: 1px solid var(--border-subtle);border-radius: 10px;padding: 1rem 1.25rem;display: flex;align-items: center;gap: 1rem;transition: all var(--transition);}
.appointment-card:hover {border-color: rgba(255, 255, 255, 0.08);background: rgba(18, 18, 30, 0.9);}
.agenda-group-count {background: rgba(255, 255, 255, 0.04);border: 1px solid var(--border-subtle);border-radius: var(--radius-full);color: var(--text-secondary);font-size: 0.74rem;font-weight: 600;padding: 0.35rem 0.7rem;white-space: nowrap;}
.agenda-group {display: flex;flex-direction: column;gap: 0.65rem;}
.agenda-group-header {align-items: flex-end;display: flex;gap: 1rem;justify-content: space-between;padding: 0.25rem 0.15rem 0;}
.agenda-group-header h3 {font-size: 0.95rem;margin: 0.1rem 0 0;}
.agenda-group-list {display: flex;flex-direction: column;gap: 0.6rem;}
.appt-time {font-size: 1.1rem;font-weight: 700;color: var(--accent-gold);min-width: 60px;text-align: center;flex-shrink: 0;}
.appt-info {flex: 1;min-width: 0;}
.appt-client {font-weight: 600;font-size: 0.9rem;margin-bottom: 0.2rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.appt-detail {font-size: 0.75rem;color: var(--text-secondary);}
.appt-detail span {margin-right: 0.75rem;}
.input-field {background: var(--bg-secondary);border: 1px solid var(--border-subtle);border-radius: var(--radius-btn);color: var(--text-primary);font-family: inherit;font-size: 0.85rem;padding: 0.65rem 0.9rem;outline: none;transition: all var(--transition);width: 100%;min-height: 44px;}
.input-field:focus {border-color: var(--accent-gold);box-shadow: 0 0 0 3px var(--accent-gold-dim);}
.input-field::placeholder {color: var(--text-muted);}
input[type="date"]::-webkit-calendar-picker-indicator {filter: invert(0.7);cursor: pointer;}
.search-bar {position: relative;margin-bottom: 1.25rem;}
.search-icon {position: absolute;left: 1rem;top: 50%;transform: translateY(-50%);font-size: 1.1rem;pointer-events: none;}
.search-input {width: 100%;background: var(--bg-secondary);border: 1px solid var(--border-subtle);border-radius: var(--radius-card);color: var(--text-primary);font-family: inherit;font-size: 0.9rem;padding: 0.85rem 1rem 0.85rem 3rem;outline: none;transition: all var(--transition);min-height: 48px;}
.search-input:focus {border-color: var(--accent-gold);box-shadow: 0 0 0 3px var(--accent-gold-dim);}
.search-input::placeholder {color: var(--text-muted);}
.client-card {background: var(--bg-card);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border: 1px solid var(--border-subtle);border-radius: var(--radius-card);padding: 1rem 1.25rem;display: flex;align-items: center;gap: 1rem;transition: all var(--transition);}
.client-card:hover {border-color: var(--accent-gold);box-shadow: 0 2px 12px var(--accent-gold-dim);transform: translateX(4px);}
.client-card-main {flex: 1;min-width: 0;display: flex;align-items: center;gap: 1rem;padding: 0;border: 0;background: transparent;color: inherit;text-align: left;font: inherit;cursor: pointer;}
.client-card-main:not(button) {cursor: default;}
.client-info {flex: 1;min-width: 0;}
.client-name {font-weight: 600;font-size: 0.9rem;margin-bottom: 0.15rem;}
.client-phone {font-size: 0.75rem;color: var(--text-secondary);}
.client-actions {display: flex;justify-content: flex-end;gap: 0.5rem;flex-shrink: 0;}
.branch-chip {display: inline-flex;align-items: center;border: 1px solid var(--branch-accent, var(--accent-gold));border-radius: 999px;background: var(--branch-accent-bg, rgba(212, 175, 55, 0.12));color: var(--text-primary);font-size: 0.7rem;font-weight: 750;line-height: 1;margin-left: 0.4rem;min-height: 22px;padding: 0.25rem 0.5rem;vertical-align: middle;}
.appt-detail .branch-chip {margin-left: 0;}
.appointment-card.cancelled-card {opacity: 0.65;border-left-color: var(--danger);}
.appointment-card.cancelled-card:hover {opacity: 0.85;}
@media (max-width: 768px) {
.sidebar {display: none;}
.content {margin-left: 0;padding: 0 1rem 2rem;padding-bottom: calc(var(--bottom-nav-height) + 2rem);}
.bottom-nav {display: flex;}
.appointment-card {flex-wrap: wrap;padding: 0.85rem 1rem;}
.agenda-group-header {align-items: flex-start;flex-direction: column;}
.client-card {flex-wrap: wrap;}
.client-card-main {flex-basis: 100%;}
.client-actions {flex: 1;justify-content: flex-end;}
.top-header {margin: 0 -1rem;padding: 0 1rem;}
}
:root {--bg-primary: #08090b;--bg-secondary: #111318;--bg-card: rgba(22, 24, 30, 0.9);--bg-card-solid: #171a21;--border-subtle: #282c35;--accent-gold: #d8b75d;--accent-gold-dim: rgba(216, 183, 93, 0.14);--accent-indigo: #7c8cff;--success: #35c67a;--danger: #ef6461;--warning: #e6a93d;--text-primary: #f3f4f6;--text-secondary: #a9afba;--text-muted: #707887;--sidebar-width: 252px;}
body {background:
    linear-gradient(180deg, rgba(216, 183, 93, 0.06), transparent 240px),
    radial-gradient(circle at 80% 0%, rgba(124, 140, 255, 0.08), transparent 340px),
    var(--bg-primary);}
.sidebar {background: linear-gradient(180deg, #151820, #0d0f14);border-right-color: rgba(255, 255, 255, 0.08);padding: 1.1rem 0;}
.sidebar-brand {padding: 0 1rem 1rem;margin: 0 0.75rem 1rem;border-bottom: 1px solid rgba(255, 255, 255, 0.08);}
.brand-text {background: none;-webkit-text-fill-color: var(--text-primary);color: var(--text-primary);font-size: 1rem;letter-spacing: 0;}
.sidebar .nav-item {border-radius: 10px;color: #aeb5c2;font-weight: 650;}
.sidebar .nav-item.active {background: #222630;color: var(--text-primary);box-shadow: inset 3px 0 0 var(--accent-gold);}
.content {padding: 0 2rem 2.25rem;}
.top-header {height: 72px;margin: 0 -2rem;padding: 0 2rem;background: rgba(8, 9, 11, 0.76);}
.header-title {font-size: 1.05rem;color: var(--text-secondary);}
.appointment-card,
.client-card {background: rgba(23, 26, 33, 0.94);border-color: rgba(255, 255, 255, 0.08);}
.appointment-card {border-radius: 11px;}
.appt-time {min-width: 76px;padding: 0.55rem 0.7rem;border-radius: 10px;background: rgba(216, 183, 93, 0.12);color: #f2d98a;}
.btn-primary {background: #d8b75d;color: #0a0b0f;box-shadow: none;}
.btn-primary:hover {box-shadow: 0 8px 22px rgba(216, 183, 93, 0.22);}
@media (max-width: 768px) {
.content {padding: 0 1rem 2rem;padding-bottom: calc(var(--bottom-nav-height) + 2rem);}
.top-header {margin: 0 -1rem;padding: 0 1rem;height: auto;min-height: var(--header-height);gap: 0.75rem;}
.header-right {gap: 0.55rem;}
}
.client-card {border-radius: 10px;}
.appointment-card {display: grid;grid-template-columns: 88px minmax(0, 1fr) auto;align-items: center;gap: 0.9rem;border-radius: 10px;padding: 0.9rem;background: #171a21;}
.appointment-card:hover {border-color: rgba(216, 183, 93, 0.28);background: #1a1e27;transform: translateY(-1px);}
.appt-time {display: flex;flex-direction: column;justify-content: center;min-width: 0;width: 88px;min-height: 58px;padding: 0.55rem 0.6rem;border-radius: 8px;background: rgba(216, 183, 93, 0.12);text-align: center;}
.appt-time strong,
.appt-time small {display: block;}
.appt-time strong {color: #f2d98a;font-size: 1.12rem;line-height: 1.1;}
.appt-time small {margin-top: 0.2rem;color: var(--text-muted);font-size: 0.67rem;font-weight: 800;text-transform: uppercase;}
.appt-client-row {display: flex;align-items: flex-start;justify-content: space-between;gap: 0.75rem;min-width: 0;}
.appt-client {margin-bottom: 0.18rem;color: var(--text-primary);font-size: 0.96rem;font-weight: 800;}
.appt-detail {display: flex;flex-wrap: wrap;gap: 0.35rem;margin-top: 0.55rem;}
.appt-detail span {display: inline-flex;align-items: center;min-height: 26px;margin-right: 0;padding: 0.25rem 0.5rem;border-radius: 7px;background: rgba(255, 255, 255, 0.045);color: var(--text-secondary);font-size: 0.72rem;font-weight: 700;overflow-wrap: anywhere;}
.status-badge {flex-shrink: 0;white-space: nowrap;}
.search-bar {padding: 0.85rem;border: 1px solid rgba(255, 255, 255, 0.08);border-radius: 10px;background: rgba(17, 19, 24, 0.7);}
.search-bar {margin-bottom: 1rem;}
.client-card {display: grid;grid-template-columns: minmax(220px, 1fr) auto auto;align-items: stretch;padding: 0.85rem;background: #171a21;}
.client-card:hover {border-color: rgba(216, 183, 93, 0.28);box-shadow: none;transform: none;}
.client-name {font-size: 0.95rem;font-weight: 800;}
.client-phone {overflow-wrap: anywhere;}
.client-actions {align-items: center;}
.client-actions .btn-sm {min-width: 58px;}
.client-result-note {grid-column: 1 / -1;padding: 0.7rem 0.85rem;border: 1px solid rgba(88, 166, 255, 0.24);border-radius: 6px;color: var(--text-secondary);background: rgba(88, 166, 255, 0.06);font-size: 0.78rem;}
@media (max-width: 768px) {
.appointment-card {grid-template-columns: 76px minmax(0, 1fr);align-items: start;}
.appt-time {width: 76px;min-height: 54px;}
.appt-client-row {flex-direction: column;gap: 0.45rem;}
.client-card {display: grid;grid-template-columns: 1fr;}
.client-actions {justify-content: stretch;}
.client-actions .btn-sm {flex: 1;}
}
@media (max-width: 460px) {
.appt-detail span {width: 100%;}
.appointment-card {grid-template-columns: 1fr;}
.appt-time {align-items: center;flex-direction: row;gap: 0.5rem;width: 100%;min-height: 42px;}
.appt-time small {margin-top: 0;}
}
:root {--bg-primary: #07080a;--bg-secondary: #101217;--bg-card: rgba(19, 22, 28, 0.94);--bg-card-solid: #151820;--border-subtle: rgba(255, 255, 255, 0.085);--border-strong: rgba(216, 183, 93, 0.32);--surface-raised: #181b23;--surface-soft: rgba(255, 255, 255, 0.045);--accent-gold: #d7b45a;--accent-gold-soft: #f0d989;--accent-indigo: #8b9aff;--success: #37c47d;--danger: #ee6b66;--warning: #e5a943;--shadow-soft: 0 18px 54px rgba(0, 0, 0, 0.28);--shadow-tight: 0 10px 28px rgba(0, 0, 0, 0.2);--radius-card: 10px;}
body {background:
    linear-gradient(180deg, rgba(216, 183, 93, 0.055), transparent 260px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    var(--bg-primary);background-size: auto, 48px 48px, 48px 48px, auto;}
.login-screen {background:
    linear-gradient(180deg, rgba(216, 183, 93, 0.12), transparent 42%),
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.08), transparent 34%),
    #060708;}
.login-container {max-width: 430px;padding: 2.2rem;border: 1px solid rgba(255, 255, 255, 0.09);border-radius: 14px;background: rgba(13, 15, 19, 0.88);box-shadow: var(--shadow-soft);}
.login-title {background: none;color: var(--text-primary);-webkit-text-fill-color: currentColor;font-size: 1.8rem;letter-spacing: 0;}
.login-subtitle {color: var(--accent-gold-soft);font-weight: 700;letter-spacing: 0;}
.status-badge {min-height: 24px;padding: 0.24rem 0.5rem;border-radius: 999px;font-weight: 750;}
.appointment-card {padding: 0.72rem;gap: 0.7rem;}
.appt-time {min-width: 72px;}
.appt-detail {gap: 0.35rem 0.7rem;}
.client-card {padding: 0.72rem;}
.client-actions {gap: 0.35rem;}
.sidebar {background:
    linear-gradient(180deg, rgba(216, 183, 93, 0.055), transparent 180px),
    #101217;}
.sidebar-brand {gap: 0.85rem;}
.brand-text {font-size: 1.06rem;}
.brand-subtext {color: var(--accent-gold-soft);opacity: 0.78;font-size: 0.66rem;letter-spacing: 0.02em;}
.sidebar .nav-item {position: relative;min-height: 46px;border: 1px solid transparent;}
.sidebar .nav-item:hover {border-color: rgba(255, 255, 255, 0.08);background: rgba(255, 255, 255, 0.045);}
.sidebar .nav-item.active {border-color: rgba(216, 183, 93, 0.22);background:
    linear-gradient(90deg, rgba(216, 183, 93, 0.16), rgba(255, 255, 255, 0.035));}
.top-header {border-bottom-color: rgba(255, 255, 255, 0.075);box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);}
.header-title {color: var(--text-primary);font-weight: 800;}
.client-card,
.search-bar {box-shadow: var(--shadow-tight);}
.appointment-card,
.client-card {border-left: 3px solid rgba(216, 183, 93, 0.42);}
.appointment-card:hover,
.client-card:hover {box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);}
.appointment-card.cancelled-card {border-left-color: var(--danger);opacity: 0.78;}
.appt-time {border: 1px solid rgba(216, 183, 93, 0.2);background:
    linear-gradient(180deg, rgba(216, 183, 93, 0.14), rgba(216, 183, 93, 0.065));}
.appt-detail span {border: 1px solid rgba(255, 255, 255, 0.055);background: rgba(255, 255, 255, 0.04);}
.status-badge {border: 1px solid transparent;font-weight: 800;}
.agenda-group-header {border-color: rgba(255, 255, 255, 0.075);}
.agenda-group-header h3 {color: var(--text-primary);}
.agenda-group-count {border-color: rgba(255, 255, 255, 0.07);}
.btn {letter-spacing: 0;}
.btn-primary {background: linear-gradient(180deg, #e2c775, #cda94c);color: #08090b;box-shadow: 0 10px 28px rgba(216, 183, 93, 0.18);}
.btn-primary:hover {box-shadow: 0 14px 34px rgba(216, 183, 93, 0.26);}
.btn-ghost {background: rgba(255, 255, 255, 0.025);}
.bottom-nav {border-top-color: rgba(255, 255, 255, 0.09);background: rgba(10, 11, 14, 0.94);box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.32);}
.bottom-nav-item.active {color: var(--accent-gold-soft);}
@media (max-width: 768px) {
body {background-size: auto, 36px 36px, 36px 36px, auto;}
.login-container {width: calc(100% - 2rem);padding: 1.6rem;}
.login-title {font-size: 1.5rem;}
.top-header {box-shadow: none;}
.appointment-card,
.client-card {border-left-width: 2px;}
}
.header-title {position: relative;}
.header-title::after {content: "";position: absolute;left: 0;bottom: -0.55rem;width: 2.25rem;height: 2px;border-radius: 2px;background: var(--accent-gold);opacity: 0.72;}
.btn:focus-visible,
.nav-item:focus-visible,
.bottom-nav-item:focus-visible,
.input-field:focus-visible,
.search-input:focus-visible {outline: 2px solid var(--accent-gold-soft);outline-offset: 3px;}
@media (max-width: 768px) {
.header-title::after {display: none;}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {scroll-behavior: auto !important;transition-duration: 0.01ms !important;}
}
.appointment-card,
.client-card {padding: 0.72rem;gap: 0.7rem;}
.status-badge {min-height: 24px;padding: 0.24rem 0.5rem;border-radius: 999px;font-weight: 750;}
@media (max-width: 768px) {
:root {--bottom-nav-height: 68px;}
html,
body,
.content {max-width: 100%;overflow-x: clip;}
.content {padding: 0 0.8rem calc(var(--bottom-nav-height) + 1.75rem + env(safe-area-inset-bottom, 0px));}
.top-header {display: grid;grid-template-columns: minmax(0, 1fr) minmax(132px, 46vw);min-height: 64px;height: auto;margin: 0 -0.8rem;padding: 0.6rem 0.8rem;gap: 0.65rem;}
.header-left,
.header-right {min-width: 0;}
.header-title {overflow: hidden;font-size: 1rem;text-overflow: ellipsis;white-space: nowrap;}
.header-right {width: 100%;}
.header-right {justify-content: flex-end;}
.bottom-nav {height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));padding: 0 0.25rem env(safe-area-inset-bottom, 0px);}
.bottom-nav-item {min-width: 0;min-height: 48px;padding: 0.4rem 0.15rem;}
.bottom-nav-label {max-width: 100%;overflow: hidden;font-size: 0.61rem;line-height: 1.1;text-overflow: ellipsis;white-space: nowrap;}
.appointment-card {grid-template-columns: 70px minmax(0, 1fr);padding: 0.75rem;gap: 0.65rem;}
.appt-time {width: 70px;min-height: 52px;}
.appt-detail span {max-width: 100%;white-space: normal;}
.client-card {gap: 0.65rem;}
.client-actions {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));width: 100%;gap: 0.45rem;}
.client-actions .btn-sm {min-width: 0;min-height: 44px;width: 100%;justify-content: center;}
.search-bar {padding: 0.65rem;}
input,
select,
textarea,
.input-field,
.search-input {font-size: 16px;}
}
:root {--polish-bg: #0d0f13;--polish-surface: #15181e;--polish-surface-raised: #191d24;--polish-border: rgba(255, 255, 255, 0.085);--polish-border-strong: rgba(216, 183, 93, 0.28);--polish-gold: #d8b75d;--polish-text: #f4f5f7;--polish-muted: #a4abb6;}
body {background: var(--polish-bg);}
.sidebar {background: #111318;border-right: 1px solid var(--polish-border);}
.sidebar .nav-item {min-height: 44px;border-radius: 7px;}
.sidebar .nav-item.active {border-color: rgba(216, 183, 93, 0.2);background: rgba(216, 183, 93, 0.1);box-shadow: inset 3px 0 0 var(--polish-gold);}
.top-header {background: rgba(13, 15, 19, 0.94);border-bottom-color: var(--polish-border);box-shadow: none;}
.header-title::after {display: none;}
.appointment-card,
.client-card,
.search-bar {border-color: var(--polish-border);border-radius: 8px;background: var(--polish-surface);box-shadow: none;}
.btn-primary {background: var(--polish-gold);box-shadow: none;}
.btn-primary:hover {background: #e0c36f;box-shadow: none;}
.btn-ghost {background: #181b21;}
.btn-ghost:hover {background: #1e222a;}
.appointment-card,
.client-card {border-left: 2px solid rgba(216, 183, 93, 0.5);}
.appointment-card:hover,
.client-card:hover {border-color: rgba(216, 183, 93, 0.38);box-shadow: none;transform: none;}
.appt-time {border-radius: 7px;background: rgba(216, 183, 93, 0.08);}
.appt-detail span {border-radius: 5px;background: rgba(255, 255, 255, 0.035);}
.bottom-nav {background: rgba(13, 15, 19, 0.98);}
@media (max-width: 768px) {
.appointment-card {border-radius: 8px;}
}
.appt-card-badges {display: flex;align-items: center;justify-content: flex-end;flex-wrap: wrap;gap: 0.35rem;}
@media (max-width: 768px) {
.appt-card-badges {justify-content: flex-start;}
}
html[data-theme="light"] {color-scheme: light;--bg-primary: #f5f6f8;--bg-secondary: #ffffff;--bg-card: rgba(255, 255, 255, 0.96);--bg-card-solid: #ffffff;--border-subtle: rgba(27, 32, 40, 0.13);--border-strong: rgba(151, 112, 25, 0.4);--surface-raised: #ffffff;--surface-soft: rgba(27, 32, 40, 0.045);--accent-gold: #98711c;--accent-gold-soft: #72520f;--accent-gold-dim: rgba(152, 113, 28, 0.13);--accent-indigo: #4d5fc4;--success: #187a49;--danger: #bc3e3a;--warning: #9b6507;--text-primary: #171a20;--text-secondary: #4d5664;--text-muted: #687383;--shadow-soft: 0 18px 48px rgba(25, 34, 48, 0.12);--shadow-tight: 0 8px 22px rgba(25, 34, 48, 0.09);--polish-bg: #f5f6f8;--polish-surface: #ffffff;--polish-surface-raised: #f8f9fb;--polish-border: rgba(27, 32, 40, 0.13);--polish-border-strong: rgba(151, 112, 25, 0.34);--polish-gold: #98711c;--polish-text: #171a20;--polish-muted: #657080;}
html[data-theme="light"] body,
html[data-theme="light"] .login-screen {background: var(--polish-bg);color: var(--text-primary);}
html[data-theme="light"] .login-container,
html[data-theme="light"] .sidebar,
html[data-theme="light"] .top-header,
html[data-theme="light"] .bottom-nav {border-color: var(--polish-border);background: rgba(255, 255, 255, 0.97);box-shadow: var(--shadow-tight);}
html[data-theme="light"] .sidebar .nav-item,
html[data-theme="light"] .bottom-nav-item {color: var(--text-secondary);}
html[data-theme="light"] .sidebar .nav-item:hover {border-color: rgba(27, 32, 40, 0.12);background: rgba(27, 32, 40, 0.045);}
html[data-theme="light"] .sidebar .nav-item.active,
html[data-theme="light"] .bottom-nav-item.active {border-color: rgba(152, 113, 28, 0.22);background: rgba(152, 113, 28, 0.1);color: var(--text-primary);}
html[data-theme="light"] .appt-detail span {border-color: rgba(27, 32, 40, 0.1);background: rgba(27, 32, 40, 0.04);}
html[data-theme="light"] .appointment-card,
html[data-theme="light"] .client-card,
html[data-theme="light"] .search-bar {border-color: var(--polish-border);background: var(--polish-surface);box-shadow: none;}
html[data-theme="light"] .input-field,
html[data-theme="light"] .search-input,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {border-color: rgba(27, 32, 40, 0.16);background-color: #ffffff;color: var(--text-primary);}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {color: #7a8492;}
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="month"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator {filter: none;}
html[data-theme="light"] .btn-ghost {border-color: rgba(27, 32, 40, 0.14);background: #f0f2f5;color: var(--text-primary);}
html[data-theme="light"] .btn-ghost:hover {background: #e7eaf0;}
[role="button"]:focus-visible,
button:focus-visible,
a:focus-visible {outline:3px solid var(--accent-gold);outline-offset:3px;}
@media (max-width:768px) {
.login-container {margin-top:24px;margin-bottom:90px;}
}
@media (prefers-reduced-motion:reduce) {
*,
*::before,
*::after {transition:none!important;scroll-behavior:auto!important;}
}
.appointment-card .appt-client-row,
.appointment-card .appt-client-row > div {min-width: 0;max-width: 100%;}
.appointment-card .appt-client-row {flex-wrap: wrap;}
.appointment-card .appt-client {white-space: normal;overflow-wrap: anywhere;overflow: visible;text-overflow: clip;line-height: 1.35;}
.appointment-card .appt-time {flex-direction: column;align-items: center;align-self: start;justify-content: center;min-width: 0;gap: 0.25rem;padding-inline: 0.35rem;font-variant-numeric: tabular-nums;}
.appointment-card .appt-time strong,
.appointment-card .appt-time small {margin: 0;white-space: nowrap;line-height: 1.25;}
.appointment-card .appt-time small {color: var(--text-secondary);}
html[data-theme="light"] .appointment-card .appt-time,
html[data-theme="light"] .appointment-card .appt-time strong {color: var(--accent-gold-soft);}
@media (max-width: 768px) {
#main-app .top-header {grid-template-columns: minmax(0, 1fr) minmax(132px, min(180px, 50vw));padding-right: 64px;}
#main-app .header-title {white-space: normal;overflow-wrap: anywhere;}
#main-app .content {padding-bottom: calc(var(--bottom-nav-height) + 90px + env(safe-area-inset-bottom, 0px));}
}
@media (min-width: 769px) {
#content:has(> #view-citas.active) {min-width: 0;}
#content:has(> #view-citas.active) > .top-header {min-width: 0;height: auto;min-height: 72px;flex-wrap: wrap;gap: 0.5rem;padding-block: 0.5rem;}
#content:has(> #view-citas.active) .header-right {min-width: 0;max-width: 100%;flex-wrap: wrap;}
}
#view-citas {--text-muted: #b3bbc8;--polish-muted: #b3bbc8;}
html[data-theme="light"] #view-citas {--text-muted: #4d5664;--polish-muted: #4d5664;}
#citas-list .appointment-card {display: grid;grid-template-columns: 64px minmax(0, 1fr);align-items: start;gap: 0.35rem 0.65rem;padding: 0.7rem;min-width: 0;}
#citas-list .appt-time {width: auto;min-width: 0;padding: 0.4rem 0;background: transparent;white-space: nowrap;}
#citas-list .appt-time strong {font-size: 1rem;}
#citas-list .appt-info,
#citas-list .appt-client-row > div {min-width: 0;width: auto;}
#citas-list .appt-client-row {display: flex;flex-direction: column;align-items: flex-start;gap: 0.3rem;}
#citas-list .appt-client {font-size: 1rem;line-height: 1.35;white-space: normal;overflow-wrap: anywhere;word-break: normal;}
#citas-list .appt-card-badges {justify-content: flex-start;flex-wrap: wrap;}
#citas-list .appt-detail {display: flex;flex-direction: column;align-items: flex-start;gap: 0.2rem;margin-top: 0.3rem;}
#citas-list .appt-detail > span {max-width: 100%;padding: 0;border: 0;background: transparent;font-size: 0.875rem;line-height: 1.35;white-space: normal;overflow-wrap: anywhere;color: var(--text-secondary);}
.appt-disclosure {grid-column: 1 / -1;min-width: 0;width: 100%;}
.appt-context-date {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip-path: inset(50%);white-space: nowrap;border: 0;}
.appt-disclosure > summary {min-height: 44px;padding: 0.65rem 0;cursor: pointer;font-size: 0.875rem;line-height: 1.4;color: var(--text-primary);}
.appt-disclosure > summary:focus-visible {outline: 2px solid var(--text-primary);outline-offset: 2px;}
.appt-secondary {display: grid;gap: 0.35rem;padding-bottom: 0.5rem;font-size: 0.875rem;color: var(--text-secondary);overflow-wrap: anywhere;}
#citas-list .status-badge {font-size: 0.75rem;}
.appt-disclosure .btn {min-height: 44px;min-width: 44px;white-space: normal;font-size: 0.875rem;}
#view-citas .agenda-group-header {padding: 0.35rem 0;margin-bottom: 0.35rem;background: transparent;}
#view-citas .agenda-group-header > div {display: none;}
#view-citas .agenda-group {margin-bottom: 0.7rem;}
#view-clientes {--text-muted: #b3bbc8;--polish-muted: #b3bbc8;}
html[data-theme="light"] #view-clientes {--text-muted: #4d5664;--polish-muted: #4d5664;}
#view-clientes .search-bar {margin: 0 0 0.4rem;padding: 0;border: 0;background: transparent;box-shadow: none;}
#view-clientes .search-input {min-height: 44px;min-width: 0;font-size: 1rem;}
#view-clientes .client-result-note {margin: 0.4rem 0;padding: 0;border: 0;background: transparent;font-size: 0.875rem;}
#view-clientes .client-directory-row {display: grid;grid-template-columns: minmax(0, 1fr) auto;gap: 0.35rem 0.75rem;padding: 0.7rem;min-width: 0;background: var(--bg-card-solid);}
#view-clientes .client-directory-row .client-card-main {grid-column: 1 / -1;min-height: 44px;width: 100%;}
#view-clientes .client-directory-row .client-info {min-width: 0;}
#view-clientes .client-directory-row .client-name {font-size: 1rem;white-space: normal;overflow-wrap: anywhere;line-height: 1.35;}
#view-clientes .client-directory-row .client-phone {font-size: 0.875rem;overflow-wrap: anywhere;}
#view-clientes .client-directory-row > .client-actions {grid-column: 1 / -1;display: flex;flex-wrap: wrap;justify-content: flex-start;gap: 0.5rem;}
#view-clientes .client-actions .btn {min-height: 44px;min-width: 44px;font-size: 0.875rem;white-space: normal;}
#view-clientes details > summary:focus-visible {outline: 2px solid var(--text-primary);outline-offset: 2px;}
@media (min-width: 1100px) {
#view-clientes .client-directory-row {grid-template-columns: minmax(180px, 1fr) auto auto 100px;align-items: center;}
#view-clientes .client-directory-row .client-card-main,
#view-clientes .client-directory-row > .client-actions {grid-column: auto;}
}