/* ============================================================
   Pass Hub — estilos custom (complementa Tailwind CDN)
   ============================================================ */

body {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Utility classes compuestas (vía @apply equivalentes escritos a mano) */
.field {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: #fff;
    color: inherit;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.field:focus {
    border-color: rgb(85 112 245);
    box-shadow: 0 0 0 3px rgb(85 112 245 / 0.2);
}
.dark .field {
    background: rgb(15 23 42);
    border-color: rgb(30 41 59);
}

.btn-copy {
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    background: rgb(241 245 249);
    border: 1px solid rgb(226 232 240);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s;
}
.btn-copy:hover { background: rgb(226 232 240); }
.btn-copy:disabled { opacity: 0.5; cursor: not-allowed; }
.dark .btn-copy {
    background: rgb(30 41 59);
    border-color: rgb(51 65 85);
}
.dark .btn-copy:hover { background: rgb(51 65 85); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgb(203 213 225 / 0.5);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgb(148 163 184 / 0.8); background-clip: content-box; border: 2px solid transparent; }
.dark ::-webkit-scrollbar-thumb { background: rgb(51 65 85 / 0.5); background-clip: content-box; border: 2px solid transparent; }

/* Animación sutil */
@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.animate-pulse-soft { animation: pulse-soft 2s ease-in-out infinite; }

/* Focus ring global */
*:focus-visible {
    outline: 2px solid rgb(85 112 245);
    outline-offset: 2px;
}