:root {
    --tokka-black: #111111;
    --tokka-gray: #5b616b;
    --tokka-bg: #f5f5f7;
    --tokka-radius-lg: 28px;
    --tokka-radius-md: 20px;
    --tokka-radius-sm: 14px;
    --tokka-fb: #1877f2;
    --tokka-ig-1: #f58529;
    --tokka-ig-2: #dd2a7b;
    --tokka-ig-3: #8134af;
    --tokka-li: #0a66c2;
    --tokka-wa: #25d366;
    --tokka-teal: #008F85;
    --tokka-teal-dark: #00726a;
    --tokka-nav-teal: #00A390;
}

* { box-sizing: border-box; }

body.tokka-body {
    margin: 0;
    background: var(--tokka-page-bg, var(--tokka-bg));
    font-family: "Afacad Flux", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--tokka-page-text, var(--tokka-black));
}

/* En celular, el perfil público no distingue "página" de "tarjeta" (la
   tarjeta no tiene padding/radio propio ahí — ver .tokka-profile-card más
   abajo), así que con un fondo oscuro elegido el body toma el MISMO color
   que --tokka-card-bg (no --tokka-page-bg, que es el más oscuro de los dos,
   reservado para la versión de escritorio con tarjeta flotante). Sin fondo
   oscuro elegido (--tokka-card-bg sin definir) esto cae en la cascada de
   siempre y no cambia nada. Nunca aplica en el dashboard: ese usa sus
   propias variables --tokka-dash-*, nunca --tokka-page-bg/--tokka-card-bg. */
@media (max-width: 767px) {
    body.tokka-body {
        background: var(--tokka-card-bg, var(--tokka-page-bg, var(--tokka-bg)));
    }
}

/* ---------- Perfil público ---------- */
.tokka-profile-wrap {
    max-width: 420px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}

/* --tokka-card-bg (ver tokka_profile_css_vars() en helpers.php): con fondo
   blanco (default) esto queda transparente, cero cambio de siempre. Con
   verde oscuro/negro, el MISMO color (#1e1e1e negro / #0b4038 verde
   oscuro — igual que .tokka-dash-surface del dashboard) se ve en celular
   Y en escritorio, no solo en escritorio como el resto de este bloque. */
.tokka-profile-card {
    text-align: center;
    background: var(--tokka-card-bg, transparent);
}

/* Sombra flotante como la del dashboard/login, solo en escritorio: en
   celular la tarjeta ya ocupa casi todo el ancho y la sombra no se lucía.
   El color de fondo (arriba) es el mismo en los dos tamaños; esto solo
   agrega el radio/padding/sombra de "tarjeta flotante" que en celular no
   hace falta. */
@media (min-width: 768px) {
    .tokka-profile-card {
        border-radius: var(--tokka-radius-lg);
        padding: 24px 24px 32px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    }
}

.tokka-bg {
    height: 170px;
    border-radius: var(--tokka-radius-lg);
    background: linear-gradient(135deg, #232526, #414345);
    background-size: cover;
    background-position: center;
}

.tokka-avatar-wrap {
    margin-top: -55px;
}

.tokka-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    /* --tokka-card-bg (ver tokka_profile_css_vars() en helpers.php): mismo
       color que el panel del perfil, así el borde se "funde" con la
       tarjeta en vez de quedar un aro blanco encima de un fondo oscuro. Sin
       fondo oscuro elegido (default) esto cae en "#fff" de siempre. */
    border: 5px solid var(--tokka-card-bg, #fff);
    background: var(--tokka-card-bg, #fff);
    display: block;
    margin: 0 auto;
}

.tokka-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    color: #5b616b;
    font-weight: 700;
    font-size: 32px;
}

.tokka-name {
    margin: 16px 0 2px;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Insignia de verificación con popup explicativo al hacer hover/focus (ver
   .tokka-badge-tooltip abajo) — el "aria-label" con el mismo texto va en el
   wrap, no en el ícono, para que un lector de pantalla no lo anuncie dos
   veces (ícono y tooltip visual quedan aria-hidden). */
.tokka-badge-wrap {
    position: relative;
    display: inline-flex;
    cursor: default;
}

.tokka-badge-icon {
    display: inline-flex;
    flex-shrink: 0;
}

.tokka-badge-icon svg { display: block; }

.tokka-badge-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 2px);
    margin-top: 8px;
    width: 210px;
    max-width: 65vw;
    background: var(--tokka-black);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    padding: 8px 12px;
    border-radius: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 6;
}

.tokka-badge-tooltip::before { content: attr(data-tip); }

.tokka-badge-wrap:hover .tokka-badge-tooltip,
.tokka-badge-wrap:focus .tokka-badge-tooltip,
.tokka-badge-wrap:focus-visible .tokka-badge-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* @usuario, clickeable para copiar el link del perfil (ver el <script> al
   final de profile-display.php). El wrap es "position:relative" solo para
   anclar el popup de abajo (.tokka-copy-toast) justo debajo del botón. */
.tokka-handle-wrap {
    position: relative;
    display: inline-block;
    margin: 0 0 4px;
}

.tokka-handle {
    display: inline-block;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-style: italic;
    font-size: 14px;
    color: var(--tokka-page-text-soft, var(--tokka-gray));
    cursor: pointer;
}

/* Popup con fade que confirma la copiada, sin tocar el texto del botón. */
.tokka-copy-toast {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 2px);
    margin-top: 4px;
    background: var(--tokka-black);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 5;
}

.tokka-copy-toast.tokka-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* @usuario + (solo el dueño) "• Editar perfil", en una fila centrada. */
.tokka-handle-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline; /* alineados por la línea base del texto, no por la caja */
    justify-content: center;
    gap: 8px;
    margin: 0 0 4px;
}

.tokka-handle-row .tokka-handle-wrap { margin: 0; }

/* El @ (un <button>), el punto y el enlace traían interlineados distintos
   (normal / el line-height:1 del tema / heredado) y quedaban 1–2px
   desfasados: mismo tamaño e interlineado para los tres. */
.tokka-handle-row :is(.tokka-handle, .tokka-owner-dot, .tokka-owner-edit-btn) {
    font-size: 14px;
    line-height: 1.4;
}

.tokka-owner-edit {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.tokka-owner-edit[hidden] { display: none; }

.tokka-owner-dot { color: var(--tokka-page-text-soft, var(--tokka-gray)); }

/* Mismo estilo que el @ (.tokka-handle): cursiva, 14px, color suave. */
.tokka-owner-edit-btn {
    font-style: italic;
    font-size: 14px;
    color: var(--tokka-page-text-soft, var(--tokka-gray));
    text-decoration: none;
}

.tokka-owner-edit-btn:hover { text-decoration: underline; }

.tokka-tagline {
    margin: 2px 0;
    color: var(--tokka-page-text-soft, var(--tokka-gray));
    font-size: 15px;
}

.tokka-location-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin: 2px 0;
    font-size: 15px;
}

.tokka-pronouns, .tokka-location-divider, .tokka-location {
    color: var(--tokka-page-text-soft, var(--tokka-gray));
}

.tokka-actions {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    margin: 22px 0;
}

/* --tokka-btn-bg/--tokka-btn-text (ver tokka_profile_css_vars() en helpers.php):
   con un estilo "tono" (tono estandar/tono limpio), ese color unico tiñe
   estos botones y el horario, igual que los tiles de conexiones. Sin tono
   (estandar/limpio), caen al negro/blanco de siempre — salvo que el fondo
   de página (columna 3 del picker) sea oscuro, ahí se invierten a blanco
   para no quedar invisibles sobre su propio fondo. */
.tokka-btn-contact {
    background: var(--tokka-btn-bg, var(--tokka-black));
    color: var(--tokka-btn-text, #fff);
    padding: 14px 28px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.tokka-btn-contact:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    filter: brightness(0.88);
}

.tokka-call-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.tokka-btn-call {
    background: var(--tokka-btn-bg, var(--tokka-black));
    color: var(--tokka-btn-text, #fff);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.tokka-btn-call:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    filter: brightness(0.88);
}

.tokka-btn-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--tokka-page-text-soft, var(--tokka-gray));
}

.tokka-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 10px;
}

/* Un solo estilo de tile para las 50+ conexiones posibles (en vez de una
   regla de color por tipo, que no escala): tarjeta blanca + el ícono de
   marca a todo color (logo real via Simple Icons, o el ícono generico de
   respaldo) hace la diferenciación visual — ver Tokka_Connections::render_icon(). */
.tokka-link-tile {
    aspect-ratio: 1.6 / 1;
    border-radius: var(--tokka-radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    border: 1px solid rgba(17,17,17,0.08);
    color: var(--tokka-black);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(17,17,17,0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tokka-link-tile:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Logo antes del nombre de la conexión, sin badge/círculo detrás — el
   color exacto lo pone el estilo elegido por el cliente via inline style
   (ver tokka_tile_style_vars() en helpers.php). */
.tokka-link-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: var(--tokka-black);
}

.tokka-link-tile-icon img { display: block; width: 24px; height: 24px; object-fit: contain; }
.tokka-link-tile-icon svg { width: 24px; height: 24px; }

.tokka-link-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.tokka-footer-banner {
    margin-top: 34px;
    padding-top: 18px;
}

.tokka-footer-banner a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    color: var(--tokka-page-text-soft, var(--tokka-gray));
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.tokka-footer-banner a:hover {
    opacity: 1;
}

/* Aviso de privacidad debajo de "Made by Tokka" (ver profile-display.php). */
.tokka-footer-banner a.tokka-footer-privacy {
    display: flex;
    width: fit-content;
    margin: 10px auto 0;
    font-weight: 500;
    font-size: 11px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tokka-footer-logo {
    height: 18px;
    width: auto;
    display: block;
    filter: var(--tokka-logo-filter, none);
}

.tokka-map-section {
    margin-top: 16px;
}

.tokka-map-address-card {
    margin-bottom: 12px;
}

.tokka-map-tile {
    border-radius: var(--tokka-radius-md);
    overflow: hidden;
    height: 200px;
}

.tokka-map-tile--off {
    display: flex;
    background: var(--tokka-soft-card-bg, #f9fafb);
}

/* Mapa apagado hasta que la persona lo pide (ver profile-display.php). */
.tokka-map-load {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
}

.tokka-map-load-title {
    font-weight: 600;
    font-size: 15px;
    padding: 9px 18px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px currentColor;
}

.tokka-map-load-note {
    font-size: 12px;
    opacity: 0.7;
}

.tokka-map-tile iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    /* Mapa decorativo: se ve pero no se arrastra ni se hace zoom con el dedo/mouse. */
    pointer-events: none;
}

.tokka-map-address {
    margin: 0;
    font-size: 13px;
    color: var(--tokka-page-text-soft, var(--tokka-gray));
    text-align: left;
}

/* ---------- Login / Dashboard ---------- */
.tokka-auth-wrap, .tokka-dash-wrap {
    max-width: 480px;
    margin: 40px auto;
    padding: 0 16px 60px;
}

.tokka-auth-card, .tokka-dash-card {
    background: #fff;
    border-radius: var(--tokka-radius-md);
    padding: 32px 28px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.tokka-auth-title { margin-top: 0; }

/* Circulitos de progreso del wizard de registro (ver tokka_wizard_progress()
   en helpers.php) — van al final de la tarjeta, no arriba del título. El
   del paso actual se alarga en píldora, el resto queda como puntito gris. */
.tokka-wizard-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 22px;
}

.tokka-wizard-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #e5e7eb;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.tokka-wizard-dot-active {
    width: 20px;
    background: var(--tokka-teal);
}

/* ---------- Feedback de "cargando" en botones de envío/procesos tardados
   (wizard de registro y recorte de fotos) — el botón conserva su tamaño y
   color, solo cambia el texto (via JS, data-loading-text) y le agrega un
   spinner, para que quede claro que algo SÍ está pasando durante la subida
   en vez de que la pantalla se quede sin cambios. ---------- */
.tokka-btn-loading {
    position: relative;
    padding-right: 42px !important;
    opacity: 0.85;
    cursor: default;
}
.tokka-btn-loading::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tokka-spin 0.7s linear infinite;
}
@keyframes tokka-spin { to { transform: rotate(360deg); } }

/* Shimmer breve sobre la foto de perfil/portada mientras se recorta y
   comprime en el canvas (ver register-fotos.php) — un destello que barre de
   izquierda a derecha, la animación "skeleton" de siempre. */
.tokka-photo-upload.tokka-photo-processing {
    position: relative;
    overflow: hidden;
}
.tokka-photo-upload.tokka-photo-processing::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: tokka-shimmer 0.9s ease-in-out infinite;
}
@keyframes tokka-shimmer {
    from { background-position: 150% 0; }
    to   { background-position: -50% 0; }
}

.tokka-auth-card form, .tokka-dash-card form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tokka-auth-card label, .tokka-dash-card label {
    font-size: 13px;
    font-weight: 600;
    margin-top: 14px;
    color: #374151;
}

.tokka-auth-card input,
.tokka-dash-card input[type=text],
.tokka-dash-card input[type=email],
.tokka-dash-card input[type=url],
.tokka-dash-card input[type=password],
.tokka-dash-card input[type=file] {
    padding: 10px 12px;
    border: 1px solid var(--tokka-black);
    border-radius: 10px;
    font-size: 15px;
}

.tokka-btn-primary {
    margin-top: 22px;
    background: var(--tokka-black);
    color: #fff;
    border: none;
    padding: 13px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.tokka-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    background: #2a2a2a;
}

.tokka-error { color: #dc2626; font-size: 14px; }
.tokka-success { color: #059669; font-size: 14px; }

/* ---------- Recorte de foto de perfil / portada (dashboard) ---------- */
.tokka-crop-dialog { max-width: 420px; }
.tokka-crop-dialog .tokka-field-hint { margin: -4px 0 14px; }

.tokka-crop-viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 0 14px;
    background: #111;
    touch-action: none;
    cursor: grab;
}
.tokka-crop-viewport:active { cursor: grabbing; }

.tokka-crop-viewport.tokka-crop-round {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

.tokka-crop-viewport.tokka-crop-wide {
    aspect-ratio: 16 / 9;
    border-radius: var(--tokka-radius-md);
}

.tokka-crop-viewport img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    max-height: none;
    transform-origin: 0 0;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

#tokka-crop-zoom {
    width: 100%;
    margin: 0 0 18px;
}

.tokka-crop-dialog-actions {
    display: flex;
    gap: 10px;
}

.tokka-crop-dialog-actions .tokka-btn-primary,
.tokka-crop-dialog-actions .tokka-btn-secondary {
    flex: 1;
    margin-top: 0;
}

.tokka-btn-secondary {
    background: #fff;
    color: var(--tokka-black);
    border: 1px solid var(--tokka-black);
    padding: 13px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.tokka-btn-secondary:hover { background: #f2f2f2; }

/* Fila Atrás/Continuar del wizard de registro (templates/register-*.php,
   salvo el paso 1 que no tiene paso anterior): mismo patrón de
   .tokka-crop-dialog-actions, pero el botón "Atrás" es un <a>, no un
   <button>, así que necesita su propio centrado de texto. */
.tokka-wizard-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.tokka-wizard-actions .tokka-btn-primary,
.tokka-wizard-actions .tokka-btn-secondary {
    flex: 1;
    margin-top: 0;
}

.tokka-wizard-actions a.tokka-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* ---------- Login / Registro / Verificación ---------- */
.tokka-auth-logo {
    display: block;
    height: 30px;
    width: auto;
    margin: 0 auto 24px;
}

.tokka-auth-card input {
    border-radius: 999px !important;
    padding: 14px 20px !important;
}

.tokka-auth-card form {
    gap: 12px;
}

.tokka-btn-teal {
    background: var(--tokka-teal);
}

.tokka-btn-teal:hover {
    background: var(--tokka-teal-dark);
}

.tokka-btn-link {
    display: block;
    text-align: center;
    text-decoration: none;
}

.tokka-auth-switch {
    text-align: center;
    font-size: 14px;
    margin: 18px 0 0;
    color: var(--tokka-gray);
}

.tokka-auth-switch a {
    color: var(--tokka-teal);
    font-weight: 600;
    text-decoration: none;
}

.tokka-auth-switch a:hover { text-decoration: underline; }

.tokka-auth-forgot {
    text-align: center;
    margin: 8px 0 0;
}

.tokka-auth-forgot a {
    font-size: 13px;
    font-style: italic;
    color: var(--tokka-gray);
    text-decoration: none;
}

.tokka-auth-forgot a:hover { text-decoration: underline; }

.tokka-inline-form { margin-top: 8px; }

/* ---------- Divisor "o" entre Google y el form normal ---------- */
.tokka-auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--tokka-gray);
    font-size: 12px;
    margin: 16px 0;
}

.tokka-auth-divider::before,
.tokka-auth-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #e5e7eb;
}

.tokka-auth-divider span {
    padding: 0 10px;
}

.tokka-google-btn-wrap {
    display: flex;
    justify-content: center;
    min-height: 40px;
}

.tokka-link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--tokka-teal);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.tokka-dash-header { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }

.tokka-dash-hello { font-size: 32px; font-weight: 600; margin: 0; }

.tokka-dash-pills { display: flex; gap: 10px; }

.tokka-scan-count { margin: 2px 0 0; font-size: 13px; color: var(--tokka-gray); }

.tokka-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: #fff;
}

.tokka-pill-primary { background: #008F85; }
.tokka-pill-danger { background: #dc2626; }

.tokka-name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.tokka-name-row input { width: 100%; }

.tokka-photo-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
    align-items: start;
    margin: 6px 0 4px;
}

.tokka-photo-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: 1px dashed #d1d5db;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    width: 100%;
}

.tokka-photo-upload:hover { background: #ececec; }

.tokka-photo-round {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

.tokka-photo-wide {
    aspect-ratio: 16 / 9;
    border-radius: 14px;
}

.tokka-photo-upload img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tokka-hidden { display: none !important; }
.tokka-hidden-file { display: none; }

.tokka-photo-label {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--tokka-gray);
    text-align: center;
}

/* ---------- Secciones colapsables (mapa, horario de atención) ---------- */
.tokka-section-collapsible {
    margin-top: 14px;
    border: 1px solid #ececec;
    border-radius: var(--tokka-radius-sm, 14px);
    padding: 0 14px;
}

.tokka-section-collapsible summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 13px 26px 13px 0;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}
.tokka-section-collapsible summary::-webkit-details-marker { display: none; }

.tokka-section-collapsible summary::after {
    content: '+';
    position: absolute;
    top: 10px;
    right: 0;
    font-size: 18px;
    font-weight: 400;
    color: #9ca3af;
}
.tokka-section-collapsible[open] summary::after { content: '−'; }

.tokka-section-collapsible-body { padding-bottom: 16px; }

/* ---------- Estilo del perfil: Color / Estilo del ícono / Fondo ----------
   3 grupos independientes (ver dashboard.php JS): Color elige "Estándar"
   (marca) o un tono (preestablecido o personalizado); Estilo del ícono
   elige panel blanco+ícono a color vs panel a color+ícono blanco; Fondo
   elige el lienzo del perfil público (blanco/verde oscuro/negro). Los
   primeros dos combinados arman uno de los 4 tokka_profile_style de
   siempre (ver Tokka_Profile::style_options()); Fondo es un campo aparte. */
.tokka-style-group-label {
    margin: 14px 0 8px;
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.tokka-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tokka-color-swatch {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #ececec;
    padding: 0;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.tokka-color-swatch:hover { transform: scale(1.08); }

.tokka-color-swatch-selected {
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--tokka-black);
}

/* Estándar: representa "cada red su propio color de marca" — no es un hex
   fijo, así que el círculo es solo decorativo (degradado). */
.tokka-color-swatch-brand {
    background: linear-gradient(135deg, #b23bda 0%, #e33b76 100%);
}

.tokka-color-swatch-custom {
    position: relative;
    background: #fff;
}
.tokka-color-swatch-custom input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background: none;
}
.tokka-color-swatch-custom input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; overflow: hidden; }
.tokka-color-swatch-custom input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
.tokka-color-swatch-custom-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.tokka-treatment-options {
    display: flex;
    gap: 14px;
}

.tokka-treatment-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid transparent;
    padding: 0;
    margin: 0;
    background: none;
    cursor: pointer;
    transition: transform 0.12s ease;
}

.tokka-treatment-opt:hover { transform: scale(1.06); }

.tokka-treatment-opt-selected { border-color: var(--tokka-black); }

.tokka-treatment-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid var(--tokka-teal);
    color: var(--tokka-teal);
}

.tokka-treatment-circle-filled {
    background: var(--tokka-teal);
    border-color: var(--tokka-teal);
    color: #fff;
}

.tokka-treatment-circle svg { width: 19px; height: 19px; }

.tokka-bg-options {
    display: flex;
    gap: 10px;
}

.tokka-bg-opt { cursor: pointer; }

.tokka-bg-swatch {
    display: block;
    width: 64px;
    height: 36px;
    border-radius: 10px;
    border: 2px solid #ececec;
    transition: border-color 0.12s ease;
}

.tokka-bg-opt input:checked + .tokka-bg-swatch {
    border-color: var(--tokka-black);
}

.tokka-bg-swatch-white { background: #fff; }
.tokka-bg-swatch-dark_green { background: #002823; }
.tokka-bg-swatch-black { background: #000000; }

/* ---------- Tema oscuro de TODO el panel (columna 3 "Fondo del perfil") ----------
   .tokka-dash-theme-black / .tokka-dash-theme-dark_green van en <body> —
   tienen que ir ahí y no en .tokka-dash-wrap, porque .tokka-dash-wrap no
   cubre toda la página (tiene su propio max-width/margin), así que pintar
   solo su fondo dejaba un margen gris claro (el --tokka-bg de siempre)
   alrededor de la tarjeta. Con <body> pintado, el fondo es el mismo negro/
   verde sólido de borde a borde que en el perfil público — ver
   dashboard.php: clase inicial calculada en servidor + syncBgPreview() en
   el JS para el cambio en vivo. "Blanco" (el default) no agrega ninguna de
   estas clases, así que nada de esto aplica — cero cambio de siempre.

   Las superficies (tarjeta, inputs, tarjetas de conexión) usan un gris/verde
   MÁS CLARO que el fondo de página, nunca blanco puro ni el mismo negro/verde
   plano del fondo — así se distinguen como paneles "elevados" en vez de verse
   como un rectángulo blanco pegado encima (o, en el otro extremo, fundirse
   sin contraste con la página). Es el mismo principio que cualquier UI en
   modo oscuro (iOS, Material): página más oscura, tarjetas un tono arriba. */
body.tokka-dash-theme-black {
    --tokka-dash-page-bg: #000000;
    --tokka-dash-surface: #1e1e1e;
    --tokka-dash-surface-2: #272727;
    --tokka-dash-text: #f5f5f5;
    --tokka-dash-text-soft: #9ca3af;
    --tokka-dash-border: #3a3a3a;
    --tokka-dash-border-soft: #2a2a2a;
}

body.tokka-dash-theme-dark_green {
    --tokka-dash-page-bg: #002823;
    --tokka-dash-surface: #0b4038;
    --tokka-dash-surface-2: #0f4b40;
    --tokka-dash-text: #f5f5f5;
    --tokka-dash-text-soft: rgba(255,255,255,0.65);
    --tokka-dash-border: rgba(255,255,255,0.22);
    --tokka-dash-border-soft: rgba(255,255,255,0.14);
}

body[class*="tokka-dash-theme-"] {
    background: var(--tokka-dash-page-bg);
    transition: background-color 0.15s ease;
}

body[class*="tokka-dash-theme-"] .tokka-dash-card {
    background: var(--tokka-dash-surface);
    color: var(--tokka-dash-text);
}

body[class*="tokka-dash-theme-"] .tokka-dash-hello,
body[class*="tokka-dash-theme-"] .tokka-dash-card h2,
body[class*="tokka-dash-theme-"] .tokka-section-collapsible summary {
    color: var(--tokka-dash-text);
}

body[class*="tokka-dash-theme-"] .tokka-dash-card h2 {
    border-top-color: var(--tokka-dash-border-soft);
}

body[class*="tokka-dash-theme-"] .tokka-scan-count,
body[class*="tokka-dash-theme-"] .tokka-field-hint,
body[class*="tokka-dash-theme-"] .tokka-photo-label,
body[class*="tokka-dash-theme-"] .tokka-dash-card label,
body[class*="tokka-dash-theme-"] .tokka-style-group-label {
    color: var(--tokka-dash-text-soft);
}

body[class*="tokka-dash-theme-"] .tokka-dash-card input[type=text],
body[class*="tokka-dash-theme-"] .tokka-dash-card input[type=email],
body[class*="tokka-dash-theme-"] .tokka-dash-card input[type=url],
body[class*="tokka-dash-theme-"] .tokka-dash-card input[type=password],
body[class*="tokka-dash-theme-"] .tokka-dash-card input[type=file],
body[class*="tokka-dash-theme-"] .tokka-dash-card input[type=time],
body[class*="tokka-dash-theme-"] .tokka-cc-select,
body[class*="tokka-dash-theme-"] .tokka-prefix-row {
    background: var(--tokka-dash-surface-2);
    border-color: var(--tokka-dash-border);
    color: var(--tokka-dash-text);
}

body[class*="tokka-dash-theme-"] .tokka-prefix {
    background: var(--tokka-dash-surface);
    color: var(--tokka-dash-text-soft);
}

body[class*="tokka-dash-theme-"] .tokka-photo-upload {
    background: var(--tokka-dash-surface-2);
    border-color: var(--tokka-dash-border);
    color: var(--tokka-dash-text-soft);
}

body[class*="tokka-dash-theme-"] .tokka-photo-upload:hover {
    background: var(--tokka-dash-surface);
}

body[class*="tokka-dash-theme-"] .tokka-section-collapsible {
    border-color: var(--tokka-dash-border-soft);
}

body[class*="tokka-dash-theme-"] .tokka-quickadd-btn,
body[class*="tokka-dash-theme-"] .tokka-conn-card {
    background: var(--tokka-dash-surface-2);
    border-color: var(--tokka-dash-border-soft);
    color: var(--tokka-dash-text);
}

body[class*="tokka-dash-theme-"] .tokka-btn-secondary {
    background: transparent;
    border-color: var(--tokka-dash-border);
    color: var(--tokka-dash-text);
}

body[class*="tokka-dash-theme-"] .tokka-btn-secondary:hover {
    background: var(--tokka-dash-surface-2);
}

/* Aros de selección: var(--tokka-black) de siempre es invisible sobre
   superficies oscuras, así que aquí usan el texto claro del tema. */
body[class*="tokka-dash-theme-"] .tokka-color-swatch-selected {
    box-shadow: 0 0 0 1px var(--tokka-dash-surface), 0 0 0 3px var(--tokka-dash-text);
}

body[class*="tokka-dash-theme-"] .tokka-treatment-opt-selected {
    border-color: var(--tokka-dash-text);
}

body[class*="tokka-dash-theme-"] .tokka-bg-opt input:checked + .tokka-bg-swatch {
    border-color: var(--tokka-dash-text);
}

.tokka-map-search-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.tokka-map-search-row input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--tokka-black);
    border-radius: 10px;
    font-size: 14px;
}

.tokka-map-search-btn {
    flex: 0 0 auto;
    width: 42px;
    border: 1px solid var(--tokka-black);
    border-radius: 10px;
    background: #fff;
    color: var(--tokka-black);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tokka-map-search-btn:hover { background: #f3f4f6; }
.tokka-map-search-btn:disabled { opacity: 0.5; cursor: default; }

#tokka-map-picker {
    height: 200px;
    border-radius: var(--tokka-radius-md);
    overflow: hidden;
    margin-top: 6px;
    z-index: 0;
}

.tokka-map-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
}

.tokka-map-footer .tokka-field-hint {
    margin: 0;
    flex: 1;
}

.tokka-map-remove-btn {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: #dc2626;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    padding: 4px 0;
    white-space: nowrap;
}

.tokka-map-remove-btn:hover { text-decoration: underline; }

/* ---------- Conexiones (redes/enlaces): Quick Add ---------- */
.tokka-quickadd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 10px 0 24px;
}

.tokka-quickadd-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: var(--tokka-radius-sm, 14px);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--tokka-black);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.tokka-quickadd-btn:hover { border-color: #d1d5db; transform: translateY(-1px); }

.tokka-quickadd-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.tokka-quickadd-icon img { width: 100%; height: 100%; object-fit: contain; }

.tokka-quickadd-btn.tokka-quickadd-added {
    background: #f0fdfa;
    border-color: var(--tokka-teal);
    color: var(--tokka-teal-dark);
}

/* ---------- Conexiones: lista "Mis conexiones" ---------- */
.tokka-conn-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.tokka-conn-empty {
    margin: 10px 0 0;
    text-align: center;
}

.tokka-conn-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: var(--tokka-radius-sm, 14px);
    padding: 10px 12px;
}

.tokka-conn-card.tokka-conn-dragging { opacity: 0.5; }
.tokka-conn-card.tokka-conn-card-hidden { opacity: 0.55; }

.tokka-conn-drag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: #9ca3af;
    cursor: grab;
    touch-action: none;
}

/* Sin fondo ni círculo: solo el logo, directo sobre el blanco de la tarjeta
   (ver conversación — el circulito detrás del ícono se quitó a propósito). */
.tokka-conn-card-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tokka-conn-card-icon img { width: 24px; height: 24px; object-fit: contain; }

.tokka-conn-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tokka-conn-card-name { font-size: 14px; font-weight: 600; color: var(--tokka-black); }
.tokka-conn-card-value {
    font-size: 12px;
    color: var(--tokka-gray);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tokka-conn-menu-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--tokka-gray);
    cursor: pointer;
}
.tokka-conn-menu-btn:hover { background: #f3f4f6; }

.tokka-conn-menu-popover {
    display: none;
    position: absolute;
    top: 44px;
    right: 10px;
    z-index: 5;
    flex-direction: column;
    min-width: 140px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    padding: 6px;
}
.tokka-conn-menu-popover.is-open { display: flex; }

.tokka-conn-menu-popover button {
    text-align: left;
    background: transparent;
    border: none;
    padding: 9px 10px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: var(--tokka-black);
    cursor: pointer;
}
.tokka-conn-menu-popover button:hover { background: #f3f4f6; }
.tokka-conn-menu-popover .tokka-conn-menu-delete { color: #dc2626; }

.tokka-conn-add-btn { width: 100%; margin-top: 14px; }

/* ---------- Picker: agregar una conexión (buscador + Popular + categorías) ---------- */
.tokka-picker-dialog {
    border: none;
    border-radius: var(--tokka-radius-md);
    padding: 20px;
    width: 92%;
    max-width: 420px;
    max-height: 82vh;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.tokka-picker-dialog::backdrop { background: rgba(0,0,0,0.5); }

.tokka-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tokka-picker-head h3 { margin: 0; font-size: 17px; }

.tokka-picker-close {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    color: var(--tokka-black);
    cursor: pointer;
}

.tokka-picker-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 10px 14px;
    margin-bottom: 14px;
    color: #9ca3af;
}
.tokka-picker-search-row input {
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    font-size: 14px;
    font-family: inherit;
    color: var(--tokka-black);
    padding: 0;
}

.tokka-picker-body { overflow-y: auto; max-height: calc(82vh - 110px); }

.tokka-picker-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    margin: 10px 0 8px;
}

.tokka-picker-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 6px;
}

.tokka-picker-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--tokka-black);
    cursor: pointer;
    text-align: left;
}
.tokka-picker-row:hover { border-color: #d1d5db; }
.tokka-picker-row[disabled] { cursor: default; opacity: 0.55; }

.tokka-picker-row-icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tokka-picker-row-icon img { width: 100%; height: 100%; object-fit: contain; }
.tokka-picker-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tokka-picker-row-badge { position: absolute; top: 4px; right: 6px; font-size: 9px; font-weight: 700; color: var(--tokka-teal-dark); }

.tokka-picker-empty { text-align: center; color: var(--tokka-gray); padding: 30px 0; }

.tokka-picker-category { margin-top: 6px; border-top: 1px solid #f0f0f0; padding-top: 6px; }
.tokka-picker-category summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 2px;
    list-style: none;
}
.tokka-picker-category summary::-webkit-details-marker { display: none; }
.tokka-picker-category summary::after { content: '+'; float: right; color: #9ca3af; }
.tokka-picker-category[open] summary::after { content: '−'; }

@media (max-width: 480px) {
    .tokka-picker-dialog {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        position: fixed;
        inset: 0;
        margin: 0;
    }
    .tokka-picker-body { max-height: calc(100vh - 120px); }
    .tokka-quickadd-grid { grid-template-columns: repeat(3, 1fr); }
    .tokka-picker-grid { grid-template-columns: 1fr; }
}

.tokka-tile-dialog {
    border: none;
    border-radius: var(--tokka-radius-md);
    padding: 24px;
    width: 90%;
    max-width: 360px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.tokka-tile-dialog::backdrop {
    background: rgba(0,0,0,0.5);
}

.tokka-tile-dialog h3 { margin-top: 0; }

.tokka-tile-dialog .tokka-dialog-done {
    width: 100%;
    margin-top: 18px;
}

.tokka-dash-card h2 { margin-top: 26px; font-size: 17px; border-top: 1px solid #eee; padding-top: 18px; }

.tokka-field-hint { font-weight: 400; color: #9ca3af; font-size: 12px; }

.tokka-phone-row {
    display: flex;
    gap: 8px;
}

.tokka-cc-select {
    flex: 0 0 110px;
    /* Un <select> dentro de un flex ignora flex-basis y crece para caber
       su opcion mas larga a menos que min-width se resetee explicitamente
       (min-width:auto es el default en flex items) — sin esto, una sola
       opcion larga (ej. un pais con nombre largo) desborda todo el dialogo. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 8px;
    border: 1px solid var(--tokka-black);
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
}

.tokka-phone-row input {
    flex: 1;
}

.tokka-prefix-row {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--tokka-black);
    border-radius: 10px;
    overflow: hidden;
}

.tokka-prefix {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: #f3f4f6;
    color: #5b616b;
    font-size: 14px;
    white-space: nowrap;
}

.tokka-prefix-row input {
    border: none;
    border-radius: 0;
    flex: 1;
    min-width: 0;
}

/* Weight ~200 puntos más ligero en el panel (dashboard), sin afectar
   login/registro que comparten estas mismas clases. */
.tokka-dash-card label,
.tokka-dash-card .tokka-btn-primary {
    font-weight: 400;
}

.tokka-dash-card .tokka-field-hint {
    font-weight: 300;
}

/* ---------- Menú inferior del panel (Perfil / Escanear / Contactos) ---------- */
.tokka-page-with-navbar { padding-bottom: 110px; }

.tokka-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 30px;
    background: #fff;
    padding: 10px 26px;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 50;
}

.tokka-bnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: var(--tokka-gray);
    font-size: 10px;
    font-weight: 600;
}

.tokka-bnav-item svg { display: block; }

.tokka-bnav-item.tokka-bnav-active {
    color: var(--tokka-black);
}

.tokka-bnav-item.tokka-bnav-active svg {
    color: var(--tokka-nav-teal);
}

.tokka-bnav-scan {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--tokka-nav-teal);
    color: #fff;
    margin-top: -26px;
    flex-shrink: 0;
    box-shadow: 0 8px 18px rgba(0,163,144,0.4);
    transition: transform 0.15s ease;
}

.tokka-bnav-scan:hover { transform: translateY(-2px) scale(1.05); }

/* ---------- Escanear tarjeta ---------- */
.tokka-scan-capture-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    padding: 40px 20px;
    border: 1.5px dashed var(--tokka-nav-teal);
    border-radius: var(--tokka-radius-md);
    color: var(--tokka-nav-teal);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
}

.tokka-scan-capture-btn:hover { background: rgba(0,163,144,0.06); }

.tokka-scan-manual-link {
    display: block;
    text-align: center;
    margin: 16px auto 0;
}

.tokka-scan-preview {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    border-radius: var(--tokka-radius-md);
    margin-top: 16px;
}

.tokka-scan-progress-wrap {
    height: 6px;
    border-radius: 999px;
    background: #eee;
    overflow: hidden;
    margin-top: 16px;
}

.tokka-scan-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--tokka-nav-teal);
    transition: width 0.2s ease;
}

/* Cloud Vision no reporta % de avance, así que mientras espera la
   respuesta se anima un segmento indeterminado en vez de un % real. */
.tokka-scan-progress-bar.tokka-scan-progress-indeterminate {
    width: 40% !important;
    animation: tokka-scan-indeterminate 1.1s ease-in-out infinite;
}

@keyframes tokka-scan-indeterminate {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

/* ---------- Lista de contactos ---------- */
.tokka-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.tokka-contact-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--tokka-radius-md);
    background: #f9fafb;
}

.tokka-contact-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tokka-nav-teal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
}

.tokka-contact-info { flex: 1; min-width: 0; }

.tokka-contact-name {
    margin: 0;
    font-weight: 600;
    font-size: 15px;
}

.tokka-contact-sub {
    margin: 1px 0 0;
    font-size: 12px;
    color: var(--tokka-gray);
}

.tokka-contact-detail {
    margin: 1px 0 0;
    font-size: 12px;
    color: var(--tokka-gray);
}

.tokka-contact-delete-form { flex: 0 0 auto; margin: 0; }

.tokka-contact-delete-btn {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 6px;
    display: flex;
}

.tokka-contact-delete-btn:hover { color: #dc2626; }

/* ---------- Selector de idioma ES/EN ---------- */
.tokka-lang-switch {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    font-size: 12px;
    font-weight: 600;
}

.tokka-lang-switch a {
    color: var(--tokka-gray);
    text-decoration: none;
}

.tokka-lang-switch a.tokka-lang-active {
    color: var(--tokka-nav-teal);
}

.tokka-lang-switch span { color: #d1d5db; }

/* ---------- Horario de atención (panel) ---------- */
.tokka-hours-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.tokka-hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f9fafb;
    /* min-width:0 en toda la cadena de flex hijos de abajo: sin esto, un
       <input type="time"> se niega a encogerse mas alla de su ancho de
       contenido (min-width:auto es el default en flex items — mismo bug que
       ya vimos con el <select> de pais de WhatsApp), y en formato de 12h con
       "a. m."/"p. m." ese contenido es ancho, asi que el row se desbordaba
       del wrapper redondeado. */
    min-width: 0;
}

.tokka-hours-day-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--tokka-black);
    margin: 0;
    flex: 0 0 98px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tokka-hours-day-toggle input[type=checkbox] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--tokka-nav-teal);
}

.tokka-hours-time-inputs {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
}

.tokka-hours-time-inputs input[type=time] {
    padding: 6px 4px;
    border: 1px solid var(--tokka-black);
    border-radius: 8px;
    font-size: 12px;
    background: #fff;
    min-width: 0;
    flex: 1 1 0;
}

.tokka-hours-time-inputs span { flex-shrink: 0; }

.tokka-hours-time-inputs span { color: var(--tokka-gray); }

.tokka-hours-row-off .tokka-hours-day-toggle { color: #9ca3af; }
.tokka-hours-row-off .tokka-hours-time-inputs { opacity: 0.35; pointer-events: none; }

/* ---------- Horario de atención (perfil público) ---------- */
.tokka-hours-card {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--tokka-radius-md);
    background: var(--tokka-soft-card-bg, #f9fafb);
    text-align: left;
}

.tokka-hours-title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--tokka-accent, var(--tokka-page-text, var(--tokka-black)));
}

.tokka-hours-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 13px;
    color: var(--tokka-page-text-soft, var(--tokka-gray));
}

.tokka-hours-line.tokka-hours-today {
    color: var(--tokka-accent, var(--tokka-page-text, var(--tokka-black)));
    font-weight: 700;
}


/* Aviso de error del escáner (arriba del formulario) */
.tokka-scan-error {
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.tokka-scan-error .tokka-error { margin: 0 0 8px; }