:root {
  --ink: #1A1412;
  --ink-soft: #5C4D4A;
  --ink-faint: #9A8985;
  --paper: #FAF8F5;
  --paper-2: #F2EAE4;
  --line: #E8DDD6;
  --rose: #C23A5C;
  --rose-deep: #96233F;
  --rose-soft: rgba(194, 58, 92, 0.06);
  --violet: #8B71A8;
  --violet-soft: rgba(139, 113, 168, 0.08);
  --gold: #C99A50;
  --gold-soft: rgba(201, 154, 80, 0.08);
  --ok: #4A7C59;
  --ok-soft: rgba(74, 124, 89, 0.08);
  --blue: #5C8599;
  --blue-soft: rgba(92, 133, 153, 0.08);
  --radius-lg: 24px; --radius-md: 16px; --radius-sm: 12px;
  --shadow-sm: 0 2px 8px rgba(26, 20, 18, 0.04);
  --shadow-md: 0 8px 24px rgba(26, 20, 18, 0.06);
  --shadow-lg: 0 16px 48px rgba(26, 20, 18, 0.08);
  --shadow-glow: 0 8px 32px rgba(194, 58, 92, 0.15);
  --aurora: linear-gradient(135deg, #C23A5C 0%, #A88BC7 50%, #D3A25C 100%);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; font-family: 'Inter', sans-serif; color: var(--ink); font-size: 16px; background: var(--paper); -webkit-font-smoothing: antialiased; }
body::before {
  content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none; z-index: -1;
}
h1, h2, h3, .stat .n { font-family: 'Fraunces', serif; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.toast-container { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 12px; width: 90%; max-width: 420px; pointer-events: none; }
.toast { border-radius: var(--radius-md); padding: 14px 20px; font-size: 14.5px; text-align: center; font-weight: 500; box-shadow: var(--shadow-lg); pointer-events: auto; animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: flex; align-items: center; justify-content: center; gap: 10px; background: #FFFFFF; border: 1px solid var(--line); }
.toast.err { color: var(--rose-deep); border-color: rgba(178, 90, 82, 0.3); background: var(--rose-soft); }
.toast.ok { color: var(--ok); border-color: rgba(74, 124, 89, 0.3); background: var(--ok-soft); }
.toast i { font-size: 20px; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
#authScreen { display: flex; min-height: 100vh; width: 100%; position: relative; }
.auth-left { flex: 1 1 55%; position: relative; background: var(--paper); display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 340px; padding: 20px; }
.auth-left::before { content: ''; position: absolute; inset: -50%; background: radial-gradient(circle at 30% 40%, rgba(194, 58, 92, 0.12), transparent 50%), radial-gradient(circle at 70% 60%, rgba(139, 113, 168, 0.12), transparent 50%), radial-gradient(circle at 50% 80%, rgba(201, 154, 80, 0.08), transparent 50%); filter: blur(60px); animation: meshMove 25s ease-in-out infinite alternate; }
@keyframes meshMove { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-2%, 3%) scale(1.05); } 100% { transform: translate(2%, -2%) scale(1); } }
.auth-right { flex: 1 1 45%; display: flex; align-items: center; justify-content: center; padding: 32px 24px; width: 100%; position: relative; z-index: 1; }
@media (max-width: 860px) { #authScreen { flex-direction: column; } .auth-left { flex: 0 0 auto; min-height: 280px; padding: 40px 20px 20px; } .auth-right { flex: 1 1 auto; padding: 24px 20px 40px; } }
.stage { position: relative; width: 100%; max-width: 800px; display: flex; align-items: center; justify-content: center; z-index: 1; }
.logo-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.main-logo { opacity: 0; transform: translateY(30px) scale(0.95); filter: drop-shadow(0 20px 40px rgba(150, 35, 63, 0.1)); width: 100%; max-width: 380px; margin-bottom: 24px; }
.stage.play .main-logo { animation: elegantReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes elegantReveal { 0% { opacity: 0; transform: translateY(30px) scale(0.95); filter: blur(8px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
.wm-sub { margin-top: 4px; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.auth-card { width: 100%; max-width: 440px; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: var(--radius-lg); padding: 36px 32px; box-shadow: var(--shadow-lg); }
@media (max-width: 480px) { .auth-card { padding: 28px 20px; border-radius: var(--radius-md); } }
.login-mark { display: flex; flex-direction: column; align-items: center; margin-bottom: 32px; text-align: center; }
.login-mark .eyebrow { font-size: 12px; letter-spacing: 0.2em; color: var(--rose); text-transform: uppercase; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.login-mark .eyebrow::before, .login-mark .eyebrow::after { content: ''; width: 24px; height: 1px; background: var(--rose); opacity: 0.4; }
.login-mark h1 { font-weight: 600; font-style: italic; font-size: clamp(26px, 6vw, 32px); margin: 12px 0 0; color: var(--ink); letter-spacing: -0.02em; }
.role-tabs { display: flex; gap: 4px; margin-bottom: 28px; background: var(--paper-2); padding: 4px; border-radius: 99px; border: 1px solid var(--line); }
.role-tabs button { flex: 1; padding: 12px 8px; border-radius: 99px; border: none; background: transparent; color: var(--ink-soft); font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); min-height: 44px; }
.role-tabs button.active { background: #FFFFFF; color: var(--ink); box-shadow: var(--shadow-sm); }
.field { margin-bottom: 20px; }
label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 8px; font-weight: 600; text-transform: uppercase; }
label i { font-size: 16px; color: var(--rose); }
input[type=text], input[type=password], input[type=date], input[type=number], input[type=email], input[type=tel], select, textarea {
  width: 100%; font-family: 'Inter', sans-serif; font-size: 15px; padding: 14px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: #FFFFFF; color: var(--ink); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); -webkit-appearance: none; appearance: none; min-height: 50px;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 4px var(--rose-soft); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px 18px; border-radius: 99px; border: none; background: var(--ink); color: #fff; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); min-height: 50px; }
.btn:hover { background: var(--rose-deep); transform: translateY(-1px); box-shadow: var(--shadow-glow); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn.ghost { background: transparent; color: var(--ink-soft); border: 1.5px solid var(--line); box-shadow: none; }
.btn.ghost:hover { background: #FFFFFF; border-color: var(--ink); color: var(--ink); }
.btn.small { width: auto; padding: 10px 18px; font-size: 13.5px; min-height: 42px; }
.btn.tiny { width: auto; padding: 6px 14px; font-size: 12px; min-height: 34px; border-radius: 8px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.link-row { text-align: center; margin-top: 24px; font-size: 14.5px; color: var(--ink-soft); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; align-items: center; }
.link-row a { color: var(--rose-deep); cursor: pointer; text-decoration: none; font-weight: 600; white-space: nowrap; border-bottom: 1px solid transparent; transition: all 0.2s; }
.link-row a:hover { border-bottom-color: var(--rose-deep); }
#admin-link { position: fixed; bottom: 24px; right: 24px; z-index: 1000; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); color: var(--ink); border: 1.5px solid var(--line); border-radius: 99px; padding: 12px 20px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; box-shadow: var(--shadow-md); transition: all 0.25s ease; display: flex; align-items: center; gap: 8px; }
#admin-link:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
#appScreen { display: none; justify-content: center; padding: 28px 16px 80px; width: 100%; background: var(--paper); min-height: 100vh; }
.shell { width: 100%; max-width: 720px; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1.5px solid var(--line); flex-wrap: wrap; gap: 12px; position: sticky; top: 0; background: rgba(250, 248, 245, 0.85); backdrop-filter: blur(12px); z-index: 10; margin: -28px -16px 28px -16px; padding: 20px 24px; }
@media (max-width: 640px) { .topbar { margin: -28px -16px 20px -16px; padding: 16px; } }
.topbar .who { font-size: 15.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; flex-wrap: wrap;}
.topbar .who b { color: var(--ink); font-family: 'Fraunces', serif; font-weight: 600; font-style: italic; font-size: 18px; }
.role-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--ink); border-radius: 99px; padding: 4px 10px; font-weight: 600; }
.tabs { display: flex; gap: 4px; margin-bottom: 24px; background: var(--paper-2); padding: 4px; border-radius: 99px; border: 1px solid var(--line); }
.tabs button { flex: 1; padding: 12px 8px; border-radius: 99px; border: none; background: transparent; color: var(--ink-soft); font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.tabs button.active { background: #FFFFFF; color: var(--ink); box-shadow: var(--shadow-sm); }
.card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--radius-lg); padding: 28px 24px; box-shadow: var(--shadow-md); margin-bottom: 20px; }
@media (max-width: 480px) { .card { padding: 22px 18px; border-radius: var(--radius-md); } }
h2 { font-weight: 600; font-size: clamp(22px, 5vw, 26px); margin: 0 0 8px; color: var(--ink); letter-spacing: -0.02em; }
h3 { font-family: 'Fraunces', serif; font-size: 18px; margin: 24px 0 12px; color: var(--ink); font-weight: 600; }
.h2-rule { display: block; width: 48px; height: 3px; border-radius: 99px; background: var(--aurora); margin: 0 0 20px; }
.hint { font-size: 14px; color: var(--ink-soft); margin-top: -12px; margin-bottom: 20px; font-style: italic; display: flex; align-items: center; gap: 6px; }
.prof-list { display: flex; flex-direction: column; gap: 12px; }
.prof-item { display: flex; justify-content: space-between; align-items: center; padding: 18px; border-radius: var(--radius-md); border: 1.5px solid var(--line); background: #FFFFFF; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.prof-item:hover { border-color: var(--rose); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.prof-item .left { display: flex; align-items: center; gap: 16px; }
.prof-avatar { width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-family: 'Fraunces', serif; font-weight: 600; font-style: italic; font-size: 20px; box-shadow: var(--shadow-sm); overflow: hidden; border: 2px solid #FFFFFF; }
.prof-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-uploadable { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.avatar-uploadable:hover { transform: scale(1.05); box-shadow: var(--shadow-md); }
.avatar-uploadable img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-uploadable .avatar-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; font-family: 'Fraunces', serif; font-weight: 600; font-style: italic; }
.avatar-uploadable .avatar-cam {
  position: absolute; bottom: -2px; right: -2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; border: 2px solid #FFFFFF; box-shadow: var(--shadow-sm);
}
.dias-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; margin-bottom: 20px; }
.dias-check-grid label { flex-direction: row; align-items: center; justify-content: center; gap: 6px; text-transform: none; font-weight: 600; color: var(--ink); background: #FFFFFF; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 10px 6px; cursor: pointer; margin: 0; }
.dias-check-grid input { width: auto; min-height: auto; }
.estudio-admin-row { display: grid; grid-template-columns: 1fr 90px 110px; gap: 8px; align-items: end; margin-bottom: 10px; }
.estudio-admin-row .field { margin-bottom: 0; }
.estudio-admin-actions { display: flex; gap: 8px; margin-top: 8px; }
.prof-item .nombre { font-weight: 700; font-size: 16.5px; color: var(--ink); font-family: 'Fraunces', serif; }
.prof-item .esp { font-size: 13.5px; color: var(--ink-soft); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.prof-item .mp-info { font-size: 12px; color: var(--ink-faint); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; font-size: 14px; color: var(--rose-deep); cursor: pointer; font-weight: 600; transition: all 0.2s; background: none; border: none; padding: 0; font-family: 'Inter', sans-serif; }
.back-link:hover { color: var(--ink); transform: translateX(-4px); }
.day-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 24px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; -webkit-overflow-scrolling: touch; }
.day-scroll::-webkit-scrollbar { height: 4px; }
.day-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.day-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 72px; padding: 12px 8px; border-radius: var(--radius-md); border: 1.5px solid var(--line); background: #FFFFFF; cursor: pointer; transition: all 0.2s ease; gap: 2px; }
.day-chip .day-name { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--ink-soft); }
.day-chip .n { font-size: 24px; font-weight: 700; color: var(--ink); font-family: 'Fraunces', serif; line-height: 1; }
.day-chip .month-name { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--ink-soft); }
.day-chip.active { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.day-chip.active .day-name, .day-chip.active .n, .day-chip.active .month-name { color: #fff; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; margin-bottom: 6px; }
.slot { padding: 14px 8px; text-align: center; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: #FFFFFF; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ink); transition: all 0.2s ease; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; letter-spacing: 0.02em; }
.slot:hover { border-color: var(--rose); color: var(--rose-deep); background: var(--rose-soft); transform: translateY(-1px); }
.slot.taken { opacity: 0.4; text-decoration: line-through; cursor: not-allowed; background: var(--paper-2); border-color: transparent; color: var(--ink-faint); transform: none; }
.empty-note { font-size: 15px; color: var(--ink-faint); text-align: center; padding: 32px 20px; font-style: italic; background: var(--paper-2); border-radius: var(--radius-md); border: 1px dashed var(--line); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty-actions { display: flex; justify-content: center; margin-top: 16px; }
.turno-card { background: #FFFFFF; border: 1.5px solid var(--line); border-left: 4px solid var(--rose); border-radius: var(--radius-md); padding: 20px; margin-bottom: 12px; transition: all 0.2s ease; }
.turno-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.turno-card .fecha { font-weight: 600; font-style: italic; color: var(--ink); font-family: 'Fraunces', serif; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.turno-card .det { font-size: 14.5px; color: var(--ink-soft); margin: 10px 0 16px; line-height: 1.6; word-wrap: break-word; }
.turno-card .det strong { color: var(--ink); font-weight: 600; }
.turno-card .precio-tag { font-size: 14px; color: var(--gold); font-weight: 700; margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.stat-row { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.stat { flex: 1 1 30%; min-width: 120px; background: #FFFFFF; border: 1.5px solid var(--line); border-radius: var(--radius-md); padding: 20px 16px; text-align: center; box-shadow: var(--shadow-sm); transition: transform 0.2s ease; }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat .n { font-weight: 700; font-style: italic; font-size: 32px; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; margin-bottom: 6px; }
.stat .l { font-size: 11.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.filter-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.filter-row select, .filter-row input { flex: 1 1 100%; min-height: 50px; font-weight: 500; }
.estudio-item { background: #FFFFFF; border: 1.5px solid var(--line); border-radius: var(--radius-md); padding: 18px; margin-bottom: 12px; cursor: pointer; transition: all 0.25s ease; position: relative; border-left: 4px solid var(--estudio-color, var(--line)); }
.estudio-item:hover { background: var(--estudio-soft, var(--paper-2)); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.estudio-item .estudio-nombre { font-weight: 700; font-size: 16px; color: var(--estudio-color, var(--ink)); margin-bottom: 8px; font-family: 'Fraunces', serif; }
.estudio-item .estudio-info { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 4px; display: flex; align-items: flex-start; gap: 6px; }
.estudio-item .estudio-info i { color: var(--estudio-color, var(--rose)); margin-top: 3px; flex-shrink: 0; }
.estudio-item .estudio-info strong { color: var(--ink); font-weight: 600; }
.estudio-item .estudio-precio { font-size: 15px; font-weight: 700; color: var(--estudio-color, var(--gold)); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 6px; }
.patient-search-box { position: relative; margin-bottom: 20px; }
.patient-search-box i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: 20px; pointer-events: none; }
.patient-search-box input { padding-left: 48px; }
.patient-card { background: #FFFFFF; border: 1.5px solid var(--line); border-left: 3px solid var(--patient-color, var(--line)); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; transition: all 0.2s ease; }
.patient-card:hover { border-left-color: var(--patient-color, var(--violet)); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.patient-card .left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.patient-avatar { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-family: 'Fraunces', serif; font-weight: 600; font-style: italic; font-size: 15px; background: var(--patient-color, var(--violet)); }
.patient-info { min-width: 0; }
.patient-info h4 { margin: 0 0 4px 0; font-family: 'Fraunces', serif; font-size: 17px; color: var(--ink); }
.patient-info p { margin: 0; font-size: 13.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.patient-stats { text-align: right; }
.patient-stats .amount { font-size: 18px; font-weight: 700; color: var(--ok); font-family: 'Fraunces', serif; }
.patient-stats .visits { font-size: 12px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.modal-overlay { position: fixed; inset: 0; background: rgba(26, 20, 18, 0.4); backdrop-filter: blur(4px); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.3s ease; }
.modal-overlay.active { display: flex; opacity: 1; }
.modal-content { background: #FFFFFF; border-radius: var(--radius-lg); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: modalSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes modalSlide { from { transform: translateY(20px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.modal-header { padding: 24px 24px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.modal-header .who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.modal-avatar { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-family: 'Fraunces', serif; font-weight: 600; font-style: italic; font-size: 17px; background: var(--patient-color, var(--violet)); box-shadow: var(--shadow-sm); }
.modal-header h3 { margin: 0; font-size: 22px; }
.modal-header .close-btn { background: none; border: none; font-size: 24px; color: var(--ink-faint); cursor: pointer; padding: 4px; border-radius: 50%; transition: all 0.2s; }
.modal-header .close-btn:hover { background: var(--paper-2); color: var(--ink); }
.modal-body { padding: 24px; }
.modal-stats { display: flex; gap: 12px; margin-bottom: 20px; padding: 16px; background: var(--paper); border-radius: var(--radius-sm); border: 1px solid var(--line); }
.modal-stats .mini-stat { flex: 1; text-align: center; }
.modal-stats .mini-stat .val { font-size: 20px; font-weight: 700; color: var(--ink); font-family: 'Fraunces', serif; }
.modal-stats .mini-stat .lbl { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.modal-actions { display: flex; gap: 12px; margin-top: 20px; }

/* =====================================================================
   AGENDA / CALENDARIO DE LA PROFESIONAL (Fase 1)
   ===================================================================== */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 480px) { .grid2 { grid-template-columns: 1fr; } }
.muted { color: var(--ink-faint); font-size: 13.5px; }

.agenda-card { padding: 20px 18px; }
.agenda-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.agenda-nav { display: flex; align-items: center; gap: 8px; }
.ag-navbtn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 38px; padding: 8px 14px; border-radius: 99px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .2s; }
.ag-navbtn:hover { border-color: var(--ink); }
.agenda-range { font-family: 'Fraunces', serif; font-style: italic; font-size: 17px; color: var(--ink); margin-left: 4px; }
.agenda-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agenda-viewtoggle { display: flex; background: var(--paper-2); border: 1px solid var(--line); border-radius: 99px; padding: 3px; }
.agenda-viewtoggle button { border: none; background: transparent; color: var(--ink-soft); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: 99px; cursor: pointer; min-height: 34px; }
.agenda-viewtoggle button.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

.agenda-grid-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; -webkit-overflow-scrolling: touch; }
.agenda-grid { display: grid; min-width: max-content; }
.ag-corner { border-bottom: 1.5px solid var(--line); border-right: 1px solid var(--line); background: var(--paper); position: sticky; left: 0; z-index: 3; }
.ag-dayhead { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 4px; gap: 1px; border-bottom: 1.5px solid var(--line); border-right: 1px solid var(--line); background: var(--paper); }
.ag-dayhead .dh-name { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 700; }
.ag-dayhead .dh-num { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1; }
.ag-dayhead .dh-mon { font-size: 11px; color: var(--ink-soft); }
.ag-dayhead.today { background: var(--rose-soft); }
.ag-dayhead.today .dh-num { color: var(--rose-deep); }

.ag-gutter { position: sticky; left: 0; z-index: 2; background: var(--paper); border-right: 1px solid var(--line); }
.ag-hour { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11.5px; color: var(--ink-faint); font-weight: 600; }

.ag-col { position: relative; border-right: 1px solid var(--line); cursor: pointer; background:
  repeating-linear-gradient(to bottom, transparent, transparent 44px, var(--line) 44px, var(--line) 45px); }
.ag-col:hover { background-color: rgba(201,154,80,.03); }
.ag-col-off { background-color: var(--paper); }
.ag-off { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(45deg, rgba(154,137,133,.07), rgba(154,137,133,.07) 6px, transparent 6px, transparent 12px); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ag-off span { font-size: 11px; color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

.ag-turno { position: absolute; left: 4px; right: 4px; border-radius: 8px; padding: 4px 8px; overflow: hidden; box-shadow: var(--shadow-sm); border-left: 3px solid var(--ink); background: #fff; z-index: 1; transition: transform .12s, box-shadow .12s; display: flex; flex-direction: column; gap: 1px; }
.ag-turno:hover { transform: scale(1.015); box-shadow: var(--shadow-md); z-index: 4; }
.ag-turno .ag-t-hora { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); }
.ag-turno .ag-t-nombre { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-turno .ag-t-est { font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-turno.est-confirmado { border-left-color: var(--blue); background: var(--blue-soft); }
.ag-turno.est-atendido { border-left-color: var(--ok); background: var(--ok-soft); }
.ag-turno.est-ausente { border-left-color: var(--rose); background: var(--rose-soft); opacity: .85; }

.ag-bloqueo { position: absolute; left: 4px; right: 4px; border-radius: 8px; background: repeating-linear-gradient(45deg, rgba(26,20,18,.06), rgba(26,20,18,.06) 6px, rgba(26,20,18,.02) 6px, rgba(26,20,18,.02) 12px); border: 1px dashed var(--ink-faint); z-index: 2; padding: 4px 6px; display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; overflow: hidden; }
.ag-bloqueo .ag-bl-txt { font-size: 11px; color: var(--ink-soft); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ag-bloqueo-x { cursor: pointer; font-size: 16px; line-height: 1; color: var(--ink-faint); font-weight: 700; flex: 0 0 auto; }
.ag-bloqueo-x:hover { color: var(--rose-deep); }

.agenda-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: var(--ink-soft); }
.agenda-legend i { font-size: 11px; margin-right: 4px; vertical-align: middle; }
.est-dot-confirmado { color: var(--blue); }
.est-dot-atendido { color: var(--ok); }
.est-dot-ausente { color: var(--rose); }

/* Segmented control (paciente existente / nuevo) */
.seg { display: flex; background: var(--paper-2); border: 1px solid var(--line); border-radius: 99px; padding: 3px; margin-bottom: 18px; }
.seg-btn { flex: 1; border: none; background: transparent; color: var(--ink-soft); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13.5px; padding: 9px; border-radius: 99px; cursor: pointer; min-height: 40px; }
.seg-btn.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

/* Buscador tipo autocompletar */
.ag-typeahead { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.ag-ta-item { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: pointer; font-size: 14px; transition: all .15s; }
.ag-ta-item:hover { border-color: var(--rose); background: var(--rose-soft); }
.ag-ta-empty { padding: 10px 12px; font-size: 13px; color: var(--ink-faint); }
.ag-selected { margin-top: 8px; padding: 10px 12px; background: var(--ok-soft); border: 1px solid rgba(74,124,89,.3); border-radius: var(--radius-sm); font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.ag-clear { margin-left: auto; background: none; border: none; color: var(--rose-deep); font-weight: 600; cursor: pointer; font-size: 13px; text-decoration: underline; }

/* Detalle de turno */
.turno-detail { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14.5px; color: var(--ink-soft); margin-bottom: 18px; }
.turno-detail i { color: var(--rose); margin-right: 4px; }
.turno-detail strong { color: var(--ink); }
.estado-chip { display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 12px; border-radius: 99px; }
.estado-chip.est-confirmado { background: var(--blue-soft); color: var(--blue); }
.estado-chip.est-atendido { background: var(--ok-soft); color: var(--ok); }
.estado-chip.est-ausente { background: var(--rose-soft); color: var(--rose-deep); }
.turno-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.turno-btns .btn { flex: 1 1 auto; }
.btn.danger { color: var(--rose-deep); border-color: rgba(150,35,63,.3); }
.btn.danger:hover { background: var(--rose-soft); border-color: var(--rose-deep); color: var(--rose-deep); }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); text-transform: none; letter-spacing: 0; margin-bottom: 16px; cursor: pointer; }
.check input { width: auto; min-height: 0; }

/* Editor de días/horarios del profesional (Ajustes) */
.day-toggle-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.day-toggle { min-width: 52px; padding: 10px 12px; border-radius: 99px; border: 1.5px solid var(--line); background: #fff; color: var(--ink-soft); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13.5px; cursor: pointer; transition: all .2s; min-height: 42px; }
.day-toggle:hover { border-color: var(--ink); }
.day-toggle.active { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
.hz-esp-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.hz-esp-row select, .hz-esp-row input[type=time] { width: auto; min-width: 92px; min-height: 44px; margin: 0; flex: 0 0 auto; }
.hz-esp-row .hz-esp-dia { min-width: 96px; }
.hz-esp-del { background: none; border: 1.5px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-faint); cursor: pointer; min-height: 44px; padding: 0 12px; font-size: 16px; transition: all .2s; }
.hz-esp-del:hover { border-color: var(--rose-deep); color: var(--rose-deep); }

/* Lista de estudios/consultas (Ajustes) */
.est-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.est-row:last-child { border-bottom: none; }
.est-info { min-width: 0; }
.est-nombre { font-weight: 600; color: var(--ink); font-size: 15px; }
.est-meta { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.est-meta i { color: var(--rose); font-size: 13px; }
.est-desc { font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; }
.est-acc { display: flex; gap: 6px; flex: 0 0 auto; }

/* Video hero del login (con imagen de respaldo si no se soporta el video) */
.hero-video {
  width: 100%; max-width: 420px; display: block; margin: 0 auto 24px;
  transform: scale(1.01); /* zoom sutil del 1% */
  border-radius: var(--radius-lg);
  border: 3px solid rgba(255, 255, 255, 0.92);
  background: var(--paper-2);
  /* Borde blanco suave que se difumina hacia el fondo (capas de glow que
     van perdiendo opacidad y ganando desenfoque). */
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.55),
    0 0 26px 14px rgba(255, 255, 255, 0.60),
    0 0 60px 34px rgba(255, 255, 255, 0.40),
    0 0 110px 70px rgba(255, 255, 255, 0.22),
    var(--shadow-md);
}
.hero-video .main-logo { margin-bottom: 0; }
@media (max-width: 480px) { .hero-video { border-radius: var(--radius-md); } }


/* ---- Bloque de contacto (Llamar / WhatsApp) debajo de la lista de profesionales ---- */
.contact-card { text-align: center; }
.contact-text { font-size: 14px; color: var(--ink-soft); margin: 0 0 16px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.contact-row { display: flex; gap: 10px; }
.contact-row .btn { width: auto; flex: 1; text-decoration: none; }
.btn.whatsapp { background: #25D366; color: #fff; }
.btn.whatsapp:hover { background: #1DA851; }