/* ============================================================
   admin.css — Panel administrativo Renacer Boutique
   Se apoya en las variables del sistema de diseño de style.css
   ============================================================ */

/* ---- Inputs (el panel no trae contacto.css) ---- */
.admin .input,
.admin select.input,
.admin textarea.input{
  width:100%;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  background:#fff;
  color:var(--ink);
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  padding:12px 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.admin .input:focus{
  outline:none;
  border-color:rgba(248,96,168,.55);
  box-shadow:0 0 0 4px rgba(248,96,168,.16);
}
.admin label.tiny{margin-bottom:6px; display:block;}

/* ---- Layout general ---- */
.admin-login{
  max-width:460px;
  margin:0 auto;
}
.admin-app__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.admin-app__head h1{margin:0; font-size:clamp(26px,3vw,34px); letter-spacing:-.02em;}
.admin-app__head p{margin:6px 0 0;}
@media (max-width:768px){
  .admin-app__head{flex-direction:column; align-items:flex-start;}
  .admin-app__head .btn{width:100%;}
}

/* ---- Tabs ---- */
.admin-tabs{
  display:flex;
  gap:8px;
  margin-bottom:18px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  box-shadow:var(--shadowSoft);
  width:fit-content;
  flex-wrap:wrap;
}
.admin-tabs button{
  border:0;
  background:transparent;
  padding:10px 18px;
  border-radius:999px;
  font-weight:950;
  font-size:14px;
  color:var(--muted);
  cursor:pointer;
  font-family:inherit;
  transition:background .15s ease,color .15s ease;
}
.admin-tabs button:hover{color:var(--brandDark);}
.admin-tabs button.is-active{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;
}
@media (max-width:560px){
  .admin-tabs{width:100%; border-radius:18px;}
  .admin-tabs button{flex:1; text-align:center; padding:11px 8px; font-size:13px;}
}

/* ---- Stats / Dashboard ---- */
.admin-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:20px;
}
.admin-stat{
  background:rgba(255,255,255,.82);
  border:1px solid var(--line);
  border-radius:var(--radiusLG);
  box-shadow:var(--shadowSoft);
  padding:18px;
}
.admin-stat__label{font-size:13px; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}
.admin-stat__value{font-size:34px; font-weight:1000; letter-spacing:-.02em; margin-top:4px;}
.admin-stat__value--brand{color:var(--brandDark);}
.admin-stat--ok{border-left:5px solid #2ecc71;}
.admin-stat--sold{border-left:5px solid #7f8c8d;}
.admin-stat--hold{border-left:5px solid #f39c12;}
.admin-stat--all{border-left:5px solid var(--brand);}
@media (max-width:900px){
  .admin-stats{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .admin-stats{grid-template-columns:1fr 1fr; gap:10px;}
  .admin-stat{padding:14px;}
  .admin-stat__value{font-size:26px;}
}

.admin-recent h3{margin:0 0 10px; font-size:18px;}
.admin-recent__list{display:grid; gap:10px;}
.admin-recent__item{
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px 12px;
  box-shadow:var(--shadowSoft);
}
.admin-recent__img{width:46px; height:46px; border-radius:12px; object-fit:cover; border:1px solid var(--line); background:#fff;}
.admin-recent__info{flex:1; min-width:0;}
.admin-recent__info strong{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.admin-recent__info span{font-size:13px; color:var(--muted); font-weight:800;}

/* ---- Barra de búsqueda / filtros ---- */
.admin-filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:16px;
}
.admin-filters__search{flex:1; min-width:220px; position:relative;}
.admin-filters select{width:auto; min-width:150px;}
.admin-filters .count{margin-left:auto; font-weight:900; color:var(--muted); font-size:14px; white-space:nowrap;}
@media (max-width:560px){
  .admin-filters select{width:100%;}
  .admin-filters .count{width:100%; margin:0; text-align:center;}
}

/* ---- Lista de productos ---- */
.admin-list{display:grid; gap:10px;}
.admin-row{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) 110px 70px 96px 110px auto;
  gap:12px;
  align-items:center;
  background:rgba(255,255,255,.82);
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px 12px;
  box-shadow:var(--shadowSoft);
}
.admin-row__img{width:64px; height:64px; border-radius:12px; object-fit:cover; border:1px solid var(--line); background:#fff;}
.admin-row__title strong{display:block; font-size:15px;}
.admin-row__title span{font-size:12px; font-weight:900; color:var(--muted); letter-spacing:.03em;}
.admin-row__cell{font-weight:900; font-size:14px;}
.admin-row__cell .muted{font-size:12px; font-weight:800; display:block;}
.admin-row__actions{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
.admin-row__actions .icon-btn{width:38px; height:38px; border-radius:12px; font-size:15px; background:rgba(255,255,255,.9);}
.admin-row__actions .icon-btn--danger{border-color:rgba(231,76,60,.35); color:#c0392b;}
.admin-row__actions .icon-btn--danger:hover{background:#c0392b; color:#fff; border-color:#c0392b;}
@media (max-width:900px){
  .admin-row{grid-template-columns:56px minmax(0,1fr) auto; row-gap:8px;}
  .admin-row__img{width:56px; height:56px;}
  .admin-row__cell.price{display:none;}
  .admin-row__actions{grid-column:2/-1; justify-content:flex-start;}
  .admin-row__actions .icon-btn{width:44px; height:44px;}
}

/* ---- Badges de estado ---- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:950; letter-spacing:.02em;
  border:1px solid transparent;
}
.badge::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor;}
.badge--disponible{background:rgba(46,204,113,.14); color:#1e8a4f; border-color:rgba(46,204,113,.35);}
.badge--vendido{background:rgba(127,140,141,.16); color:#5b6569; border-color:rgba(127,140,141,.35);}
.badge--reservado{background:rgba(243,156,18,.16); color:#b3730a; border-color:rgba(243,156,18,.4);}

/* ---- Selector de estado (form) ---- */
.estado-seg{
  display:flex; gap:8px; flex-wrap:wrap;
}
.estado-seg button{
  flex:1; min-width:120px;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.8);
  font-weight:950; font-family:inherit; font-size:13px;
  cursor:pointer; color:var(--muted);
  transition:all .15s ease;
}
.estado-seg button.is-active{color:#fff; border-color:transparent;}
.estado-seg button[data-val="disponible"].is-active{background:linear-gradient(135deg,#2ecc71,#27ae60);}
.estado-seg button[data-val="reservado"].is-active{background:linear-gradient(135deg,#f39c12,#e67e22);}
.estado-seg button[data-val="vendido"].is-active{background:linear-gradient(135deg,#95a5a6,#7f8c8d);}

/* ---- Condición 1/10 ---- */
.cond{display:flex; gap:6px; flex-wrap:wrap;}
.cond button{
  width:46px; height:46px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.85);
  font-weight:1000; font-size:15px; font-family:inherit;
  cursor:pointer; color:var(--muted);
  transition:all .15s ease;
}
.cond button:hover{border-color:rgba(248,96,168,.45); color:var(--brandDark);}
.cond button.is-active{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff; border-color:transparent;
  box-shadow:0 10px 20px rgba(248,96,168,.28);
}
.cond__readout{margin-top:8px; font-weight:950; font-size:14px;}
.cond__readout strong{color:var(--brandDark);}

/* ---- Formulario ---- */
.admin-form{display:grid; gap:14px;}
.admin-form__grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:640px){
  .admin-form__grid{grid-template-columns:1fr;}
}
.admin-form__full{grid-column:1/-1;}
.admin-form__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px;}
.admin-form__actions .btn{min-width:160px;}
@media (max-width:560px){
  .admin-form__actions .btn{flex:1;}
}

/* ---- Subida de imágenes ---- */
.upload-zone{
  display:grid; place-items:center; gap:6px;
  border:2px dashed rgba(248,96,168,.4);
  background:rgba(248,96,168,.05);
  border-radius:18px;
  padding:26px 16px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.upload-zone:hover{border-color:var(--brand); background:rgba(248,96,168,.09);}
.upload-zone.is-drag{border-color:var(--brand); background:rgba(248,96,168,.14);}
.upload-zone strong{font-size:15px;}
.upload-zone span{font-size:13px; color:var(--muted); font-weight:800;}

.grid-previews{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:12px;
  margin-top:14px;
}
.grid-preview{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadowSoft);
  background:#fff;
}
.grid-preview img{width:100%; height:150px; object-fit:cover; display:block;}
.grid-preview__order{
  position:absolute; top:8px; left:8px;
  width:26px; height:26px;
  border-radius:999px;
  background:rgba(27,16,32,.72);
  color:#fff;
  display:grid; place-items:center;
  font-size:12px; font-weight:1000;
}
.grid-preview__tools{
  display:flex; justify-content:space-between; gap:4px;
  padding:6px;
  background:rgba(248,232,240,.6);
}
.grid-preview__tools button{
  flex:1;
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  padding:6px 4px;
  font-size:13px; font-weight:950;
  cursor:pointer; font-family:inherit;
  color:var(--muted);
}
.grid-preview__tools button:hover{color:var(--brandDark); border-color:rgba(248,96,168,.45);}
.grid-preview__tools button.danger:hover{color:#c0392b; border-color:rgba(231,76,60,.4);}
.grid-preview__tools button:disabled{opacity:.35; cursor:not-allowed;}

/* ---- Paginación ---- */
.admin-pagination{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:18px;
}
.admin-pagination button{
  border:1px solid var(--line);
  background:rgba(255,255,255,.85);
  border-radius:14px;
  padding:10px 16px;
  font-weight:950; font-family:inherit; cursor:pointer;
  box-shadow:var(--shadowSoft);
}
.admin-pagination button:disabled{opacity:.4; cursor:not-allowed;}
.admin-pagination span{font-weight:950; color:var(--muted); font-size:14px;}

/* ---- Estados vacíos ---- */
.admin-empty{
  text-align:center;
  padding:40px 16px;
  border-radius:var(--radiusLG);
  border:1px dashed var(--line);
  background:rgba(255,255,255,.5);
}
.admin-empty strong{display:block; font-size:17px; margin-bottom:6px;}
.admin-empty p{margin:0; color:var(--muted); font-weight:800;}

/* ---- Toast ---- */
.toast{
  position:fixed; left:50%; bottom:24px; z-index:2000;
  transform:translate(-50%,20px);
  opacity:0; pointer-events:none;
  padding:13px 20px;
  border-radius:14px;
  font-weight:950; font-size:14px;
  color:#fff;
  box-shadow:var(--shadow);
  transition:all .25s ease;
  max-width:min(90vw,480px);
  text-align:center;
}
.toast.is-visible{opacity:1; transform:translate(-50%,0);}
.toast--success{background:linear-gradient(135deg,#2ecc71,#27ae60);}
.toast--error{background:linear-gradient(135deg,#e74c3c,#c0392b);}

/* ---- Modal ---- */
.modal-backdrop{
  position:fixed; inset:0; z-index:1500;
  background:rgba(27,16,32,.5);
  display:grid; place-items:center;
  padding:16px;
}
.modal{
  width:min(560px,100%);
  max-height:88vh;
  overflow:auto;
  background:#fff;
  border-radius:var(--radiusXL);
  box-shadow:var(--shadow);
  padding:20px;
}
.modal__title{margin:0 0 6px; font-size:20px;}
.modal__body{color:var(--muted); font-weight:800; line-height:1.6;}
.modal__body p{margin:4px 0;}
.modal__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; justify-content:flex-end;}
.modal__actions .btn{min-width:130px;}
@media (max-width:560px){
  .modal__actions .btn{flex:1;}
}
.modal__gallery{display:grid; gap:10px; margin-top:14px;}
.modal__gallery img{
  width:100%;
  max-height:420px;
  object-fit:contain;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
}
.modal__thumbs{display:flex; gap:8px; flex-wrap:wrap;}
.modal__thumbs img{width:64px; height:64px; object-fit:cover; border-radius:12px; border:1px solid var(--line); cursor:pointer;}
.modal__thumbs img.is-active{border:2px solid var(--brand);}
.modal__meta{display:grid; gap:8px; margin-top:14px;}
.modal__meta div{display:flex; justify-content:space-between; gap:10px; font-weight:800;}
.modal__meta div span:first-child{color:var(--muted);}
.modal__meta div strong{text-align:right;}

/* ---- Login ---- */
.admin-login .contactBox{padding:22px;}
.admin-login .btn{width:100%; font-size:15px; padding:13px;}

/* ---- Select de estado dentro de cada fila ---- */
.admin-row .badge-select{
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 26px 6px 14px;
  font-family:inherit;
  font-size:12px;
  font-weight:950;
  letter-spacing:.02em;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236E5B69' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  display:inline-block;
}
.admin-row .badge-select.badge::before{display:none;}
.admin-row .badge-select:focus{outline:none; border-color:rgba(248,96,168,.55);}

/* ---- Botones de acción en filas ---- */
.admin-row__actions .btn--small{white-space:nowrap; font-size:12px; padding:8px 10px;}
.admin-row__actions .btn--small[data-act="eliminar"]:hover{background:#c0392b; border-color:#c0392b; color:#fff;}