/* =====================================================================
   ESTILOS DEL PANEL DE ADMINISTRACIÓN
   Mismo estilo de la marca (negro y blanco), pensado para usar también
   desde el celular.
   ===================================================================== */
:root {
  --negro: #111111;
  --blanco: #ffffff;
  --gris-fondo: #f5f5f5;
  --gris-texto: #757575;
  --gris-borde: #e5e5e5;
  --rojo-error: #b3261e;   /* solo para mensajes de error */
  --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--fuente); color: var(--negro); background: var(--gris-fondo); line-height: 1.45; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; }
:focus-visible { outline: 3px solid var(--negro); outline-offset: 2px; }

/* ---------- Botones y campos */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--negro);
  font: 700 15px var(--fuente); cursor: pointer; text-decoration: none;
  background: var(--negro); color: var(--blanco);
}
.boton:disabled { opacity: .5; cursor: wait; }
.boton-blanco { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }
.boton-borde { background: var(--blanco); color: var(--negro); }
.boton-peligro { background: var(--blanco); color: var(--rojo-error); border-color: var(--rojo-error); }
.boton-chico { min-height: 34px; padding: 0 14px; font-size: 13px; }
.enlace { background: none; border: 0; padding: 0; font: 500 14px var(--fuente); color: inherit; text-decoration: underline; cursor: pointer; }

label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
input, textarea, select {
  width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--gris-borde); border-radius: 10px;
  font: 500 15px var(--fuente); color: var(--negro); background: var(--blanco);
}
input:focus, textarea:focus, select:focus { border-color: var(--negro); outline: none; }
textarea { min-height: 96px; resize: vertical; }
input[type="checkbox"] { width: 20px; min-height: 20px; height: 20px; accent-color: var(--negro); }
.casilla { display: flex; align-items: center; gap: 10px; font-weight: 600; }
/* Campo de contraseña con botón "Ver / Ocultar" a la derecha */
.campo-contrasena { position: relative; display: block; }
.campo-contrasena input { padding-right: 84px; }
.boton-ver {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: none;
  font: 600 13px var(--fuente); color: var(--gris-texto); cursor: pointer;
}
.boton-ver:hover { color: var(--negro); }
.tarjeta-acceso .boton-ver { color: rgba(255,255,255,.8); }
.tarjeta-acceso .boton-ver:hover { color: var(--blanco); }

.ayuda { font-size: 13px; color: var(--gris-texto); font-weight: 400; }
.mensaje-error { color: var(--rojo-error); font-weight: 600; font-size: 14px; margin: 0; }

/* ---------- Acceso (login) */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #000; }
.tarjeta-acceso { width: 100%; max-width: 380px; display: grid; gap: 16px; color: var(--blanco); }
.tarjeta-acceso h1 { font-size: 26px; }
.tarjeta-acceso label { color: rgba(255,255,255,.8); }
.tarjeta-acceso input { background: #1b1b1b; border-color: #333; color: var(--blanco); }
.tarjeta-acceso input:focus { border-color: var(--blanco); }
.tarjeta-acceso .ayuda { color: rgba(255,255,255,.6); margin: 0; }
.tarjeta-acceso .mensaje-error { color: #ff8a80; }
.logo-acceso { width: 160px; margin-bottom: 8px; }

/* ---------- Barra superior */
.barra {
  position: sticky; top: 0; z-index: 10; background: #000; color: var(--blanco);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 10px 20px;
}
.logo-barra { height: 36px; width: auto; }
.pestanas { display: flex; gap: 4px; overflow-x: auto; order: 3; width: 100%; }
.pestanas button {
  flex: none; padding: 8px 16px; border-radius: 999px; border: 0; background: transparent;
  color: rgba(255,255,255,.7); font: 600 14px var(--fuente); cursor: pointer;
}
.pestanas button[aria-current="true"] { background: var(--blanco); color: var(--negro); }
.barra-usuario { margin-left: auto; display: flex; gap: 16px; align-items: center; font-size: 14px; }
.barra-usuario a { color: var(--blanco); }
@media (min-width: 900px) { .pestanas { order: 0; width: auto; } }

/* ---------- Contenido */
.contenido { max-width: 1100px; margin: 0 auto; padding: 24px 16px 96px; }
.encabezado-seccion { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.encabezado-seccion h2 { font-size: 28px; }
.panel { background: var(--blanco); border-radius: 16px; padding: 20px; margin-bottom: 16px; }
.panel h3 { font-size: 18px; margin-bottom: 12px; }
.vacio { text-align: center; padding: 40px 20px; color: var(--gris-texto); }

/* Lista de productos */
.lista-productos { display: grid; gap: 12px; }
@media (min-width: 700px) { .lista-productos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .lista-productos { grid-template-columns: repeat(3, 1fr); } }
.item-producto { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; background: var(--blanco); border-radius: 16px; padding: 12px; }
.item-producto img { width: 88px; height: 110px; object-fit: cover; border-radius: 10px; background: var(--gris-fondo); }
.item-producto h3 { font-size: 16px; margin-bottom: 4px; }
.item-producto p { margin: 0 0 8px; font-size: 14px; color: var(--gris-texto); }
.estado { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--negro); margin-right: 4px; }
.estado-negro { background: var(--negro); color: var(--blanco); }

/* Formularios en cuadrícula */
.campos { display: grid; gap: 14px; }
@media (min-width: 700px) { .campos-2 { grid-template-columns: 1fr 1fr; } }

/* Tabla de tallas */
.tabla-tallas { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-tallas th { text-align: left; font-size: 12px; color: var(--gris-texto); padding: 4px; }
.tabla-tallas td { padding: 4px; vertical-align: middle; }
.tabla-tallas input { min-height: 38px; padding: 6px 10px; font-size: 14px; }
.tabla-tallas .col-codigo { width: 90px; }
.tabla-tallas .col-precio { width: 120px; }
.desliza { overflow-x: auto; }
.desliza table { min-width: 860px; }

/* Fotos */
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.foto { background: var(--gris-fondo); border-radius: 12px; padding: 8px; display: grid; gap: 6px; }
.foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; }
.foto input { min-height: 34px; font-size: 12px; padding: 6px 8px; }
.foto-acciones { display: flex; gap: 4px; justify-content: space-between; }
.foto-acciones button { flex: 1; min-height: 32px; border: 1px solid var(--gris-borde); background: var(--blanco); border-radius: 8px; cursor: pointer; font: 600 13px var(--fuente); }
.subir-foto { display: grid; place-items: center; min-height: 200px; border: 2px dashed var(--gris-borde); border-radius: 12px; cursor: pointer; text-align: center; padding: 12px; font-size: 14px; color: var(--gris-texto); }
.subir-foto input { display: none; }

.fila { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.fila input { flex: 1; }
.quitar { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--gris-borde); background: var(--blanco); cursor: pointer; font-size: 18px; }

/* ---------- Foto de cada talla (en la tabla de tallas) */
.col-foto-talla { white-space: nowrap; }
.col-foto-talla > * { vertical-align: middle; }
.miniatura-talla { position: relative; display: inline-block; }
.miniatura-talla img { display: block; width: 64px; height: 48px; object-fit: cover; border-radius: 6px; }
.miniatura-talla small {
  position: absolute; left: 3px; bottom: 3px; padding: 0 5px; border-radius: 4px;
  background: var(--negro); color: var(--blanco); font-size: 10px; font-weight: 800;
}
.col-foto-talla .quitar { width: 30px; height: 30px; font-size: 15px; margin: 0 4px; }
.subir-foto-talla { position: relative; overflow: hidden; }
.subir-foto-talla input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---------- Editor del explorador (fotos con puntos) */
.subtitulo-editor { font-size: 15px; margin: 22px 0 10px; }
.fila-detalle { flex-wrap: wrap; }
.fila-detalle input[data-campo="titulo"] { flex: 1 1 200px; }
.fila-detalle input[data-campo="texto"] { flex: 3 1 280px; }
.numero-detalle {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--negro); color: var(--blanco); font-size: 13px; font-weight: 800;
}
.vistas-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.vista-editor { display: grid; gap: 10px; align-content: start; background: var(--gris-fondo); border-radius: 12px; padding: 10px; }
.vista-editor label { font-size: 13px; }
.vista-editor input, .vista-editor select { min-height: 38px; font-size: 13px; padding: 6px 10px; }
/* La foto donde se toca para poner el punto */
.vista-foto { position: relative; border-radius: 8px; overflow: hidden; cursor: crosshair; touch-action: manipulation; }
.vista-foto img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.punto-editor {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  display: grid; place-items: center; background: var(--blanco); color: var(--negro);
  font-size: 12px; font-weight: 800; box-shadow: 0 0 0 2px var(--negro), 0 3px 10px rgba(0,0,0,.4); pointer-events: none;
}
/* Avisos: foto sin puntos / detalle sin foto */
.aviso-sin-puntos { margin: 0; padding: 8px 10px; border: 2px dashed var(--negro); border-radius: 8px; background: var(--blanco); font-size: 12px; font-weight: 600; line-height: 1.4; }
.sin-foto { flex: none; padding: 3px 8px; border: 1px solid var(--gris-borde); border-radius: 999px; background: var(--blanco); font-size: 11px; font-weight: 700; color: var(--gris-texto); }
.chips-puntos { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-puntos button {
  min-height: 30px; padding: 0 10px; border: 1px solid var(--gris-borde); border-radius: 999px;
  background: var(--blanco); font: 600 12px var(--fuente); cursor: pointer;
}
.chips-puntos button:hover { border-color: var(--negro); }

.acciones-fijas {
  position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
  padding: 12px 0; background: linear-gradient(to top, var(--gris-fondo) 70%, transparent);
}

/* Pedidos */
.pedido { background: var(--blanco); border-radius: 16px; padding: 16px; margin-bottom: 12px; display: grid; gap: 10px; }
.pedido-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: baseline; }
.pedido-cabeza h3 { font-size: 17px; }
.pedido dl { display: grid; grid-template-columns: 90px 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.pedido dt { color: var(--gris-texto); }
.pedido dd { margin: 0; }
.pedido dd a { color: var(--negro); font-weight: 600; }
/* Productos de un pedido con carrito, uno por línea */
.lineas-pedido { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lineas-pedido .ayuda { display: block; }
.pedido-acciones { display: grid; gap: 8px; }
@media (min-width: 700px) { .pedido-acciones { grid-template-columns: 180px 1fr auto auto; align-items: center; } }

/* Usuarios */
.usuario-fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--gris-borde); }

/* Aviso flotante */
.aviso {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50;
  background: var(--negro); color: var(--blanco); padding: 12px 20px; border-radius: 999px;
  font-weight: 600; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3); max-width: calc(100% - 32px);
}
.aviso.es-error { background: var(--rojo-error); }

/* =====================================================================
   RESUMEN (estadísticas): cifras, gráfica por día, camino de compra
   ===================================================================== */
/* Botones de periodo: Hoy · 7 días · 30 días · Este mes */
.selector-periodo { display: inline-flex; gap: 4px; padding: 4px; background: var(--blanco); border-radius: 999px; }
.selector-periodo button {
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none;
  font: 600 14px var(--fuente); color: var(--gris-texto); cursor: pointer;
}
.selector-periodo button[aria-pressed="true"] { background: var(--negro); color: var(--blanco); }
.periodo-texto { margin: -8px 0 16px; }

/* Cuatro cifras grandes */
.cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
@media (min-width: 800px) { .cifras { grid-template-columns: repeat(4, 1fr); } }
.cifra { display: grid; gap: 4px; background: var(--blanco); border-radius: 16px; padding: 16px; }
.cifra span { font-size: 13px; font-weight: 600; color: var(--gris-texto); }
.cifra strong { font-size: clamp(22px, 4vw, 30px); font-weight: 800; letter-spacing: -.02em; }
.cifra small { font-size: 12px; color: var(--gris-texto); }

/* Gráfica de ventas por día: una barra negra por día */
.grafica-dias { display: grid; gap: 6px; }
.grafica-max { font-size: 12px; color: var(--gris-texto); }
.grafica-barras {
  display: grid; grid-template-columns: repeat(var(--columnas), 1fr); gap: 2px; align-items: end;
  height: 180px; border-top: 1px dashed var(--gris-borde); border-bottom: 1px solid var(--gris-borde);
}
.columna-dia { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; }
.columna-dia:hover, .columna-dia:focus-visible { background: var(--gris-fondo); outline: none; }
.barra-dia { width: min(100%, 28px); min-height: 0; background: var(--negro); border-radius: 4px 4px 0 0; }
/* Cuadro con el detalle al pasar el mouse o tocar la barra */
.columna-dia:hover::after, .columna-dia:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  z-index: 5; width: max-content; max-width: 220px; padding: 8px 10px; border-radius: 8px;
  background: var(--negro); color: var(--blanco); font-size: 12px; font-weight: 600; line-height: 1.35;
}
.columna-dia:first-child:hover::after, .columna-dia:first-child:focus-visible::after { left: 0; transform: none; }
.columna-dia:last-child:hover::after, .columna-dia:last-child:focus-visible::after { left: auto; right: 0; transform: none; }
.grafica-fechas { display: flex; justify-content: space-between; font-size: 12px; color: var(--gris-texto); }

/* Tablas de datos */
.ver-tabla { margin-top: 14px; }
.ver-tabla summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.tabla-desliza { overflow-x: auto; }
.tabla-datos { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.tabla-datos th { text-align: left; font-size: 12px; color: var(--gris-texto); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--gris-borde); white-space: nowrap; }
.tabla-datos td { padding: 8px; border-bottom: 1px solid var(--gris-fondo); white-space: nowrap; }
.tabla-datos td:not(:first-child), .tabla-datos th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

/* Camino de compra (embudo): barras horizontales medidas contra las visitas */
.embudo { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.embudo li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; font-size: 14px; }
.embudo-nombre { font-weight: 600; }
.embudo-valor { text-align: right; color: var(--gris-texto); font-variant-numeric: tabular-nums; }
.embudo-valor strong { color: var(--negro); margin-right: 6px; }
.embudo-pista { grid-row: 2; grid-column: 1 / -1; height: 10px; background: var(--gris-fondo); border-radius: 999px; overflow: hidden; }
.embudo-barra { display: block; height: 100%; background: var(--negro); border-radius: 999px; }

/* Pedidos por estado */
.lista-estados { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.lista-estados li { display: grid; grid-template-columns: 1fr auto 110px; gap: 12px; align-items: baseline; font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--gris-fondo); }
.lista-estados .ayuda { text-align: right; }