/* Panel de administración v2 (Mangahaus). Mismos tokens que el sitio, densidad compacta: es una herramienta de trabajo. */
.admin { background: var(--color-cream); }
.admin-shell { min-height: 100vh; }
@media (min-width: 1024px) {
  .admin-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); }
}

/* Tamaños de titular propios del panel (el sitio usa 60px, aquí estorbarían) */
.admin-main h2, .admin-main .h2 { font-size: var(--text-display-card); line-height: 1.1; }
.admin-main h3, .admin-main h4 { font-size: var(--text-body); line-height: 1.3; }
.admin-main h3 { font-family: var(--font-body); font-weight: 800; letter-spacing: 0; text-transform: none; }

/* ── Barra lateral de tinta ────────────────────────────────────────────── */
.admin-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: min(300px, 86vw);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  padding: var(--spacing-20) var(--spacing-16);
  border-right: var(--border-keyline);
  overflow-y: auto;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--motion-hover) ease, visibility var(--motion-hover);
}
.admin-nav.is-open { transform: none; visibility: visible; }
@media (min-width: 1024px) {
  .admin-nav { position: sticky; top: 0; height: 100vh; width: auto; transform: none; visibility: visible; }
  .admin-nav-close { display: none; }
}
.admin-brand { display: flex; align-items: center; justify-content: space-between; }
.admin-brand .brand-tile { box-shadow: var(--shadow-offset-sm); }
.admin-brand img { height: 32px; width: auto; }
.admin-nav .nav-toggle { background: var(--color-cream); }
.admin-nav nav ul { display: grid; gap: var(--spacing-4); list-style: none; margin: 0; padding: 0; }
.admin-nav nav a {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  min-height: var(--touch-min);
  padding: var(--spacing-8) var(--spacing-12);
  border: 3px solid transparent;
  color: var(--color-cream);
  font-weight: 600;
  text-decoration: none;
}
.admin-nav nav a .icon { width: 20px; height: 20px; stroke-width: 2; }
.admin-nav nav a:hover { border-color: var(--color-cream); }
.admin-nav nav a[aria-current="page"] { background: var(--color-yellow); border-color: var(--color-cream); color: var(--color-ink); box-shadow: var(--shadow-offset-red); }
.admin-user { margin-top: auto; padding: var(--spacing-12); display: grid; gap: var(--spacing-8); border-top: 3px solid var(--color-cream-line); }
.admin-user-name { display: flex; flex-direction: column; color: var(--color-cream); font-weight: 800; text-decoration: none; }
.admin-user-name small { color: var(--color-cream-muted); font-family: var(--font-stamp); font-size: var(--text-stamp); font-weight: 400; letter-spacing: var(--tracking-nav); text-transform: uppercase; }
.admin-user-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-4); }
.admin-user-actions .btn-ghost { padding-left: var(--spacing-8); }

.admin-topbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-8) var(--spacing-16);
  background: var(--color-cream);
  border-bottom: var(--border-keyline);
}
.admin-topbar .brand-tile img { height: 24px; width: auto; }
@media (min-width: 1024px) { .admin-topbar { display: none; } }
.admin-backdrop { position: fixed; inset: 0; z-index: 30; background: var(--color-ink); opacity: 0.8; }

.admin-main main { padding: var(--spacing-24) var(--page-gutter-mobile) var(--spacing-64); }
@media (min-width: 1024px) { .admin-main main { padding: var(--spacing-40); } }
.admin-main .flash-wrap { padding: 0 0 var(--spacing-24); max-width: none; }
.admin-main .flash-wrap.container { padding-inline: 0; }

/* ── Encabezado de página ──────────────────────────────────────────────── */
.page-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-24);
  padding-bottom: var(--spacing-16);
  border-bottom: var(--border-keyline);
}
.page-bar h1 { font-size: var(--text-metric); line-height: 1; }
.page-bar p { margin-top: var(--spacing-8); color: var(--color-ink-muted); }
.page-bar .actions { display: flex; flex-wrap: wrap; gap: var(--spacing-12); }

/* ── Paneles ───────────────────────────────────────────────────────────── */
.panel { color: var(--color-ink); background: var(--color-cream); border: var(--border-keyline); box-shadow: var(--shadow-offset); padding: var(--spacing-24); }
.panel + .panel, .panel + .grid-2, .grid-2 + .panel { margin-top: var(--spacing-24); }
.panel > h2 { margin-bottom: var(--spacing-16); padding-bottom: var(--spacing-8); border-bottom: 3px dashed var(--color-ink); }
.grid-2 { display: grid; gap: var(--spacing-24); }
.grid-2 > .panel { margin-top: 0; }
@media (min-width: 1200px) { .grid-2.wide-left { grid-template-columns: 2fr 1fr; } }
@media (min-width: 1560px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.section-gap { margin-top: var(--spacing-40); }
.section-gap-sm { margin-top: var(--spacing-12); }

/* Campos y botones del panel: sin sombra dura en cada input (la densidad manda); el foco sí la conserva */
.admin .input, .admin .select, .admin .textarea { box-shadow: none; border-width: 2px; }
.admin .input:focus, .admin .select:focus, .admin .textarea:focus { box-shadow: var(--shadow-offset-sm); }
.admin .field.has-error .input, .admin .field.has-error .select, .admin .field.has-error .textarea { box-shadow: none; border-width: 3px; }
.admin .btn { box-shadow: var(--shadow-offset-sm); }
.admin .btn-ghost { box-shadow: none; }
.admin .btn-sm { min-height: 36px; }
.admin .notice { box-shadow: none; }
.admin .notice-error { box-shadow: none; }
.admin code { padding: 0 var(--spacing-4); background: var(--color-yellow); font-size: var(--text-small); }
.admin .hint, .admin .caption { color: var(--color-ink-muted); }

/* ── Métricas ──────────────────────────────────────────────────────────── */
.metrics { display: grid; gap: var(--spacing-16); grid-template-columns: repeat(2, 1fr); margin-bottom: var(--spacing-24); }
@media (min-width: 900px) { .metrics { grid-template-columns: repeat(4, 1fr); } }
.metric { padding: var(--spacing-20); background: var(--color-cream); border: var(--border-keyline); box-shadow: var(--shadow-offset); }
.metric:nth-child(4n+2) { background: var(--color-yellow); }
.metric .value { display: block; font-family: var(--font-display); font-size: var(--text-metric); line-height: 1; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.metric .label { display: block; margin-top: var(--spacing-8); font-family: var(--font-stamp); font-size: var(--text-stamp); letter-spacing: var(--tracking-nav); text-transform: uppercase; }

/* ── Filtros y tablas ──────────────────────────────────────────────────── */
.filters { display: grid; gap: var(--spacing-12); margin-bottom: var(--spacing-24); align-items: end; }
@media (min-width: 768px) { .filters { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.filters .actions { display: flex; gap: var(--spacing-8); }

.admin .table td { border-bottom: 1px solid var(--color-ink-muted); }
.panel .table th { background: var(--color-cream); }
.table .muted { color: var(--color-ink-muted); font-size: var(--text-small); line-height: 1.4; display: block; }
.table .row-link { font-weight: 800; text-decoration: none; }
.table .row-link:hover { text-decoration: underline; text-decoration-color: var(--color-red); }
.table td.actions { white-space: nowrap; text-align: right; }
.tags { display: flex; flex-wrap: wrap; gap: var(--spacing-4); }
.empty { padding: var(--spacing-40) var(--spacing-24); text-align: center; color: var(--color-ink-muted); }
.pagination { display: flex; gap: var(--spacing-8); justify-content: flex-end; margin-top: var(--spacing-16); }

/* ── Calendario ────────────────────────────────────────────────────────── */
.cal-bar { display: flex; flex-wrap: wrap; gap: var(--spacing-8); align-items: center; margin-bottom: var(--spacing-16); }
.cal-bar .date-label { font-family: var(--font-display); font-size: var(--text-display-card); line-height: 1.1; text-transform: uppercase; margin-inline: var(--spacing-8); }
.cal-wrap { overflow-x: auto; border: var(--border-keyline); box-shadow: var(--shadow-offset); background: var(--color-cream); }
.cal { border-collapse: collapse; width: 100%; min-width: 720px; table-layout: fixed; }
.cal th, .cal td { border: 1px solid var(--color-ink-muted); padding: 0; vertical-align: top; }
.cal thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--color-ink);
  padding: var(--spacing-8) var(--spacing-12);
  color: var(--color-cream);
  font-family: var(--font-stamp);
  font-size: var(--text-stamp);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  font-weight: 400;
  text-align: left;
}
.cal thead th a { color: var(--color-cream); text-decoration: none; }
.cal th.hour-col { width: 72px; }
.cal tbody th { padding: var(--spacing-8); font-family: var(--font-stamp); font-size: var(--text-stamp); font-weight: 400; text-align: right; white-space: nowrap; }
.cal td { height: 52px; }
.cal td.closed { background-color: var(--color-cream); background-image: var(--halftone-on-cream); background-size: var(--halftone-size-lg) var(--halftone-size-lg); }
.cal td.closed span { display: block; padding: var(--spacing-8); color: var(--color-ink-muted); font-size: var(--text-small); }
.cal .free { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 52px; color: transparent; text-decoration: none; }
.cal .free .icon { color: currentColor; width: 18px; height: 18px; stroke-width: 2.5; }
.cal .free:hover, .cal .free:focus-visible { color: var(--color-ink); background: var(--color-yellow); }
.cal .rate { display: block; color: var(--color-ink-muted); font-size: var(--text-small); }
.cal .booking {
  display: flex; flex-direction: column; gap: 2px;
  height: 100%;
  padding: var(--spacing-8);
  background: var(--color-yellow);
  border-left: 6px solid var(--color-ink);
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--text-small);
  line-height: 1.3;
  overflow: hidden;
}
.cal .booking:hover { background: var(--color-cream); }
.cal .booking strong { font-weight: 800; }
.cal .booking small { font-size: var(--text-small); }
.cal .booking.is-paid { border-left-style: double; border-left-width: 10px; }
.cal .booking.is-noshow { background: var(--color-cream); border-left-color: var(--color-disabled); }
.cal .booking.is-noshow strong { text-decoration: line-through; }
.cal .blocked { display: block; height: 100%; padding: var(--spacing-8); background: var(--color-ink); color: var(--color-cream); font-size: var(--text-small); line-height: 1.3; }
.cal-legend { display: flex; flex-wrap: wrap; gap: var(--spacing-16); margin-top: var(--spacing-12); font-size: var(--text-small); }
.cal-legend span { display: inline-flex; align-items: center; gap: var(--spacing-8); }
.cal-legend i { display: inline-block; width: 16px; height: 16px; background: var(--color-yellow); border: 2px solid var(--color-ink); border-left-width: 6px; }
.cal-legend i.paid { border-left-style: double; border-left-width: 8px; }
.cal-legend i.noshow { background: var(--color-cream); border-left-color: var(--color-disabled); }
.cal-legend i.closed { background-color: var(--color-cream); background-image: var(--halftone-on-cream); background-size: var(--halftone-size-sm) var(--halftone-size-sm); border-width: 2px; }

/* ── Detalle de reserva ────────────────────────────────────────────────── */
.detail-grid { display: grid; gap: var(--spacing-24); }
@media (min-width: 1200px) { .detail-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.kv-list > div { display: flex; flex-wrap: wrap; column-gap: var(--spacing-12); row-gap: 0; padding-block: var(--spacing-8); border-bottom: 1px solid var(--color-ink-muted); }
.kv-list dt { color: var(--color-ink-muted); flex: 0 0 140px; }
.kv-list dd { font-weight: 800; flex: 1 1 14ch; min-width: 0; overflow-wrap: break-word; }
.action-forms details.accordion summary { min-height: var(--touch-min); font-size: var(--text-body); }
.action-forms .stack { padding-bottom: var(--spacing-20); }
.inline-form { display: inline; }

/* ── Grilla de horarios ────────────────────────────────────────────────── */
.grid-table select.select { min-height: 36px; min-width: 64px; padding: var(--spacing-4) var(--spacing-20) var(--spacing-4) var(--spacing-8); font-size: var(--text-small); background-size: 14px; background-position: right 4px center; }
.grid-table td, .grid-table th { padding: var(--spacing-4); }
.grid-table select[data-rate="pico"] { background-color: var(--color-yellow); }
.grid-table select[data-rate="cerrado"] { border-style: dashed; border-color: var(--color-disabled); color: var(--color-disabled); }

/* ── Precios e imágenes de espacios ────────────────────────────────────── */
.price-inputs input { max-width: 140px; }
.img-grid { display: grid; gap: var(--spacing-16); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.img-card { display: grid; gap: var(--spacing-8); }
.img-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--border-keyline); }
.narrow-form { max-width: 560px; }
.cal-bar [data-w="sm"] { max-width: 180px; }
.cal-bar [data-w="md"] { max-width: 220px; }

/* ── Login ─────────────────────────────────────────────────────────────── */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--spacing-24) var(--page-gutter-mobile); }
.login form { width: 100%; max-width: 420px; padding: var(--spacing-32); background: var(--color-cream); border: var(--border-keyline); box-shadow: var(--shadow-offset-lg); }
.login .brand-tile { margin-bottom: var(--spacing-8); }
.login .brand-tile img { height: 44px; width: auto; }
.login h1 { font-size: var(--text-metric); line-height: 1; }
.login h1 + p { margin-top: var(--spacing-12); }

/* El campo CSRF oculto no debe empujar al primer panel de un formulario */
input[type="hidden"] + .panel { margin-top: 0; }

/* Móvil: las columnas de las cuadrículas deben poder encogerse; las tablas anchas se desplazan dentro de su panel */
.admin-main, .grid-2 > *, .panel, .form-grid > *, .detail-grid > * { min-width: 0; }

/* Controles dentro de tablas: que el rol y la contraseña se lean completos */
.table select.select { min-width: 132px; }
.table input.input { min-width: 128px; }