/*
 * juanvi.dev Mail
 * Personalización global
 */

:root {
    --jmail-accent: #087e9f;
    --jmail-accent-light: #72d3df;
    --jmail-dark: #142631;
}

/* Mantener el comportamiento nativo claro/oscuro */
@media (prefers-color-scheme: dark) {
    :root {
        --jmail-accent: #72d3df;
    }
}

/* Selección de texto */
::selection {
    background: rgba(8, 126, 159, 0.22);
}
/* ==========================================
   juanvi.dev Mail — Login Branding
   ========================================== */

/* Identificar pantallas con formulario de acceso */
body:has(#root input[type="password"])::after {
    content: "⌘  juanvi.dev Mail";

    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);

    font-family: -apple-system, BlinkMacSystemFont,
                 "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;

    color: #087e9f;
    background: rgba(248, 250, 252, 0.94);

    padding: 9px 18px;
    border-radius: 12px;

    pointer-events: none;
    z-index: 10;
}

/* Variante oscura */
@media (prefers-color-scheme: dark) {
    body:has(#root input[type="password"])::after {
        background: rgba(20, 38, 49, 0.94);
        color: #72d3df;
    }
}
/* ============================================
   juanvi.dev Mail — Branding v1
   Login + Sidebar
   ============================================ */

/* LOGIN: sustituir logotipo SVG original */

#root div:has(> svg[width="44"]) > svg {
    background-image: url("/jmail-icon.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 11px;
}

/* Ocultar los elementos interiores del SVG */
#root div:has(> svg[width="44"]) > svg > * {
    visibility: hidden;
}

/* Sustituir el texto MailFlow */
#root div:has(> svg[width="44"]) > span {
    position: relative;
    align-items: center !important;
}

#root div:has(> svg[width="44"]) > span > span {
    display: none;
}

#root div:has(> svg[width="44"]) > span::after {
    content: "juanvi.dev Mail";
    font-family: "Syne", sans-serif;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--text-primary);
    white-space: nowrap;
}

/* SIDEBAR: sustituir logotipo original */

#root div:has(> svg[width="24"]) > svg {
    background-image: url("/jmail-icon.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
}

#root div:has(> svg[width="24"]) > svg > * {
    visibility: hidden;
}

/* Sustituir MailFlow en la cabecera lateral */
#root div:has(> svg[width="24"]) > span {
    position: relative;
    align-items: center !important;
}

#root div:has(> svg[width="24"]) > span > span {
    display: none;
}

#root div:has(> svg[width="24"]) > span::after {
    content: "juanvi.dev Mail";
    font-family: "Syne", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    white-space: nowrap;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 480px) {
    #root div:has(> svg[width="44"]) > span::after {
        font-size: 22px;
    }
}