/* ============================================================
   ParkManager Pro — Cashier Frontend MK2
   3 themes: dark / light / oled
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ── Theme: Dark (default) ── */
:root, [data-theme="dark"] {
    --c-bg:      #0f172a;
    --c-bg2:     #1e293b;
    --c-bg3:     #334155;
    --c-surface: #1e293b;
    --c-border:  #334155;
    --c-text:    #f1f5f9;
    --c-text2:   #94a3b8;
    --c-text3:   #64748b;
    --c-primary: #3b82f6;
    --c-primary-h:#2563eb;
    --c-success: #22c55e;
    --c-warning: #f59e0b;
    --c-danger:  #ef4444;
    --c-input-bg:#0f172a;
    --c-input-border:#334155;
    --c-select-text:#f1f5f9;
    --c-select-bg:#1e293b;
}

/* ── Theme: Light ── */
[data-theme="light"] {
    --c-bg:      #f8fafc;
    --c-bg2:     #ffffff;
    --c-bg3:     #e2e8f0;
    --c-surface: #ffffff;
    --c-border:  #cbd5e1;
    --c-text:    #0f172a;
    --c-text2:   #475569;
    --c-text3:   #94a3b8;
    --c-primary: #2563eb;
    --c-primary-h:#1d4ed8;
    --c-success: #16a34a;
    --c-warning: #d97706;
    --c-danger:  #dc2626;
    --c-input-bg:#ffffff;
    --c-input-border:#cbd5e1;
    --c-select-text:#0f172a;
    --c-select-bg:#ffffff;
}

/* ── Theme: OLED ── */
[data-theme="oled"] {
    --c-bg:      #000000;
    --c-bg2:     #0a0a0a;
    --c-bg3:     #1a1a1a;
    --c-surface: #0a0a0a;
    --c-border:  #222222;
    --c-text:    #ffffff;
    --c-text2:   #a0a0a0;
    --c-text3:   #555555;
    --c-primary: #4d9fff;
    --c-primary-h:#2b7be0;
    --c-success: #30d158;
    --c-warning: #ffd60a;
    --c-danger:  #ff453a;
    --c-input-bg:#000000;
    --c-input-border:#222222;
    --c-select-text:#ffffff;
    --c-select-bg:#0a0a0a;
}

/* ── Base ── */
.pkm-cashier-wrapper { width:100%; height:100vh; display:flex; flex-direction:column; background:var(--c-bg); color:var(--c-text); font-family:'IBM Plex Sans',sans-serif; overflow:hidden; transition:background .2s,color .2s; }
.pkm-cashier-wrapper * { box-sizing:border-box; }

/* ── Login ── */
.pkm-login-screen  { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100vh; background:var(--c-bg); }
.pkm-login-card    { background:var(--c-bg2); border:1px solid var(--c-border); border-radius:16px; padding:40px 44px; width:100%; max-width:420px; box-shadow:0 4px 32px rgba(0,0,0,.4); }
.pkm-login-logo    { text-align:center; margin-bottom:32px; }
.pkm-login-logo h1 { font-size:22px; font-weight:700; color:var(--c-primary); }
.pkm-login-logo p  { font-size:13px; color:var(--c-text2); margin-top:4px; }
.pkm-login-icon    { font-size:40px; margin-bottom:10px; }

/* ── Header ── */
.pkm-cashier-header { background:var(--c-bg2); border-bottom:1px solid var(--c-border); padding:0 20px; height:56px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:10px; }
.pkm-header-brand  { font-size:15px; font-weight:700; color:var(--c-primary); white-space:nowrap; }
.pkm-header-info   { display:flex; align-items:center; gap:10px; }
.pkm-header-badge  { font-size:12.5px; color:var(--c-text2); display:flex; align-items:center; gap:6px; }
.pkm-header-badge .dot { width:8px; height:8px; border-radius:50%; background:var(--c-success); }

/* Theme toggle */
.pkm-theme-toggle  { display:flex; align-items:center; gap:2px; background:var(--c-bg3); border-radius:8px; padding:3px; }
.pkm-theme-btn     { padding:5px 7px; border-radius:6px; border:none; background:transparent; color:var(--c-text3); cursor:pointer; font-size:14px; font-family:inherit; transition:all .15s; line-height:1; }
.pkm-theme-btn:hover { color:var(--c-text2); }
.pkm-theme-btn.active { background:var(--c-bg2); color:var(--c-text); box-shadow:0 1px 3px rgba(0,0,0,.3); }

/* ── Layout ── */
.pkm-cashier-body  { flex:1; display:grid; grid-template-columns:1fr 340px; overflow:hidden; }
.pkm-main-panel    { display:flex; flex-direction:column; overflow:hidden; }
.pkm-tab-bar       { background:var(--c-bg2); border-bottom:1px solid var(--c-border); display:flex; padding:0 16px; flex-shrink:0; align-items:center; }
.pkm-tab-btn       { padding:14px 18px; font-size:13.5px; font-weight:500; color:var(--c-text2); cursor:pointer; border:none; background:none; border-bottom:2px solid transparent; transition:all .15s; }
.pkm-tab-btn:hover { color:var(--c-text); }
.pkm-tab-btn.active{ color:var(--c-primary); border-bottom-color:var(--c-primary); }
.pkm-panel-content { flex:1; overflow-y:auto; padding:20px; }
.pkm-side-panel    { background:var(--c-bg2); border-left:1px solid var(--c-border); display:flex; flex-direction:column; overflow:hidden; }
.pkm-side-header   { padding:14px 16px; border-bottom:1px solid var(--c-border); font-size:12px; font-weight:600; color:var(--c-text2); text-transform:uppercase; letter-spacing:.5px; flex-shrink:0; }
.pkm-side-body     { flex:1; overflow-y:auto; padding:12px; }

/* ── Entrada button (más notorio) ── */
.pkm-entry-btn     { margin-left:auto; display:flex; align-items:center; gap:8px; padding:8px 20px; background:var(--c-success); color:#fff; font-weight:700; font-size:14px; border-radius:8px; border:none; cursor:pointer; font-family:inherit; transition:all .2s; box-shadow:0 2px 8px rgba(34,197,94,.35); white-space:nowrap; }
.pkm-entry-btn:hover{ background:#16a34a; transform:translateY(-1px); box-shadow:0 4px 16px rgba(34,197,94,.45); }

/* ── Space map ── */
.pkm-spaces-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.pkm-spaces-counter span { font-size:20px; font-weight:700; font-family:'IBM Plex Mono',monospace; }
.pkm-spaces-counter small{ font-size:12px; color:var(--c-text2); margin-left:3px; }
.pkm-space-grid    { display:grid; grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); gap:8px; }
.pkm-space         { border-radius:8px; padding:8px 4px; text-align:center; cursor:pointer; transition:all .2s; border:2px solid transparent; user-select:none; }
.pkm-space-name    { font-size:11px; font-family:'IBM Plex Mono',monospace; font-weight:600; }
.pkm-space-plate   { font-size:9px; opacity:.75; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pkm-space.available   { background:rgba(34,197,94,.15);  border-color:rgba(34,197,94,.3);  color:#86efac; }
.pkm-space.occupied    { background:rgba(239,68,68,.15);  border-color:rgba(239,68,68,.3);  color:#fca5a5; }
.pkm-space.reserved    { background:rgba(245,158,11,.15); border-color:rgba(245,158,11,.3); color:#fcd34d; }
.pkm-space.maintenance { background:rgba(100,116,139,.15);border-color:rgba(100,116,139,.3);color:#94a3b8; }
.pkm-space:hover   { transform:scale(1.06); }
.pkm-space.selected{ border-color:var(--c-primary) !important; box-shadow:0 0 0 2px rgba(59,130,246,.4); }

/* ── Ticket rows ── */
.pkm-ticket-row    { background:var(--c-surface); border:1px solid var(--c-border); border-radius:8px; padding:12px 14px; margin-bottom:10px; cursor:pointer; transition:all .15s; }
.pkm-ticket-row:hover{ border-color:var(--c-primary); background:var(--c-bg3); }
.pkm-ticket-row.selected { border-color:var(--c-primary); box-shadow:0 0 0 2px rgba(59,130,246,.3); }
.pkm-ticket-folio  { font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:14px; color:var(--c-primary); }
.pkm-ticket-meta   { font-size:12px; color:var(--c-text2); margin-top:4px; display:flex; gap:12px; flex-wrap:wrap; }

/* ── Search bar ── */
.pkm-search-bar    { display:flex; gap:10px; margin-bottom:16px; }
.pkm-input-dark    { flex:1; padding:10px 14px; background:var(--c-input-bg); border:1px solid var(--c-input-border); border-radius:10px; color:var(--c-text); font-family:'IBM Plex Mono',monospace; font-size:15px; outline:none; text-transform:uppercase; transition:border-color .15s; }
.pkm-input-dark::placeholder { color:var(--c-text3); text-transform:none; font-family:'IBM Plex Sans',sans-serif; font-size:14px; }
.pkm-input-dark:focus { border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(59,130,246,.15); }
/* Fix select contraste en todos los temas */
.pkm-input-dark[type=text], select.pkm-input-dark, select.pkm-input-dark option {
    background:var(--c-select-bg) !important;
    color:var(--c-select-text) !important;
}
select.pkm-input-dark option { background:var(--c-select-bg); color:var(--c-select-text); }

/* ── Payment panel ── */
.pkm-pay-summary   { background:var(--c-bg); border-radius:10px; padding:16px; margin-bottom:16px; }
.pkm-pay-row       { display:flex; justify-content:space-between; padding:5px 0; font-size:14px; color:var(--c-text); }
.pkm-pay-row.total { font-size:20px; font-weight:700; font-family:'IBM Plex Mono',monospace; border-top:1px solid var(--c-border); padding-top:10px; margin-top:4px; color:var(--c-success); }
.pkm-pay-row.change{ font-size:17px; font-weight:600; font-family:'IBM Plex Mono',monospace; color:var(--c-warning); }
.pkm-method-btns   { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.pkm-method-btn    { padding:12px; border-radius:8px; border:2px solid var(--c-border); background:var(--c-bg); color:var(--c-text); font-weight:600; cursor:pointer; text-align:center; transition:all .15s; font-size:15px; }
.pkm-method-btn.selected { border-color:var(--c-primary); background:rgba(59,130,246,.15); color:var(--c-primary); }

/* ── Buttons ── */
.pkm-btn-dark      { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:10px; font-size:14px; font-weight:500; cursor:pointer; border:none; font-family:inherit; transition:all .15s; }
.pkm-btn-blue      { background:var(--c-primary); color:#fff; }
.pkm-btn-blue:hover{ background:var(--c-primary-h); }
.pkm-btn-green     { background:var(--c-success); color:#fff; }
.pkm-btn-green:hover{ background:#16a34a; }
.pkm-btn-red       { background:var(--c-danger); color:#fff; }
.pkm-btn-ghost     { background:transparent; color:var(--c-text2); border:1px solid var(--c-border); }
.pkm-btn-ghost:hover{ background:var(--c-bg3); color:var(--c-text); }
.pkm-btn-lg        { padding:14px 24px; font-size:16px; border-radius:12px; }
.pkm-btn-block     { width:100%; justify-content:center; }
.pkm-btn-dark:disabled { opacity:.4; pointer-events:none; }

.pkm-divider       { border:none; border-top:1px solid var(--c-border); margin:12px 0; }
.pkm-empty         { text-align:center; padding:40px 20px; color:var(--c-text3); }
.pkm-empty-icon    { font-size:36px; margin-bottom:10px; }

.pkm-spinner-sm    { width:18px; height:18px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; display:inline-block; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Toasts ── */
.pkm-toast-c       { position:fixed; top:20px; right:20px; z-index:99999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.pkm-toast-item    { padding:12px 16px; border-radius:10px; font-size:14px; font-weight:500; box-shadow:0 8px 24px rgba(0,0,0,.5); animation:toast-in .25s ease; max-width:300px; pointer-events:auto; }
.pkm-toast-item.success { background:#166534; color:#bbf7d0; border:1px solid #15803d; }
.pkm-toast-item.error   { background:#7f1d1d; color:#fecaca; border:1px solid #b91c1c; }
.pkm-toast-item.info    { background:#1e3a5f; color:#bfdbfe; border:1px solid #1d4ed8; }
[data-theme="light"] .pkm-toast-item.success { background:#dcfce7; color:#14532d; border-color:#16a34a; }
[data-theme="light"] .pkm-toast-item.error   { background:#fee2e2; color:#7f1d1d; border-color:#dc2626; }
[data-theme="light"] .pkm-toast-item.info    { background:#dbeafe; color:#1e3a5f; border-color:#2563eb; }
@keyframes toast-in { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }

/* ── Detail panel ── */
.pkm-detail-summary { background:var(--c-bg); border-radius:10px; padding:14px; }
.pkm-detail-folio  { font-family:'IBM Plex Mono',monospace; font-size:18px; font-weight:700; color:var(--c-primary); margin-bottom:8px; }
.pkm-detail-meta   { font-size:13px; color:var(--c-text2); display:flex; flex-direction:column; gap:4px; }

/* ── Print ── */
@media print { .pkm-cashier-wrapper, .pkm-no-print { display:none !important; } .pkm-receipt { display:block !important; } }
.pkm-receipt { display:none; }

/* ── Responsive ── */
@media (max-width:768px) {
    .pkm-cashier-body  { grid-template-columns:1fr; grid-template-rows:1fr auto; }
    .pkm-side-panel    { border-left:none; border-top:1px solid var(--c-border); max-height:220px; }
    .pkm-space-grid    { grid-template-columns:repeat(auto-fill,minmax(54px,1fr)); }
}
@media (max-width:480px) {
    .pkm-cashier-header { padding:0 12px; }
    .pkm-panel-content  { padding:12px; }
    .pkm-login-card     { padding:28px 20px; }
    .pkm-theme-btn      { padding:5px 7px; font-size:11px; }
}

/* ── MK5: Responsive — panel lateral visible en móvil vertical ── */

/* input error state */
.pkm-input-dark.pkm-input-error {
    border-color: var(--c-danger) !important;
    box-shadow: 0 0 0 2px rgba(239,68,68,.2);
}

/* side panel mobile */
.pkm-side-panel {
    transition: all .25s ease;
}

@media (max-width: 700px) {
    .pkm-cashier-body {
        flex-direction: column;
    }
    .pkm-main-panel {
        min-width: 0;
        width: 100%;
    }
    .pkm-side-panel {
        display: none;
        width: 100%;
    }
    /* Mostrar side panel cuando hay ticket activo */
    .pkm-side-panel.pkm-side-active {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .pkm-cashier-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }
    .pkm-header-brand {
        font-size: 14px;
    }
    .pkm-entry-btn {
        padding: 8px 14px;
        font-size: 13px;
    }
    .pkm-tab-btn {
        font-size: 12px;
        padding: 8px 10px;
    }
}

/* Space map canvas responsive */
.pkm-space-grid {
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
}

@media (max-width: 400px) {
    .pkm-space-grid {
        grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    }
}