html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
:root{--ink:#19172a;--muted:#706a80;--mora:#6c2bd9;--azul:#2455f4;--aqua:#18b6c9;--line:rgba(25,23,42,.11);--bg:#fbf7ff;--paper:#fff;--danger:#c62828;--ok:#138a55;--shadow:0 22px 70px rgba(63,45,112,.14)}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:radial-gradient(circle at 10% 0%,rgba(108,43,217,.14),transparent 30rem),radial-gradient(circle at 90% 10%,rgba(24,182,201,.15),transparent 30rem),var(--bg)}
a{text-decoration:none;color:inherit}.wrap{width:min(1180px,calc(100% - 30px));margin:0 auto}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card,.panel,.table-card{background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.92);box-shadow:var(--shadow);border-radius:30px}
.login-card{width:min(430px,100%);padding:30px}.logo{width:200px;margin:0 auto 18px;border-radius:18px}.eyebrow{display:inline-flex;padding:8px 12px;border-radius:999px;background:#f0e9ff;color:var(--mora);font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
h1{font-size:clamp(2rem,5vw,3.5rem);line-height:.96;letter-spacing:-.06em;margin:14px 0 10px}p{color:var(--muted);line-height:1.65}.field{display:grid;gap:7px;margin:14px 0}.field label{font-weight:900;color:#3f3850}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:16px;min-height:48px;padding:12px 14px;outline:0}.field textarea{min-height:110px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(108,43,217,.45);box-shadow:0 0 0 4px rgba(108,43,217,.10)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 16px;border:0;border-radius:999px;cursor:pointer;font-weight:950;transition:.22s ease}.btn:hover{transform:translateY(-1px)}.btn-primary{background:linear-gradient(135deg,var(--mora),var(--azul),var(--aqua));color:#fff;box-shadow:0 15px 32px rgba(36,85,244,.24)}.btn-dark{background:#19172a;color:#fff}.btn-light{background:#f2edff;color:var(--mora)}.btn-danger{background:#fff0f0;color:var(--danger)}.btn-ok{background:#eafff4;color:var(--ok)}.btn-block{width:100%}.alert{padding:13px 15px;border-radius:16px;margin:12px 0;font-weight:800}.alert-error{background:#fff0f0;color:var(--danger)}.alert-ok{background:#eafff4;color:var(--ok)}
.topbar{position:sticky;top:0;z-index:30;background:rgba(251,247,255,.78);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}.topbar img{width:154px;border-radius:16px}.topbar-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:20px;padding:28px 0}.panel{padding:24px;align-self:start;position:sticky;top:92px}.panel h2,.table-card h2{margin:0 0 8px;font-size:1.7rem;letter-spacing:-.04em}.hint{font-size:.92rem;color:var(--muted);margin-top:5px}.preview{display:grid;gap:9px;margin-top:10px}.preview img{width:160px;aspect-ratio:1/1;object-fit:cover;border-radius:20px;background:#f2edff;border:1px solid var(--line)}.checks{display:flex;align-items:center;gap:10px;margin:16px 0}.checks input{width:18px;height:18px}
.table-card{padding:18px;overflow:hidden}.table-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px 18px}.table-wrap{overflow:auto;border-radius:20px;border:1px solid var(--line)}table{width:100%;border-collapse:collapse;background:#fff}th,td{text-align:left;padding:13px;border-bottom:1px solid var(--line);vertical-align:middle}th{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#645d74;background:#fbf9ff}td{font-size:.95rem}.product-thumb{width:62px;height:62px;object-fit:cover;border-radius:16px;background:#f6f2ff}.status{font-weight:900;border-radius:999px;padding:6px 9px;display:inline-flex}.status.on{background:#eafff4;color:var(--ok)}.status.off{background:#f1f1f1;color:#777}.actions{display:flex;gap:7px;flex-wrap:wrap}.actions form{margin:0}.empty{padding:32px;text-align:center;color:var(--muted)}
@media(max-width:900px){.grid{grid-template-columns:1fr}.panel{position:relative;top:auto}.topbar-inner{align-items:flex-start;flex-direction:column}.topbar-actions{justify-content:flex-start}}


.settings-wrap{min-height:calc(100vh - 90px);display:grid;place-items:start center;padding:38px 0}
.settings-panel{width:min(620px,100%);position:relative;top:auto}
.security-note{margin-top:18px;padding:15px;border-radius:18px;background:#f8f4ff;border:1px solid var(--line);color:#4d4560;line-height:1.6}
.security-note span{color:var(--muted);font-size:.92rem}

.status.fav{background:#fbd5e5;color:#63357b}

.login-back-home{margin-top:10px;text-align:center}



/* v4.8 - Login limpio */
.login-card form .btn + .btn,
.login-back-home{
  margin-top:16px;
}

.login-back-home{
  text-align:center;
  min-height:48px;
}

.login-card .hint{
  display:none;
}

.login-card form{
  margin-top:18px;
}



/* v4.9 - Iconografía en tabla admin */
.icon-badge{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:1.15rem;
  font-weight:900;
  line-height:1;
  border:1px solid transparent;
}

.icon-badge.ok{
  background:#eafff4;
  color:#138a55;
}

.icon-badge.off{
  background:#fff0f0;
  color:#c62828;
}

.icon-badge.fav{
  background:#fff1c9;
  color:#c58a00;
}

.icon-badge.not-fav{
  background:#f4f2f7;
  color:#8d86a0;
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.icon-action{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:0;
  cursor:pointer;
  text-decoration:none;
  font-size:1.15rem;
  font-weight:900;
  line-height:1;
  transition:.22s ease;
}

.icon-action:hover{
  transform:translateY(-1px);
}

.icon-action.edit{
  background:#f2edff;
  color:#6c2bd9;
}

.icon-action.delete{
  background:#fff0f0;
  color:#c62828;
}

.actions form{
  margin:0;
}



/* v4.10 - Iconos admin más visuales y boutique */
.icon-badge{
  width:46px !important;
  height:46px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.85) !important;
  box-shadow:0 10px 24px rgba(63,45,112,.10) !important;
  font-size:0 !important;
  line-height:1 !important;
}

.icon-badge svg{
  width:21px;
  height:21px;
  display:block;
  fill:currentColor;
}

.icon-badge.ok{
  background:linear-gradient(135deg,#ddffe9,#a9f4c8) !important;
  color:#11864e !important;
}

.icon-badge.off{
  background:linear-gradient(135deg,#ffe7e7,#ffc1c1) !important;
  color:#c62828 !important;
}

.icon-badge.fav{
  background:linear-gradient(135deg,#fff3c8,#ffd66b) !important;
  color:#9d6b00 !important;
}

.icon-badge.not-fav{
  background:linear-gradient(135deg,#f7f1ff,#e9ddf6) !important;
  color:#7b668d !important;
}

.actions{
  display:flex !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
}

.icon-action{
  width:46px !important;
  height:46px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.85) !important;
  cursor:pointer !important;
  text-decoration:none !important;
  font-size:0 !important;
  line-height:1 !important;
  transition:.22s ease !important;
  box-shadow:0 10px 24px rgba(63,45,112,.10) !important;
}

.icon-action svg{
  width:20px;
  height:20px;
  display:block;
  fill:currentColor;
}

.icon-action:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 14px 30px rgba(63,45,112,.16) !important;
}

.icon-action.edit{
  background:linear-gradient(135deg,#f2e8ff,#d9c5ff) !important;
  color:#6c2bd9 !important;
}

.icon-action.delete{
  background:linear-gradient(135deg,#ffe7e7,#ffc7c7) !important;
  color:#c62828 !important;
}

.actions form{
  margin:0 !important;
}

.table-wrap table td:nth-child(5),
.table-wrap table td:nth-child(6),
.table-wrap table td:nth-child(7){
  vertical-align:middle;
}

@media(max-width:760px){
  .icon-badge,
  .icon-action{
    width:42px !important;
    height:42px !important;
    border-radius:15px !important;
  }

  .icon-badge svg,
  .icon-action svg{
    width:19px;
    height:19px;
  }
}



/* v4.11 - Admin listado primero + formulario modal */
.admin-products-page{
  padding:28px 0 44px;
}

.admin-table-full{
  width:100%;
}

.admin-table-full .table-head{
  align-items:center;
}

.empty h3{
  margin:0 0 8px;
  font-size:1.35rem;
  letter-spacing:-.04em;
}

.empty p{
  margin:0 0 18px;
}

.admin-form-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(25,23,42,.52);
  backdrop-filter:blur(9px);
}

.admin-form-modal{
  width:min(920px,100%);
  max-height:calc(100vh - 48px);
  overflow:auto;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 34px 120px rgba(25,23,42,.32);
  border-radius:32px;
  padding:26px;
}

.admin-form-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:10px;
}

.admin-form-head h2{
  margin:10px 0 0;
  font-size:2rem;
  letter-spacing:-.055em;
}

.modal-x{
  width:46px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#f2edff;
  color:var(--mora);
  font-size:2rem;
  line-height:1;
  font-weight:700;
  flex-shrink:0;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 14px;
}

.modal-checks{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:18px 0;
}

.modal-checks .checks{
  margin:0;
  padding:14px;
  border-radius:18px;
  background:#fbf9ff;
  border:1px solid var(--line);
}

.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-top:22px;
}

.admin-form-modal::-webkit-scrollbar{
  width:10px;
}

.admin-form-modal::-webkit-scrollbar-track{
  background:rgba(108,43,217,.08);
  border-radius:999px;
  margin:18px 0;
}

.admin-form-modal::-webkit-scrollbar-thumb{
  background:rgba(108,43,217,.32);
  border-radius:999px;
  border:2px solid rgba(255,255,255,.8);
}

@media(max-width:760px){
  .admin-form-overlay{
    padding:12px;
    place-items:start center;
  }

  .admin-form-modal{
    max-height:calc(100vh - 24px);
    border-radius:24px;
    padding:18px;
  }

  .form-grid,
  .modal-checks{
    grid-template-columns:1fr;
  }

  .admin-form-head h2{
    font-size:1.55rem;
  }

  .modal-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .modal-actions .btn{
    width:100%;
  }
}



/* v4.12 - Colores del admin alineados a la paleta Mora Azul */
:root{
  --ink:#2f2435 !important;
  --muted:#75667f !important;
  --mora:#81638b !important;
  --mora-soft:#b695c0 !important;
  --lav:#dac9df !important;
  --pink:#f7bfd8 !important;
  --blush:#fbd5e5 !important;
  --line:rgba(129,99,139,.14) !important;
  --bg:#fcf8fb !important;
  --paper:#ffffff !important;
  --danger:#b45b74 !important;
  --ok:#638b69 !important;
  --shadow:0 22px 70px rgba(93,66,104,.14) !important;
}

body{
  background:
    radial-gradient(circle at 10% 0%, rgba(182,149,192,.18), transparent 30rem),
    radial-gradient(circle at 90% 10%, rgba(247,191,216,.16), transparent 30rem),
    var(--bg) !important;
}

.eyebrow{
  background:#f2eaf4 !important;
  color:var(--mora) !important;
}

.topbar{
  background:rgba(252,248,251,.82) !important;
  border-bottom:1px solid var(--line) !important;
}

.topbar-actions{
  gap:10px !important;
}

.btn{
  border-radius:999px !important;
  min-height:46px !important;
  padding:12px 18px !important;
  box-shadow:none !important;
  border:1px solid transparent !important;
}

.btn-primary{
  background:linear-gradient(135deg, #81638b, #b695c0) !important;
  color:#fff !important;
  box-shadow:0 16px 30px rgba(129,99,139,.22) !important;
}

.btn-primary:hover{
  filter:brightness(1.02);
  transform:translateY(-1px);
}

.btn-dark{
  background:#81638b !important;
  color:#fff !important;
  box-shadow:0 14px 28px rgba(129,99,139,.18) !important;
}

.btn-light{
  background:#f2eaf4 !important;
  color:#81638b !important;
  border-color:rgba(129,99,139,.10) !important;
}

.btn-danger{
  background:#fbd5e5 !important;
  color:#9a5973 !important;
  border-color:rgba(154,89,115,.08) !important;
}

.btn-ok{
  background:#eaf6ec !important;
  color:#5d7e62 !important;
  border-color:rgba(99,139,105,.10) !important;
}

.btn-light:hover,
.btn-danger:hover,
.btn-dark:hover{
  transform:translateY(-1px);
}

.alert{
  border:1px solid transparent;
}

.alert-error{
  background:#fdf0f4 !important;
  color:#9a5973 !important;
  border-color:rgba(154,89,115,.10) !important;
}

.alert-ok{
  background:#f3edf7 !important;
  color:#81638b !important;
  border-color:rgba(129,99,139,.10) !important;
}

.login-card,.panel,.table-card,.admin-form-modal{
  background:rgba(255,255,255,.9) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:var(--shadow) !important;
}

.table-head .btn-primary{
  background:linear-gradient(135deg, #81638b, #b695c0) !important;
}

.modal-x{
  background:#f2eaf4 !important;
  color:#81638b !important;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:rgba(129,99,139,.45) !important;
  box-shadow:0 0 0 4px rgba(182,149,192,.18) !important;
}

.checks{
  border-color:rgba(129,99,139,.10) !important;
}

.checks input{
  accent-color:#81638b;
}

/* un poquito más boutique en iconos */
.icon-action.edit{
  background:linear-gradient(135deg,#f2eaf4,#e7d9ec) !important;
  color:#81638b !important;
}

.icon-action.delete{
  background:linear-gradient(135deg,#fdf0f4,#f9dce8) !important;
  color:#9a5973 !important;
}

.icon-badge.not-fav{
  background:linear-gradient(135deg,#f2eaf4,#e9deef) !important;
  color:#81638b !important;
}

.icon-badge.fav{
  background:linear-gradient(135deg,#fdeef5,#f7bfd8) !important;
  color:#9a5973 !important;
}