/* =========================================================================
   Pulse Park Life — sistema de diseño del panel admin
   Tema "Nube": navy profundo + verde esmeralda sobre gris claro frío.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --pl-bg: #F4F6F9;
    --pl-bg-soft: #FBFCFE;
    --pl-surface: #ffffff;
    --pl-cream: #EEF2F7;
    --pl-cream2: #E5EBF2;
    --pl-line: #E2E8F0;
    --pl-line-soft: #EDF1F6;
    --pl-ink: #16233A;
    --pl-ink2: #223049;
    --pl-navy: #1B2740;
    --pl-navy-deep: #121B2E;
    --pl-green: #15A45C;
    --pl-green-deep: #0E7A43;
    --pl-mint: #6EE7A8;
    --pl-label: #54617A;
    --pl-muted: #7C889F;
    --pl-muted2: #A0ABBF;
    --pl-ok: #16A34A;
    --pl-ok-bg: #E7F6EE;
    --pl-warn: #B7791F;
    --pl-warn-bg: #FBF0DA;
    --pl-warn-line: #F1E2C4;
    --pl-bad: #DC4A47;
    --pl-bad-bg: #FCE9E8;
    --pl-bad-line: #F5D6D4;
}

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

body {
    font-family: 'Manrope', system-ui, sans-serif;
    background: var(--pl-bg);
    color: var(--pl-ink);
    -webkit-font-smoothing: antialiased;
}

@keyframes plpulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.82); }
}
@keyframes plrise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Layout ---------- */
.pl-app { display: flex; height: 100vh; width: 100%; overflow: hidden; }
.pl-aside {
    width: 252px; flex: 0 0 252px; background: var(--pl-surface);
    border-right: 1px solid var(--pl-line); display: flex; flex-direction: column; height: 100%;
}
.pl-brand {
    padding: 22px 22px 18px; display: flex; align-items: center; gap: 11px;
    border-bottom: 1px solid var(--pl-line-soft);
}
.pl-logo {
    width: 36px; height: 36px; border-radius: 10px; background: transparent;
    display: flex; align-items: center; justify-content: center; flex: 0 0 36px; color: var(--pl-navy);
    overflow: hidden;
}
.pl-logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.pl-brand-name { font-size: 15px; font-weight: 800; line-height: 1; }
.pl-brand-sub { font-size: 10.5px; font-weight: 600; color: var(--pl-muted2); letter-spacing: .4px; }

.pl-nav { flex: 1; overflow-y: auto; padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.pl-nav-label { font-size: 10.5px; font-weight: 700; letter-spacing: .9px; color: var(--pl-muted2); padding: 14px 12px 6px; }
.pl-nav-label:first-child { padding-top: 8px; }
.pl-nav-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
    color: var(--pl-label); background: transparent; border: 0; cursor: pointer; text-decoration: none;
    transition: background .15s, color .15s;
}
.pl-nav-item:hover { background: var(--pl-cream); color: var(--pl-ink); }
.pl-nav-item.active { background: var(--pl-navy); color: #fff; }
.pl-nav-item.active .pl-dot { background: var(--pl-mint); opacity: 1; }
.pl-nav-item .pl-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }
.pl-nav-item.soon { opacity: .72; }
.pl-nav-item .pl-soon { margin-left: auto; font-size: 9px; font-weight: 700; color: var(--pl-muted2); background: var(--pl-cream2); padding: 2px 6px; border-radius: 20px; }

.pl-userbox { padding: 12px; border-top: 1px solid var(--pl-line-soft); }
.pl-usercard {
    background: var(--pl-cream); border: 1px solid var(--pl-cream2); border-radius: 12px;
    padding: 11px 12px; display: flex; align-items: center; gap: 10px;
}
.pl-avatar { width: 32px; height: 32px; border-radius: 9px; background: var(--pl-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex: 0 0 32px; }
.pl-user-name { font-size: 12.5px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-user-role { font-size: 11px; color: var(--pl-muted); }
.pl-logout { font-size: 11px; color: var(--pl-muted); text-decoration: none; }
.pl-logout:hover { color: var(--pl-bad); }

.pl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; background: var(--pl-bg); }
.pl-topbar {
    flex: 0 0 auto; padding: 16px 30px; border-bottom: 1px solid var(--pl-line);
    display: flex; align-items: center; gap: 18px; background: var(--pl-bg-soft);
}
.pl-crumb { font-size: 11.5px; font-weight: 700; letter-spacing: .5px; color: var(--pl-muted2); text-transform: uppercase; }
.pl-title { font-size: 19px; font-weight: 800; letter-spacing: -.3px; margin-top: 2px; }
.pl-topactions { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.pl-seg { display: flex; background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: 10px; padding: 3px; gap: 2px; }
.pl-seg a, .pl-seg button { border: 0; background: transparent; padding: 5px 11px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--pl-muted); cursor: pointer; text-decoration: none; }
.pl-seg .active { background: var(--pl-navy); color: #fff; }

.pl-content { flex: 1; overflow-y: auto; padding: 26px 30px; animation: plrise .35s ease; }
.pl-section-label { font-size: 13px; font-weight: 700; color: var(--pl-label); margin: 6px 0 12px; letter-spacing: .2px; }

/* ---------- Cards & components ---------- */
.pl-grid { display: grid; gap: 16px; }
.pl-card { background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: 16px; padding: 18px; }
.pl-card.ok { border-color: var(--pl-ok-bg); }
.pl-card.warn { border-color: var(--pl-warn-line); }
.pl-card.bad { border-color: var(--pl-bad-line); }

.pl-hero { background: linear-gradient(155deg, var(--pl-navy), var(--pl-navy-deep)); border-radius: 18px; padding: 24px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.pl-donut { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 96px; }
.pl-donut-inner { width: 70px; height: 70px; border-radius: 50%; background: var(--pl-navy-deep); display: flex; flex-direction: column; align-items: center; justify-content: center; }

.pl-metric { font-size: 42px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; color: var(--pl-ink); font-variant-numeric: tabular-nums; }
.pl-metric-sm { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; }
.pl-table td { font-variant-numeric: tabular-nums; }
.pl-metric-label { font-size: 12.5px; color: var(--pl-muted); font-weight: 600; }
.pl-eyebrow { font-size: 13px; font-weight: 700; }

.pl-pill { font-size: 10.5px; font-weight: 700; border-radius: 20px; padding: 3px 9px; display: inline-flex; align-items: center; gap: 5px; }
.pl-pill.ok { color: var(--pl-ok); background: var(--pl-ok-bg); }
.pl-pill.warn { color: var(--pl-warn); background: var(--pl-warn-bg); }
.pl-pill.bad { color: var(--pl-bad); background: var(--pl-bad-bg); }
.pl-pill.neutral { color: var(--pl-label); background: var(--pl-cream2); }

.pl-statdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pl-statdot.ok { background: var(--pl-ok); }
.pl-statdot.warn { background: var(--pl-warn); }
.pl-statdot.bad { background: var(--pl-bad); animation: plpulse 1.4s infinite; }
.pl-statdot.green { background: var(--pl-mint); }

.pl-btn { border: 0; cursor: pointer; border-radius: 999px; padding: 11px 22px; font-size: 13px; font-weight: 700; text-decoration: none; display: inline-block; transition: background .15s, transform .1s; }
.pl-btn-primary { background: var(--pl-green); color: #fff; }
.pl-btn-primary:hover { background: var(--pl-green-deep); }
.pl-btn-ghost { background: transparent; border: 1px solid var(--pl-line); color: var(--pl-label); }
.pl-btn-ghost:hover { background: var(--pl-cream); }
.pl-btn-sm { padding: 7px 14px; font-size: 12px; }

/* ---------- Tables ---------- */
.pl-tablewrap { background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: 16px; overflow: hidden; }
.pl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pl-table thead { background: var(--pl-cream); }
.pl-table th { text-align: left; padding: 12px 16px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--pl-muted); font-weight: 700; }
.pl-table td { padding: 13px 16px; border-top: 1px solid var(--pl-line-soft); }
.pl-table tbody tr { cursor: pointer; transition: background .12s; }
.pl-table tbody tr:hover { background: var(--pl-bg-soft); }

.pl-select { border: 1px solid var(--pl-line); background: var(--pl-surface); border-radius: 10px; padding: 8px 12px; font-size: 13px; font-family: inherit; color: var(--pl-ink); }
.pl-input { border: 1px solid var(--pl-line); background: var(--pl-surface); border-radius: 12px; padding: 12px 14px; font-size: 14px; font-family: inherit; color: var(--pl-ink); width: 100%; }
.pl-input:focus, .pl-select:focus { outline: none; border-color: var(--pl-green); }

.pl-soon-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; }
.pl-soon-badge { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--pl-green); background: var(--pl-ok-bg); padding: 5px 12px; border-radius: 20px; }

.pl-pill.navy { color: #fff; background: var(--pl-navy); }

/* ---------- Centro de mando (Envíos) ---------- */
.pl-banner { display: flex; align-items: center; gap: 11px; padding: 13px 17px; border-radius: 13px; background: var(--pl-warn-bg); border: 1px solid var(--pl-warn-line); color: #7a5a13; font-size: 13px; font-weight: 600; margin-bottom: 18px; }
.pl-banner .pl-banner-ico { font-size: 16px; }

.pl-statgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px; }
.pl-stat { background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: 14px; padding: 16px 18px; }
.pl-stat-label { font-size: 11.5px; font-weight: 600; color: var(--pl-muted); margin-bottom: 8px; }
.pl-stat-value { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--pl-ink); }
.pl-stat-value.ok { color: var(--pl-ok); }
.pl-stat-value.bad { color: var(--pl-bad); }

.pl-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 18px; align-items: start; }
.pl-panel { background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: 16px; padding: 18px 20px; }
.pl-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pl-panel-title { font-size: 14.5px; font-weight: 800; letter-spacing: -.2px; }
.pl-panel-note { font-size: 11.5px; color: var(--pl-muted2); font-weight: 600; }

.pl-badge { font-size: 10.5px; font-weight: 700; border-radius: 8px; padding: 4px 10px; display: inline-flex; align-items: center; }
.pl-badge.ok { background: var(--pl-ok); color: #fff; }
.pl-badge.bad { background: var(--pl-bad); color: #fff; }
.pl-badge.warn { background: var(--pl-warn); color: #fff; }
.pl-badge.navy { background: var(--pl-navy); color: #fff; }
.pl-badge.neutral { background: var(--pl-cream2); color: var(--pl-label); }

.pl-moment { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 8px; }
.pl-moment.POST_BOOKING { background: var(--pl-navy); }
.pl-moment.POST_CHECKIN { background: var(--pl-ok); }
.pl-moment.PRE_CHECKOUT { background: var(--pl-warn); }
.pl-moment.POST_CHECKOUT { background: #8b5cf6; }

.pl-qrow { display: grid; grid-template-columns: 1.5fr 1.3fr 1fr auto; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--pl-line-soft); }
.pl-qrow:first-of-type { border-top: 0; }
.pl-qguest { font-size: 13px; font-weight: 700; }
.pl-qsub { font-size: 11px; color: var(--pl-muted); }

.pl-kv { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--pl-line-soft); font-size: 13px; }
.pl-kv:first-of-type { border-top: 0; }
.pl-kv .k { color: var(--pl-label); font-weight: 600; }
.pl-kv .v { font-weight: 700; font-variant-numeric: tabular-nums; }

.pl-funnel { display: flex; flex-direction: column; gap: 9px; }
.pl-funnel-row { display: flex; align-items: center; gap: 10px; }
.pl-funnel-bar { flex: 1; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; font-size: 12.5px; font-weight: 700; color: var(--pl-ink); background: var(--pl-cream); }
.pl-funnel-bar.f1 { background: #E7ECF3; }
.pl-funnel-bar.f2 { background: #DEE5EF; }
.pl-funnel-bar.f3 { background: #D3DCEA; }
.pl-funnel-bar.f4 { background: var(--pl-green); color: #fff; }
.pl-funnel-bar .n { font-variant-numeric: tabular-nums; }

.pl-crongrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; }
.pl-cron { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.pl-cron-body { flex: 1; min-width: 0; }
.pl-cron-name { font-size: 13px; font-weight: 700; }
.pl-cron-sched { font-size: 11px; color: var(--pl-muted); }
.pl-cron-state { font-size: 11.5px; font-weight: 700; }
.pl-cron-state.on { color: var(--pl-ok); }
.pl-cron-state.off { color: var(--pl-warn); }

@media (max-width: 1100px) {
    .pl-statgrid { grid-template-columns: repeat(2, 1fr); }
    .pl-cols { grid-template-columns: 1fr; }
    .pl-crongrid { grid-template-columns: 1fr; }
}

/* ---------- Control del sistema (switches) ---------- */
.pl-switch { position: relative; display: inline-block; width: 48px; height: 27px; flex: 0 0 48px; cursor: pointer; }
.pl-switch input { opacity: 0; width: 0; height: 0; }
.pl-switch-track { position: absolute; inset: 0; background: var(--pl-cream2); border-radius: 999px; transition: background .18s; }
.pl-switch-track::before { content: ''; position: absolute; width: 21px; height: 21px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .18s; box-shadow: 0 1px 3px rgba(16,27,46,.25); }
.pl-switch input:checked + .pl-switch-track { background: var(--pl-ok); }
.pl-switch input:checked + .pl-switch-track::before { transform: translateX(21px); }

.pl-ctrl-row { display: flex; align-items: center; gap: 18px; padding: 17px 0; border-top: 1px solid var(--pl-line-soft); }
.pl-ctrl-row:first-of-type { border-top: 0; }
.pl-ctrl-body { flex: 1; min-width: 0; }
.pl-ctrl-label { font-size: 14.5px; font-weight: 700; }
.pl-ctrl-desc { font-size: 12.5px; color: var(--pl-muted); margin-top: 3px; }
.pl-ctrl-state { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-right: 4px; }
.pl-ctrl-state.on { color: var(--pl-ok); }
.pl-ctrl-state.off { color: var(--pl-muted2); }