/* ==========================================================================
   Secure Link — hoja de estilos única

   Identidad Solbyte: fondo #0F0F0F, superficie #232323, acento #8FD6FF con
   gradiente a #66D9FF y tipografía Stage Grotesk. El acento lo inyecta el
   layout desde config.php.

   El tema oscuro es el predeterminado, igual que solbyte.com. Quien tenga el
   sistema en modo claro recibe una variante adaptada de la misma paleta.
   ========================================================================== */

@font-face {
    font-family: "Stage Grotesk";
    src: url("fonts/StageGrotesk-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Stage Grotesk";
    src: url("fonts/StageGrotesk-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Stage Grotesk";
    src: url("fonts/StageGrotesk-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Acento corporativo (--brand y --brand-alt llegan desde config.php) */
    --brand-grad: linear-gradient(135deg, var(--brand), var(--brand-alt));
    --brand-ink: #0f0f0f;
    --brand-text: var(--brand);

    /* Superficies oscuras de la marca */
    --bg: #0f0f0f;
    --surface: #17181a;
    --surface-alt: #232323;
    --border: #2e2f31;
    --border-strong: #43454a;
    --text: #ffffff;
    --text-soft: #b3b5b8;
    --text-faint: #818181;

    --danger: #ff8f86;
    --danger-bg: #2a1614;
    --success: #6fd7ac;
    --success-bg: #10241d;
    --warn: #e6b45c;
    --warn-bg: #251d0e;

    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 36px -18px rgba(0, 0, 0, .7);
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --sans: "Stage Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --logo-filter: none;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f3f5f6;
        --surface: #ffffff;
        --surface-alt: #f6f8fa;
        --border: #e3e6ea;
        --border-strong: #c7ccd2;
        --text: #0f0f0f;
        --text-soft: #55595e;
        /* El #818181 corporativo solo alcanza 3.9:1 sobre blanco; sobre fondo
           oscuro sí cumple. Aquí se oscurece para llegar al mínimo AA. */
        --text-faint: #6b6f74;

        /* El celeste de marca no tiene contraste suficiente como texto sobre
           blanco, así que para texto y iconos se usa una versión más profunda. */
        --brand-text: #0b6f9e;

        --danger: #c9332b;
        --danger-bg: #fdf1f0;
        --success: #0f7355;
        --success-bg: #edfaf4;
        --warn: #8f5a04;
        --warn-bg: #fdf6e7;

        --shadow: 0 1px 2px rgba(15, 15, 15, .05), 0 10px 28px -14px rgba(15, 15, 15, .16);

        /* El logotipo corporativo es blanco: se invierte para el fondo claro. */
        --logo-filter: invert(1);
    }
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Estructura ---------- */

.shell {
    max-width: 660px;
    margin: 0 auto;
    padding: 24px 20px 48px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text);
    min-width: 0;
}

.logo-img {
    height: 22px;
    width: auto;
    filter: var(--logo-filter);
    flex-shrink: 0;
}

.logo-divider {
    width: 1px;
    height: 20px;
    background: var(--border-strong);
    flex-shrink: 0;
}

.logo-text {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    flex-shrink: 0;
}

.who {
    font-size: 13px;
    color: var(--text-soft);
}

.content { flex: 1; }

.footer {
    margin-top: 28px;
    text-align: center;
}

.footer p {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-faint);
}

/* ---------- Tarjetas ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
    margin-bottom: 20px;
}

.card:last-child { margin-bottom: 0; }
.card-narrow { max-width: 460px; margin-left: auto; margin-right: auto; }
.center-card { text-align: center; }

.card-title {
    margin: 0 0 6px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.card-title.sm { font-size: 16px; }

.card-sub {
    margin: 0 0 22px;
    color: var(--text-soft);
    font-size: 14px;
}

/* ---------- Formularios ---------- */

.field { margin-bottom: 18px; }

.field-row {
    display: flex;
    gap: 14px;
}

.field-row .field { flex: 1; min-width: 0; }

label {
    display: block;
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 500;
}

.optional {
    font-weight: 400;
    color: var(--text-faint);
    font-size: 12.5px;
}

input[type="text"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--surface-alt);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--sans);
    font-size: 14.5px;
    transition: border-color .15s, box-shadow .15s;
}

textarea {
    font-family: var(--mono);
    font-size: 13.5px;
    line-height: 1.6;
    resize: vertical;
    min-height: 120px;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent);
}

input[readonly] {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text-soft);
}

select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
                      linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
    background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

input[type="file"] {
    width: 100%;
    font-size: 13.5px;
    color: var(--text-soft);
}

input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

.file-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hint {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--text-faint);
    line-height: 1.5;
}

.hint.warn { color: var(--warn); }
.hint.center { text-align: center; }

.advanced {
    margin: 4px 0 20px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
}

.advanced summary {
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-soft);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 0;
}

.advanced summary::-webkit-details-marker { display: none; }

.advanced summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .15s;
}

.advanced[open] summary::before { transform: rotate(90deg) translateX(-1px); }
.advanced[open] summary { margin-bottom: 16px; }

/* ---------- Botones ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s, background .15s, border-color .15s, opacity .15s;
}

.btn:disabled { opacity: .55; cursor: default; }

/* El acento es claro, así que el texto va en el negro de la marca. */
.btn-primary {
    background: var(--brand-grad);
    color: var(--brand-ink);
}

.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }

.btn-ghost {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-soft);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--surface-alt);
    color: var(--text);
}

.btn-danger {
    background: transparent;
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
    color: var(--danger);
}

.btn-danger:hover:not(:disabled) { background: var(--danger-bg); }

.btn-block {
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ---------- Avisos ---------- */

.alert {
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    margin-bottom: 18px;
    border: 1px solid transparent;
}

.alert-error {
    background: var(--danger-bg);
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
    color: var(--danger);
}

.alert-success {
    background: var(--success-bg);
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
    color: var(--success);
}

.notice {
    padding: 13px 15px;
    border-radius: var(--radius-sm);
    background: var(--warn-bg);
    border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
    color: var(--warn);
    font-size: 13.5px;
    line-height: 1.55;
    margin-bottom: 20px;
}

.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .01em;
}

.badge-danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.badge-neutral {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text-soft);
}

/* ---------- Resultado de la creación ---------- */

.result {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.result-head h2 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
}

.result-head p {
    margin: 0 0 18px;
    font-size: 13.5px;
    color: var(--text-soft);
}

.copy-row {
    display: flex;
    gap: 10px;
}

.copy-row input { flex: 1; min-width: 0; }
.copy-row .btn { flex-shrink: 0; }

.result-meta {
    margin: 12px 0 0;
    font-size: 12.5px;
    color: var(--text-faint);
}

.result-actions { margin-top: 20px; }

/* ---------- Lista de enlaces activos ---------- */

.link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.link-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}

.link-info { min-width: 0; }

.link-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-label em { color: var(--text-faint); font-weight: 400; }

.link-meta {
    display: block;
    font-size: 12.5px;
    color: var(--text-faint);
    margin-top: 2px;
}

.link-actions { margin: 0; flex-shrink: 0; }

/* ---------- Página de apertura ---------- */

.lock-badge {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--brand-grad);
    color: var(--brand-ink);
}

.revealed {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.revealed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.revealed-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.secret-box {
    position: relative;
    background: var(--surface-alt);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 16px;
}

.secret-box pre {
    margin: 0;
    padding-right: 70px;
    font-family: var(--mono);
    font-size: 13.5px;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}

.copy-inline {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--surface);
}

.attachment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--surface-alt);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

.attachment-info { min-width: 0; }

.attachment-name {
    display: block;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-size {
    display: block;
    font-size: 12.5px;
    color: var(--text-faint);
}

.revealed .hint { margin-top: 16px; }

/* ---------- Estados ---------- */

.state-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--surface-alt);
    color: var(--text-faint);
}

.state-error {
    background: var(--danger-bg);
    color: var(--danger);
}

.center-card .card-sub { margin-bottom: 0; }

/* ---------- Utilidades ---------- */

.hidden { display: none !important; }

.spinner {
    width: 15px;
    height: 15px;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin .6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 1.6s; }
    * { transition: none !important; }
}

@media (max-width: 520px) {
    .shell { padding: 18px 14px 36px; }
    .card { padding: 22px 18px; }
    .field-row { flex-direction: column; gap: 0; }
    .copy-row { flex-direction: column; }
    .link-list li { flex-direction: column; align-items: flex-start; gap: 10px; }
    .attachment { flex-direction: column; align-items: stretch; }
    .attachment .btn { justify-content: center; }
    .logo-text { font-size: 14px; }
}