html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--app-bg); /* para que el borde ya no sea blanco */
}

:root{
    --app-bg: #2b303b;
    --app-text: #e8edf2;

    --card-bg: #ffffff;
    --card-text: #0f172a;          /* <-- texto oscuro legible en card blanca */
    --muted: #6b7280;
    --primary: #0ea5e9;            /* sky-500 */
    --primary-hover: #0284c7;      /* sky-600 */
    --danger: #ef4444;
    --success: #22c55e;
    --input-border: #d1d5db;
    --input-bg: #ffffff;
    --input-text: #0f172a;
    --ring: rgba(14,165,233,.35);
}


/* input con botón a la derecha (mostrar/ocultar) */
.password-row{ position: relative; }
.has-append{ padding-right: 92px; }
.btn-append{
    position:absolute; right:6px; top:50%; transform: translateY(-50%);
    height: 36px; padding: 0 10px;
}

.btn-ghost{
    background: transparent;
    border:1px solid var(--input-border);
    color: var(--card-text);
    border-radius: 8px;
    cursor:pointer;
}
.btn-ghost:hover{ background:#f3f4f6; }