/* ============================================================================
   Charl.IA (agencias de EE.UU.) — lo propio de este panel, encima de xixo.css.

   Sin estilos en línea: la CSP no los permite y un style= en el HTML se ignora
   sin avisar. Lo que una vista necesite va aquí, con los tokens de xixo.css.
   ============================================================================ */

/* --- Avisos flotantes (xxToast y TempData) ------------------------------------ */

.xx-toasts {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1090;
    display: grid;
    gap: 10px;
    width: min(380px, calc(100vw - 32px));
}

.xx-toast {
    --bs-toast-max-width: 100%;
    border-radius: var(--xx-r);
}

.xx-toast .toast-body { font-size: .875rem; line-height: 1.45; }

.xx-toast--success { background: var(--xx-success-bg); color: #0a5c39; box-shadow: inset 3px 0 0 var(--xx-success-fg), var(--xx-shadow); }
.xx-toast--danger  { background: var(--xx-danger-bg);  color: #8f1d13; box-shadow: inset 3px 0 0 var(--xx-danger-fg), var(--xx-shadow); }
.xx-toast--info    { background: var(--xx-info-bg);    color: #14459e; box-shadow: inset 3px 0 0 var(--xx-info-fg), var(--xx-shadow); }

@media (max-width: 575.98px) {
    /* En el celular, abajo y a todo lo ancho: arriba tapaba el título y el pulgar no llegaba a cerrarlo. */
    .xx-toasts { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; }
}

/* --- Formularios ------------------------------------------------------------------ */

.xx-field-error {
    display: block;
    font-size: .78rem;
    color: var(--xx-danger-fg);
    margin-top: .3rem;
}
.xx-field-error:empty { display: none; }

.input-validation-error,
.input-validation-error:focus { border-color: var(--xx-danger-fg); }

.xx-inline-form { display: inline-flex; margin: 0; }

.xx-auth__form .form-control.xx-code-input {
    font-family: var(--xx-font-mono);
    font-size: 1.5rem;
    letter-spacing: .45em;
    text-align: center;
    padding: .55rem .72rem;
}

button.is-sending { cursor: progress; }

/* --- Clave/valor en pantallas angostas ------------------------------------------ */

.xx-kv__v { overflow-wrap: anywhere; min-width: 0; }

@media (max-width: 575.98px) {
    /* Un correo largo a la derecha de su etiqueta no cabe en 360px: se apila. */
    .xx-kv__item { flex-direction: column; align-items: stretch; gap: 2px; }
    .xx-kv__v { text-align: left; }
}

/* --- Páginas públicas de la agencia --------------------------------------------- */

.xx-public-body {
    background: var(--xx-canvas);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.xx-public__wrap {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.xx-public__head { background: var(--xx-navy-700); padding: 16px 0; }

.xx-public__name {
    color: #fff;
    font-family: var(--xx-font-display);
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.xx-public__name:hover { color: var(--xx-amber-300); }

.xx-public__main { flex: 1 0 auto; padding-top: 32px; padding-bottom: 48px; }

.xx-public__title {
    font-family: var(--xx-font-display);
    font-size: clamp(1.45rem, 4.5vw, 2rem);
    font-weight: 700;
    color: var(--xx-ink);
    letter-spacing: -.02em;
    margin: 0 0 10px;
}

.xx-public__lead { font-size: 1rem; color: var(--xx-ink-2); max-width: 62ch; margin: 0 0 22px; }

.xx-public__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.xx-public__foot {
    border-top: 1px solid var(--xx-line);
    background: var(--xx-surface);
    padding: 20px 0;
    font-size: .8rem;
    color: var(--xx-ink-3);
}

.xx-public__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 8px; }
.xx-public__links a { color: var(--xx-navy-600); font-weight: 600; }

.xx-public__legal { margin: 0; }

.xx-public__powered { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; }
.xx-public__powered-img { height: 16px; width: auto; }

@media (max-width: 575.98px) {
    .xx-public__main { padding-top: 22px; }
    .xx-public__actions .btn { width: 100%; }
}

/* --- Texto legal ------------------------------------------------------------------- */

.xx-legal {
    background: var(--xx-surface);
    border: 1px solid var(--xx-line);
    border-radius: var(--xx-r);
    padding: clamp(18px, 4vw, 32px);
    box-shadow: var(--xx-shadow-sm);
    overflow-wrap: anywhere;
}

.xx-legal h2 {
    font-family: var(--xx-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--xx-ink);
    margin: 26px 0 8px;
}
.xx-legal h2:first-of-type { margin-top: 6px; }

.xx-legal p,
.xx-legal li { font-size: .92rem; line-height: 1.65; color: var(--xx-ink-2); }

.xx-legal ul { padding-left: 1.2rem; }

.xx-legal__updated { font-size: .8rem; color: var(--xx-ink-3); margin-bottom: 18px; }

.xx-legal__callout {
    background: var(--xx-navy-50);
    border-left: 3px solid var(--xx-navy-400);
    border-radius: var(--xx-r-sm);
    padding: 12px 14px;
}

/* --- Consentimiento de SMS ------------------------------------------------------- */

.xx-consent {
    background: var(--xx-surface-2);
    border: 1px solid var(--xx-line);
    border-radius: var(--xx-r-sm);
    padding: 14px 16px;
}

.xx-consent .form-check-label { font-size: .84rem; line-height: 1.55; color: var(--xx-ink-2); }
.xx-consent .form-check-input { margin-top: .22rem; }
.xx-consent__links { font-size: .8rem; margin: 8px 0 0; padding-left: 1.5em; }

/* --- Hoja suelta (errores y estados) --------------------------------------------- */

.xx-bare {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    background: var(--xx-canvas);
}

.xx-bare__card { width: 100%; max-width: 460px; }
.xx-bare__brand { display: flex; justify-content: center; margin-bottom: 18px; }

/* --- Íconos dentro de botones ------------------------------------------------------ */

.xx-btn-icon { width: 16px; height: 16px; flex: 0 0 16px; }

/* --- Root operando una agencia ---------------------------------------------------- */

.xx-acting {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    background: var(--xx-amber-50);
    border: 1px solid var(--xx-amber-200);
    border-left: 3px solid var(--xx-amber-400);
    border-radius: var(--xx-r-sm);
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: .875rem;
    color: var(--xx-ink);
}

/* --- Búsqueda de listas -------------------------------------------------------------- */

.xx-search { max-width: 520px; }

/* --- Lista para el celular (en lugar de la tabla, por debajo de md) --------------- */

.xx-mobile-list { list-style: none; margin: 0; padding: 0; }
.xx-mobile-list__item + .xx-mobile-list__item { border-top: 1px solid var(--xx-line-2); }

.xx-mobile-list__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    color: inherit;
    text-decoration: none;
}
.xx-mobile-list__link:hover { background: var(--xx-navy-50); color: inherit; }

.xx-mobile-list__main { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.xx-mobile-list__title { font-weight: 600; color: var(--xx-ink); }
.xx-mobile-list__meta { font-size: .78rem; color: var(--xx-ink-3); }
.xx-mobile-list__chevron { color: var(--xx-ink-3); font-size: 1.3rem; flex: 0 0 auto; }

/* --- Paginador ----------------------------------------------------------------------- */

.xx-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}

.xx-pager__count { font-size: .8rem; color: var(--xx-ink-3); }
.xx-pager .page-link { color: var(--xx-navy-600); min-width: 34px; text-align: center; }
.xx-pager .page-item.active .page-link { background: var(--xx-navy-700); border-color: var(--xx-navy-700); color: #fff; }

/* --- Permisos -------------------------------------------------------------------------- */

.xx-perm-grid {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.xx-perm-grid > legend { grid-column: 1 / -1; margin-bottom: 0; float: none; }

.xx-perm {
    background: var(--xx-surface-2);
    border: 1px solid var(--xx-line);
    border-radius: var(--xx-r-sm);
    padding: 10px 12px 10px 2.3em;
    margin: 0;
}

.xx-perm__label { display: block; font-weight: 600; color: var(--xx-ink); font-size: .86rem; }
.xx-perm__desc { display: block; font-size: .76rem; color: var(--xx-ink-3); }

.xx-perm-note { grid-column: 1 / -1; display: none; margin: 0; }
.xx-perm-grid:disabled .xx-perm { opacity: .55; }
.xx-perm-grid:disabled .xx-perm-note { display: block; }

/* --- Opciones en tarjeta (rol, entrega de credenciales) --------------------------- */

.xx-choice {
    display: block;
    border: 1px solid var(--xx-line);
    border-radius: var(--xx-r-sm);
    padding: 11px 12px 11px 2.4em;
    margin-bottom: 8px;
    cursor: pointer;
    background: var(--xx-surface);
}

.xx-choice:has(input:checked) {
    border-color: var(--xx-navy-300);
    background: var(--xx-navy-50);
    box-shadow: inset 3px 0 0 var(--xx-amber-400);
}

.xx-choice__label { display: block; font-weight: 600; color: var(--xx-ink); font-size: .88rem; }
.xx-choice__desc { display: block; font-size: .78rem; color: var(--xx-ink-3); }

/* --- Formularios largos -------------------------------------------------------------- */

.xx-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset:disabled .form-control,
fieldset:disabled .form-select { background-color: var(--xx-surface-2); }

.xx-default-text { font-size: .76rem; color: var(--xx-ink-3); margin-top: .3rem; overflow-wrap: anywhere; }

/* La barra de guardar se queda a la vista al bajar por un formulario largo: en el celular, llegar al final para
   encontrar el botón era perder cambios. */
.xx-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 0;
    margin-top: 8px;
    background: linear-gradient(to top, var(--xx-canvas) 70%, transparent);
}

@media (max-width: 575.98px) {
    .xx-form-actions .btn { flex: 1 1 auto; }
}

/* --- Filtros de lista (búsqueda + estado) ------------------------------------------ */

.xx-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 720px;
}

.xx-filters .form-control { flex: 1 1 240px; min-width: 0; }
.xx-filters .form-select { flex: 0 1 200px; min-width: 0; }

@media (max-width: 575.98px) {
    .xx-filters .form-select,
    .xx-filters .btn { flex: 1 1 auto; }
}

/* --- Estado junto al título ----------------------------------------------------------- */

.xx-page-head__title .badge { font-size: .68rem; vertical-align: middle; letter-spacing: .02em; }

/* --- Formulario plegable dentro de una tarjeta ------------------------------------- */

.xx-details-card {
    border-top: 1px solid var(--xx-line-2);
    padding-top: 12px;
}

.xx-details-card > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: .875rem;
    color: var(--xx-navy-600);
}

.xx-details-card > summary:hover { color: var(--xx-navy-700); }

/* --- Servicio pausado --------------------------------------------------------------- */

.xx-paused { max-width: 560px; margin: 24px auto 0; text-align: center; }

/* --- Credenciales de un terapeuta ----------------------------------------------------- */

.xx-cred { padding: 13px 16px; }

.xx-cred__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.xx-cred__actions { display: flex; gap: 6px; flex: 0 0 auto; }

/* La contraseña revelada: monoespaciada y seleccionable, que es para lo que se pide. */
.xx-cred__value {
    display: block;
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--xx-navy-50);
    border: 1px dashed var(--xx-navy-300);
    border-radius: var(--xx-r-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
    overflow-wrap: anywhere;
    user-select: all;
}

/* --- Campanita ------------------------------------------------------------------------ */

.xx-bell { position: relative; }

.xx-bell__btn { position: relative; }

/* El globito del conteo: se ve sin tener que abrir nada. */
.xx-bell__count {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--xx-danger-fg);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.xx-bell__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1040;
    width: min(360px, calc(100vw - 32px));
    background: var(--xx-surface);
    border: 1px solid var(--xx-line);
    border-radius: var(--xx-r);
    box-shadow: var(--xx-shadow);
    overflow: hidden;
}

.xx-bell__head,
.xx-bell__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
}

.xx-bell__head { border-bottom: 1px solid var(--xx-line-2); }
.xx-bell__foot { border-top: 1px solid var(--xx-line-2); background: var(--xx-surface-2); }

.xx-bell__body { max-height: min(60vh, 420px); overflow-y: auto; }

.xx-notif {
    display: block;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid var(--xx-line-2);
    background: none;
    text-align: left;
    color: inherit;
    text-decoration: none;
}

.xx-notif:hover { background: var(--xx-navy-50); color: inherit; }

/* Lo no leído se distingue sin color solo: barra a la izquierda y título en negritas. */
.xx-notif--unread { box-shadow: inset 3px 0 0 var(--xx-amber-400); }

.xx-notif__title { font-weight: 600; color: var(--xx-ink); }
.xx-notif--unread .xx-notif__title { font-weight: 700; }
.xx-notif__body { font-size: .82rem; color: var(--xx-ink-2); }
.xx-notif__time { font-size: .75rem; color: var(--xx-ink-3); }

.xx-notif-empty { padding: 22px 14px; text-align: center; color: var(--xx-ink-3); font-size: .85rem; }

/* --- Correos a terapeutas ------------------------------------------------------------ */

/* La vista previa es el texto plano del correo: se respetan los saltos de línea y se parte lo largo (URLs). */
.xx-email-preview {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--xx-line);
    border-radius: var(--xx-r-sm);
    background: var(--xx-surface-2);
    font-family: Consolas, "SFMono-Regular", Menlo, monospace;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--xx-ink);
    max-height: 70vh;
    overflow-y: auto;
}

/* Elegir terapeutas a mano: la lista se desplaza dentro de la tarjeta y no empuja la página hasta el fondo. */
.xx-picker { max-height: 480px; overflow-y: auto; margin: 0; }
.xx-picker .xx-mobile-list__link { cursor: pointer; gap: 10px; }
.xx-picker .form-check-input { margin: 0; flex: 0 0 auto; }
fieldset:disabled .xx-picker { opacity: .55; }

.xx-template-body { font-family: Consolas, "SFMono-Regular", Menlo, monospace; font-size: .85rem; line-height: 1.5; }

.xx-token { font-family: Consolas, "SFMono-Regular", Menlo, monospace; font-size: .8rem; white-space: nowrap; }