/* Estilos móviles y limpios en español */
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0; color:#222; }
.container { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.home main.container { padding: 0; background: transparent; margin: 0 auto; }
.topbar { background:#0b8d7b; color:#fff; position:relative; }
.topbar--overlay { position:fixed; top:0; left:0; right:0; background:transparent; z-index: 100; }
.topbar--overlay .nav__link { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.12); }
.topbar--overlay .logo { color:#fff; }
.topbar .container { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.topbar .logo { display:flex; align-items:center; gap:.5rem; color:#fff; text-decoration:none; font-weight:700; }
.topbar .logo img { display:block; border-radius:6px; width:40px; height:40px; }
.topbar .logo span { font-weight:800; font-size:1.05rem; }
.nav { display:flex; gap:.4rem; flex-wrap:wrap; }
.nav__link { display:inline-flex; align-items:center; gap:.4rem; color:#fff; text-decoration:none; padding:.4rem .6rem; border-radius:8px; background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); }
.nav__link:hover { background: rgba(255,255,255,.2); }
.nav__icon { font-size:1rem; line-height:1; }
.footer { background:#f5f5f5; padding:1rem 0; margin-top:2rem; }

.nav--admin .nav__link { color:#123a56; background:#eef7fb; border-color:#d4dbe3; border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,.04); }
.nav--admin .nav__link:hover { background:#eaf2fe; color:#0b8d7b; }

/* Panel de cuenta */
.account-grid { display:grid; grid-template-columns: 220px 1fr; gap:1rem; align-items:start; }
@media (max-width: 700px) { .account-grid { grid-template-columns: 1fr; } }
.account-nav { display:flex; flex-direction:column; gap:.3rem; }
.account-nav__section { font-size:.85rem; color:#6b7f92; padding:.5rem .4rem; border-bottom:1px solid #e7eef3; margin:.2rem 0 .4rem; }
.account-nav a { display:block; text-decoration:none; color:#123a56; padding:.45rem .6rem; border-radius:8px; }
.account-nav a:hover { background:#eef7fb; }
.account-nav a.active { background:#eaf2fe; color:#0b8d7b; font-weight:600; }
.account-content { background:#fff; border:1px solid #e7eef3; border-radius:12px; padding:1rem; overflow:hidden; }
.appt-list { display:none; }
@media (max-width: 640px) {
  .appt-list { display:block; }
  .account-content .table-responsive { display:none; }
}
.appt-card { background:#fff; border:1px solid #e7eef3; border-radius:12px; padding:.8rem; margin:.5rem 0; box-shadow:0 6px 12px rgba(0,0,0,.05); }
.appt-card__top { display:flex; justify-content:space-between; align-items:center; gap:.6rem; }
.appt-card__title { margin:0; font-size:1rem; color:#123a56; }
.appt-card__meta { color:#4b6a86; font-size:.9rem; }
.appt-card__actions { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.6rem; }
.countdown { font-weight:600; color:#0b8d7b; }

.settings-form .row { margin-bottom:.8rem; }
.settings-form .row label { font-weight:600; color:#123a56; }
.settings-form hr { border:none; border-top:1px solid #e7eef3; margin:1rem 0; }
.settings-actions { display:flex; gap:.6rem; align-items:center; }
.settings-actions .btn--secondary { background:#e9f1ff; color:#1e73e8; border:1px solid #cfe0ff; }
.settings-actions .btn--link { background:transparent; color:#1e73e8; border:none; text-decoration:underline; padding:0; }
.danger-link { text-align:right; margin-top:.8rem; }
.danger-link a { color:#da3b3b; text-decoration:none; }
.danger-link a:hover { text-decoration:underline; }

h1,h2,h3 { margin: .5rem 0 1rem; }
label { display:block; font-size:.9rem; margin-bottom:.25rem; }
input, select, button, textarea { width:100%; padding:.65rem; margin-bottom:.8rem; border:1px solid #e7eef3; border-radius:10px; background:#fff; }
button.btn, .btn { background:#0b8d7b; color:#fff; border:none; padding:.6rem 1rem; border-radius:10px; cursor:pointer; text-decoration:none; display:inline-block; box-shadow:0 6px 12px rgba(0,0,0,.06); }
button.btn:hover, .btn:hover { opacity:.9; }
.
.btn--secondary { background:#eef7fb; color:#123a56; border:1px solid #d4dbe3; }
.btn--small { padding:.4rem .7rem; font-size:.9rem; border-radius:999px; }
.inline-form { display:flex; gap:.4rem; align-items:center; }
.inline-form .btn { margin:0; }

.grid { display:grid; grid-template-columns: 1fr; gap: .8rem; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.cards { display:grid; grid-template-columns: 1fr; gap:1rem; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2,1fr); } }
.card { display:flex; gap:1rem; padding:1rem; border:1px solid #e7eef3; border-radius:16px; background:#fff; box-shadow:0 8px 16px rgba(0,0,0,.06); }
.card__title { font-weight:800; color:#123a56; margin:.1rem 0 .4rem; }
.card__body { width:100%; }
.avatar { border:1px solid #d4dbe3; box-shadow:0 6px 12px rgba(0,0,0,.06); }
.card img { width:90px; height:90px; object-fit:cover; border-radius:50%; }
/* Marketplace moderno */
.market-grid { display:grid; grid-template-columns: 1fr; gap:1rem; }
@media (min-width: 700px) { .market-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .market-grid { grid-template-columns: repeat(3, 1fr); } }
.pro-card { background:#fff; border:1px solid #e7eef3; border-radius:16px; padding:1rem; box-shadow:0 10px 20px rgba(0,0,0,.06); display:flex; flex-direction:column; gap:.6rem; }
.pro-card__header { display:flex; align-items:center; gap:.8rem; }
.pro-card__avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; }
.pro-card__title { margin:0; font-size:1.05rem; color:#123a56; }
.pro-card__meta { margin:.1rem 0 0; color:#4b6a86; font-size:.9rem; }
.pro-card__body { display:flex; gap:.4rem; flex-wrap:wrap; }
.pro-card__actions { display:flex; gap:.4rem; flex-wrap:wrap; }
.pro-card .btn { padding:.45rem .8rem; }

.profile { display:flex; gap:1rem; align-items:center; }
.profile .avatar { width:120px; height:120px; border-radius:50%; }

.table { width:100%; border-collapse:collapse; background:#fff; border:1px solid #e7eef3; border-radius:12px; overflow:hidden; }
.table th { background:#f7fbff; color:#123a56; font-weight:700; }
.table th, .table td { border:1px solid #e7eef3; padding:.6rem .7rem; text-align:left; vertical-align: middle; }
.table th { white-space: nowrap; }
.table td { word-break: break-word; }
.table tbody tr:nth-child(odd) { background:#fbfdff; }
.table tbody tr:hover { background:#eef7fb; }
/* Contenedor responsive para tablas anchas */
.table-responsive { width:100%; overflow-x:auto; }
/* Botones dentro de tablas: evitar cortes */
.table td .btn { white-space: nowrap; padding:.45rem .7rem; }
/* Ocultar columnas en móvil */
@media (max-width: 700px) {
  .hide-sm { display:none; }
}
/* Acciones pegajosas al deslizar */
.sticky-actions { position: sticky; right: 0; background:#fff; box-shadow: inset 1px 0 0 #e7eef3; z-index: 1; }
@media (max-width: 900px) {
  .table th, .table td { padding:.5rem .6rem; }
}
.metric { padding:1rem; border:1px solid #eee; border-radius:8px; display:flex; justify-content:space-between; }
.alert { background:#ffe9e9; color:#a30000; padding:.6rem; border-radius:6px; }

/* Slider principal */
.slider { position: relative; height: 420px; border-radius: 12px; overflow: hidden; margin: 0; background: radial-gradient(ellipse at 30% 10%, rgba(12,153,138,.75), rgba(6,90,80,.75)), url('../img/slider.jpg') center/cover no-repeat; }
.slider--full { position: relative; left: 50%; transform: translateX(-50%); width: 100vw; border-radius: 0; }
.slide { position:absolute; inset:0; display:none; background-position:center; background-size:cover; }
.slider .slide:first-child { display:block; }
.slider__top { position:absolute; top:0; left:0; right:0; padding: .8rem 1rem; display:flex; align-items:center; justify-content:space-between; color:#fff; }
.slider__content { position:absolute; left:50%; transform:translateX(-50%); top:60px; width:90%; max-width:900px; color:#fff; }
.slider__content h1 { font-size:2.2rem; font-weight:700; margin:.2rem 0 .3rem; }
.slider__content p { font-size:1rem; opacity:.9; margin:0 0 .6rem; }
.slider__logo { display:flex; align-items:center; gap:.5rem; text-decoration:none; color:#fff; font-weight:700; }
.slider__nav { display:flex; gap:.6rem; }
.slider__nav a { color:#fff; text-decoration:none; padding:.4rem .6rem; border:1px solid rgba(255,255,255,.3); border-radius:10px; }
.slider__menu-btn { display:none; background: transparent; border:1px solid rgba(255,255,255,.6); color:#fff; padding:.4rem .8rem; border-radius:10px; }
@media (max-width: 640px) {
  .slider__menu-btn { display:inline-block; }
  .slider__nav { display:none; flex-direction:column; gap:.4rem; background:rgba(0,0,0,.2); padding:.6rem; border-radius:10px; }
  .slider__nav.slider__nav--open { display:flex; }
}
.slider h1 { font-size:1.6rem; margin:0 0 .5rem; }
.filter-box { position:absolute; left:50%; transform:translateX(-50%); top:130px; bottom:auto; width:90%; max-width:900px; background:#fff; color:#222; padding:.8rem; border-radius:8px; box-shadow:0 10px 24px rgba(0,0,0,.12); }
.chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.chip { display:inline-block; padding:.4rem .7rem; border-radius:20px; background:#f0f5f4; border:1px solid #d9e7e4; color:#0b8d7b; text-decoration:none; }
.chip--selected { background:#eaf2fe; border-color:#cfe0ff; }
.badge { display:inline-block; padding:.2rem .6rem; border-radius:999px; background:#eaf2fe; color:#165fc9; border:1px solid #cfe0ff; font-weight:700; }
.btn--link { background:transparent; color:#1e73e8; border:none; text-decoration:underline; padding:0; }
.btn--secondary { background:#eef7fb; color:#123a56; border:1px solid #d4dbe3; }

/* Chat estilo messenger */
.chat { display:grid; grid-template-columns: 320px 1fr; gap: .8rem; align-items:start; }
@media (max-width: 900px) { .chat { grid-template-columns: 1fr; } }
.chat__sidebar { background:#fff; border:1px solid #e7eef3; border-radius:12px; padding:.8rem; }
.chat__search { display:flex; align-items:center; gap:.4rem; border:1px solid #e7eef3; border-radius:10px; padding:.35rem .6rem; margin-bottom:.6rem; }
.chat__search input { border:none; margin:0; padding:.35rem; }
.chat__section { font-size:.85rem; color:#6b7f92; font-weight:700; margin:.4rem 0; }
.chat__list { display:flex; flex-direction:column; gap:.3rem; }
.chat-item { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:#123a56; padding:.5rem .6rem; border:1px solid #e7eef3; border-radius:10px; background:#fff; }
.chat-item:hover { background:#eef7fb; }
.chat-item__avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; background:#f0f0f0; position:relative; }
.chat-item__name { font-weight:700; }
.chat-item__meta { color:#6b7f92; font-size:.8rem; }
.chat-item__badge { margin-left:auto; min-width:22px; height:22px; line-height:22px; background:#da3b3b; color:#fff; border-radius:11px; text-align:center; font-size:.75rem; padding:0 6px; }
.chat-item__online { position:absolute; right:-2px; bottom:-2px; width:10px; height:10px; background:#22c55e; border:2px solid #fff; border-radius:50%; }

.chat__main { background:#fff; border:1px solid #e7eef3; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.chat__header { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.8rem; border-bottom:1px solid #e7eef3; }
.chat__title { display:flex; align-items:center; gap:.6rem; }
.chat__body { padding:.8rem; height:420px; overflow:auto; background:#f7f9fc; }
.message { max-width:70%; padding:.5rem .7rem; border-radius:16px; box-shadow:0 4px 10px rgba(0,0,0,.06); background:#fff; margin:.3rem 0; }
.message--me { margin-left:auto; background:#eaf2fe; }
.message__meta { color:#6b7f92; font-size:.75rem; margin-top:.2rem; }
.chat__composer { padding:.8rem; border-top:1px solid #e7eef3; display:flex; align-items:center; gap:.5rem; }
.chat__composer input, .chat__composer textarea { margin:0; }
.chat__actions { display:flex; gap:.4rem; }

/* Paginación */
.pagination { display:flex; gap:.5rem; margin-top:1rem; align-items:center; }
.pagination a, .pagination span { padding:.4rem .7rem; border:1px solid #eee; border-radius:6px; text-decoration:none; color:#222; }
.pagination .active { background:#0b8d7b; color:#fff; border-color:#0b8d7b; }

/* Modal simple */
.modal { position: fixed; inset:0; background: rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; padding:1rem; }
.modal:target { display:flex; }
.modal__dialog { background:#fff; border-radius:12px; max-width:960px; width:100%; padding:1rem; }
.modal__close { float:right; text-decoration:none; font-size:1.6rem; color:#333; }
/* Hero estilo TopDoctors */
.hero { position: relative; border-radius: 12px; overflow: hidden; margin: 1rem 0; padding: 2rem 1rem; color:#fff; background: radial-gradient(ellipse at 30% 10%, rgba(12,153,138,.85), rgba(6,90,80,.85)), url('../img/slider3.svg') center/cover no-repeat; }
.hero__content { max-width: 1000px; margin: 0 auto; }
.hero h1 { font-size: 2rem; margin: 0 0 .3rem; }
.hero p { font-size: 1rem; margin: 0 0 1rem; }
.tabs { display:flex; gap:.5rem; margin-bottom:.8rem; }
.tabs input { display:none; }
.tabs label { background:#fff; border:1px solid #d4dbe3; color:#123a56; padding:.45rem .9rem; border-radius:999px; cursor:pointer; font-weight:600; }
.tabs input:checked + label { background:#fff; color:#0b8d7b; border-color:#1e73e8; }
.filter-box .tabs { margin:0 0 .6rem; }
.searchbar { background: transparent; color:#222; padding: 0; border-radius:0; box-shadow:none; }
.searchbar__row { display:flex; gap:0; align-items:stretch; border:1px solid #d4dbe3; background:#fff; border-radius:6px; overflow:hidden; }
.searchbar__field { flex: 1; }
.searchbar__field input, .searchbar__field select { width:100%; font-size:1rem; padding:.7rem 1rem; border:none; margin:0; height:44px; color:#123a56; }
.searchbar__field input::placeholder { color:#6b7f92; }
.searchbar__field + .searchbar__field input { border-left:1px solid #d4dbe3; }
.searchbar .btn { height:44px; padding:0 1.2rem; border-radius:0; font-size:.95rem; background:#1e73e8; color:#fff; border:none; font-weight:600; width:auto; flex:0 0 140px; }
.searchbar .btn:hover { background:#165fc9; }
@media (max-width: 640px) {
  .topbar--overlay { position: relative; z-index: auto; background: radial-gradient(ellipse at 30% 10%, rgba(12,153,138,.85), rgba(6,90,80,.85)); }
  .slider__content { top: 100px; }
  .slider__content p { margin-bottom: 1rem; }
  .searchbar__row { flex-direction: column; align-items: stretch; }
  .searchbar__field + .searchbar__field input { border-left:none; border-top:1px solid #d4dbe3; }
  .searchbar .btn { width:100%; margin-top:.6rem; flex: 0 0 auto; }
  .filter-box { top:210px; bottom:auto; padding:.7rem; width:94%; }
  .filter-box .tabs { justify-content:center; }
  .topbar--overlay .nav { display:none; width:100%; flex-direction:column; gap:.6rem; }
  .topbar--overlay .nav.nav--open { display:flex; position:static; z-index:auto; background: rgba(12,153,138,.95); border:1px solid rgba(255,255,255,.25); box-shadow:0 10px 18px rgba(0,0,0,.18); backdrop-filter: blur(6px); padding:.6rem; border-radius:12px; }
  .topbar--overlay .nav-toggle { position:relative; z-index:60; }
  .topbar--overlay .nav__link { color:#fff; border-color: rgba(255,255,255,.35); background: transparent; }
  .menu-open .slider__content { top: 170px; }
  .menu-open .filter-box { top: 260px; }
}

.app-promo { background: radial-gradient(ellipse at 10% 20%, #eef7fb, #dbeaf3); padding: 2rem 0; }
.app-promo__grid { display:grid; grid-template-columns: 1fr; gap: 1.5rem; align-items:center; }
@media (min-width: 900px) { .app-promo__grid { grid-template-columns: 1fr 1fr; } }
.app-promo__left { display:flex; justify-content:center; }
.phone { width: 260px; height: 520px; border-radius: 32px; border: 10px solid #111; position:relative; background:#111; box-shadow:0 20px 40px rgba(0,0,0,.2); }
.phone::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:90px; height:18px; background:#111; border-bottom-left-radius:12px; border-bottom-right-radius:12px; }
.phone__screen { position:absolute; inset:14px; background-size:cover; background-position:center; border-radius:24px; }
.app-promo__right h2 { color:#123a56; font-size:1.6rem; margin:.2rem 0; }
.app-promo__right h3 { color:#0b8d7b; font-size:1.3rem; margin:0 0 1rem; }
.tiles { display:grid; grid-template-columns: 1fr; gap:1rem; margin-bottom:1rem; }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { background:#fff; border:1px solid #e7eef3; border-radius:14px; padding:1rem; text-align:center; box-shadow:0 8px 16px rgba(0,0,0,.06); }
.tile__icon { font-size:2rem; margin-bottom:.5rem; }
.store-badges { display:flex; gap: .6rem; }
.badge { display:inline-block; background:#111; color:#fff; padding:.6rem 1rem; border-radius:10px; text-decoration:none; }
.badge--play { background:#1f1f1f; }
.badge--store { background:#000; }

/* Elección de registro */
.choice-grid { display:grid; grid-template-columns: 1fr; gap:1rem; }
@media (min-width: 800px) { .choice-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .choice-grid { grid-template-columns: repeat(3, 1fr); } }
.choice-card { background:#fff; border:1px solid #eaeef2; border-radius:14px; padding:1rem; text-align:center; text-decoration:none; color:#222; box-shadow:0 8px 16px rgba(0,0,0,.06); }
.choice-card:hover { border-color:#cdd6de; box-shadow:0 10px 18px rgba(0,0,0,.08); }
.choice-card__img { width:120px; height:120px; object-fit:contain; margin: .3rem auto .6rem; }
@media (min-width: 1024px) { .choice-card p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin:.2rem 0 0; } }
@media (min-width: 1024px) {
  .choice-card { padding:.8rem; min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .choice-card__img { width:90px; height:90px; margin:.2rem auto .4rem; }
  .choice-card h3 { margin:.2rem 0; }
}

/* Formularios modernos */
.form-card { background:#fff; border:1px solid #eaeef2; border-radius:14px; padding:1rem; box-shadow:0 8px 16px rgba(0,0,0,.06); }
.form-grid { display:grid; grid-template-columns: 1fr; gap:.8rem; }
@media (min-width: 900px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }
.form-help { font-size:.8rem; color:#667; margin-top:-.4rem; margin-bottom:.8rem; }
.input-icon { position:relative; }
.input-icon input { padding-left:2.2rem; }
.input-icon::before { content:'🔍'; position:absolute; left:.6rem; top:50%; transform:translateY(-50%); }
.form-preview { background:#f9fbfc; border:1px solid #eaeef2; border-radius:14px; padding:1rem; }

/* Accordion (desplegables) */
details { border:1px solid #eaeef2; border-radius:12px; background:#fff; box-shadow:0 6px 12px rgba(0,0,0,.04); }
details + details { margin-top:.8rem; }
summary { padding:.8rem 1rem; cursor:pointer; list-style:none; font-weight:600; color:#123a56; }
summary::-webkit-details-marker { display:none; }
.details__content { padding: 0 1rem 1rem; }

/* Toggle switch */
.switch { position:relative; display:inline-block; width:46px; height:26px; }
.switch input { display:none; }
.sliderSwitch { position:absolute; cursor:pointer; inset:0; background:#ddd; border-radius:20px; transition:.2s; }
.sliderSwitch:before { content:""; position:absolute; height:20px; width:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
input:checked + .sliderSwitch { background:#0b8d7b; }
input:checked + .sliderSwitch:before { transform: translateX(20px); }

/* Horarios compactos */
.schedule-table { width:100%; border-collapse:collapse; }
.schedule-table th, .schedule-table td { border:1px solid #eaeef2; padding:.5rem; }
.schedule-row { display:flex; gap:.6rem; align-items:center; }
.how { background:#f7fafc; padding: 2rem 0; }
.how__grid { display:grid; grid-template-columns: 1fr; gap: 1.5rem; align-items:center; }
@media (min-width: 900px) { .how__grid { grid-template-columns: 360px 1fr; } }
.how__card { background:#fff; border:1px solid #e7eef3; border-radius:14px; padding:1.2rem; text-align:center; box-shadow:0 10px 20px rgba(0,0,0,.06); }
.how__icon { width:220px; height:220px; margin:0 auto .8rem; border-radius:20px; background:
  radial-gradient(circle at 60% 40%, #cfe9f7 0%, #e7f3fb 60%, #ffffff 100%);
  position:relative; overflow:hidden; }
.how__icon-img { width:100%; height:100%; object-fit:contain; display:block; }
.how__content h2 { color:#123a56; font-size:1.6rem; margin:.2rem 0 1rem; }
.how__steps { display:grid; grid-template-columns: 1fr; gap:1rem; }
@media (min-width: 900px) { .how__steps { grid-template-columns: repeat(3, 1fr); } }
.how__step { background:#fff; border:1px solid #e7eef3; border-radius:14px; padding:1rem; box-shadow:0 8px 16px rgba(0,0,0,.06); }
.how__step-icon { margin-bottom:.4rem; }
.how__step-icon img { width:28px; height:28px; display:inline-block; }
.how__links { color:#4b6a86; }
.how__links a { color:#0b8d7b; text-decoration:none; }
.how__links a:hover { text-decoration:underline; }
/* Menú móvil desplegable */
.nav-toggle { display:none; background: transparent; border:1px solid rgba(255,255,255,.4); color:#fff; padding:.4rem .6rem; border-radius:8px; }
@media (max-width: 640px) {
  .topbar .container { flex-wrap:wrap; }
  .nav-toggle { display:block; }
  .nav { display:none; width:100%; flex-direction:column; gap:.6rem; }
  .nav.nav--open { display:flex; }
}

/* Consentimientos compactos */
.consents { display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; font-size:.85rem; color:#4b6a86; margin-top:.6rem; }
.consents label { display:inline-flex; align-items:center; gap:.35rem; font-weight:500; }
.mini-hero { height: 140px; background: radial-gradient(ellipse at 30% 10%, rgba(12,153,138,.85), rgba(6,90,80,.85)); }
.mini-hero--full { left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw; }
.mini-hero .container { height: 100%; display:flex; align-items:center; justify-content:center; text-align:center; flex-direction:column; }
.mini-hero__title { color:#fff; font-size:1.6rem; font-weight:800; margin:0; }
.mini-hero__subtitle { color:#e6f7f4; font-size:1rem; margin-top:.35rem; }
.checkout { margin-top:.6rem; }
.checkout-grid { display:grid; grid-template-columns: 1fr; gap:1rem; }
@media (min-width: 900px) { .checkout-grid { grid-template-columns: 1.4fr .9fr; } }
.method-switch { display:flex; gap:.6rem; flex-wrap:wrap; margin:.4rem 0 .8rem; }
.method-switch .method { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .8rem; border:1px solid #e7eef3; border-radius:999px; cursor:pointer; }
.qr-box img { border-radius:12px; box-shadow:0 8px 16px rgba(0,0,0,.06); }
.pay-info p { text-align:center; font-weight:700; color:#123a56; }
.step-list { margin:0; padding-left:1rem; }
.step-item { margin:.4rem 0; }
.pricing-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; align-items:stretch; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-card { background:#fff; border:1px solid #e7eef3; border-radius:16px; padding:1rem; box-shadow:0 8px 16px rgba(0,0,0,.06); display:flex; flex-direction:column; }
.pricing-card__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.pricing-title { margin:0; font-size:1.15rem; color:#123a56; }
.badge { display:inline-block; font-size:.8rem; padding:.25rem .6rem; border:1px solid #e7eef3; border-radius:999px; color:#4b6a86; }
.badge--success { border-color:#bfe3c6; color:#195d2b; background:#e7f7e9; }
.badge--save { border-color:#81d2a0; color:#0c6f2c; background:#dff5e6; }
.pricing-card--featured { border-color:#bfe3c6; box-shadow:0 10px 20px rgba(27,163,84,.12); }
.pricing-card__price { display:flex; align-items:baseline; gap:.6rem; margin:.4rem 0; }
.price-val { font-size:1.6rem; font-weight:800; color:#123a56; }
.price-sub { font-size:.9rem; color:#4b6a86; }
.pricing-card__desc { color:#4b6a86; margin:.4rem 0 .6rem; }
.pricing-features { list-style:none; margin:0 0 .8rem 0; padding:0; color:#123a56; }
.pricing-features li { margin:.3rem 0; display:flex; align-items:center; gap:.4rem; }
.btn-cta { width:100%; margin-top:.6rem; }
.form-inline { display:flex; gap:.6rem; align-items:flex-end; background:#fff; border:1px solid #e7eef3; border-radius:12px; padding:.6rem; box-shadow:0 6px 12px rgba(0,0,0,.04); }
.form-inline input, .form-inline select { width:auto; margin-bottom:0; }
.form-inline .btn { width:auto; margin-bottom:0; }
.doctor-layout { display:grid; grid-template-columns: 280px 1fr; gap:1rem; }
@media (max-width: 900px) { .doctor-layout { grid-template-columns: 1fr; } }
.doctor-sidebar { background:#fff; border:1px solid #e7eef3; border-radius:16px; padding:1rem; box-shadow:0 8px 16px rgba(0,0,0,.06); }
.doctor-profile { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.4rem; }
.doctor-profile .avatar { width:92px; height:92px; border-radius:50%; object-fit:cover; }
.doctor-role { display:inline-block; padding:.25rem .6rem; border-radius:999px; background:#f0f6ff; color:#165fc9; border:1px solid #cfe0ff; font-size:.8rem; }
.doctor-availability { margin-top:.6rem; }
.doctor-availability select { width:100%; }
.doctor-nav { margin-top:1rem; display:flex; flex-direction:column; gap:.25rem; }
.doctor-nav a { display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border:1px solid #e7eef3; border-radius:10px; color:#123a56; text-decoration:none; }
.doctor-nav a.active { background:#165fc9; color:#fff; border-color:#165fc9; }

.doctor-main { display:flex; flex-direction:column; gap:1rem; }
.doctor-metrics { display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
@media (max-width: 900px) { .doctor-metrics { grid-template-columns: 1fr; } }
.metric-box { background:#fff; border:1px solid #e7eef3; border-radius:14px; padding:1rem; box-shadow:0 6px 12px rgba(0,0,0,.05); display:flex; align-items:center; gap:.8rem; }
.metric-box__icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:#f0f6ff; color:#165fc9; font-size:1.2rem; }
.metric-box__value { font-size:1.4rem; font-weight:800; color:#123a56; }
.metric-box__sub { font-size:.85rem; color:#4b6a86; }

.doctor-grid { display:grid; grid-template-columns: 1.4fr .9fr; gap:1rem; }
@media (max-width: 1100px) { .doctor-grid { grid-template-columns: 1fr; } }
.panel { background:#fff; border:1px solid #e7eef3; border-radius:16px; padding:1rem; box-shadow:0 8px 16px rgba(0,0,0,.06); }
.panel__title { margin:0 0 .8rem; font-size:1.05rem; color:#123a56; display:flex; align-items:center; justify-content:space-between; }
.panel__title .actions { display:flex; gap:.4rem; }

.appointment-list { display:flex; flex-direction:column; gap:.6rem; }
.appointment-item { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.6rem; border:1px solid #e7eef3; border-radius:12px; }
.appointment-item__left { display:flex; align-items:center; gap:.6rem; }
.appointment-item__avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.appointment-item__meta { color:#4b6a86; font-size:.85rem; }
.status-pill { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .6rem; border-radius:999px; font-size:.8rem; }
.status-pill--ok { background:#e7f7e9; color:#195d2b; border:1px solid #bfe3c6; }
.status-pill--warn { background:#fff6e5; color:#8a5a00; border:1px solid #f5c16c; }
.status-pill--bad { background:#ffe9e9; color:#a30000; border:1px solid #ffbdbd; }

.upcoming-card { background:#165fc9; color:#fff; border-radius:16px; padding:1rem; box-shadow:0 10px 20px rgba(22,95,201,.22); }
.upcoming-card .btn { background:#fff; color:#165fc9; }
.upcoming-card .btn--secondary { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.6); }

.invoice-list { display:flex; flex-direction:column; gap:.4rem; }
.invoice-item { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.6rem; border:1px solid #e7eef3; border-radius:12px; }
.invoice-item__left { display:flex; align-items:center; gap:.6rem; }

.notifications { display:flex; flex-direction:column; gap:.6rem; }
.notif-item { display:flex; align-items:center; gap:.6rem; padding:.6rem; border:1px solid #e7eef3; border-radius:12px; }
.notif-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:#f0f6ff; color:#165fc9; }

.clinic-card { border:1px solid #e7eef3; border-radius:12px; padding:.8rem; display:flex; gap:.8rem; align-items:center; }
.clinic-card__avatar { width:44px; height:44px; border-radius:10px; object-fit:cover; }
.clinic-card__title { margin:0; font-weight:700; color:#123a56; }
.clinic-schedule { color:#4b6a86; font-size:.9rem; }
.admin-layout { display:grid; grid-template-columns: 260px minmax(0, 1fr); gap:1rem; width:100%; max-width: 1400px; margin:0 auto; padding:0 1rem; }
@media (max-width: 1000px) { .admin-layout { grid-template-columns: 1fr; } }
.admin-sidebar { background:#0f3b82; border-radius:16px; color:#fff; padding:1rem; }
.admin-brand { display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.1rem; }
.admin-search { margin-top:.8rem; }
.admin-search input { width:100%; background:#0d3574; border:1px solid #1f4fa4; color:#e7efff; border-radius:10px; padding:.5rem .7rem; }
.admin-nav { margin-top:1rem; display:flex; flex-direction:column; gap:.25rem; }
.admin-nav a { display:flex; align-items:center; gap:.6rem; color:#dbe8ff; text-decoration:none; padding:.5rem .6rem; border-radius:10px; }
.admin-nav a.active { background:#165fc9; color:#fff; }

.admin-main { display:flex; flex-direction:column; gap:1rem; }
.admin-header { background:#fff; border:1px solid #e7eef3; border-radius:16px; padding:.8rem 1rem; display:flex; align-items:center; justify-content:space-between; }
.admin-metrics { display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; }
@media (max-width: 1200px) { .admin-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .admin-metrics { grid-template-columns: 1fr; } }
.metric-card { background:#fff; border:1px solid #e7eef3; border-radius:14px; padding:1rem; display:flex; gap:.8rem; align-items:center; box-shadow:0 6px 12px rgba(0,0,0,.05); }
.metric-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.metric-icon--blue { background:#e8f2ff; color:#165fc9; }
.metric-icon--green { background:#e9f7ef; color:#1e884d; }
.metric-icon--red { background:#ffecec; color:#b30000; }
.metric-icon--yellow { background:#fff6df; color:#8a5a00; }
.metric-val { font-size:1.4rem; font-weight:800; color:#123a56; }
.metric-sub { font-size:.85rem; color:#4b6a86; }
.metric-progress { height:6px; background:#f1f5f9; border-radius:999px; margin-top:.4rem; overflow:hidden; }
.metric-progress__bar { height:6px; background:#165fc9; border-radius:999px; width:40%; }

.admin-grid { display:grid; grid-template-columns: 1.2fr 1fr; gap:1rem; }
@media (max-width: 1100px) { .admin-grid { grid-template-columns: 1fr; } }
.chart-box { background:#fff; border:1px solid #e7eef3; border-radius:16px; padding:1rem; }
.list-box { background:#fff; border:1px solid #e7eef3; border-radius:16px; padding:1rem; }
.list-box__title { margin:0 0 .8rem; font-size:1.05rem; color:#123a56; }