/* admin.css — Estilos del panel de administración PlanesTurísticos
   Usa la paleta y fuente del sistema de diseño (instrucciones-diseno-pt.md)
   pero NO comparte clases con pt.css (dominio público). */

:root {
  /* Marca boni (2026-10-09): el admin usa SOLO los tokens de color y
     tipografía de la marca (no los componentes de marketing). */
  --pt-blue: #025EB4; --pt-blue-dark: #0D3470; --pt-blue-pale: #F5F6F8;
  --ink: #0B1B3A; --ink-soft: #0B1B3A; --slate: #5A6877; --slate-soft: #5A6877;
  --line: #E3E7EE; --line-soft: #E3E7EE;
  --success: #1E7F4F; --success-pale: #F5F6F8;
  --warning: #0D3470; --warning-pale: #F5F6F8;
  --danger: #C62828;  --danger-pale: #F5F6F8;
  --sans: 'Switzer', system-ui, -apple-system, sans-serif;
  --head: 'Metropolis', 'Switzer', system-ui, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
  --radius: 14px; --shadow: 0 1px 3px rgba(11,27,58,.06);
}
@font-face { font-family: 'Switzer'; font-weight: 400; font-display: swap; src: url('/assets/fonts/switzer-400.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-weight: 500; font-display: swap; src: url('/assets/fonts/switzer-500.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-weight: 600 900; font-display: swap; src: url('/assets/fonts/switzer-600.woff2') format('woff2'); }
@font-face { font-family: 'Metropolis'; font-weight: 700 900; font-display: swap; src: url('/assets/fonts/metropolis-700.woff2') format('woff2'); }
h1, h2, h3 { font-family: var(--head); }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--sans); font-size: 14.5px; line-height: 1.55;
  color: var(--ink);
  background: #F5F6F8;
  background-attachment: fixed; min-height: 100vh;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
h2 { font-weight: 800; font-size: 1.25rem; color: var(--pt-blue-dark); margin-bottom: 14px; }
h3 { font-weight: 700; font-size: .98rem; color: var(--pt-blue-dark); margin-bottom: 10px; }
code { background: var(--pt-blue-pale); padding: 2px 7px; border-radius: 6px; font-size: .82rem; }

/* ─── Topbar ─────────────────────────────────────────────── */
.adm-top {
  background: var(--pt-blue); color: #fff;
  display: flex; align-items: center; gap: 14px; padding: 11px 20px;
  position: sticky; top: 0; z-index: 100;
}
.adm-top .brand { font-weight: 800; text-transform:none; font-size: .95rem; letter-spacing: .01em; }
.adm-top .brand .dot { color: #89ADCF; }
.adm-top .tag { background: rgba(255,255,255,.16); font-weight: 700; font-size: .7rem; padding: 4px 10px; border-radius: 99px; letter-spacing: .03em; }
.adm-top .sp { flex: 1; }
.rol-sel { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.rol-sel select { font-family: inherit; font-weight: 700; font-size: .8rem; border: none; border-radius: 8px; padding: 6px 10px; color: var(--pt-blue-dark); }
.adm-user { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: .82rem; }
.adm-signout { font-size: .8rem; font-weight: 600; background: rgba(255,255,255,.18); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.adm-signout:hover { background: rgba(255,255,255,.28); }

/* ─── Layout ─────────────────────────────────────────────── */
.adm-layout { display: grid; grid-template-columns: 208px 1fr; min-height: calc(100vh - 48px); }

/* ─── Sidebar ────────────────────────────────────────────── */
.adm-side {
  padding: 16px 10px; display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid var(--line-soft); background: rgba(255,255,255,.35);
}
.adm-side button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font-weight: 600; font-size: .86rem; color: var(--ink-soft);
  padding: 10px 13px; border-radius: 10px; transition: all .15s var(--ease);
}
.adm-side button i { font-size: 1.05rem; color: var(--slate); }
.adm-side button:hover { background: rgba(255,255,255,.7); }
.adm-side button.on { background: #fff; box-shadow: var(--shadow); color: var(--pt-blue-dark); }
.adm-side button.on i { color: var(--pt-blue); }
.adm-grp {
  font-size: .62rem; font-weight: 800; letter-spacing:.01em;
  color: var(--slate-soft); padding: 14px 13px 4px; text-transform:none;
}

/* ─── Main content ───────────────────────────────────────── */
.adm-main { padding: 24px 28px 60px; max-width: 1080px; }

/* ─── Paneles ────────────────────────────────────────────── */
.adm-panel { display: none; }
.adm-panel.on { display: block; }

/* ─── Cards ──────────────────────────────────────────────── */
.adm-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 14px; }

/* ─── Stats ──────────────────────────────────────────────── */
.adm-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 14px; }
.adm-stat { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.adm-stat .v { font-weight: 800; font-size: 1.5rem; color: var(--pt-blue-dark); }
.adm-stat .l { font-size: .78rem; color: var(--slate); font-weight: 500; }

/* ─── Badges ─────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: .7rem; padding: 4px 10px; border-radius: 99px; }
.b-pub  { background: var(--success-pale); color: var(--success); }
.b-bor  { background: var(--warning-pale); color: var(--warning); }
.b-mod  { background: var(--pt-blue-pale); color: var(--pt-blue-dark); }
.b-lock { background: var(--pt-blue-pale); color: var(--pt-blue-dark); font-size: .68rem; }

/* ─── Tabla ──────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .72rem; font-weight: 700; text-transform:none; letter-spacing:.01em; color: var(--slate); padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
td { padding: 10px 10px; border-bottom: 1px solid var(--line-soft); font-size: .86rem; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
.row-ok { background: #FFFFFF; }
.row-err { background: var(--danger-pale); }

/* ─── Botones ────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .8rem; padding: 9px 16px; border-radius: 9px; transition: all .15s var(--ease); cursor: pointer; border: none; font-family: inherit; }
.btn-p  { background: var(--pt-blue); color: #fff; }
.btn-p:hover { background: var(--pt-blue-dark); }
.btn-s  { background: var(--pt-blue-pale); color: var(--pt-blue-dark); }
.btn-s:hover { background: #E3E7EE; }
.btn-g  { background: #fff; box-shadow: var(--shadow); color: var(--ink-soft); }
.btn-g:hover { background: #F5F6F8; }
.btn-d  { background: var(--danger-pale); color: var(--danger); }
.btn-d:hover { background: #F5F6F8; }
.btn-w  { background: #FFFFFF; color: #025EB4; box-shadow: inset 0 0 0 1.5px #025EB4; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn-xs { padding: 6px 11px; font-size: .74rem; }

/* ─── Formularios ────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; font-size: .8rem; color: var(--ink-soft); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; background: #fff; border: 1.5px solid var(--line);
  border-radius: 9px; padding: 10px 12px; font-family: inherit;
  font-size: .88rem; color: var(--ink); outline: none; transition: border-color .15s;
}
.field textarea { min-height: 90px; resize: vertical; font-family: ui-monospace, monospace; font-size: .82rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--pt-blue); box-shadow: 0 0 0 3px var(--pt-blue-pale); }
.field .hint { font-size: .74rem; color: var(--slate); margin-top: 5px; line-height: 1.45; }
.field .chip-lock { display: inline-flex; align-items: center; gap: 4px; background: var(--pt-blue-pale); color: var(--pt-blue-dark); font-weight: 700; font-size: .68rem; padding: 3px 8px; border-radius: 99px; margin-left: 6px; }

/* ─── Grid de 2 columnas ─────────────────────────────────── */
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.cols3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 14px; }

/* ─── Alertas ────────────────────────────────────────────── */
.alert { display: flex; gap: 9px; align-items: flex-start; border-radius: 10px; padding: 11px 13px; font-size: .82rem; margin-bottom: 14px; }
.alert i { flex-shrink: 0; margin-top: 1px; }
.alert.warn { background: var(--warning-pale); color: var(--warning); }
.alert.ok   { background: var(--success-pale); color: var(--success); }
.alert.err  { background: var(--danger-pale); color: var(--danger); }
.alert.info { background: var(--pt-blue-pale); color: var(--pt-blue-dark); }

/* ─── Drop zone ──────────────────────────────────────────── */
.drop { border: 2px dashed var(--line); border-radius: 12px; padding: 28px; text-align: center; color: var(--slate); font-size: .86rem; margin-bottom: 14px; cursor: pointer; transition: border-color .15s; }
.drop:hover, .drop.drag-over { border-color: var(--pt-blue); background: var(--pt-blue-pale); }
.drop i { font-size: 1.6rem; color: var(--pt-blue); display: block; margin-bottom: 6px; }
.drop input[type="file"] { display: none; }

/* ─── Tabs internas ──────────────────────────────────────── */
.tabs-int { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.tab-int { background: #fff; box-shadow: var(--shadow); border-radius: 9px; padding: 7px 14px; font-weight: 600; font-size: .8rem; color: var(--ink-soft); cursor: pointer; border: none; font-family: inherit; }
.tab-int.on { box-shadow: 0 0 0 2.5px var(--pt-blue); color: var(--pt-blue-dark); }

/* ─── Solo admin ─────────────────────────────────────────── */
.solo-admin { display: none; }  /* se activa con JS cuando rol=admin */

/* ─── Nota / hint de panel ───────────────────────────────── */
.note { font-size: .78rem; color: var(--slate); margin-top: 10px; line-height: 1.5; }

/* ─── Miniatura cuadrada ─────────────────────────────────── */
.thumb-sq { width: 44px; height: 44px; border-radius: 8px; background: #E3E7EE; display: flex; align-items: center; justify-content: center; color: var(--slate-soft); flex-shrink: 0; }
.thumb-sq img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

/* ─── Checkbox lista ─────────────────────────────────────── */
.check-list { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; max-height: 140px; overflow-y: auto; font-size: .85rem; line-height: 2; }
.check-list label { display: block; cursor: pointer; }
.check-list label:hover { color: var(--pt-blue-dark); }

/* ─── Inline input rápido (tasas) ───────────────────────── */
input.inline { width: 120px; border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 10px; font-family: inherit; font-size: .88rem; background: #fff; }
input.inline:focus { border-color: var(--pt-blue); outline: none; }

/* ─── Editor plan — botonera ─────────────────────────────── */
.editor-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 4px; }

/* ─── Spinner ────────────────────────────────────────────── */
@keyframes adm-spin { to { transform: rotate(360deg); } }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .adm-layout { grid-template-columns: 1fr; }
  .adm-side { flex-direction: row; overflow-x: auto; padding: 10px; border-right: none; border-bottom: 1px solid var(--line-soft); }
  .adm-side button { white-space: nowrap; }
  .adm-grp { display: none; }
  .adm-stats { grid-template-columns: 1fr 1fr; }
  .cols2, .cols3 { grid-template-columns: 1fr; }
  .adm-main { padding: 16px 16px 40px; }
}