/* ============================================================ LEGENDARY KINGDOMS — css/main.css Menú principal · Selección de personajes · Eliminar datos base.css se carga por separado desde el del HTML ============================================================ */ /* ── Página principal ─────────────────────────────────────── */ .page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem 1rem 5rem; position: relative; } .page::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201,150,58,.12) 0%, transparent 70%); z-index: 0; } .page > * { position: relative; z-index: 1; } /* ── Logo ─────────────────────────────────────────────────── */ .logo { text-align: center; margin-bottom: 3rem; animation: lk-fade-in 600ms ease; } .logo-img { width: 400px; max-width: 100%; height: auto; display: block; margin: 0 auto .5rem; } .logo-fallback { margin-bottom: .5rem; } .logo-title { font-family: 'Crimson Text', Georgia, serif; font-size: 2.5rem; font-weight: 600; color: var(--lk-accent); letter-spacing: .04em; text-align: center; } .logo-sub { font-size: 1rem; color: var(--lk-text-muted); letter-spacing: .14em; text-transform: uppercase; margin-top: .375rem; } /* ── Menú ─────────────────────────────────────────────────── */ .menu { display: flex; flex-direction: column; gap: .375rem; width: 100%; max-width: 300px; animation: lk-fade-in 700ms ease; } .menu-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.25rem; background: var(--lk-bg-surface); border: 1px solid var(--lk-border-subtle); border-radius: var(--lk-radius-md); color: var(--lk-text-primary); font-size: .9375rem; font-family: inherit; cursor: pointer; text-align: left; transition: background var(--lk-transition-fast), border-color var(--lk-transition-fast), color var(--lk-transition-fast); } .menu-item:hover { background: var(--lk-bg-elevated); border-color: var(--lk-border-default); color: var(--lk-accent); } .menu-item:hover .mi-icon { color: var(--lk-accent); } .menu-item:active { transform: scale(.99); } .menu-item.disabled { opacity: .35; cursor: not-allowed; pointer-events: none; } .mi-icon { width: 18px; height: 18px; color: var(--lk-text-muted); flex-shrink: 0; transition: color var(--lk-transition-fast); } .menu-sep { height: 1px; background: var(--lk-border-subtle); margin: .375rem 0; } /* Variante peligro para "Eliminar datos" */ .menu-item-danger { color: var(--lk-danger-text); border-color: var(--lk-danger-dim); } .menu-item-danger .mi-icon { color: var(--lk-danger-text); } .menu-item-danger:hover { background: var(--lk-danger-dim); border-color: var(--lk-danger); color: var(--lk-danger-text); } .menu-item-danger:hover .mi-icon { color: var(--lk-danger-text); } /* ── Footer ───────────────────────────────────────────────── */ footer { position: fixed; bottom: 0; left: 0; right: 0; text-align: center; padding: .75rem 1rem; font-size: .6875rem; color: var(--lk-text-muted); border-top: 1px solid var(--lk-border-subtle); background: var(--lk-bg-base); } /* ── Modal genérico ───────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.78); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: lk-fade-in 150ms ease; } .modal-backdrop.hidden { display: none; } .modal { background: var(--lk-bg-surface); border: 1px solid var(--lk-border-default); border-radius: var(--lk-radius-xl); width: 100%; max-width: 900px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--lk-shadow-lg); } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--lk-border-subtle); flex-shrink: 0; } .modal-head h2 { font-family: 'Crimson Text', serif; font-size: 1.5rem; color: var(--lk-accent); } .modal-body { overflow-y: auto; flex: 1; padding: 1.5rem; } .modal-foot { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-top: 1px solid var(--lk-border-subtle); flex-shrink: 0; gap: .75rem; flex-wrap: wrap; } /* ── Selección de personajes ──────────────────────────────── */ .char-select-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: .75rem; } .char-counter { font-size: .875rem; color: var(--lk-text-secondary); } .char-counter span { font-weight: 500; color: var(--lk-accent); } .presets { display: flex; gap: .375rem; flex-wrap: wrap; } .char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } /* ── Tarjeta de personaje ─────────────────────────────────── */ .char-card { background: var(--lk-bg-elevated); border: 1px solid var(--lk-border-subtle); border-radius: var(--lk-radius-lg); padding: 1rem; cursor: pointer; user-select: none; position: relative; transition: border-color var(--lk-transition-fast), background var(--lk-transition-fast); } .char-card:hover { border-color: var(--lk-border-default); background: var(--lk-bg-hover); } .char-card.selected { border-color: var(--lk-accent); background: var(--lk-accent-dim); } .char-card.selected::after { content: '✓'; position: absolute; top: .75rem; right: .75rem; width: 22px; height: 22px; background: var(--lk-accent); color: var(--lk-text-inverse); border-radius: var(--lk-radius-full); display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; } .card-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; } .card-portrait { width: 56px; height: 56px; border-radius: var(--lk-radius-md); background: var(--lk-bg-active); flex-shrink: 0; border: 1px solid var(--lk-border-subtle); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; overflow: hidden; } .card-portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .card-name { font-size: .9375rem; font-weight: 500; line-height: 1.3; } .card-tags { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .3rem; } .badge { display: inline-flex; align-items: center; gap: .25rem; padding: 2px .5rem; border-radius: var(--lk-radius-full); font-size: .6875rem; font-weight: 500; } .badge-accent { background: var(--lk-accent-dim); color: var(--lk-accent); } .badge-muted { background: var(--lk-bg-active); color: var(--lk-text-secondary); } .card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .75rem; margin-bottom: .75rem; } .stat-row { display: flex; justify-content: space-between; font-size: .75rem; } .stat-lbl { color: var(--lk-text-secondary); } .stat-val { font-weight: 500; } .card-health { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--lk-text-secondary); margin-bottom: .75rem; } .health-bar { flex: 1; height: 4px; background: var(--lk-bg-active); border-radius: var(--lk-radius-full); overflow: hidden; } .health-fill { height: 100%; background: var(--lk-success); border-radius: var(--lk-radius-full); } .bg-toggle { font-size: .75rem; color: var(--lk-text-muted); cursor: pointer; display: flex; align-items: center; gap: .25rem; margin-bottom: .25rem; background: none; border: none; font-family: inherit; padding: 0; } .bg-toggle:hover { color: var(--lk-accent); } .bg-text { font-size: .75rem; color: var(--lk-text-secondary); line-height: 1.65; display: none; } .bg-text.open { display: block; } /* ── Validación ───────────────────────────────────────────── */ .validation-msg { font-size: .8125rem; padding: .5rem .75rem; border-radius: var(--lk-radius-md); display: none; margin-bottom: .75rem; } .validation-msg.error { background: var(--lk-danger-dim); color: var(--lk-danger-text); display: block; } .validation-msg.success { background: var(--lk-success-dim); color: var(--lk-success-text); display: block; } /* ── Slots de guardado ────────────────────────────────────── */ .slot-row { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; background: var(--lk-bg-elevated); border: 1px solid var(--lk-border-subtle); border-radius: var(--lk-radius-md); margin-bottom: .375rem; } .slot-num { font-size: .75rem; color: var(--lk-text-muted); font-weight: 500; width: 16px; } .slot-info { flex: 1; } .slot-name { font-size: .875rem; font-weight: 500; } .slot-meta { font-size: .75rem; color: var(--lk-text-secondary); margin-top: 1px; } .slot-empty { font-size: .8125rem; color: var(--lk-text-muted); } .slot-actions { display: flex; gap: .375rem; } /* ── Glosario ─────────────────────────────────────────────── */ .glos-entry { padding: .625rem 1rem; border-bottom: 1px solid var(--lk-border-subtle); } .glos-entry:last-child { border-bottom: none; } .glos-term { font-size: .9375rem; font-weight: 500; color: var(--lk-accent); margin-bottom: .25rem; } .glos-body { font-size: .8125rem; color: var(--lk-text-secondary); line-height: 1.65; } /* ── Input genérico ───────────────────────────────────────── */ .lk-input { width: 100%; padding: .4375rem .75rem; background: var(--lk-bg-elevated); border: 1px solid var(--lk-border-default); border-radius: var(--lk-radius-md); color: var(--lk-text-primary); font-size: .875rem; outline: none; font-family: inherit; transition: border-color var(--lk-transition-fast); } .lk-input:focus { border-color: var(--lk-accent); } /* ── Configuración ────────────────────────────────────────── */ .cfg-section { margin-bottom: 1.25rem; } .cfg-section-label { display: block; font-size: .75rem; font-weight: 500; color: var(--lk-text-secondary); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; } .cfg-row-simple { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--lk-border-subtle); font-size: .875rem; } .cfg-row-simple:last-child { border-bottom: none; } /* ── Toggle ───────────────────────────────────────────────── */ .toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--lk-bg-active); border-radius: var(--lk-radius-full); cursor: pointer; transition: background var(--lk-transition-base); } .toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform var(--lk-transition-base); } .toggle input:checked + .toggle-slider { background: var(--lk-accent); } .toggle input:checked + .toggle-slider::before { transform: translateX(18px); } /* ── Toast ────────────────────────────────────────────────── */ .toast { position: fixed; bottom: 4rem; left: 50%; transform: translateX(-50%); padding: .5rem 1.25rem; border-radius: var(--lk-radius-full); font-size: .875rem; font-weight: 500; z-index: 300; animation: lk-fade-in 200ms ease; pointer-events: none; } .toast-info { background: var(--lk-bg-active); color: var(--lk-text-primary); border: 1px solid var(--lk-border-default); } .toast-success { background: var(--lk-success-dim); color: var(--lk-success-text); border: 1px solid var(--lk-success); } .toast-error { background: var(--lk-danger-dim); color: var(--lk-danger-text); border: 1px solid var(--lk-danger); } /* ══════════════════════════════════════════════════════════ ELIMINAR DATOS ══════════════════════════════════════════════════════════ */ .page-delete { justify-content: flex-start; padding-top: 3rem; } .delete-header { display: flex; align-items: center; gap: 1rem; width: 100%; max-width: 540px; margin-bottom: 1.5rem; } .btn-back { display: flex; align-items: center; gap: .375rem; background: transparent; border: 1px solid var(--lk-border-default); border-radius: var(--lk-radius-md); color: var(--lk-text-secondary); font-size: .875rem; font-family: inherit; cursor: pointer; padding: .375rem .75rem; transition: background var(--lk-transition-fast), color var(--lk-transition-fast); } .btn-back:hover { background: var(--lk-bg-hover); color: var(--lk-text-primary); } .delete-title { font-family: 'Crimson Text', serif; font-size: 1.75rem; color: var(--lk-text-primary); } .delete-warning { display: flex; align-items: flex-start; gap: .625rem; width: 100%; max-width: 540px; background: var(--lk-danger-dim); border: 1px solid var(--lk-danger); border-radius: var(--lk-radius-md); padding: .75rem 1rem; font-size: .875rem; color: var(--lk-danger-text); margin-bottom: 1.5rem; line-height: 1.5; } .delete-sections { width: 100%; max-width: 540px; display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; } .delete-section { background: var(--lk-bg-surface); border: 1px solid var(--lk-border-subtle); border-radius: var(--lk-radius-lg); overflow: hidden; } .delete-section-hd { display: flex; align-items: center; justify-content: space-between; padding: .625rem 1rem; border-bottom: 1px solid var(--lk-border-subtle); background: var(--lk-bg-elevated); } .delete-section-title { font-size: .75rem; font-weight: 500; color: var(--lk-text-secondary); text-transform: uppercase; letter-spacing: .06em; } .delete-section-actions { display: flex; align-items: center; gap: .375rem; } .btn-text { background: none; border: none; color: var(--lk-accent); font-size: .75rem; font-family: inherit; cursor: pointer; padding: 0; transition: color var(--lk-transition-fast); } .btn-text:hover { color: var(--lk-accent-hover); } .delete-list { padding: .25rem 0; } .delete-empty { padding: .75rem 1rem; font-size: .8125rem; color: var(--lk-text-muted); } .delete-item { display: flex; align-items: flex-start; gap: .75rem; padding: .625rem 1rem; cursor: pointer; transition: background var(--lk-transition-fast); } .delete-item:hover { background: var(--lk-bg-hover); } .delete-chk { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; min-width: 16px; margin-top: 2px; border: 1px solid var(--lk-border-strong); border-radius: var(--lk-radius-sm); background: var(--lk-bg-elevated); cursor: pointer; position: relative; flex-shrink: 0; transition: background var(--lk-transition-fast), border-color var(--lk-transition-fast); } .delete-chk:checked { background: var(--lk-danger); border-color: var(--lk-danger); } .delete-chk:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg); } .delete-chk:hover { border-color: var(--lk-danger); } .delete-item-info { display: flex; flex-direction: column; gap: 2px; } .delete-item-name { font-size: .875rem; font-weight: 500; color: var(--lk-text-primary); } .delete-item-meta { font-size: .75rem; color: var(--lk-text-muted); } /* ── Confirmación inline ──────────────────────────────────── */ .delete-confirm { width: 100%; max-width: 540px; background: var(--lk-danger-dim); border: 1px solid var(--lk-danger); border-radius: var(--lk-radius-lg); padding: 1rem; margin-bottom: 1.25rem; animation: lk-fade-in 150ms ease; } .delete-confirm.hidden { display: none; } .delete-confirm-msg { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; color: var(--lk-danger-text); margin-bottom: .625rem; } .delete-confirm-list { list-style: disc; padding-left: 1.5rem; font-size: .8125rem; color: var(--lk-danger-text); margin-bottom: .875rem; line-height: 1.7; } .delete-confirm-btns { display: flex; justify-content: flex-end; gap: .5rem; } .btn-cancel-delete { background: transparent; border: 1px solid var(--lk-border-default); border-radius: var(--lk-radius-md); color: var(--lk-text-secondary); font-size: .875rem; font-family: inherit; cursor: pointer; padding: .375rem .875rem; transition: background var(--lk-transition-fast); } .btn-cancel-delete:hover { background: var(--lk-bg-hover); color: var(--lk-text-primary); } .btn-confirm-delete { background: var(--lk-danger); border: 1px solid var(--lk-danger); border-radius: var(--lk-radius-md); color: #fff; font-size: .875rem; font-weight: 500; font-family: inherit; cursor: pointer; padding: .375rem .875rem; transition: background var(--lk-transition-fast); } .btn-confirm-delete:hover { background: #a93226; border-color: #a93226; } /* ── Botón acción principal eliminar ──────────────────────── */ .delete-footer { width: 100%; max-width: 540px; } .btn-delete-action { width: 100%; padding: .75rem; background: var(--lk-danger-dim); border: 1px solid var(--lk-danger); border-radius: var(--lk-radius-md); color: var(--lk-danger-text); font-size: .9375rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: background var(--lk-transition-fast), color var(--lk-transition-fast); } .btn-delete-action:hover:not(:disabled) { background: var(--lk-danger); color: #fff; } .btn-delete-action:disabled { opacity: .35; cursor: not-allowed; }