/* ═══════════════════════════════════════════════════════════════
   PAPELERÍA LA ESPERANZA — ADMIN PANEL STYLES
   Supreme Professional Edition
   ═══════════════════════════════════════════════════════════════ */

:root {
    --clr-primary: #0d9488;
    --clr-primary-light: #14b8a6;
    --clr-primary-dark: #0f766e;
    --clr-primary-50: rgba(13,148,136,.08);
    --clr-primary-100: rgba(13,148,136,.15);
    --clr-primary-glow: rgba(13,148,136,.35);
    --clr-accent: #f59e0b;
    --clr-accent-light: #fbbf24;
    --clr-bg: #f8fafc;
    --clr-bg-warm: #f1f5f9;
    --clr-surface: #ffffff;
    --clr-dark: #1a1a2e;
    --clr-dark-mid: #16213e;
    --clr-text: #1e293b;
    --clr-text-secondary: #64748b;
    --clr-text-tertiary: #94a3b8;
    --clr-border: rgba(0,0,0,.06);
    --clr-success: #10b981;
    --clr-warning: #f59e0b;
    --clr-danger: #ef4444;
    --clr-info: #3b82f6;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
    --shadow-md: 0 4px 24px rgba(0,0,0,.08);
    --shadow-lg: 0 8px 40px rgba(0,0,0,.10);
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-full: 9999px;
    --ff-heading: 'Playfair Display', Georgia, serif;
    --ff-body: 'Inter', 'Poppins', system-ui, sans-serif;
    --ease-spring: cubic-bezier(.22,1,.36,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body {
    font-family: var(--ff-body);
    background: var(--clr-bg);
    color: var(--clr-text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    line-height:1.6;
}
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input, select { font-family:inherit; }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--clr-primary-100); border-radius:var(--r-full); }

/* ═══ LOGIN SCREEN ═══ */
.login-screen {
    position:fixed; inset:0;
    background: linear-gradient(160deg, #0f2027 0%, #203a43 40%, #1a1a2e 100%);
    display:flex; align-items:center; justify-content:center;
    z-index:9999;
    transition: opacity .5s var(--ease-spring);
}
.login-screen.hide { opacity:0; pointer-events:none; }

.login-container {
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-lg);
    padding: 2.5rem 2rem;
    width: 90%;
    max-width: 380px;
    text-align: center;
    animation: fadeUp .6s var(--ease-spring) both;
}
@keyframes fadeUp {
    from { opacity:0; transform:translateY(30px); }
    to { opacity:1; transform:translateY(0); }
}

.login-logo {
    margin-bottom: 2rem;
}
.login-icon {
    width:70px; height:70px;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent));
    border-radius: var(--r-md);
    display:flex; align-items:center; justify-content:center;
    font-size:2rem;
    margin:0 auto 1rem;
    box-shadow: 0 4px 20px var(--clr-primary-glow);
}
.login-logo h1 {
    font-family: var(--ff-heading);
    font-size:1.4rem; font-weight:700;
    color:#fff;
}
.login-logo p {
    font-size:.75rem; color:rgba(255,255,255,.4);
    letter-spacing:.1em; text-transform:uppercase;
    margin-top:.25rem;
}

.login-form { display:flex; flex-direction:column; gap:1rem; }

.login-input-group {
    text-align:left;
}
.login-input-group label {
    display:flex; align-items:center; gap:.4rem;
    font-size:.75rem; font-weight:600;
    color:rgba(255,255,255,.5);
    margin-bottom:.5rem;
}
.login-input-group label i { font-size:.65rem; }

.login-input-group input {
    width:100%;
    padding:.85rem 1rem;
    background:rgba(255,255,255,.08);
    border:1.5px solid rgba(255,255,255,.12);
    border-radius:var(--r-sm);
    color:#fff;
    font-size:.9rem;
    outline:none;
    transition:border-color .2s, box-shadow .2s;
}
.login-input-group input:focus {
    border-color:var(--clr-primary);
    box-shadow:0 0 0 3px var(--clr-primary-50);
}
.login-input-group input::placeholder { color:rgba(255,255,255,.25); }

.login-btn {
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.95rem;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
    color:#fff;
    border-radius:var(--r-sm);
    font-size:.9rem; font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    box-shadow:0 4px 20px var(--clr-primary-glow);
    transition:all .2s;
}
.login-btn:hover { transform:translateY(-1px); box-shadow:0 8px 30px var(--clr-primary-glow); }

.login-error {
    display:none; align-items:center; justify-content:center; gap:.4rem;
    color:var(--clr-danger);
    font-size:.8rem; font-weight:600;
    padding:.5rem;
    background:rgba(239,68,68,.1);
    border-radius:var(--r-sm);
}

.login-back {
    display:inline-flex; align-items:center; gap:.4rem;
    margin-top:1.5rem;
    font-size:.78rem; color:rgba(255,255,255,.35);
    transition:color .2s;
}
.login-back:hover { color:rgba(255,255,255,.7); }

/* ═══ ADMIN LAYOUT ═══ */
.admin-content {
    display:none;
    min-height:100vh;
}

/* Sidebar */
.sidebar {
    position:fixed; left:0; top:0; bottom:0;
    width:240px;
    background:var(--clr-dark);
    display:flex; flex-direction:column;
    z-index:100;
    transition:transform .3s var(--ease-spring);
}

.sidebar-header {
    padding:1.5rem 1.25rem;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.logo {
    display:flex; align-items:center; gap:.65rem;
    font-size:1rem; font-weight:700;
    color:#fff;
}
.logo-icon {
    width:36px; height:36px;
    background:linear-gradient(135deg, var(--clr-primary), var(--clr-accent));
    border-radius:var(--r-sm);
    display:flex; align-items:center; justify-content:center;
    font-size:1rem;
}

.sidebar-nav {
    flex:1; padding:1rem .75rem;
    display:flex; flex-direction:column; gap:.25rem;
}
.nav-item {
    display:flex; align-items:center; gap:.75rem;
    padding:.75rem 1rem;
    border-radius:var(--r-sm);
    color:rgba(255,255,255,.5);
    font-size:.85rem; font-weight:500;
    transition:all .2s;
}
.nav-item i { width:18px; text-align:center; font-size:.85rem; }
.nav-item:hover { color:rgba(255,255,255,.8); background:rgba(255,255,255,.05); }
.nav-item.active {
    color:#fff;
    background:var(--clr-primary);
    font-weight:600;
    box-shadow:0 2px 12px var(--clr-primary-glow);
}

.sidebar-footer {
    padding:1rem;
    border-top:1px solid rgba(255,255,255,.06);
}
.back-to-menu {
    display:flex; align-items:center; gap:.5rem;
    color:rgba(255,255,255,.35);
    font-size:.78rem;
    padding:.5rem .75rem;
    border-radius:var(--r-sm);
    transition:all .2s;
}
.back-to-menu:hover { color:rgba(255,255,255,.7); background:rgba(255,255,255,.05); }

/* Main content area */
.main-content {
    margin-left:240px;
    min-height:100vh;
    padding:0 1.5rem 2rem;
}

.main-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:1.25rem 0;
    border-bottom:1px solid var(--clr-border);
    margin-bottom:1.5rem;
}
.page-title {
    font-family:var(--ff-heading);
    font-size:1.5rem; font-weight:700;
}
.date-display {
    display:flex; align-items:center; gap:.4rem;
    font-size:.8rem; color:var(--clr-text-secondary);
    background:var(--clr-surface);
    padding:.45rem .85rem;
    border-radius:var(--r-full);
    border:1px solid var(--clr-border);
}
.date-display i { color:var(--clr-primary); font-size:.7rem; }

/* ═══ CONTENT SECTIONS ═══ */
.content-section { display:none; }
.content-section.active { display:block; animation:fadeUp .4s var(--ease-spring) both; }

/* Stats Grid */
.stats-grid {
    display:grid; grid-template-columns:repeat(2, 1fr);
    gap:.85rem;
    margin-bottom:1.5rem;
}
.stat-card {
    background:var(--clr-surface);
    border-radius:var(--r-md);
    padding:1.25rem;
    border:1px solid var(--clr-border);
    display:flex; align-items:center; gap:1rem;
    transition:all .2s;
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }

.stat-icon {
    width:48px; height:48px;
    border-radius:var(--r-sm);
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; color:#fff;
    flex-shrink:0;
}
.stat-card.blue .stat-icon { background:linear-gradient(135deg, #3b82f6, #2563eb); }
.stat-card.green .stat-icon { background:linear-gradient(135deg, #10b981, #059669); }
.stat-card.orange .stat-icon { background:linear-gradient(135deg, #f59e0b, #d97706); }
.stat-card.purple .stat-icon { background:linear-gradient(135deg, #8b5cf6, #7c3aed); }

.stat-info h3 { font-size:1.25rem; font-weight:800; line-height:1.2; }
.stat-info p { font-size:.72rem; color:var(--clr-text-tertiary); font-weight:500; }

/* Charts */
.charts-row {
    display:grid; grid-template-columns:1fr;
    gap:1rem;
}
.chart-card {
    background:var(--clr-surface);
    border-radius:var(--r-md);
    border:1px solid var(--clr-border);
    padding:1.25rem;
}
.chart-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:1rem;
}
.chart-header h3 {
    font-size:.88rem; font-weight:700;
    display:flex; align-items:center; gap:.5rem;
}
.chart-header h3 i { color:var(--clr-primary); }
.chart-select {
    padding:.35rem .65rem;
    border-radius:var(--r-full);
    border:1px solid var(--clr-border);
    font-size:.72rem;
    color:var(--clr-text-secondary);
    background:var(--clr-surface);
    outline:none;
}
.chart-container { position:relative; }

/* Section header bar */
.section-header-bar {
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:.75rem;
    margin-bottom:1.25rem;
}
.section-header-bar h3 {
    font-size:1rem; font-weight:700;
    display:flex; align-items:center; gap:.5rem;
}
.section-header-bar h3 i { color:var(--clr-primary); }

.refresh-btn {
    display:flex; align-items:center; gap:.4rem;
    padding:.5rem 1rem;
    background:var(--clr-primary-50);
    color:var(--clr-primary);
    border-radius:var(--r-full);
    font-size:.78rem; font-weight:600;
    border:1px solid var(--clr-primary-100);
    transition:all .2s;
}
.refresh-btn:hover { background:var(--clr-primary-100); }

/* Photo orders grid */
.photo-orders-grid {
    display:grid; grid-template-columns:1fr;
    gap:.85rem;
}
.photo-order-card {
    background:var(--clr-surface);
    border-radius:var(--r-md);
    border:1px solid var(--clr-border);
    padding:1.15rem;
    display:flex; gap:1rem;
    transition:all .2s;
}
.photo-order-card:hover { box-shadow:var(--shadow-md); }

.photo-thumb {
    width:80px; height:80px;
    border-radius:var(--r-sm);
    overflow:hidden; flex-shrink:0;
    background:var(--clr-bg-warm);
}
.photo-thumb img { width:100%; height:100%; object-fit:cover; }

.photo-order-info { flex:1; min-width:0; }
.photo-order-name { font-size:.85rem; font-weight:700; margin-bottom:.2rem; }
.photo-order-meta { font-size:.72rem; color:var(--clr-text-tertiary); margin-bottom:.5rem; line-height:1.5; }

.photo-status-badge {
    display:inline-flex; align-items:center; gap:.3rem;
    padding:.2rem .6rem;
    border-radius:var(--r-full);
    font-size:.65rem; font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.photo-status-badge.pendiente { background:rgba(245,158,11,.1); color:var(--clr-warning); }
.photo-status-badge.imprimiendo { background:rgba(59,130,246,.1); color:var(--clr-info); }
.photo-status-badge.completado { background:rgba(16,185,129,.1); color:var(--clr-success); }

.photo-order-actions {
    display:flex; flex-direction:column; gap:.4rem; justify-content:center;
}
.photo-action-btn {
    padding:.4rem .75rem;
    border-radius:var(--r-full);
    font-size:.68rem; font-weight:600;
    transition:all .2s;
    display:flex; align-items:center; gap:.3rem;
}
.photo-action-btn.view { background:var(--clr-primary-50); color:var(--clr-primary); }
.photo-action-btn.view:hover { background:var(--clr-primary-100); }
.photo-action-btn.status { background:rgba(16,185,129,.1); color:var(--clr-success); }
.photo-action-btn.status:hover { background:rgba(16,185,129,.2); }

/* Filters */
.filters {
    display:flex; align-items:center; gap:.5rem;
    flex-wrap:wrap;
}
.filter-group input {
    padding:.55rem .85rem;
    border:1px solid var(--clr-border);
    border-radius:var(--r-full);
    font-size:.78rem;
    color:var(--clr-text);
    background:var(--clr-surface);
    outline:none;
    transition:border-color .2s;
}
.filter-group input:focus { border-color:var(--clr-primary); }

.filter-btn {
    display:flex; align-items:center; gap:.35rem;
    padding:.55rem .85rem;
    border-radius:var(--r-full);
    font-size:.75rem; font-weight:600;
    background:var(--clr-primary);
    color:#fff;
    transition:all .2s;
}
.filter-btn:hover { background:var(--clr-primary-dark); }
.filter-btn.clear {
    background:var(--clr-bg-warm);
    color:var(--clr-text-secondary);
    border:1px solid var(--clr-border);
}
.filter-btn.clear:hover { border-color:var(--clr-danger); color:var(--clr-danger); }

/* Mobile orders list */
.mobile-orders-list {
    display:flex; flex-direction:column; gap:.65rem;
}
.order-card {
    background:var(--clr-surface);
    border-radius:var(--r-md);
    border:1px solid var(--clr-border);
    padding:1rem;
    cursor:pointer;
    transition:all .2s;
}
.order-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }

.order-card-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:.5rem;
}
.order-card-num { font-size:.75rem; font-weight:700; color:var(--clr-primary); }
.order-card-date { font-size:.68rem; color:var(--clr-text-tertiary); }

.order-card-name { font-size:.88rem; font-weight:700; margin-bottom:.25rem; }
.order-card-items { font-size:.72rem; color:var(--clr-text-tertiary); margin-bottom:.5rem; }

.order-card-footer {
    display:flex; justify-content:space-between; align-items:center;
}
.order-card-total { font-size:1rem; font-weight:800; color:var(--clr-primary); }
.order-card-status {
    padding:.2rem .55rem;
    border-radius:var(--r-full);
    font-size:.62rem; font-weight:700;
    text-transform:uppercase;
    background:rgba(16,185,129,.1); color:var(--clr-success);
}

/* Empty state */
.empty-state {
    text-align:center;
    padding:3rem 1rem;
    color:var(--clr-text-tertiary);
}
.empty-state i { font-size:2.5rem; opacity:.2; margin-bottom:.75rem; display:block; }
.empty-state h3 { font-size:1rem; font-weight:600; margin-bottom:.25rem; color:var(--clr-text-secondary); }
.empty-state p { font-size:.82rem; }

/* Settings */
.settings-grid {
    display:grid; grid-template-columns:1fr;
    gap:1rem;
}
.settings-card {
    background:var(--clr-surface);
    border-radius:var(--r-md);
    border:1px solid var(--clr-border);
    padding:1.25rem;
}
.settings-card h3 {
    font-size:.95rem; font-weight:700;
    display:flex; align-items:center; gap:.5rem;
    margin-bottom:.35rem;
}
.settings-card h3 i { color:var(--clr-primary); }
.settings-card > p { font-size:.78rem; color:var(--clr-text-tertiary); margin-bottom:1rem; }

.settings-card.danger-zone { border-color:rgba(239,68,68,.2); }
.settings-card.danger-zone h3 i { color:var(--clr-danger); }

.settings-input-group {
    margin-bottom:1rem;
}
.settings-input-group label {
    display:block; font-size:.75rem; font-weight:600;
    color:var(--clr-text-secondary);
    margin-bottom:.35rem;
}
.settings-input-group input {
    width:100%;
    padding:.65rem .85rem;
    border:1px solid var(--clr-border);
    border-radius:var(--r-sm);
    font-size:.85rem;
    color:var(--clr-text);
    background:var(--clr-surface);
    outline:none;
}
.settings-input-group input:focus { border-color:var(--clr-primary); }

.settings-actions {
    display:flex; gap:.5rem; flex-wrap:wrap;
}
.settings-btn {
    display:flex; align-items:center; gap:.35rem;
    padding:.55rem 1rem;
    border-radius:var(--r-full);
    font-size:.75rem; font-weight:600;
    transition:all .2s;
}
.settings-btn.primary {
    background:var(--clr-primary); color:#fff;
    box-shadow:0 2px 10px var(--clr-primary-glow);
}
.settings-btn.primary:hover { background:var(--clr-primary-dark); }
.settings-btn.danger {
    background:rgba(239,68,68,.1); color:var(--clr-danger);
    border:1px solid rgba(239,68,68,.15);
}
.settings-btn.danger:hover { background:rgba(239,68,68,.2); }

.info-list { display:flex; flex-direction:column; gap:.5rem; }
.info-item {
    display:flex; justify-content:space-between;
    font-size:.8rem;
    padding:.5rem 0;
    border-bottom:1px solid var(--clr-border);
}
.info-item:last-child { border-bottom:none; }
.info-item .label { color:var(--clr-text-secondary); }
.info-item .value { font-weight:700; }

/* ═══ MODALS ═══ */
.modal {
    position:fixed; inset:0;
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    z-index:1000;
    opacity:0; pointer-events:none;
    transition:opacity .3s;
}
.modal.active { opacity:1; pointer-events:auto; }

.modal-content {
    width:90%; max-width:500px;
    max-height:85vh;
    background:var(--clr-surface);
    border-radius:var(--r-lg);
    display:flex; flex-direction:column;
    overflow:hidden;
    transform:scale(.95);
    transition:transform .3s var(--ease-spring);
}
.modal.active .modal-content { transform:scale(1); }

.modal-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 1.25rem;
    border-bottom:1px solid var(--clr-border);
}
.modal-header h2 {
    font-size:1rem; font-weight:700;
    display:flex; align-items:center; gap:.5rem;
}
.modal-header h2 i { color:var(--clr-primary); }
.modal-close {
    width:32px; height:32px;
    border-radius:50%;
    background:var(--clr-bg-warm);
    display:flex; align-items:center; justify-content:center;
    color:var(--clr-text-secondary);
    transition:all .2s;
}
.modal-close:hover { background:var(--clr-danger); color:#fff; }

.modal-body {
    flex:1; overflow-y:auto;
    padding:1.25rem;
}

/* Mobile nav */
.mobile-nav {
    display:none;
    position:fixed; bottom:0; left:0; right:0;
    z-index:200;
    background:var(--clr-surface);
    border-top:1px solid var(--clr-border);
    padding:.5rem .25rem;
    padding-bottom: max(.5rem, env(safe-area-inset-bottom));
}
.mobile-nav-items {
    display:flex; justify-content:space-around;
}
.mobile-nav-item {
    display:flex; flex-direction:column; align-items:center; gap:.15rem;
    font-size:.6rem; font-weight:600;
    color:var(--clr-text-tertiary);
    padding:.35rem .5rem;
    border-radius:var(--r-sm);
    transition:all .2s;
    min-width:48px;
}
.mobile-nav-item i { font-size:1rem; }
.mobile-nav-item.active { color:var(--clr-primary); }
.mobile-nav-item:hover { color:var(--clr-primary); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
    .sidebar { transform:translateX(-100%); }
    .main-content { margin-left:0; padding:0 1rem 5rem; }
    .mobile-nav { display:block; }
    .stats-grid { grid-template-columns:1fr 1fr; }
}

@media (min-width: 769px) {
    .mobile-nav { display:none !important; }
    .stats-grid { grid-template-columns:repeat(4, 1fr); }
    .charts-row { grid-template-columns:1fr 1fr; }
    .settings-grid { grid-template-columns:repeat(2, 1fr); }
    .photo-orders-grid { grid-template-columns:repeat(2, 1fr); }
}

@media (min-width: 1200px) {
    .main-content { padding:0 2.5rem 2rem; }
}