/*
  deLiébana — Admin UI
  /admin/assets/style.css
  Tema claro con paleta tierra/crema (tokens.css)
  Incluye fallbacks por si tokens.css no está cargado.
*/

/* =======================
   RESET / BASE
======================= */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
:root { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Fallbacks si no están los tokens globales */
:root{
  --color-brown:       var(--dl-brown, #8B4E34);
  --color-brown-700:   var(--dl-brown-700, #6B3924);
  --color-terracotta:  var(--dl-terracotta, #A47864);
  --color-cta:         var(--dl-cta, #C75B35);
  --color-mustard:     var(--dl-mustard, #DFAE5A);
  --color-orange:      var(--dl-orange, #EB6A45);
  --color-purple:      var(--dl-purple, #934A7A);
  --color-cream:       var(--dl-cream, #F6EFE8);
  --color-cream-soft:  var(--dl-cream-soft, #FCF7F0);
  --color-surface:     var(--dl-surface, #FFFDF9);
  --color-ink:         var(--dl-ink, #2A1D16);
  --color-ink-2:       var(--dl-ink-2, #5B4B40);

  --border-soft:       #e8e1d8;

  --radius:            14px;
  --radius-sm:         10px;
  --shadow-sm:         0 2px 8px rgba(0,0,0,.06);
  --shadow-md:         0 6px 18px rgba(0,0,0,.08);
  --shadow-lg:         0 12px 30px rgba(0,0,0,.12);

  --font-sans:         Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-serif:        'Lora', 'Cormorant Garamond', Georgia, serif;

  --space-2:           0.5rem;
  --space-3:           0.75rem;
  --space-4:           1rem;
  --space-6:           1.5rem;

  --focus-ring:        0 0 0 3px rgba(199,91,53,.2), 0 0 0 1px var(--color-cta);
}

html, body { height: 100%; }
body{
  margin:0;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
}

/* En páginas admin, si por error aparece el header público, ocultarlo */
.site-header{ display:none !important; }

/* Links */
a{ color: var(--color-brown-700); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Helpers */
.wrap, .container{ max-width:1100px; margin:0 auto; padding:0 var(--space-4); }
.visually-hidden{ position:absolute!important; clip:rect(1px,1px,1px,1px); padding:0; border:0; height:1px; width:1px; overflow:hidden; }

/* Focus */
:where(button, a, input, select, textarea):focus{
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 10px;
}

/* =======================
   TOPBAR / HEADER
======================= */
.topbar{
  position: sticky; top:0; z-index:1000;
  background: var(--color-brown);
  color: var(--color-cream);
  border-bottom: 4px solid var(--color-terracotta);
  box-shadow: var(--shadow-md);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 1rem;
}
.brand{
  display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.2px;
}
.brand img{ height:28px; width:auto; display:block; }
.topbar__links a{
  color:#fff; font-weight:700; padding:.45rem .7rem; border-radius:.6rem;
}
.topbar__links a:hover{ background:rgba(255,255,255,.18); text-decoration:none; }

/* =======================
   LAYOUT
======================= */
.main{ padding: clamp(1rem, 2.5vw, 1.5rem) 0; }
.grid{
  display:grid; grid-template-columns: minmax(220px, 280px) 1fr; gap:1rem;
}
@media (max-width: 960px){
  .grid{ grid-template-columns: 1fr; }
}

/* Sidebar */
.sidebar{
  background: var(--color-surface);
  border:1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: .8rem;
  position: sticky; top: 76px; /* bajo topbar */
  align-self: start;
}

/* Unificar menú: ocultar sidebar global y usar topbar/drawer */
.ad-no-sidebar .grid{ grid-template-columns: 1fr; }
.ad-no-sidebar .sidebar{ display:none; }
.sidebar h3{ margin:.25rem .5rem .5rem; font-family: var(--font-serif); }
.nav{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.25rem;
}
.nav a{
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .7rem;
  border-radius:10px;
  text-decoration:none;
  color: var(--color-ink);
}
.nav a:hover{ background: var(--color-cream-soft); }
.nav a.is-active{
  background:#fff; border:1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  font-weight:800;
}

/* Content cards */
.card{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
}
.card + .card{ margin-top:1rem; }
.card__title{ margin:0 0 .5rem; font-size:1.2rem; font-family: var(--font-serif); }
.card__meta{ color: var(--color-ink-2); font-size:.95rem; margin: .25rem 0 .75rem; }

/* =======================
   BUTTONS
======================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.65rem 1rem;
  border-radius: 10px;
  background: var(--color-brown-700);
  color:#fff; border:1px solid transparent;
  box-shadow: var(--shadow-sm);
  font-weight:800;
}
.btn:hover{ filter: brightness(1.06); text-decoration:none; }
.btn--ghost{
  background: var(--color-cream-soft);
  color: var(--color-ink);
  border:1px solid var(--border-soft);
}
.btn--accent{ background: var(--color-cta); }
.btn--muted{ background:#fff; color: var(--color-ink); border:1px solid var(--border-soft); }
.btn--sm{ padding:.45rem .7rem; font-size:.95rem; border-radius: 8px; }

/* Badges / Chips */
.badge{
  display:inline-block; padding:.25rem .55rem; border-radius:999px;
  font-size:.8rem; font-weight:700;
  background: var(--color-cream-soft);
  border:1px solid var(--border-soft);
  color: var(--color-brown-700);
}

/* =======================
   FORMS
======================= */
.form{
  display:grid; gap:.9rem;
}
label{ font-weight:700; display:block; margin-bottom:.25rem; }
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], input[type="number"],
select, textarea{
  width:100%;
  padding:.65rem .8rem;
  border:1px solid var(--border-soft);
  border-radius: 10px;
  background:#fff;
  font: inherit;
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0);
  transition: box-shadow .15s ease;
}
textarea{ min-height: 120px; resize: vertical; }
input::placeholder, textarea::placeholder{ color: #978b80; }
input:focus, select:focus, textarea:focus{
  box-shadow: var(--focus-ring);
}
.form-row{
  display:grid; grid-template-columns: 1fr 1fr; gap:.8rem;
}
@media (max-width: 720px){ .form-row{ grid-template-columns: 1fr; } }

/* Input groups */
.input-group{ display:flex; gap:.5rem; align-items:center; }
.input-group > *{ flex:0 0 auto; }
.input-group .grow{ flex:1 1 auto; }

/* =======================
   TABLES / LISTS
======================= */
.table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:#fff; border:1px solid var(--border-soft); border-radius:12px;
  overflow:visible; box-shadow: var(--shadow-sm);
}
.table-wrap{ overflow:auto; }
.table-wrap{ -webkit-overflow-scrolling: touch; }
.table th, .table td{ padding:.65rem .8rem; text-align:left; }
.table thead th{
  background: var(--color-cream-soft);
  border-bottom:1px solid var(--border-soft);
  font-weight:800; font-size:.92rem;
}
.table tbody tr + tr td{ border-top:1px solid var(--border-soft); }
.table tbody tr:hover{ background: #fff9f2; }

/* Celdas compactas y control de desbordes */
.cell-email, .cell-slug{ max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-ip{ max-width: 150px; white-space: nowrap; }
.cell-actions{ white-space: nowrap; }
.cell-main{ font-weight:600; }
.cell-sub{ display:none; color: var(--color-ink-2); font-size:.9rem; }

/* Acciones responsivas en celdas */
.cell-actions{ text-align:right; }
.cell-actions form{ display:inline-flex; gap:.4rem; align-items:center; margin:.15rem 0; }
.cell-actions select{ max-width: 160px; }
.cell-actions .btn{ padding:.45rem .7rem; }
.btn.sm{ padding:.35rem .55rem; font-size:.9rem; border-radius:8px; }

/* Menú de acciones compacto (sin selects) */
.actions-menu details{ display:inline-block; position:relative; }
.actions-menu summary{ list-style:none; cursor:pointer; display:inline-block; }
.actions-menu summary::-webkit-details-marker{ display:none; }
.actions-menu__toggle{ padding:0; width:36px; height:32px; border:1px solid var(--border-soft); background:#fff; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:0; }
/* Icono engranaje visible */
.actions-menu__toggle::after{ content:'\2699'; /* ⚙ */ font-size:18px; line-height:1; color: var(--color-ink, #2a1d16); }
.actions-menu__toggle:hover{ background:#f6efe8; border-color:#e0d6ca; }
.actions-menu details{ position:relative; }
.actions-menu__panel{ position:absolute; right:0; top:calc(100% + 6px); min-width:200px; background:#fff; border:1px solid var(--border-soft); border-radius:12px; box-shadow:var(--shadow-lg); padding:.45rem .6rem; z-index:10000; display:grid; gap:.25rem; }
.actions-menu__panel.floating{ right:auto; top:auto; }
.actions-menu__panel .inline-form input[type="text"],
.actions-menu__panel .inline-form input[type="email"]{
  width:100%; padding:.45rem .55rem; border:1px solid #d8cfc7; border-radius:8px;
}
.actions-menu__panel .inline-form label{font-size:.9rem; color:#666}
.actions-menu__panel .inline-form button{ justify-self:start }
/* Oculta títulos dentro del menú para ahorrar espacio */
.actions-menu__group{ display:none; }
/* Enlaces tipo texto dentro del menú */
.actions-menu .pill-btn{ display:inline; padding:0; border:0; border-radius:0; background:none; cursor:pointer; font-size:.95rem; color: var(--color-ink, #2a1d16); text-decoration: underline; }
.actions-menu .pill-btn[disabled]{ color: #a8a39c; text-decoration: none; cursor: default; }
.actions-menu .pill-btn.danger{ color:#8a2e2e; }
.actions-menu form{ display:inline; }

@media (max-width: 900px){
  .actions-menu__panel{ right:auto; left:0; min-width:200px; }
}

@media (max-width: 900px){
  .cell-actions{ display:grid; grid-template-columns: 1fr; justify-items:flex-start; text-align:left; }
  .cell-actions form{ display:flex; gap:.4rem; width:100%; flex-wrap:wrap; }
  .cell-actions select{ flex:1 1 160px; min-width: 140px; }
  .cell-actions .btn{ flex:0 0 auto; }

  /* Tabla de usuarios: mostrar sublínea (último acceso · IP) */
  .table--users .cell-sub{ display:block; margin-top:2px; }
}

@media (max-width: 600px){
  .cell-actions .btn{ width:100%; }
  .cell-actions select{ min-width: 0; width:100%; }
}

/* Pagination */
.pager{ display:flex; gap:.4rem; align-items:center; justify-content:flex-end; margin-top:.75rem; }
.pager .btn{ padding:.45rem .7rem; }

/* =======================
   ALERTS / MESSAGES
======================= */
.alert{
  padding:.7rem .9rem; border-radius:10px; border:1px solid var(--border-soft);
  background:#fff; box-shadow: var(--shadow-sm);
}
.alert--ok{ background:#f3fbf5; border-color:#d5f0dc; color:#1b6b2d; }

/* =======================
   DASHBOARD EXTRAS
======================= */
.grid{ display:grid; gap:.9rem; }
.cards{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.actions{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.8rem; }

/* =======================
   TWO-COL LIST + FILTERS
======================= */
.two-col{ display:grid; grid-template-columns:minmax(240px,320px) 1fr; gap:1rem; align-items:start; }
@media(max-width: 900px){ .two-col{ grid-template-columns:1fr; } }
.panel-filters{ position:sticky; top:76px; align-self:start; }
.panel-list .table-wrap{ overflow:auto; }

/* KPI cards */
.kpi{ display:flex; align-items:flex-start; gap:.9rem; }
.kpi__value, .kpi .n{ font-size:2rem; font-weight:800; }
.kpi .t{ color:#6b7280; font-size:.9rem; }
.pill{ display:inline-block; padding:.18rem .55rem; border-radius:999px; font-size:.75rem; border:1px solid var(--border-soft); background:#fff; color:#6b7280; }
.tag{ font-size:.75rem; background:#fff; border:1px solid var(--border-soft); border-radius:999px; padding:.18rem .5rem; color:#6b7280; }

/* Recent and system blocks */
.recent table{ width:100%; border-collapse:collapse; }
.recent th, .recent td{ padding:.55rem .6rem; border-bottom:1px solid var(--border-soft); font-size:.95rem; }
.recent th{ text-align:left; color:#6b7280; font-weight:600; }
.recent a{ color: var(--color-ink-2); text-decoration:none; }
.recent a:hover{ text-decoration:underline; }
.sys-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
@media(max-width:800px){ .sys-grid{ grid-template-columns:1fr; } }

/* Tasks (filter + pager) */
.filter-bar{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.4rem 0 .8rem; }
.filter-bar button{ border:1px solid var(--border-soft); background:#fff; border-radius:10px; padding:.4rem .8rem; cursor:pointer; color: var(--color-ink); }
.filter-bar button.active{ background: var(--color-mustard); color:#fff; border-color: var(--color-mustard); }
ul.tasks{ list-style:none; margin:0; padding:0; }
li.task{ padding:.4rem 0; border-bottom:1px solid var(--border-soft); }
li.task.hidden{ display:none; }
.page-size{ margin-right:auto; color:#6b7280; font-size:.9rem; }
.page-size select{ border:1px solid var(--border-soft); border-radius:8px; padding:.25rem .5rem; background:#fff; color: var(--color-ink); }
.alert--warn{ background:#fffaf3; border-color:#f1e3c9; color:#6a4b1a; }
.alert--error{ background:#fff4f4; border-color:#f1cccc; color:#8a1f1f; }

/* =======================
   LOGIN PAGE
======================= */
.page-login{
  min-height: calc(100vh - 72px);
  display:grid; place-items:center;
  padding: 2rem 1rem;
}
.login-box{
  width:min(460px, 100%);
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 1.1rem;
}
.login-box__inner{
  background: var(--color-cream-soft);
  border:1px solid var(--border-soft);
  border-radius: 12px;
  padding: clamp(1rem, 3vw, 1.25rem);
}
.login-box h1{ font-size:1.6rem; margin:.25rem 0 .35rem; font-family: var(--font-serif); }
.login-box p.muted{ margin:.1rem 0 .9rem; color: var(--color-ink-2); }
.login-box .btn{ width:100%; margin-top:.5rem; }
.login-actions{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.6rem;
}
.login-actions a{ font-weight:700; }

/* =======================
   FOOTER (admin)
======================= */
.admin-footer{
  margin-top:2rem; padding:1rem; text-align:center;
  color: var(--color-ink-2);
}

/* =======================
   UTILITIES
======================= */
.m-0{ margin:0!important; }
.mt-1{ margin-top:.25rem!important; }
.mt-2{ margin-top:.5rem!important; }
.mt-3{ margin-top:.75rem!important; }
.mt-4{ margin-top:1rem!important; }
.mb-0{ margin-bottom:0!important; }
.mb-2{ margin-bottom:.5rem!important; }
.mb-4{ margin-bottom:1rem!important; }
.text-right{ text-align:right!important; }
.text-center{ text-align:center!important; }
.flex{ display:flex!important; }
.items-center{ align-items:center!important; }
.gap-2{ gap:.5rem!important; }

/* =======================
   DARK (opcional, marrón)
   Actívalo añadiendo class="theme-dark" al <body>
======================= */
.theme-dark{
  --surface-0: #231813;
  --surface-1: #2d1e18;
  --text-0:    #F6EFE8;
  --text-1:    #e5d8cf;
}
.theme-dark{
  background: var(--surface-0);
  color: var(--text-0);
}
.theme-dark .topbar{ background: var(--color-brown-700); border-bottom-color: var(--color-terracotta); }
.theme-dark .sidebar,
.theme-dark .card,
.theme-dark .table,
.theme-dark .login-box,
.theme-dark .login-box__inner{
  background: var(--surface-1);
  color: var(--text-0);
  border-color: rgba(255,255,255,.12);
}
.theme-dark .nav a{ color: var(--text-0); }
.theme-dark .nav a:hover{ background: rgba(255,255,255,.07); }
.theme-dark .btn--ghost{ background: rgba(255,255,255,.06); color: var(--text-0); border-color: rgba(255,255,255,.16); }
.theme-dark .table thead th{ background: rgba(255,255,255,.06); color: var(--text-0); border-color: rgba(255,255,255,.12); }
.theme-dark a{ color: #FFD9B5; }