/* Appointsly Web — estilos globales */
/* Bootstrap eliminado. El sistema de diseño usa Tailwind CSS (CDN) con el tema Luminous Azure. */

html, body {
    margin: 0;
    padding: 0;
}

/* ── Custom Select (cs-group) ────────────────────────────────────────────────
   Dropdowns accesibles que reemplazan los <select> nativos del navegador.
   Usados en las páginas de Reservar, Panel y filtros de negocio/trabajador.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.cs-group  { position: relative; display: flex; flex-direction: column; gap: 6px; }
.cs-label  { font-size: 11px; font-weight: 700; color: #3d4947; text-transform: uppercase; letter-spacing: .06em; }

.cs-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: #f5faf8; border: 1.5px solid #bcc9c6; border-radius: 14px;
    padding: 10px 12px; font-family: inherit; cursor: pointer; text-align: left;
    transition: border-color .2s, box-shadow .2s, background .15s;
}
.cs-trigger:hover  { border-color: #00685f; background: white; }
.cs-trigger:focus  { outline: none; border-color: #00685f; background: white; box-shadow: 0 0 0 3px rgba(0,104,95,.12); }
.cs-trigger.open   { border-color: #00685f; background: white; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.cs-chevron { flex-shrink: 0; color: #6d7a77; font-size: 20px !important; transition: transform .2s; }
.cs-trigger.open .cs-chevron { transform: rotate(180deg); }

.cs-dropdown {
    position: absolute; top: calc(100% - 2px); left: 0; right: 0;
    background: white; border: 1.5px solid #00685f; border-top: none;
    border-bottom-left-radius: 14px; border-bottom-right-radius: 14px;
    padding: 4px 6px 8px; box-shadow: 0 12px 32px rgba(23,29,28,.13);
    z-index: 100; max-height: 260px; overflow-y: auto;
}

.cs-option { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; transition: background .1s; }
.cs-option:hover { background: #f0f5f2; }
.cs-option--active { background: rgba(0,104,95,.08); }
.cs-option--active .cs-name { font-weight: 700; color: #00685f; }

.cs-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(0,104,95,.2); }
.cs-avatar-fallback { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #c2ebe3, #89cec4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; font-size: 14px; color: #2a5450; }
.cs-avatar--muted { background: #eaefed; color: #6d7a77; }

.cs-icon { width: 30px; height: 30px; border-radius: 9px; background: rgba(0,104,95,.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #00685f; }
.cs-icon .material-symbols-outlined { font-size: 17px !important; }
.cs-icon--muted { background: #eaefed; color: #6d7a77; }

.cs-row  { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.cs-info { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; min-width: 0; }
.cs-name { font-size: 13px; font-weight: 600; color: #171d1c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-name--muted { color: #6d7a77; font-weight: 400; }
.cs-sub  { font-size: 11px; color: #6d7a77; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }