/* =========================================================
   DASHBOARD.CSS — Responsive + Tabs scrollables + Modals
   ========================================================= */

/* Anti-zoom y box model seguro */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; font-size:100%; }
*,*::before,*::after{ box-sizing:border-box; }
html,body{ width:100%; overflow-x:hidden; }

/* Tokens suaves */
:root{
  --text:#333;
  --muted:#777;
  --border:#e6e6e6;
  --bg:#fafafa;
  --card:#ffffff;
  --brand:#5e2ca5;
  --primary:#888;
  --shadow:0 6px 20px rgba(0,0,0,.06);
}

/* ============ Layout base ============ */
.dashboard-container{ max-width:980px; margin:2rem auto; padding:0 16px; }
.dashboard-title{ color:#aaa; text-align:center; margin-bottom:1rem; font-size:2rem; }
.dashboard-content{
  padding:1.2rem; background:var(--bg); border:1px solid var(--border);
  border-radius:10px; box-shadow:var(--shadow);
}

/* ============ Tabs scrollables (chips) ============ */
.dashboard-tabs{
  display:flex; align-items:center; gap:.5rem; list-style:none;
  padding:0 .5rem .6rem; margin:0 0 1rem; border-bottom:1px solid var(--border);
  overflow-x:auto; overflow-y:hidden; white-space:nowrap; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  mask-image:linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.dashboard-tabs::-webkit-scrollbar{ height:6px; }
.dashboard-tabs::-webkit-scrollbar-thumb{ background:#d9d9d9; border-radius:10px; }
.dashboard-tabs li{ flex:0 0 auto; scroll-snap-align:center; border-bottom:3px solid transparent; padding:.4rem 0 .35rem; }
.dashboard-tabs li a{
  display:inline-block; text-decoration:none; color:#888; background:#fff; border:1px solid var(--border);
  padding:.5rem .85rem; border-radius:999px; font-weight:600; line-height:1;
}
.dashboard-tabs li.active{ border-bottom-color:#888; }
.dashboard-tabs li.active a{ color:#333; border-color:#cfcfcf; }

@media (max-width:640px){ .dashboard-tabs{ gap:.35rem; padding:0 .25rem .5rem; } .dashboard-tabs li a{ padding:.45rem .7rem; font-size:.9rem; } }
@media (max-width:420px){ .dashboard-tabs li a{ padding:.4rem .6rem; font-size:.85rem; } }

/* ============ Órdenes (expandibles) ============ */
.order-items{ list-style:none; padding-left:0; margin:0; }
.order-item-entry{ margin-bottom:1rem; }
.order-entry{ padding-bottom:1rem; border-bottom:1px solid #ccc; }
.order-entry:last-child{ border-bottom:none; }

.order-item-info{ display:flex; align-items:flex-start; gap:1rem; cursor:pointer; }
.order-item-text{ display:flex; flex-direction:column; align-items:flex-start; }
.order-item-img{ max-width:70px; border-radius:6px; transition:transform .2s, box-shadow .2s; }
.order-item-img:hover{ transform:scale(1.05); box-shadow:0 3px 8px rgba(0,0,0,.15); }
.order-item-name{ font-weight:700; color:#555; text-decoration:none; }
.order-item-name:hover{ text-decoration:underline; }
.order-item-price{ font-size:.9rem; color:#666; }

/* Opciones (orden / cart / wishlist) */
.order-item-options,
.cart-item-options{
  display:none; margin-top:.6rem; padding:.9rem 1rem; color:#444;
  background:#fdfdfd; border:1px solid #ddd; border-left:4px solid var(--brand);
  border-radius:8px; font-size:.95rem; box-shadow:0 2px 6px rgba(0,0,0,.08);
  max-width:520px;
  min-width:260px;
  word-break:normal; overflow-wrap:anywhere;
}
.cart-item-options div{ margin-bottom:.4rem; }

@keyframes fadeIn{ from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none} }

/* =========================================================
   CART / WISHLIST TABLES — desktop legible
   ========================================================= */
.cart-table,
.wishlist-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:1rem;
  background:#fff;
}

.cart-table th, .cart-table td,
.wishlist-table th, .wishlist-table td{
  padding:.75rem;
  border-bottom:1px solid #ccc;
  color:#333;
  vertical-align:middle;
}

/* encabezados */
.cart-table th, .wishlist-table th{ background:#f8f8f8; color:#555; }

/* Evita cortes de palabras y precios (desktop/tablet) */
.cart-table th:nth-child(2),
.cart-table th:nth-child(3),
.cart-table th:nth-child(4),
.cart-table th:nth-child(5),
.cart-table td:nth-child(2),
.cart-table td:nth-child(3),
.cart-table td:nth-child(4),
.cart-table td:nth-child(5),
.wishlist-table th:nth-child(2),
.wishlist-table th:nth-child(3),
.wishlist-table td:nth-child(2),
.wishlist-table td:nth-child(3){
  white-space:nowrap;
}

/* Contenido de la primera columna */
.cart-table img, .wishlist-table img{ max-width:60px; border-radius:6px; display:block; margin:0 auto .3rem; }
.cart-table a{ display:block; text-decoration:none; font-weight:700; color:#555; }
.cart-table a:hover{ text-decoration:underline; }
.cart-item-info{ display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.cart-item-img{ max-width:70px; border-radius:6px; transition:transform .2s, box-shadow .2s; }
.cart-item-img:hover{ transform:scale(1.05); box-shadow:0 3px 8px rgba(0,0,0,.15); }
.cart-item-name{ font-weight:700; color:#555; text-decoration:none; }
.cart-item-name:hover{ text-decoration:underline; }

/* Controles cantidad */
.quantity-controls{ display:flex; align-items:center; gap:.5rem; justify-content:center; }
.quantity-controls button{
  width:28px; height:28px; font-weight:700; border:1px solid #ccc; border-radius:4px;
  background:#f8f8f8; cursor:pointer; transition:background .2s;
}
.quantity-controls button:hover{ background:#e0e0e0; }

/* Resumen del carrito */
.cart-summary-box{
  max-width:420px; margin-left:auto; background:#fff; padding:1.2rem;
  border:1px solid #ccc; border-radius:8px; font-size:.95rem; color:#89817E;
}
.cart-summary-box div{ display:flex; justify-content:space-between; margin-bottom:.8rem; }
.cart-summary-box strong{ font-weight:700; }

/* =========================================================
   TABLAS → MODO MÓVIL (≤ 680px): filas como cards
   ========================================================= */
@media (max-width:680px){

  /* Ocultar cabecera en móvil */
  .cart-table thead, .wishlist-table thead{ display:none; }

  /* Cada fila es una “card” */
  .cart-table, .wishlist-table{ border-collapse:separate; border-spacing:0 12px; }
  .cart-table tr, .wishlist-table tr{
    display:block;
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
  }

  /* Celdas apiladas */
  .cart-table td, .wishlist-table td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:none;
    padding:.45rem 0;
    text-align:left;
    white-space:normal;     /* permite saltos naturales */
  }

  /* Primera celda (item) ocupa todo el ancho */
  .cart-table td:nth-child(1),
  .wishlist-table td:nth-child(1){
    display:block;
    padding-bottom:.6rem;
  }

  /* Etiquetas automáticas */
  .cart-table td:nth-child(2)::before{ content:"Price"; font-weight:700; color:#666; }
  .cart-table td:nth-child(3)::before{ content:"Quantity"; font-weight:700; color:#666; }
  .cart-table td:nth-child(4)::before{ content:"Total"; font-weight:700; color:#666; }
  .wishlist-table td:nth-child(2)::before{ content:"Price"; font-weight:700; color:#666; }
  .wishlist-table td:nth-child(3)::before{ content:""; }

  /* Controles centrados en su fila */
  .quantity-controls{ justify-content:flex-end; }

  /* Opciones mostradas → ancho completo y sin aplastarse */
  .order-item-options,
  .cart-item-options{
    max-width:100%;
    min-width:0;
    margin-top:.6rem;
  }
}

/* ============ Botones genéricos y auxiliares ============ */
.btn{
  display:inline-block; text-decoration:none; padding:.7rem 1.2rem; font-size:1rem;
  font-weight:600; border:none; border-radius:.5rem; box-shadow:0 2px 4px rgba(0,0,0,.08);
  cursor:pointer; transition:background-color .2s, box-shadow .2s;
}
.btn:hover{ box-shadow:0 4px 8px rgba(0,0,0,.15); }
.btn-primary{ background:#888; color:#fff; }
.btn-primary:hover{ background:#666; }
.btn-elim{ background:#D2D2D2; }
.checkout-form{ display:flex; justify-content:center; }

/* ============ Addresses grid/cards ============ */
.address-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem; }
.address-card{
  background:#f0f0f0; padding:.8rem; border-radius:6px; display:flex; flex-direction:column;
  justify-content:space-between; position:relative; font-size:.9rem; line-height:1.3;
}
.address-card.primary{ border:2px solid var(--brand); box-shadow:0 3px 6px rgba(94,44,165,.15); }
.address-primary-badge{ position:absolute; top:6px; right:6px; background:var(--brand); color:#fff; font-size:.7rem; font-weight:700; padding:2px 6px; border-radius:4px; }
.address-text p{ margin:.2rem 0; }
.phone{ padding-top:.8rem; font-weight:700; }
.address-actions{ display:flex; gap:.4rem; margin-top:.6rem; }
.btn-edit{ background:#b4a8a1; color:#fff; }
.btn-delete{ background:#f0f0f0; color:#444; border:1px solid #ccc; }
.btn-edit,.btn-delete{ padding:.3rem .6rem; font-size:.8rem; border-radius:4px; cursor:pointer; border:none; }

.new-address-card{ background:#fff; border:1px solid #ccc; justify-content:center; align-items:center; }
.add-address-link{ text-align:center; color:#a19691; text-decoration:none; display:flex; flex-direction:column; align-items:center; }
.plus{ font-size:2rem; font-weight:700; margin-bottom:.3rem; }
.new-address-text{ font-size:.9rem; color:#bbb; }

/* ============ Recently & settings ============ */
.recently-list{ list-style:none; padding-left:0; }
.recently-list li{ margin:.5rem 0; }
.recently-list a{ color:#555; text-decoration:none; }
.recently-list a:hover{ color:#ADACAC; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem 2rem; margin-bottom:1rem; }
.form-grid label{ font-weight:700; font-size:.9rem; margin-bottom:.2rem; display:block; color:#666; }
input[type="text"],input[type="email"],input[type="password"]{ width:100%; padding:.6rem; border:1px solid #ccc; border-radius:4px; font-size:.95rem; }
.form-errors{ background:#ffe5e5; color:#a33; padding:1rem; margin-bottom:1rem; border-radius:5px; font-weight:700; }
ul.errorlist{ margin:.3rem 0 0; padding:0; list-style:none; color:#c00; font-size:.85rem; }

/* =========================================================
   MODALS
   ========================================================= */
.modal{ position:fixed; z-index:2000; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; }
.modal.show{ display:flex; }
body.modal-open{ overflow:hidden; }

.modal-content{
  background:#fff; border-radius:12px; width:min(720px, 92vw); max-height:88vh; overflow:auto;
  box-shadow:0 10px 24px rgba(0,0,0,.25); animation:fadeInScale .22s ease; display:flex; flex-direction:column; padding:0 24px 16px;
}
@keyframes fadeInScale{ from{opacity:0; transform:scale(.96)} to{opacity:1; transform:none} }
.modal-header{
  display:flex; justify-content:space-between; align-items:center; padding:12px 24px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:#fff; z-index:2;
}
.modal-header h3{ margin:0; font-size:1.2rem; color:#333; }
.close-modal{ font-size:1.5rem; cursor:pointer; color:#aaa; transition:color .2s; }
.close-modal:hover{ color:#333; }
.modal-actions{ display:flex; justify-content:flex-end; gap:.6rem; padding:10px 24px; border-top:1px solid var(--border); background:#fafafa; position:sticky; bottom:0; z-index:1; }
#wishlist-options-fields{ padding:1rem 0; }

/* Inputs dentro de modals */
.product-option-group{ margin-bottom:1rem; }
.product-option-group label{ font-weight:600; font-size:.95rem; display:block; margin-bottom:.3rem; color:#555; }
.product-option-group input[type="text"], .product-option-group select{
  display:block; width:100%; padding:.6rem .8rem; border:1px solid #ccc; border-radius:6px;
  font-size:.95rem; background:#fff; transition:border-color .2s, box-shadow .2s; appearance:none;
}
.product-option-group input[type="text"]:focus, .product-option-group select:focus{ border-color:var(--brand); box-shadow:0 0 0 2px rgba(94,44,165,.15); outline:none; }
.product-option-group select{
  background-image:url("data:image/svg+xml;utf8,<svg fill='gray' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:16px; padding-right:2rem;
}

/* Radios / toggles / image select */
.radio-group{ display:flex; flex-direction:column; gap:6px; margin-top:.3rem; }
.radio-option{ display:flex; align-items:center; gap:8px; font-size:.9rem; color:#444; cursor:pointer; }
.radio-option input[type="radio"]{ accent-color:#333; transform:scale(1.05); }
.button-group{ display:flex; flex-wrap:wrap; gap:8px; }
.button-option input{ display:none; }
.button-option span{ display:inline-block; padding:6px 12px; border:2px solid #aaa; border-radius:4px; font-size:.9rem; color:#333; transition:.2s; background:#fff; }
.button-option:hover span{ border-color:#333; }
.button-option input:checked + span{ border-color:#333; background:#f5f5f5; font-weight:600; }
.image-select-group{ display:flex; flex-wrap:wrap; gap:10px; }
.image-option{ position:relative; cursor:pointer; }
.image-option input{ display:none; }
.image-wrapper{ position:relative; width:60px; height:60px; border-radius:6px; overflow:hidden; border:2px solid transparent; transition:all .25s ease; z-index:1; }
.image-wrapper img{ width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.image-option:hover .image-wrapper{width: 120px; height: 120px; z-index: 10;}
.image-option input:checked + .image-wrapper{ border-color:var(--brand); }
.caption{ position:absolute; inset:auto 0 0 0; background:rgba(0,0,0,.7); color:#fff; font-size:.7rem; padding:3px 5px; text-align:center; opacity:0; transform:translateY(100%); transition:all .25s ease; }
.image-wrapper:hover .caption{ opacity:1; transform:translateY(0); }

/* Botones modal */
.modal .btn{ padding:.6rem 1rem; font-size:.95rem; border-radius:6px; }
.modal .btn-elim{ background:#e0e0e0; color:#333; }
.modal .btn-elim:hover{ background:#cfcfcf; }
.btn-print-invoice{ appearance:none; border:1px solid #ccc; background:#fff; cursor:pointer; padding:6px 10px; border-radius:6px; font-size:.92rem; }
.btn-print-invoice:hover{ background:#f6f6f6; }

/* =========================================================
   BREAKPOINTS (extra)
   ========================================================= */
@media (max-width:1024px){ .address-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px){
  .dashboard-content{ padding:1rem; }
  .form-grid{ grid-template-columns:1fr; gap:1rem; }
  .cart-summary-box{ margin-left:0; max-width:none; }
}
@media (max-width:640px){
  .address-grid{ grid-template-columns:1fr; }
  .order-item-img{ max-width:60px; }
  .modal-content{ width:min(96vw,640px); max-height:90vh; padding:0 16px 12px; }
  .modal-header, .modal-actions{ padding:10px 16px; }
}
@media (max-width:420px){
  .dashboard-container{ padding:0 12px; }
  .quantity-controls button{ width:26px; height:26px; }
  .image-wrapper{ width:54px; height:54px; }
  .modal-content{ width:96vw; border-radius:10px; }
}