/* =========================================================================
   Panel de administración
   Movimiento: este panel se usa cientos de veces al día. La navegación,
   las pestañas y el sidebar NO animan. Solo animan los elementos que
   aparecen de forma ocasional (modales, avisos) y la respuesta al clic.
   ========================================================================= */

:root {
    --bg:          #f4f5f7;
    --surface:     #ffffff;
    --surface-2:   #fafbfc;
    --line:        #e3e6ea;
    --line-strong: #cfd4da;

    --ink:         #171a1f;
    --ink-2:       #4d5560;
    --ink-3:       #858e9a;

    --accent:      #1f6feb;
    --accent-ink:  #ffffff;
    --accent-soft: #e8f0fe;
    --ok:          #12805c;
    --ok-soft:     #e3f5ee;
    --danger:      #c0392b;
    --danger-soft: #fdeceb;

    --r-sm: 4px;
    --r:    6px;
    --r-lg: 10px;

    --shadow-1: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-2: 0 8px 28px rgba(16, 24, 40, .12);

    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --dur-press: 140ms;
    --dur-pop:   180ms;
    --dur-modal: 220ms;

    --sidebar-w: 232px;
    --topbar-h:  52px;
}

* { box-sizing: border-box; }

body.admin {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* --- Barra superior ---------------------------------------------------- */

.topbar {
    position: sticky; top: 0; z-index: 30;
    height: var(--topbar-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px;
    background: #12161c;
    color: #e7eaee;
}
.topbar__brand {
    display: flex; align-items: center; gap: 9px;
    color: #fff; font-weight: 600; font-size: 14px;
}
.topbar__brand:hover { text-decoration: none; }
.topbar__mark {
    width: 18px; height: 18px; border-radius: 5px;
    background: linear-gradient(135deg, #4d8bf5, #1f6feb);
}
.topbar__right { display: flex; align-items: center; gap: 16px; font-size: 13px; }
.topbar__link { color: #aeb6c0; }
.topbar__link:hover { color: #fff; text-decoration: none; }
.topbar__user { color: #7f8894; }

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

.shell { display: flex; min-height: calc(100vh - var(--topbar-h)); }

.sidebar {
    width: var(--sidebar-w); flex: none;
    padding: 12px 10px 40px;
    background: var(--surface);
    border-right: 1px solid var(--line);
}
.nav__group {
    margin: 18px 10px 6px;
    font-size: 11px; font-weight: 600; letter-spacing: .04em;
    color: var(--ink-3);
}
.nav__item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px;
    border-radius: var(--r);
    color: var(--ink-2); font-size: 13.5px;
}
/* Sin transición: se navega decenas de veces al día. */
.nav__item:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav__item.is-current { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav__icon { width: 16px; text-align: center; opacity: .75; font-size: 13px; }

.main { flex: 1; min-width: 0; padding: 22px 26px 64px; }

.page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 18px;
}
.page-head__actions { display: flex; gap: 8px; }
.page-title { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }

/* --- Paneles ----------------------------------------------------------- */

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    margin-bottom: 18px;
    overflow: hidden;
}
.panel__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}
.panel__title { margin: 0; font-size: 13.5px; font-weight: 600; }
.panel__body { padding: 16px; }
.panel__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 16px;
    border-top: 1px solid var(--line); background: var(--surface-2);
}

.empty { margin: 0; padding: 32px 16px; text-align: center; color: var(--ink-3); }

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

.cards {
    display: grid; gap: 12px; margin-bottom: 22px;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.cards--wide { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin: 0; }

.card {
    display: block; padding: 15px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    color: var(--ink);
    box-shadow: var(--shadow-1);
}
.card:hover { border-color: var(--line-strong); text-decoration: none; }
.card__num   { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.card__label { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-2); }
.card__meta  { display: block; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }
.card__title { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.card__text  { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-2); }
.card--item.is-active { border-color: var(--accent); }

/* --- Tablas ------------------------------------------------------------ */

.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
    padding: 10px 16px; text-align: left;
    font-size: 11.5px; font-weight: 600; color: var(--ink-3);
    background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.table td { padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table__link { font-weight: 500; color: var(--ink); }
.table__link:hover { color: var(--accent); }
.table__link.is-child { padding-left: 18px; color: var(--ink-2); }
.table__slug { display: block; font-size: 11.5px; color: var(--ink-3); }
.table__dim { color: var(--ink-2); }
.table__check { width: 34px; }
.table__actions { width: 1%; white-space: nowrap; text-align: right; }
.table__action { font-size: 12.5px; margin-left: 12px; color: var(--ink-2); }
.table__action--danger { color: var(--danger); }

.pill {
    display: inline-block; padding: 2px 8px; border-radius: 20px;
    font-size: 11.5px; font-weight: 500;
}
.pill--ok    { background: var(--ok-soft); color: var(--ok); }
.pill--muted { background: #eef0f3; color: var(--ink-2); }

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

.field { margin-bottom: 14px; }
.field--half { max-width: 200px; }
.field__label { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.field__hint  { margin: 5px 0 0; font-size: 12px; color: var(--ink-3); }

.fields-grid { display: grid; gap: 0 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields-grid .field--full { grid-column: 1 / -1; }

.input {
    width: 100%; padding: 8px 10px;
    font: inherit; color: var(--ink);
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}
.input--title { font-size: 19px; font-weight: 600; padding: 10px 12px; }
.input--auto { width: auto; min-width: 150px; }
.input--search { max-width: 280px; }
textarea.input { resize: vertical; }

.slug-field { display: flex; align-items: center; gap: 0; }
.slug-field__base {
    padding: 8px 8px 8px 10px; font-size: 12.5px; color: var(--ink-3);
    background: var(--surface-2);
    border: 1px solid var(--line-strong); border-right: 0;
    border-radius: var(--r) 0 0 var(--r); white-space: nowrap;
}
.slug-field .input { border-radius: 0 var(--r) var(--r) 0; }

.filters {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px; flex-wrap: wrap;
}
.filters__count { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.form-foot { display: flex; justify-content: flex-end; }
.bulk { display: flex; gap: 8px; }

.checklist { max-height: 220px; overflow-y: auto; }
.checklist__item {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0; font-size: 13px; cursor: pointer;
}
.checklist__item.is-child { padding-left: 18px; }

.switch { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.switch input[type=checkbox] { position: absolute; opacity: 0; }
.switch__track {
    width: 34px; height: 20px; padding: 2px;
    background: var(--line-strong); border-radius: 20px;
    transition: background-color 150ms ease;
}
.switch__thumb {
    display: block; width: 16px; height: 16px;
    background: #fff; border-radius: 50%;
    box-shadow: var(--shadow-1);
    transition: transform 150ms var(--ease-out);
}
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track .switch__thumb { transform: translateX(14px); }
.switch__label { font-size: 13px; }

.color-field { display: flex; align-items: center; gap: 10px; }
.color-field input[type=color] {
    width: 40px; height: 32px; padding: 2px; border: 1px solid var(--line-strong);
    border-radius: var(--r); background: #fff;
}
.color-field output { font-size: 12.5px; color: var(--ink-3); }

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

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px;
    font: 500 13.5px/1 inherit;
    border: 1px solid transparent; border-radius: var(--r);
    cursor: pointer;
    transition: transform var(--dur-press) var(--ease-out),
                background-color 120ms ease,
                border-color 120ms ease;
}
.btn:hover { text-decoration: none; }
/* Feedback inmediato: el botón responde al dedo antes que el servidor. */
.btn:active { transform: scale(.97); }

.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: #1a5fcc; }
.btn--ghost {
    background: #fff; color: var(--ink-2);
    border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn--sm    { padding: 5px 10px; font-size: 12.5px; }
.btn--block { width: 100%; margin-top: 6px; }
.btn--danger { background: var(--danger); color: #fff; }

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

.notice {
    padding: 10px 14px; margin-bottom: 16px;
    border-radius: var(--r); font-size: 13.5px;
    border: 1px solid transparent;
}
.notice--ok    { background: var(--ok-soft); border-color: #bfe5d6; color: var(--ok); }
.notice--error { background: var(--danger-soft); border-color: #f4c7c3; color: var(--danger); }

/* --- Editor ------------------------------------------------------------ */

.editor__cols {
    display: grid; gap: 18px;
    grid-template-columns: minmax(0, 1fr) 296px;
    align-items: start;
}
.editor__cols--flip { grid-template-columns: minmax(0, 1fr) 320px; }
.editor__side { position: sticky; top: calc(var(--topbar-h) + 22px); }

/* Bloques */
.blocks { display: flex; flex-direction: column; gap: 10px; }
.block {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface-2);
}
.block__head {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
}
.block__name { font-size: 12.5px; font-weight: 600; }

/* Asa de arrastre. El cursor cambia para que se note que se puede mover. */
.block__grip {
    cursor: grab; color: var(--ink-3);
    font-size: 13px; line-height: 1; user-select: none;
    padding: 2px 2px 2px 0;
}
.block__grip:active { cursor: grabbing; }
.block.is-dragging { opacity: .5; }

/* Dónde va a caer: una línea, no un hueco que salta. */
.block.drop-antes   { box-shadow: 0 -3px 0 -1px var(--accent); }
.block.drop-despues { box-shadow: 0  3px 0 -1px var(--accent); }

.upload-state {
    margin: 0 0 12px; padding: 8px 12px;
    background: var(--accent-soft); color: var(--accent);
    border-radius: var(--r); font-size: 13px;
}
.upload-state--error { background: var(--danger-soft); color: var(--danger); }

.modal__head-actions { display: flex; align-items: center; gap: 8px; }
.modal__head-actions label { cursor: pointer; }

.block__tools { margin-left: auto; display: flex; gap: 4px; }
.block__tool {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--line-strong);
    border-radius: var(--r-sm); cursor: pointer;
    color: var(--ink-2); font-size: 12px;
    transition: transform var(--dur-press) var(--ease-out), background-color 120ms ease;
}
.block__tool:hover { background: var(--surface-2); color: var(--ink); }
.block__tool:active { transform: scale(.94); }
.block__tool--danger { color: var(--danger); }
.block__body { padding: 12px; background: #fff; border-radius: 0 0 var(--r) var(--r); }
.block__body .fields-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.block.is-collapsed .block__body { display: none; }

/* Medios */
.media-field__preview {
    display: flex; align-items: center; justify-content: center;
    min-height: 110px; margin-bottom: 8px;
    background: var(--surface-2);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r); overflow: hidden;
}
.media-field__preview img { max-width: 100%; max-height: 170px; display: block; }
.media-field__empty { font-size: 12.5px; color: var(--ink-3); }
.media-field__actions { display: flex; gap: 6px; }

.gallery-field__grid {
    display: grid; gap: 8px; margin-bottom: 8px;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
}
.gallery-tile {
    position: relative; aspect-ratio: 1; overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--line); border-radius: var(--r);
}
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-tile__remove {
    position: absolute; top: 3px; right: 3px;
    width: 20px; height: 20px; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .92); color: var(--danger);
    border: 1px solid var(--line-strong); border-radius: 50%;
    font-size: 10px; line-height: 1;
    transition: transform var(--dur-press) var(--ease-out);
}
.gallery-tile__remove:active { transform: scale(.9); }

.media-grid {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}
.media-grid--admin { padding: 16px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.media-tile {
    aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer;
    background: var(--surface-2);
    border: 1px solid var(--line); border-radius: var(--r);
    transition: transform var(--dur-press) var(--ease-out), border-color 120ms ease;
}
.media-tile:hover  { border-color: var(--accent); }
.media-tile:active { transform: scale(.97); }
.media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.media-item { margin: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.media-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.media-item__file {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1; background: var(--surface-2);
    font-weight: 600; color: var(--ink-3);
}
.media-item figcaption {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 7px 9px; border-top: 1px solid var(--line);
}
.media-item__name {
    font-size: 11.5px; color: var(--ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uploader__body { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.uploader__body .input { width: auto; flex: 1; min-width: 220px; }

/* Menús */
.menu-editor { display: flex; flex-direction: column; gap: 8px; }
.menu-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px; background: var(--surface-2);
    border: 1px solid var(--line); border-radius: var(--r);
}
.menu-row.is-child { margin-left: 26px; }
.menu-row .input { flex: 1; }
.linklist { display: flex; flex-wrap: wrap; gap: 6px; max-height: 300px; overflow-y: auto; }
.linklist__item {
    padding: 5px 9px; font-size: 12.5px; cursor: pointer;
    background: #fff; color: var(--ink-2);
    border: 1px solid var(--line-strong); border-radius: 20px;
    transition: transform var(--dur-press) var(--ease-out), border-color 120ms ease;
}
.linklist__item:hover  { border-color: var(--accent); color: var(--accent); }
.linklist__item:active { transform: scale(.96); }

/* Pestañas: se cambian a menudo, no animan. */
.tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tabs__tab {
    padding: 8px 14px; font-size: 13.5px; color: var(--ink-2);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs__tab:hover { color: var(--ink); text-decoration: none; }
.tabs__tab.is-current { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.pager { display: flex; gap: 4px; margin-left: auto; }
.pager__link {
    min-width: 30px; padding: 5px 8px; text-align: center;
    font-size: 12.5px; color: var(--ink-2);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
}
.pager__link:hover { background: var(--surface-2); text-decoration: none; }
.pager__link.is-current { background: var(--accent); border-color: var(--accent); color: #fff; }

.palette { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 16px; }
.palette__group { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.palette__item {
    padding: 12px 10px; font: inherit; font-size: 13px; text-align: left; cursor: pointer;
    background: var(--surface-2); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--r);
    transition: transform var(--dur-press) var(--ease-out), border-color 120ms ease;
}
.palette__item:hover  { border-color: var(--accent); background: var(--accent-soft); }
.palette__item:active { transform: scale(.97); }

/* --- Modal ------------------------------------------------------------- */
/* Ocasional: aquí sí vale animar. Entra desde scale(.97), nunca desde 0. */

.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(15, 20, 26, .5); }
.modal__panel {
    position: relative;
    width: min(860px, calc(100vw - 40px));
    max-height: calc(100vh - 80px);
    display: flex; flex-direction: column;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    transform-origin: center;
}
.modal__panel--narrow { width: min(560px, calc(100vw - 40px)); }
.modal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.modal__title { margin: 0; font-size: 15px; font-weight: 600; }
.modal__body { padding: 16px; overflow-y: auto; }

.modal:not([hidden]) .modal__backdrop { animation: fade var(--dur-modal) var(--ease-out); }
.modal:not([hidden]) .modal__panel    { animation: pop var(--dur-modal) var(--ease-out); }

@keyframes fade { from { opacity: 0; } }
@keyframes pop  { from { opacity: 0; transform: scale(.97); } }

/* --- Login ------------------------------------------------------------- */

.admin--login {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 24px;
}
.login {
    width: 100%; max-width: 356px; padding: 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
}
.login__title { margin: 0 0 4px; font-size: 19px; font-weight: 600; }
.login__sub   { margin: 0 0 20px; font-size: 13px; color: var(--ink-3); }
.login__back  { display: block; margin-top: 16px; text-align: center; font-size: 12.5px; color: var(--ink-3); }

/* --- Adaptación -------------------------------------------------------- */

@media (max-width: 1000px) {
    .editor__cols, .editor__cols--flip { grid-template-columns: minmax(0, 1fr); }
    .editor__side { position: static; }
    .fields-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
    .shell { flex-direction: column; }
    .sidebar { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); }
    .main { padding: 16px; }
    .table__slug, .table__dim { display: none; }
}

/* --- Movimiento reducido ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
    .modal:not([hidden]) .modal__panel { animation: fade 120ms ease; }
}