/* Admin styles on top of the KeLoKe design system (tokens.css + ds.css). */
[hidden] { display: none !important; }
.wrap { width: min(1100px, 100% - 2 * var(--gutter)); margin-inline: auto; }
main.wrap { padding-block: var(--space-6) var(--space-9); }

.demo { background: var(--bandera); color: var(--on-bandera); text-align: center; padding: var(--space-2) var(--gutter); font: 700 .75rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }

/* header */
.bar { background: var(--surface); border-bottom: 2px solid var(--caoba); position: sticky; top: 0; z-index: 20; }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-2); }
.brand-admin { display: flex; align-items: center; gap: var(--space-4); text-decoration: none; color: var(--ink); }
.brand-admin .kk-logo { height: 56px; }
.brand-admin b { display: block; font: 900 1.7rem/1 var(--font-display); font-stretch: 68%; text-transform: uppercase; color: var(--rojo); }
.brand-admin small { display: block; font: 700 .65rem/1.4 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-muted); }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* buttons (variants of kk-btn) */
.kk-btn.small { padding: .55em 1em; font-size: .66rem; }
.kk-btn.large { width: 100%; justify-content: center; }
.kk-btn.ink { --b-bg: var(--ink); }
.kk-btn.danger { --b-bg: var(--rojo-700); }
.kk-btn.outline.ink:hover, .kk-btn.outline.danger:hover { background: var(--b-bg); color: var(--surface-raised); }
.kk-btn:disabled { opacity: .55; cursor: progress; transform: none; box-shadow: none; }

/* tabs */
.atabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.tab { padding: .6em 1.3em; border: 2px solid var(--caoba); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 700 .75rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: .2s; }
.tab:hover { background: var(--sol); }
.tab.on { background: var(--rojo); border-color: var(--rojo); color: var(--on-rojo); }

/* cards and headings */
.kk-card { margin-bottom: var(--space-5); }
.kk-card h3 { margin: 0 0 var(--space-3); font: 900 1.9rem/1 var(--font-display); font-stretch: 68%; text-transform: uppercase; color: var(--heading); }
.kk-card h3 + p { margin-top: 0; }
.stack { display: grid; gap: var(--space-4); }
.row { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: var(--space-4); }
.kk-field textarea { min-height: 5.5em; resize: vertical; }
.kk-field input[type="file"] { padding: .55em; background: var(--arena); }
.kk-field input[type="file"]::file-selector-button { margin-right: var(--space-3); padding: .5em 1em; border: 2px solid var(--caoba); border-radius: var(--radius-sm); background: var(--cal); color: var(--caoba); font: 700 .7rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.kk-field label { color: var(--ink); }
.muted { color: var(--ink-muted); }

/* lists */
.list > div { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; border-top: 2px dotted rgba(59,13,18,.3); }
.list h3 + div { border-top: 0; }
.list b { font: 900 1.2rem/1.1 var(--font-display); font-stretch: 72%; text-transform: uppercase; color: var(--bandera); }
.list small { display: block; margin-top: 2px; color: var(--ink-muted); font-size: .85rem; }
.list a { color: var(--link); overflow-wrap: anywhere; }
.empty-msg { color: var(--ink-muted); padding: var(--space-4) 0; margin: 0; }
.notice { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-5); padding: var(--space-5); background: var(--sol); color: var(--on-sol); border: 2px solid var(--caoba); border-radius: var(--radius-md); box-shadow: var(--shadow-hard-sm); }
.notice b { font: 900 1.25rem/1.1 var(--font-display); font-stretch: 72%; text-transform: uppercase; }
.notice .kk-btn { --b-bg: var(--bandera); --b-fg: var(--on-bandera); }

/* login */
.login { width: min(420px, 100% - 2 * var(--gutter)); margin: var(--space-8) auto; }
.login .kk-card { display: grid; gap: var(--space-4); padding: var(--space-6); box-shadow: 6px 6px 0 var(--caoba); }
.login h1 { margin: 0; }

/* toast */
.toast { position: fixed; bottom: var(--space-5); left: 50%; transform: translateX(-50%); background: var(--caoba); color: var(--cal); padding: .8em 1.4em; border-radius: var(--radius-sm); font: 700 .8rem var(--font-body); letter-spacing: .08em; box-shadow: var(--shadow-hard-sm); z-index: 99; border: 2px solid var(--sol); }
.toast.err { background: var(--rojo-700); border-color: var(--cal); }
@media (max-width: 640px) { .list > div { flex-direction: column; align-items: flex-start; } .brand-admin small { display: none; } }

/* plain inputs inside cards (e.g. the Instagram link box) match design-system fields */
.kk-card input:not([type="file"]):not([type="hidden"]):not([type="checkbox"]), .kk-card select, .kk-card textarea { width: 100%; padding: .8em 1em; font: inherit; color: var(--ink); background: var(--surface-raised); border: 2px solid var(--ink); border-radius: var(--radius-sm); }
.kk-card input:focus, .kk-card select:focus, .kk-card textarea:focus { outline: 3px solid var(--larimar); outline-offset: 0; }
#igf { display: flex; gap: var(--space-3); align-items: stretch; flex-wrap: wrap; } #igf input { flex: 1; min-width: 220px; width: auto; }

/* language toggle */
.login-lang { display: flex; justify-content: flex-end; margin-bottom: var(--space-3); }
.kk-lang { color: var(--ink); }
.bar .actions .kk-lang button { padding: .5em .85em; font-size: .66rem; }