/* ===================================================================
   ui-polish.css
   Capa de pulido visual sobre site.css / admin.css / admin-auth.css.
   No cambia estructura, layout ni navegacion: solo refina tipografia,
   espaciado, botones, tarjetas, tablas, formularios y estados de foco,
   usando la MISMA paleta de marca que ya existe (--rose, --rose-deep,
   --wine, --ink, --muted, --cream, --line, definidas en site.css).

   Se carga DESPUES de los estilos existentes a proposito: asi estas
   reglas los complementan/afinan sin tocar los .css originales. Si
   algo no convence, alcanza con quitar el <link> de este archivo en
   _Layout.cshtml / _AdminLayout.cshtml -- no hace falta revertir
   ediciones adentro de site.css/admin.css.
   =================================================================== */

:root{
  /* Escala de radios */
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:16px;
  /* Escala de sombras (tono calido, a partir de --ink) */
  --shadow-xs:0 1px 2px rgba(49,40,44,.06);
  --shadow-sm:0 4px 14px rgba(49,40,44,.08);
  --shadow-md:0 10px 28px rgba(49,40,44,.12);
  --shadow-lg:0 22px 48px rgba(49,40,44,.18);
  /* Transicion estandar */
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:.15s;
  --t-base:.25s;
  /* Anillo de foco accesible, con el tono rose-deep de la marca */
  --focus-ring:0 0 0 3px rgba(201,108,130,.35);
}

/* ---------- Accesibilidad / base ---------- */
*{ -webkit-tap-highlight-color:transparent; }
a,button,input,select,textarea{
  transition:background-color var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease),
             color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease),
             transform var(--t-fast) var(--ease);
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--rose-deep);
  outline-offset:2px;
}
::selection{ background:var(--rose); color:var(--wine); }

/* =======================================================================
   TIENDA (storefront)
   ======================================================================= */

/* Botones: mismo lenguaje visual (bordes rectos = look editorial), con
   mas feedback tactil y sombra sutil para que se sientan "clickeables". */
.btn-primary-store{ box-shadow:var(--shadow-sm); }
.btn-primary-store:hover{ box-shadow:var(--shadow-md); }
.btn-primary-store:active{ transform:translateY(0) scale(.98); box-shadow:var(--shadow-xs); }
.btn-secondary-store:hover,.text-link:hover{ color:var(--rose-deep); border-color:var(--rose-deep); }

/* Tarjetas de producto: misma estructura, sombra en escala y borde muy
   sutil para que no "floten" sobre el fondo crema. */
.product-card{ border-radius:var(--radius-sm); box-shadow:var(--shadow-xs); overflow:hidden; }
.product-card:hover{ box-shadow:var(--shadow-md); }
.product-badge{ box-shadow:var(--shadow-xs); }

/* Navbar y menu: separacion mas marcada del contenido, dropdown con
   sombra en vez del borde plano por defecto de Bootstrap. */
.navbar-header{ box-shadow:0 1px 0 var(--line); }
.dropdown-menu{ border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-md); padding:6px; }
.dropdown-item{ border-radius:var(--radius-sm); padding:9px 12px; }
.dropdown-item:hover,.dropdown-item:focus{ background:var(--rose); color:var(--wine); }

/* Buscador e inputs de la tienda: foco mas visible */
.search-section form:focus-within{ border-color:var(--wine); }
.catalog-search:focus-within{ border-color:var(--wine); box-shadow:var(--shadow-sm); }
.product-form select:focus,.product-form textarea:focus{ border-color:var(--rose-deep); box-shadow:var(--focus-ring); outline:0; }

/* Insignias de estado de pedido: tipografia uniforme */
.order-badge{ letter-spacing:.03em; font-weight:700; }

/* Tarjetas de pedido */
.order-card,.order-panel{ border-radius:var(--radius-sm); transition:box-shadow var(--t-base) var(--ease); }
.order-card:hover{ box-shadow:var(--shadow-sm); }

/* =======================================================================
   ADMINISTRACION
   ======================================================================= */

/* Unifica el "wine" del panel admin con el de la tienda (admin.css
   traia #8d4359/#512c38, tonos parecidos pero no identicos a
   --wine/--ink de site.css). Mismo color de marca, nada nuevo. */
.admin-primary{ background:var(--wine); box-shadow:var(--shadow-sm); }
.admin-primary:hover{ background:var(--ink); box-shadow:var(--shadow-md); }
.admin-primary:active{ transform:translateY(0) scale(.98); }
.admin-primary-soft{ background:var(--rose-deep); }
.admin-primary-soft:hover{ background:var(--wine); }
.admin-action{ border-color:var(--rose-deep); color:var(--wine); border-radius:var(--radius-sm); }
.admin-action:hover{ background:var(--rose); border-color:var(--wine); }
.admin-panel{ border-radius:var(--radius-sm); }

/* Sidebar: icono + texto alineados, item activo con acento a la
   izquierda para que se note de un vistazo donde estoy parado. */
.admin-sidebar nav a,.admin-sidebar form button{
  display:flex;
  align-items:center;
  gap:11px;
  border-left:3px solid transparent;
}
.admin-sidebar nav a.is-active{ border-left-color:var(--rose-deep); }
.admin-nav-icon{ display:inline-flex; flex:none; width:18px; height:18px; opacity:.82; }
.admin-sidebar nav a:hover .admin-nav-icon,
.admin-sidebar nav a.is-active .admin-nav-icon{ opacity:1; }
.admin-sidebar nav a svg,.admin-sidebar form button svg{ width:100%; height:100%; }

/* Topbar con separacion mas marcada */
.admin-topbar{ box-shadow:0 1px 0 var(--line); }

/* Tarjetas de metricas del dashboard: radio + sombra + leve elevacion
   al pasar el mouse, para que se sientan "vivas" sin exagerar. */
.admin-metrics article,.admin-shortcuts,.admin-table-wrap,.admin-pedido-card,.admin-detail-grid article{
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-xs);
}
.admin-metrics article{ transition:box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.admin-metrics article:hover{ box-shadow:var(--shadow-sm); transform:translateY(-2px); }

/* Tablas: cebra sutil + resaltado de fila al pasar el mouse, para leer
   filas largas de pedidos/inventario sin perderse. */
.admin-table tbody tr:nth-child(even):not(.is-muted):not(.is-warning):not(.is-selected){ background:#fcf8f9; }
.admin-table tbody tr:hover:not(.is-selected){ background:var(--rose); }
.admin-table th{ border-bottom:2px solid var(--line); }

/* Formularios: foco consistente con el resto del sitio */
.admin-form input:focus,.admin-form select:focus,.admin-form textarea:focus,
.admin-inline-form input:focus,.admin-inline-form select:focus,
.admin-toolbar select:focus,.admin-combo-input:focus{
  border-color:var(--rose-deep);
  box-shadow:var(--focus-ring);
  outline:0;
}

/* Campos que se autogeneran (SKU/Slug al crear un producto nuevo): se
   muestran en gris y de solo lectura para que nadie los escriba a mano
   por error -- el valor real lo calcula el servidor. Ver
   _Formulario.cshtml / CatalogoController. */
.admin-input-auto{
  background:#f3ecee;
  color:#9a848c;
  cursor:not-allowed;
}

/* Imagenes de producto: boton de eliminar superpuesto en la esquina.
   Pide confirmacion antes de enviar (ver Detalle.cshtml); la imagen
   solo se borra en disco despues de confirmarse en BD (ver
   EliminarImagen en CatalogoController). */
.admin-image-list figure{ position:relative; margin:0; }
.admin-image-delete-form{ position:absolute; top:6px; right:6px; margin:0; }
.admin-image-delete-btn{
  width:26px; height:26px; line-height:1; border-radius:50%;
  border:1px solid rgba(255,255,255,.7); background:rgba(90,30,42,.82);
  color:#fff; cursor:pointer; font-size:.78rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-xs);
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.admin-image-delete-btn:hover{ background:var(--wine); transform:scale(1.07); }

/* Insignias / estados: letterspacing uniforme con el resto del sitio */
.admin-badge,.admin-status{ letter-spacing:.03em; font-weight:700; }

/* Pestañas (tabs) con transicion mas suave */
.admin-tabs a{ transition:color var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }

/* Logo del sidebar y del login: leve sombra para que no se pierda
   sobre el fondo oscuro / degradado. */
.admin-logo,.admin-auth-logo{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.25)); }

/* Carrito y checkout: mismos controles, foco/hover mas claros */
.add-to-cart:hover{ color:var(--rose-deep); }
.add-to-cart:hover span{ transform:translateX(2px); }
.cart-controls button{ border-radius:var(--radius-sm); }
.cart-controls button:hover{ border-color:var(--wine); background:var(--rose); }
.checkout input:focus,.checkout select:focus,.checkout textarea:focus{
  border-color:var(--rose-deep);
  box-shadow:var(--focus-ring);
  outline:0;
}
.checkout-summary{ border-radius:var(--radius-sm); }

/* Productos sin stock: gris + insignia "Agotado", en vez de
   mostrarlos igual que uno disponible. */
.product-card.is-agotado{ opacity:.72; }
.product-card.is-agotado .product-image img{ filter:grayscale(.85); }
.product-badge-agotado{ background:var(--ink); color:#fff; }
.add-to-cart-disabled{
  display:inline-block;
  margin-top:9px;
  font:600 .68rem var(--sans);
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
}

/* Buscador dentro de una categoria (filtro en vivo, sin recargar) */
.category-search{ max-width:420px; margin:22px 0 0; position:relative; }
.category-search input{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  padding:11px 14px;
  font:inherit;
  border-radius:var(--radius-sm);
}
.category-search input:focus{
  outline:0;
  border-color:var(--wine);
  box-shadow:var(--focus-ring);
}
.category-search-empty{
  display:none;
  padding:18px 0;
  color:var(--muted);
  font-size:.85rem;
}
.category-search-empty.is-visible{ display:block; }

.legal-page{
  max-width:760px;
  margin:0 auto;
  padding:48px 20px 80px;
}
.legal-page h1{
  font-family:var(--serif);
  font-size:2.4rem;
  margin-bottom:6px;
}
.legal-page h2{
  font-family:var(--serif);
  font-size:1.35rem;
  margin:32px 0 10px;
}
.legal-page p, .legal-page li{
  color:var(--muted);
  font-size:.88rem;
  line-height:1.8;
}
.legal-page ul{
  padding-left:20px;
  margin:10px 0;
}
.legal-page a{
  color:var(--wine);
  text-decoration:underline;
}
.legal-disclaimer{
  margin-top:36px;
  padding:14px 16px;
  background:#f8edef;
  border-radius:var(--radius-sm);
  font-size:.76rem !important;
}