/* Base v1 (compatible con templates Jinja) */
@import url("/static/css/v1/tokens.css");

html, body { margin: 0; padding: 0; background: var(--gray-1); color: var(--colorblack); }

/* Contenedores comunes */
.v1-container { max-width: 1280px; margin: 0 auto; padding: 16px; }
.v1-card { background: var(--white); box-shadow: var(--shadow-2); border-radius: 12px; padding: 16px; }
.v1-title { font-family: var(--heading-3-font-family); font-size: var(--heading-3-font-size); font-weight: var(--heading-3-font-weight); }

/* Helpers */
.v1-flex { display: flex; }
.v1-grid { display: grid; gap: 16px; }
.v1-gap-8 { gap: 8px; }
.v1-gap-16 { gap: 16px; }
.v1-p-16 { padding: 16px; }
.v1-mt-16 { margin-top: 16px; }

/* Botones básicos */
.v1-btn { border-radius: 8px; padding: 10px 14px; border: none; cursor: pointer; font-family: var(--label-font-family); font-size: var(--label-font-size); }
.v1-btn-primary { background: var(--blue); color: var(--white); }
.v1-btn-secondary { background: var(--soft-green); color: var(--dark-blue-2); }

/* Formularios */
.v1-input { border: 1px solid var(--gray-3); border-radius: 8px; padding: 10px 12px; background: var(--white); }

/* POS pills y cards */
.pill { padding: 10px 14px; border-radius: 14px; background: var(--gray-1); color: var(--colorblack); cursor: pointer; border: 1px solid var(--gray-2); display: inline-flex; align-items: center; gap: 8px; }
.pill.active { background: var(--purple); color: var(--black); }
.pill .pill-icon { width: 22px; height: 22px; background-repeat: no-repeat; background-image: url('/static/images/iconscat.jpg'); background-size: 240px auto; border-radius: 0; flex: 0 0 22px; background-color: transparent; mix-blend-mode: multiply; }
.item { background: var(--white); border: 1px solid var(--gray-2); border-radius: 12px; padding: 12px; box-shadow: var(--shadow-1); cursor: pointer; display: grid; gap: 6px; }
.item:hover { box-shadow: var(--shadow-2); }
.right-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--gray-2); }
.right-row:last-child { border-bottom: 0; }