/* ==========================================
   KOBOYPT | HERRAMIENTAS DIGITALES
   Estilos compartidos
========================================== */


/* ==========================================
   01. VARIABLES | MODO CLARO
========================================== */

:root,
[data-bs-theme="light"] {

    --u-bg: #f7faff;
    --u-panel: #ffffff;
    --u-border: #e1eaf5;

    --u-text: #192b48;
    --u-muted: #65758e;

    --u-primary: #2563eb;
    --u-primary-hover: #1d4ed8;

    --u-faint: #ebf3ff;
    --u-input: #ffffff;

    --u-secondary-bg: #edf2f8;
    --u-secondary-hover: #dce7f5;
    --u-secondary-text: #3b506d;

    --u-info-bg: #eaf5ff;
    --u-info-border: #bedcff;
    --u-info-text: #21588e;

    --u-shadow: 0 7px 30px rgba(20, 60, 110, .035);

}


/* ==========================================
   02. VARIABLES | MODO OSCURO
========================================== */

[data-bs-theme="dark"] {

    color-scheme: dark;

    --u-bg: #0b1423;
    --u-panel: #17263b;
    --u-border: #293b55;

    --u-text: #eef5ff;
    --u-muted: #abbad0;

    --u-primary: #60a5fa;
    --u-primary-hover: #3b82f6;

    --u-faint: #223855;
    --u-input: #101d30;

    --u-secondary-bg: #243750;
    --u-secondary-hover: #304c70;
    --u-secondary-text: #dceaff;

    --u-info-bg: #153653;
    --u-info-border: #275477;
    --u-info-text: #c5e6ff;

    --u-shadow: 0 7px 30px rgba(0, 0, 0, .12);

}


/* ==========================================
   03. ESTILOS GENERALES
========================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    background-color: var(--u-bg);
    color: var(--u-text);

    font-family: "Geist", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;

}

a {
    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

::selection {

    background-color: #cfe5ff;
    color: #192b48;

}


/* ==========================================
   04. BARRA DE NAVEGACIÓN
========================================== */

.u-navbar {

    background-color: var(--u-panel);
    border-bottom: 1px solid var(--u-border);

}

.u-brand {

    color: var(--u-text);

    font-weight: 800;
    font-size: 1.28rem;

}

.u-brand:hover {
    color: var(--u-text);
}

.u-brand img {

    width: 36px;
    height: 36px;

    object-fit: contain;

}


/* ==========================================
   05. LOGOTIPO KOBOYPT
========================================== */

.u-brand-name {

    display: inline-flex;
    align-items: baseline;

    gap: 0;

    white-space: nowrap;
    letter-spacing: -.5px;

}

.u-brand-name span {
    color: #3b82f6;
}


/* ==========================================
   06. ENLACES DE NAVEGACIÓN
========================================== */

.u-links {

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

}

.u-links a {

    padding: 8px 12px;

    border-radius: 10px;

    color: var(--u-muted);

    font-size: .9rem;
    font-weight: 500;

    transition:
        background-color .2s ease,
        color .2s ease;

}

.u-links a:hover,
.u-links a[aria-current="page"] {

    background-color: var(--u-faint);
    color: var(--u-primary);

}


/* ==========================================
   07. BOTÓN MODO OSCURO
========================================== */

.u-theme {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    padding: 0;

    border: 1px solid var(--u-border);
    border-radius: 50%;

    background-color: var(--u-faint);
    color: var(--u-text);

    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease;

}

.u-theme:hover {

    background-color: var(--u-secondary-hover);
    color: var(--u-primary);
    border-color: var(--u-primary);

}

.u-theme i {

    font-size: 1.2rem;
    line-height: 1;

}


/* ==========================================
   08. ENCABEZADOS
========================================== */

.u-hero {
    padding: 56px 0 30px;
}

.u-eyebrow {

    color: var(--u-primary);

    font-size: .76rem;
    font-weight: 800;

    letter-spacing: .12em;
    text-transform: uppercase;

}

.u-hero h1 {

    margin: 10px 0 14px;

    color: var(--u-text);

    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 800;

    letter-spacing: -.045em;

}

.u-hero p {

    max-width: 740px;

    color: var(--u-muted);
    line-height: 1.7;

}


/* ==========================================
   09. PANELES
========================================== */

.u-panel {

    height: 100%;

    padding: 25px;

    border: 1px solid var(--u-border);
    border-radius: 20px;

    background-color: var(--u-panel);

    box-shadow: var(--u-shadow);

}

.u-panel h2 {

    margin-bottom: 20px;

    color: var(--u-text);

    font-size: 1.18rem;
    font-weight: 750;

}


/* ==========================================
   10. ETIQUETAS
========================================== */

.u-label {

    display: block;

    margin-bottom: 8px;

    color: var(--u-text);

    font-size: .87rem;
    font-weight: 650;

}


/* ==========================================
   11. CAMPOS DE FORMULARIO
========================================== */

.form-control,
.form-select {

    padding: 11px;

    border: 1px solid var(--u-border);
    border-radius: 11px;

    background-color: var(--u-input);
    color: var(--u-text);

}

.form-control:focus,
.form-select:focus {

    background-color: var(--u-input);
    color: var(--u-text);

    border-color: var(--u-primary);

    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .14);

}

.form-control::placeholder {

    color: var(--u-muted);
    opacity: .85;

}

.form-control:disabled,
.form-control[readonly] {

    background-color: var(--u-input);
    color: var(--u-text);

    opacity: 1;

}

.form-text,
.u-muted {
    color: var(--u-muted) !important;
}


/* ==========================================
   12. CONTRASEÑA GENERADA
========================================== */

#password {

    min-height: 52px;
    width: 100%;

    padding: 13px 16px;

    font-family: "Geist", monospace;
    font-size: 1rem;
    font-weight: 600;

    letter-spacing: .025em;

    overflow-x: auto;

}

#password:focus {
    border-color: var(--u-primary);
}


/* ==========================================
   13. SELECTOR DE LONGITUD
========================================== */

#length {

    cursor: pointer;
    accent-color: #2563eb;

}

.form-range::-webkit-slider-thumb {
    background-color: #2563eb;
}

.form-range::-moz-range-thumb {
    background-color: #2563eb;
}

.form-range:focus::-webkit-slider-thumb {

    box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .18);

}

#length-output {

    color: var(--u-primary);
    font-weight: 800;

}


/* ==========================================
   14. CHECKBOXES
========================================== */

.u-check {

    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--u-text);

    font-size: .91rem;
    cursor: pointer;

}

.u-check input {

    width: 17px;
    height: 17px;

    flex-shrink: 0;

    accent-color: #2563eb;

    cursor: pointer;

}


/* ==========================================
   15. BOTÓN PRINCIPAL
========================================== */

.u-action {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    min-height: 44px;

    padding: 10px 16px;

    border: 1px solid #2563eb;
    border-radius: 11px;

    background-color: #2563eb;
    color: #ffffff;

    font-weight: 650;
    cursor: pointer;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;

}

.u-action:hover {

    background-color: #1d4ed8;
    border-color: #1d4ed8;

    color: #ffffff;

}

.u-action:active {
    transform: translateY(1px);
}

.u-action:disabled {

    opacity: .65;
    cursor: not-allowed;

}


/* ==========================================
   16. BOTÓN SECUNDARIO
========================================== */

.u-secondary {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 10px 16px;

    border: 1px solid var(--u-border);
    border-radius: 11px;

    background-color: var(--u-secondary-bg);
    color: var(--u-secondary-text);

    font-weight: 650;
    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease;

}

.u-secondary:hover {

    background-color: var(--u-secondary-hover);
    color: var(--u-primary);

}

.u-secondary:disabled {

    opacity: .6;
    cursor: not-allowed;

}


/* ==========================================
   17. FILA DE INDICADORES
========================================== */

.u-security-row {

    display: flex;
    align-items: center;
    justify-content: flex-start;

    flex-wrap: wrap;

    column-gap: 28px;
    row-gap: 12px;

    width: 100%;

}

.u-security-item {

    display: inline-flex;
    align-items: center;

    flex-wrap: nowrap;

    gap: 9px;

    width: auto;
    min-width: 0;

    white-space: nowrap;

}

.u-security-item .u-label {

    display: inline;

    margin: 0;
    line-height: 1.4;

}

.u-security-item .badge {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    vertical-align: middle;

}


/* ==========================================
   18. BADGE DE NIVEL DE SEGURIDAD
========================================== */

#strength {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding: 7px 14px !important;

    border-radius: 50px;

    font-size: .76rem;
    font-weight: 800;

    letter-spacing: .035em;
    text-align: center;

    background-color: #e5e7eb;
    color: #4b5563;

    white-space: nowrap;

}

/* PENDIENTE */

#strength[data-level="pending"] {

    background-color: #e5e7eb !important;
    color: #4b5563 !important;

}

/* MUY BAJA Y BAJA */

#strength[data-level="very-weak"],
#strength[data-level="weak"] {

    background-color: #fee2e2 !important;
    color: #991b1b !important;

}

/* MEDIA */

#strength[data-level="medium"] {

    background-color: #ffedd5 !important;
    color: #9a3412 !important;

}

/* ALTA Y MUY ALTA */

#strength[data-level="strong"],
#strength[data-level="very-strong"] {

    background-color: #dcfce7 !important;
    color: #166534 !important;

}


/* ==========================================
   19. BADGE DE ENTROPÍA
========================================== */

#entropy {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding: 7px 14px !important;

    border-radius: 50px;

    background-color: var(--u-faint) !important;
    color: var(--u-primary) !important;

    font-size: .76rem;
    font-weight: 750;

    white-space: nowrap;

}


/* ==========================================
   20. TARJETA DE ENTROPÍA
========================================== */

.u-information-panel {
    height: 100%;
}

.u-information-panel h2 {
    line-height: 1.4;
}

.u-information-panel p {
    line-height: 1.8;
}

.u-information-panel strong {
    color: var(--u-text);
}

.u-entropy-example {

    padding: 16px;

    border: 1px solid var(--u-border);
    border-radius: 13px;

    background-color: var(--u-faint);

    color: var(--u-text);
    font-size: .84rem;

}

.u-entropy-example .badge {

    flex-shrink: 0;

    padding: 7px 11px;
    font-weight: 700;

}


/* ==========================================
   21. ALERTA INFORMATIVA
========================================== */

.alert.alert-info.u-entropy-tip {

    padding: 16px;

    border: 1px solid var(--u-info-border);
    border-radius: 13px;

    background-color: var(--u-info-bg);
    color: var(--u-info-text);

    font-size: .9rem;
    line-height: 1.7;

}

.u-entropy-tip .bi {

    font-size: 1.15rem;
    line-height: 1.45;

}

.u-entropy-tip strong {
    color: inherit;
}


/* ==========================================
   22. PRIVACIDAD
========================================== */

.u-license {

    color: var(--u-muted);

    font-size: .8rem;
    line-height: 1.65;

}

.u-license code {

    padding: 2px 5px;

    border-radius: 5px;

    background-color: var(--u-faint);
    color: var(--u-primary);

    font-size: .95em;

}

.u-password-privacy .bi-shield-lock {
    color: var(--u-primary);
}


/* ==========================================
   23. MENSAJES DE RESULTADO
========================================== */

.u-result {

    min-height: 25px;

    color: var(--u-muted);

    font-size: .89rem;
    line-height: 1.6;

    white-space: pre-wrap;

}

.u-result:empty {
    display: none;
}

.u-result[data-state="error"] {
    color: #e35a65;
}

.u-result[data-state="ok"] {
    color: #16a085;
}


/* ==========================================
   24. VISTA PREVIA
========================================== */

.u-preview {

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 300px;

    padding: 20px;

    border: 1px dashed var(--u-border);
    border-radius: 16px;

    background-color: var(--u-faint);

    overflow: hidden;

}

.u-preview canvas,
.u-preview img,
.u-preview svg {

    max-width: 100%;
    max-height: 400px;

    object-fit: contain;

}

.u-preview canvas {
    height: auto;
}


/* ==========================================
   25. CATÁLOGO DE HERRAMIENTAS
========================================== */

.u-tools {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

}

.u-tool {

    padding: 14px;

    border: 1px solid var(--u-border);
    border-radius: 13px;

    background-color: var(--u-faint);
    color: var(--u-text);

    text-align: left;
    font-weight: 650;

    cursor: pointer;

    transition:
        border-color .2s ease,
        color .2s ease,
        background-color .2s ease;

}

.u-tool:hover,
.u-tool.active {

    border-color: #3b82f6;
    color: var(--u-primary);

}

.u-tool small {

    display: block;

    margin-top: 4px;

    color: var(--u-muted);
    font-weight: 400;

}

.u-tool:disabled {

    opacity: .6;
    cursor: not-allowed;

}


/* ==========================================
   26. CARGA DE ARCHIVOS
========================================== */

.u-file {

    padding: 26px;

    border: 2px dashed var(--u-border);
    border-radius: 15px;

    background-color: var(--u-faint);

    text-align: center;

}


/* ==========================================
   27. BADGES GENERALES
========================================== */

.u-pill {

    display: inline-block;

    padding: 5px 10px;

    border-radius: 99px;

    background-color: var(--u-faint);
    color: var(--u-primary);

    font-size: .75rem;
    font-weight: 650;

}


/* ==========================================
   28. CONTADORES
========================================== */

.u-count {

    color: var(--u-muted);
    font-size: .85rem;

}

.u-canvas-wrap {
    overflow: auto;
}

.u-hidden {
    display: none !important;
}


/* ==========================================
   29. PIE DE PÁGINA
========================================== */

.u-footer {

    margin-top: 70px;
    padding: 24px 0;

    border-top: 1px solid var(--u-border);

    color: var(--u-muted);

}

.u-footer a {

    color: var(--u-primary);

    font-size: .9rem;
    font-weight: 600;

}

.u-footer a:hover {
    text-decoration: underline;
}


/* ==========================================
   30. MODO OSCURO
========================================== */

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {

    background-color: var(--u-input);
    border-color: var(--u-border);

    color: var(--u-text);

}

[data-bs-theme="dark"] .u-theme:hover {
    background-color: var(--u-secondary-hover);
}

[data-bs-theme="dark"] .u-result[data-state="ok"] {
    color: #4adea8;
}

[data-bs-theme="dark"] .u-result[data-state="error"] {
    color: #fb7185;
}

[data-bs-theme="dark"] #strength[data-level="pending"] {

    background-color: #374151 !important;
    color: #e5e7eb !important;

}

[data-bs-theme="dark"] #strength[data-level="very-weak"],
[data-bs-theme="dark"] #strength[data-level="weak"] {

    background-color: #55232c !important;
    color: #fecaca !important;

}

[data-bs-theme="dark"] #strength[data-level="medium"] {

    background-color: #573a25 !important;
    color: #fed7aa !important;

}

[data-bs-theme="dark"] #strength[data-level="strong"],
[data-bs-theme="dark"] #strength[data-level="very-strong"] {

    background-color: #173f32 !important;
    color: #bbf7d0 !important;

}


/* ==========================================
   31. ACCESIBILIDAD
========================================== */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {

    outline: 2px solid var(--u-primary);
    outline-offset: 3px;

}

.u-check:focus-within {
    color: var(--u-primary);
}


/* ==========================================
   32. RESPONSIVE | TABLET
========================================== */

@media (max-width: 991.98px) {

    .u-hero {
        padding-top: 42px;
    }

    .u-links {
        justify-content: center;
    }

}


/* ==========================================
   33. RESPONSIVE | MÓVIL
========================================== */

@media (max-width: 576px) {

    .u-panel {
        padding: 19px;
    }

    .u-hero {
        padding-top: 35px;
    }

    .u-hero h1 {
        font-size: 2.1rem;
    }

    .u-tools {
        grid-template-columns: 1fr;
    }

    .u-links {
        gap: 0;
    }

    .u-links a {

        padding: 7px;
        font-size: .83rem;

    }

    #password {
        font-size: .9rem;
    }

    #strength,
    #entropy {
        font-size: .7rem;
    }

    .u-security-row {

        column-gap: 18px;
        row-gap: 10px;

    }

    .u-security-item {

        gap: 7px;
        white-space: nowrap;

    }

    .u-security-item .u-label {
        font-size: .8rem;
    }

    .u-information-panel {
        height: auto;
    }

    .u-entropy-example {
        padding: 13px;
    }

}


/* ==========================================
   34. MOVIMIENTO REDUCIDO
========================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;
        transition-duration: .01ms !important;

    }

}


/* ==========================================
   35. SELECTORES | FLECHA DESPLEGABLE
========================================== */

select.form-select {

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    padding-right: 2.5rem;

    background-color: var(--u-input);

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2365758e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat;
    background-position: right .85rem center;
    background-size: 16px 12px;

    cursor: pointer;

}


/* ==========================================
   36. SELECTORES | MODO OSCURO
========================================== */

[data-bs-theme="dark"] select.form-select {

    background-color: var(--u-input);

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23abbad0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;

}