:root {
    --bg-2:#1c2024;
    --bg-4:#22272d;
    --bg-6:#2e353d;
    --bg-6-hover:#343c46;
    --outline:#444d5a;
    --outline-hover:#596372;
    --text:#e0e0e0;
    --text-8:#fff;
    --text-9:#9aa6c3;
    --text-10:#e6e6e6;
    --border:rgba(255,255,255,.06);
    --button-bar:#3d4650;
    --button-bar-hover:#495461;
    --dialog-bg:#32383e;
    --dialog-border:#ffffff0f;
    --cerrar-dialog:#3f4852;
    --cerrar-dialog-hover:#495461;
    }

    * {box-sizing:border-box;}

    body {
    margin:0;
    padding:22px;
    min-height:100dvh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    font-family:Inter,Segoe UI,sans-serif;
        background:
        radial-gradient(circle at top,#2a3042 0%,transparent 45%),
        radial-gradient(circle at bottom,#20252d 0%,transparent 50%),
        var(--bg-2);
    user-select:none;
    -webkit-user-select:none;
    -webkit-tap-highlight-color:transparent;
    }

    .columna {
    position:relative;
    width:100%;
    max-width:420px;
    animation: fadeIn 0.5s ease;
    }

    /*
    background-color: var(--bg-4);
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1.2px, transparent 1.2px);
    background-size: 24px 24px;
    overflow: hidden;
    */

    @keyframes fadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
    }

    .puffle {
    position:absolute;
    bottom:100%;
    left:50%;
    width:120px;
    z-index:1;
    filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));
    transform:translateX(-50%) translateY(40%);
    animation:puffleFloat 2.5s ease-in-out infinite;
    }

    @keyframes puffleFloat {
    0% {
        transform:translateX(-50%) translateY(40%) scale(1) rotate(0deg);
    }
    50% {
        transform:translateX(-50%) translateY(21%) scale(1.08) rotate(5deg);
    }
    100% {
        transform:translateX(-50%) translateY(40%) scale(1) rotate(0deg);
    }
    }

    .container {
    position:relative;
    z-index:2;
    width:100%;
    background:var(--bg-4);
    border:1px solid var(--border);
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.03);
    }

    .header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 20px;
    border-bottom:1px solid var(--border);
    background:rgba(255,255,255,.02);
    }

    .logo {
    display:flex;
    align-items:center;
    gap:14px;
    }

    .logo-icon {
    width:48px;
    height:48px;
    border-radius:16px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--bg-6);
    border:1px solid var(--border);
    font-family:"Material Symbols Rounded";
    font-size:26px;
    color: var(--text-9);
    transition:background .2s ease,transform .18s cubic-bezier(.2,.8,.2,1);
    }

    .logo-icon:hover,.settings:hover {
    background:var(--bg-6-hover);
    }

    .settings:active,.logo-icon:active {
    transform:scale(.94);
    }

    .logo-title {
    display:flex;
    flex-direction:column;
    }

    .logo-title b {
    font-size:18px;
    font-weight:700;
    color:var(--text-10);
    }

    .logo-title span {
    margin-top:3px;
    font-size:13px;
    color:var(--text-9);
    }

    .settings {
    width:48px;
    height:48px;
    font-size: 26px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:var(--bg-6);
    border:1px solid var(--border);
    color:var(--text-9);
    cursor:pointer;
    transition:background .2s ease,transform .18s cubic-bezier(.2,.8,.2,1);
    }

    span.material-symbols-rounded {
    font-size: 26px;
    }

    .tabs {
    display:flex;
    width:100%;
    border-bottom:1px solid var(--border);
    }

    .tab {
    flex:1;
    position:relative;
    padding:17px 10px;
    text-align:center;
    cursor:pointer;
    color:var(--text-9);
    transition:.2s;
    background: rgba(147, 169, 185, 0.062);
    }

    .tab:hover {
    background:rgba(147, 169, 185, 0.178);
    }

    .tab.active {
    color:var(--text-8);
    font-weight:600;
    }

    .tab.active::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:3px;
    border-radius: 8px;
    background:#44636b;
    }

    .content {
    padding:24px;
    }

    .form {
    width:100%;
    display:none;
    flex-direction:column;
    gap:14px;
    }

    .form.active {
    display:flex;
    }

    .form input {
    width:100%;
    height:54px;
    padding:0 16px;
    border-radius:16px;
    border:2px solid var(--outline);
    background:var(--bg-6);
    color:var(--text);
    font-family:inherit;
    font-size:14px;
    outline:none;
    user-select:text;
    -webkit-user-select:text;
    transition:border-color .2s,background .2s;
    }

    .form input:focus {
    border-color:var(--outline-hover);
    background:#303741;
    }

    .form input:-webkit-autofill,
    .form input:-webkit-autofill:hover,
    .form input:-webkit-autofill:focus,
    .form input:-webkit-autofill:active {
    -webkit-box-shadow:0 0 0 1000px var(--bg-6) inset !important;
    -webkit-text-fill-color:var(--text) !important;
    caret-color:var(--text);
    transition:background-color 9999s ease-out 0s;
    }

    .input-wrapper {
    position:relative;
    width:100%;
    display:flex;
    align-items:center;
    }

    .input-wrapper input {
    padding-right:54px;
    }

    .toggle-pass {
    position:absolute;
    right:16px;
    cursor:pointer;
    color:var(--text-9);
    font-size:22px;
    }

    .message {
    display:none;
    text-align:center;
    font-size:12px;
    color:var(--text-9);
    }

    .message.show {
    display:block;
    }

    .message.error {
    display:block;
    color:#ff7777;
    }

    .actions {
    display:flex;
    flex-direction:column;
    margin-top:24px;
    }

    .button {
    width:100%;
    height:56px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    background:var(--button-bar);
    border:1px solid rgba(255,255,255,.05);
    border-radius:18px;
    color:#fff;
    font-weight:600;
    transition:.2s;
    font-size:16px;
    font-family:Inter,Segoe UI,sans-serif;
    cursor:pointer;
    }

    .button:hover {
    background:var(--button-bar-hover);
    transform:translateY(-2px);
    }

    .button:active {
    transform:scale(.98);
    }

    .button span {
    font-family:"Material Symbols Rounded";
    font-size:22px;
    font-weight:500;
    }

    .footer {
    margin-top:22px;
    text-align:center;
    font-size:12px;
    color:var(--text-9);
    }

    /* //MODAAAAL */

    dialog{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:90%;
    max-width:420px;
    margin:0;
    padding:24px;
    background:#32383e;
    color:var(--text);
    border:2px solid #ffffff0f;
    border-radius:22px;
    box-shadow:0 20px 50px rgba(0, 0, 0, 0.575);
    user-select:none;
    }

    ::selection {
    background: #436d75;
    }

    dialog::backdrop{
    background:rgba(26, 31, 37, 0.4);
    backdrop-filter:blur(8px);
    }

    dialog h3{
    margin:0 0 16px;
    color:#c0c4c9;
    }

    dialog p{
    margin:0;
    color:var(--text2);
    line-height:1.7;
    }

    .cerrar-modal{
    position:absolute;
    top:14px;
    right:14px;
    width:38px;
    height:38px;
    border:none;
    border-radius:12px;
    background:#3f4852;

    color:var(--primary);
    color: #c0c4c9;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    transition:.2s;
    }

    .cerrar-modal:hover{
    background:#495461;
    color:var(--primary-hover);
    }

    .button.loading {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    }

    .button.loading span {
    font-family: "Material Symbols Rounded" !important;
    display: inline-block !important;
    animation: spin 0.8s linear infinite !important;
    }

    @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }