/* Riurau — Gestor de contenidos (panel interno de administración). Hoja de estilos independiente de styles.css: el CMS es una herramienta de trabajo para el equipo, no el escaparate de la tienda, así que usa un layout de panel (barra lateral + contenido) en vez del mockup de móvil. */ @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap'); :root{ --a-ink:#15130f; --a-ink-dim:#55524a; --a-mute:#8a8578; --a-bg:#f7f6f2; --a-panel:#ffffff; --a-line:#e4dfd0; --a-rust:#c1512c; --a-moss:#5c6a4f; --a-cream:#f3ecdf; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} /* El fondo se fija ya en para que, en la fracción de segundo entre que el navegador pinta la página nueva y que se aplica el resto del CSS (al navegar de un apartado del CMS a otro, con recarga completa de página), no se vea un parpadeo en blanco. */ html{background:var(--a-bg);} body.admin-body{ background:var(--a-bg);color:var(--a-ink); font-family:'Space Grotesk',sans-serif;-webkit-font-smoothing:antialiased; min-height:100vh; /* Entrada suave en cada carga de página — como el CMS es multipágina (cada apartado del menú es una recarga completa, no una SPA), esto evita el "salto" seco de contenido al pulsar un enlace del sidebar. */ animation:adminPageIn .22s ease both; } @keyframes adminPageIn{ from{opacity:0;} to{opacity:1;} } @media (prefers-reduced-motion: reduce){ body.admin-body{animation:none;} } /* ---------- Login ---------- */ .admin-login-wrap{ min-height:100vh;display:flex;align-items:center;justify-content:center; padding:24px;background:linear-gradient(160deg,#15130f 0%,#241f18 55%,#3a2f22 100%); } .admin-login-card{ width:100%;max-width:400px;background:#fff;border-radius:20px; padding:38px 32px;box-shadow:0 40px 90px -24px rgba(0,0,0,.5); } .admin-login-logo{font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;color:var(--a-ink);margin-bottom:2px;} .admin-login-sub{font-size:13.5px;color:var(--a-mute);margin-bottom:26px;} .admin-login-error{ display:none;background:rgba(193,81,44,.1);border:1px solid rgba(193,81,44,.4); color:#8a3f22;font-size:13.5px;border-radius:10px;padding:10px 14px;margin-bottom:16px; } .admin-login-error.show{display:block;} .admin-login-hint{ margin-top:20px;font-size:12.5px;color:var(--a-mute);line-height:1.6; background:var(--a-bg);border:1px dashed var(--a-line);border-radius:10px;padding:12px 14px; } .admin-login-hint b{color:var(--a-ink);} /* ---------- Shell ---------- */ .admin-shell{display:flex;min-height:100vh;} .admin-sidebar{ width:246px;flex-shrink:0;background:#15130f;color:var(--a-cream); padding:24px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto; } .admin-sidebar-logo{font-family:'Unbounded',sans-serif;font-weight:700;font-size:20px;color:#fff;margin-bottom:2px;} .admin-sidebar-sub{font-size:12px;color:#a49c8a;margin-bottom:26px;text-transform:uppercase;letter-spacing:.06em;} .admin-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;} .admin-nav a{ display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px; color:#c9c1b0;text-decoration:none;font-size:14.5px;font-weight:500; transition:background .15s ease,color .15s ease; } .admin-nav a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;flex-shrink:0;} .admin-nav a:hover{background:rgba(255,255,255,.06);color:#f3ecdf;} .admin-nav a.active{background:var(--a-rust);color:#fff;} .admin-sidebar-divider{height:1px;background:rgba(255,255,255,.1);margin:16px 4px;} .admin-sidebar-foot{margin-top:auto;padding-top:16px;} .admin-logout-btn{ display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:1px solid rgba(255,255,255,.16); color:#c9c1b0;border-radius:10px;padding:10px 12px;font-family:'Space Grotesk',sans-serif;font-size:13.5px; cursor:pointer;text-align:left; } .admin-logout-btn:hover{border-color:rgba(255,255,255,.3);color:#f3ecdf;} .admin-back-store{ display:block;font-size:12px;color:#8a8578;margin-top:12px;text-decoration:none; } .admin-back-store:hover{color:#c9c1b0;} .admin-main{flex:1;min-width:0;} .admin-topbar{ display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; padding:20px 30px;border-bottom:1px solid var(--a-line);background:var(--a-panel); position:sticky;top:0;z-index:5; } .admin-topbar h1{font-family:'Unbounded',sans-serif;font-size:21px;margin:0;color:var(--a-ink);} .admin-topbar p{font-size:13.5px;color:var(--a-mute);margin:4px 0 0;} .admin-user-chip{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--a-ink-dim);} .admin-user-avatar{ width:32px;height:32px;border-radius:50%;background:var(--a-rust);color:#fff; display:flex;align-items:center;justify-content:center;font-family:'Unbounded',sans-serif; font-size:13px;font-weight:700;flex-shrink:0; } .admin-content{padding:28px 30px 80px;max-width:1240px;} /* ---------- Tarjetas / stats ---------- */ .admin-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:26px;} .admin-stat{background:var(--a-panel);border:1px solid var(--a-line);border-radius:14px;padding:18px 20px;} .admin-stat .num{font-family:'Unbounded',sans-serif;font-size:28px;font-weight:700;color:var(--a-ink);line-height:1.1;} .admin-stat .label{font-size:12px;color:var(--a-mute);text-transform:uppercase;letter-spacing:.05em;margin-top:6px;} .admin-card{background:var(--a-panel);border:1px solid var(--a-line);border-radius:16px;padding:22px 24px;margin-bottom:22px;} .admin-card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap;} .admin-card-head h2{font-family:'Unbounded',sans-serif;font-size:17px;margin:0;color:var(--a-ink);} .admin-card-head p{font-size:13px;color:var(--a-mute);margin:4px 0 0;} /* ---------- Botones ---------- */ .admin-btn{ display:inline-flex;align-items:center;gap:8px;background:var(--a-rust);color:#fff; font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;padding:10px 18px; border-radius:10px;border:none;cursor:pointer;text-decoration:none;white-space:nowrap; } .admin-btn:hover{background:#a8451f;} .admin-btn-outline{ display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--a-ink); font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:14px;padding:9px 16px; border-radius:10px;border:1px solid var(--a-line);cursor:pointer;text-decoration:none;white-space:nowrap; } .admin-btn-outline:hover{border-color:var(--a-ink-dim);} .admin-btn-sm{padding:6px 12px;font-size:12.5px;border-radius:8px;} .admin-btn-danger{color:#a8451f;border-color:rgba(193,81,44,.4);} .admin-btn[disabled]{opacity:.55;cursor:default;} /* ---------- Tabla ---------- */ .admin-table-wrap{overflow-x:auto;} .admin-table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px;} .admin-table th{ text-align:left;padding:10px 14px;font-size:11px;text-transform:uppercase;letter-spacing:.06em; color:var(--a-mute);border-bottom:1px solid var(--a-line);white-space:nowrap; } .admin-table td{padding:13px 14px;border-bottom:1px solid #f0ecdf;color:var(--a-ink);vertical-align:middle;} .admin-table tr:last-child td{border-bottom:none;} .admin-table tr:hover td{background:#faf9f4;} .admin-table .cell-dim{color:var(--a-mute);font-size:13px;} .admin-table .cell-actions{display:flex;gap:8px;justify-content:flex-end;white-space:nowrap;} .admin-table img.cell-thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;flex-shrink:0;} .admin-table .cell-with-thumb{display:flex;align-items:center;gap:10px;} .admin-empty-row td{text-align:center;color:var(--a-mute);padding:34px 14px;} /* ---------- Badges ---------- */ .admin-badge{ display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px; font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap; } .admin-badge.role-administrador{background:rgba(21,19,15,.08);color:#15130f;} .admin-badge.role-artista{background:rgba(193,81,44,.12);color:#8a3f22;} .admin-badge.role-comprador{background:rgba(92,106,79,.14);color:#3e4a34;} .admin-badge.role-proveedor{background:rgba(90,110,150,.14);color:#2f4666;} .admin-badge.status-pagado{background:rgba(90,110,150,.14);color:#2f4666;} .admin-badge.status-en_preparacion{background:rgba(193,81,44,.12);color:#8a3f22;} .admin-badge.status-enviado{background:rgba(178,140,40,.16);color:#7a5c10;} .admin-badge.status-entregado{background:rgba(92,106,79,.16);color:#3e4a34;} .admin-badge.status-devuelto{background:rgba(90,60,150,.13);color:#4a3480;} .admin-badge.status-cancelado{background:rgba(150,40,40,.12);color:#7a1f1f;} .admin-badge.stock-in{background:rgba(92,106,79,.16);color:#3e4a34;} .admin-badge.stock-order{background:rgba(193,81,44,.12);color:#8a3f22;} .admin-badge.stock-closed{background:rgba(21,19,15,.1);color:#4a473f;} .admin-badge.status-interesado{background:rgba(178,140,40,.16);color:#7a5c10;} .admin-badge.status-ok{background:rgba(92,106,79,.16);color:#3e4a34;} .admin-badge.status-pending{background:rgba(178,140,40,.16);color:#7a5c10;} .admin-badge.status-dim{background:rgba(21,19,15,.06);color:#7a776a;} .admin-badge.status-avisado{background:rgba(70,130,150,.16);color:#2b6474;} .admin-badge.refund-ninguno{background:rgba(21,19,15,.06);color:#7a776a;} .admin-badge.refund-parcial{background:rgba(178,140,40,.16);color:#7a5c10;} .admin-badge.refund-total{background:rgba(150,40,40,.12);color:#7a1f1f;} .admin-badge.stage-idea{background:rgba(21,19,15,.06);color:#7a776a;} .admin-badge.stage-diseno{background:rgba(90,110,150,.14);color:#2f4666;} .admin-badge.stage-fotos_videos{background:rgba(178,140,40,.16);color:#7a5c10;} .admin-badge.stage-aprobacion{background:rgba(193,81,44,.12);color:#8a3f22;} .admin-badge.stage-go_live{background:rgba(92,106,79,.16);color:#3e4a34;} /* ---------- Ideación: navegador de etapas (stepper) ---------- */ .ideation-stepper{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px;} .ideation-step{ padding:9px 16px;border-radius:999px;border:1px solid var(--a-line);background:var(--a-panel); color:var(--a-ink-dim);font-size:13px;font-weight:600;cursor:pointer; transition:background .15s ease,color .15s ease,border-color .15s ease; } .ideation-step:hover{border-color:var(--a-ink-dim);} .ideation-step.is-done{background:rgba(92,106,79,.12);color:#3e4a34;border-color:rgba(92,106,79,.3);} .ideation-step.is-current{background:var(--a-ink);color:#fff;border-color:var(--a-ink);} /* ---------- Ideación: lista de proveedores (checkboxes, selección múltiple) ---------- */ .ideation-proveedor-list{ border:1px solid var(--a-line);border-radius:10px;padding:8px 10px;max-height:150px;overflow-y:auto; display:flex;flex-direction:column;gap:2px;background:var(--a-panel); } .ideation-proveedor-list label{ display:flex;align-items:center;gap:8px;font-size:13px;font-weight:normal;color:var(--a-ink); padding:5px 2px;cursor:pointer;margin-bottom:0; } .ideation-proveedor-list input[type="checkbox"]{margin:0;} .ideation-proveedor-list .none{font-size:12px;color:var(--a-mute);padding:4px 2px;} /* ---------- Ideación: miniaturas con icono de descarga + lightbox ---------- */ .riu-thumb-wrap{position:relative;display:inline-block;} .riu-download-btn{ position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%; background:rgba(21,19,15,.72);border:none;display:flex;align-items:center;justify-content:center; cursor:pointer;padding:0; } .riu-download-btn svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2;} .riu-download-btn:hover{background:rgba(21,19,15,.9);} .riu-lightbox-img{cursor:zoom-in;} .admin-lightbox-backdrop{ display:none;position:fixed;inset:0;background:rgba(15,13,10,.9);z-index:9999; align-items:center;justify-content:center;flex-direction:column;padding:32px; } .admin-lightbox-backdrop.open{display:flex;} .admin-lightbox-backdrop img{max-width:90vw;max-height:78vh;object-fit:contain;border-radius:10px;} .admin-lightbox-close{ position:absolute;top:20px;right:24px;width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.12);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center; } .admin-lightbox-close svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;} .admin-lightbox-download{ margin-top:18px;display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px; background:#fff;color:var(--a-ink);font-size:13px;font-weight:600;text-decoration:none; } .admin-lightbox-download svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;} /* ---------- Formularios / modal ---------- */ .admin-field{margin-bottom:14px;} .admin-field label{ display:block;font-size:12.5px;font-weight:600;color:var(--a-ink-dim);margin-bottom:6px; } .admin-field .hint{font-size:11.5px;color:var(--a-mute);margin-top:5px;line-height:1.5;} .admin-field input[type="text"], .admin-field input[type="email"], .admin-field input[type="password"], .admin-field input[type="tel"], .admin-field input[type="number"], .admin-field input[type="url"], .admin-field select, .admin-field textarea{ width:100%;background:var(--a-bg);border:1px solid var(--a-line);border-radius:9px; padding:10px 12px;color:var(--a-ink);font-family:'Space Grotesk',sans-serif;font-size:14.5px;outline:none; } .admin-field input:focus,.admin-field select:focus,.admin-field textarea:focus{border-color:var(--a-rust);} .admin-field textarea{resize:vertical;min-height:80px;} .admin-field-row{display:flex;gap:12px;} .admin-field-row .admin-field{flex:1;min-width:0;} .admin-field input[type="file"]{ width:100%;font-family:'Space Grotesk',sans-serif;font-size:13px;color:var(--a-ink-dim); background:var(--a-bg);border:1px dashed var(--a-line);border-radius:9px;padding:10px 12px; } .admin-file-preview{margin-top:8px;display:flex;align-items:center;gap:10px;} .admin-file-preview img{width:48px;height:48px;border-radius:8px;object-fit:cover;border:1px solid var(--a-line);} .admin-file-preview video{width:72px;height:48px;border-radius:8px;object-fit:cover;border:1px solid var(--a-line);} .admin-file-preview .none{font-size:12px;color:var(--a-mute);} .admin-file-preview .riu-thumb-wrap .riu-download-btn{width:18px;height:18px;top:1px;right:1px;} .admin-file-preview .riu-thumb-wrap .riu-download-btn svg{width:9px;height:9px;} .admin-modal-backdrop{ position:fixed;inset:0;background:rgba(21,19,15,.55);z-index:40; display:flex;align-items:flex-start;justify-content:center;padding:36px 16px;overflow-y:auto; opacity:0;pointer-events:none;transition:opacity .2s ease; } .admin-modal-backdrop.open{opacity:1;pointer-events:auto;} .admin-modal{ width:100%;max-width:560px;background:#fff;border-radius:18px;padding:28px 26px; box-shadow:0 40px 90px -24px rgba(0,0,0,.4); transform:translateY(14px);transition:transform .2s ease; } .admin-modal-backdrop.open .admin-modal{transform:translateY(0);} .admin-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;} .admin-modal-head h3{font-family:'Unbounded',sans-serif;font-size:17px;margin:0;color:var(--a-ink);} .admin-modal-close{cursor:pointer;color:var(--a-mute);background:none;border:none;padding:4px;} .admin-modal-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;} .admin-modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--a-line);} .admin-modal-scroll{max-height:60vh;overflow-y:auto;padding-right:4px;margin-right:-4px;} /* ---------- Toast + log de actividad ---------- */ .admin-toast{ position:fixed;bottom:22px;right:22px;z-index:60;max-width:340px; background:#15130f;color:#f3ecdf;border-radius:12px;padding:13px 16px;font-size:13.5px;line-height:1.5; box-shadow:0 20px 50px -12px rgba(0,0,0,.5); opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .25s ease,transform .25s ease; } .admin-toast.show{opacity:1;transform:translateY(0);} .admin-toast b{color:#f0a480;} .admin-log{list-style:none;margin:0;padding:0;max-height:280px;overflow-y:auto;} .admin-log li{ display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #f0ecdf;font-size:13px;color:var(--a-ink-dim); } .admin-log li:last-child{border-bottom:none;} .admin-log .dot{width:7px;height:7px;border-radius:50%;background:var(--a-rust);margin-top:6px;flex-shrink:0;} .admin-log .time{font-size:11px;color:var(--a-mute);white-space:nowrap;margin-right:4px;} .admin-order-history{list-style:none;margin:0;padding:0;} .admin-order-history li{display:flex;gap:10px;padding:8px 0;font-size:13px;color:var(--a-ink-dim);border-bottom:1px solid #f0ecdf;} .admin-order-history li:last-child{border-bottom:none;} .admin-order-history .time{color:var(--a-mute);font-size:11.5px;min-width:120px;} .admin-inline-select{ background:var(--a-bg);border:1px solid var(--a-line);border-radius:8px;padding:6px 8px; font-family:'Space Grotesk',sans-serif;font-size:13px;color:var(--a-ink); } /* ---------- Responsive: sidebar -> barra superior en pantallas estrechas ---------- */ @media (max-width:860px){ .admin-shell{flex-direction:column;} .admin-sidebar{ width:100%;height:auto;position:sticky;top:0;flex-direction:row;align-items:center; padding:14px 16px;overflow-x:auto;z-index:20; } .admin-sidebar-logo,.admin-sidebar-sub{display:none;} .admin-sidebar-divider{display:none;} .admin-nav{flex-direction:row;gap:6px;} .admin-nav a{padding:8px 12px;white-space:nowrap;} .admin-nav a span.nav-label{display:inline;} .admin-sidebar-foot{margin-top:0;margin-left:auto;padding-top:0;display:flex;align-items:center;gap:10px;} .admin-back-store{display:none;} .admin-logout-btn{width:auto;padding:8px 12px;} .admin-content{padding:20px 16px 60px;} .admin-topbar{padding:16px;} }