:root {
  --color-primario: #D946EF;
  --color-primario-oscuro: #C026D3;
  --color-acento: #F3C6CE;
  --color-fondo: #f8f9fa;
}

body { font-family: 'Georgia', 'Times New Roman', serif; margin: 0; padding: 20px; background: var(--color-fondo); }
.container { max-width: 700px; margin: auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px #ddd; }
h1 { color: var(--color-primario); text-align: center; margin-bottom: 0; }
.logo-negocio { display: block; max-width: 220px; max-height: 140px; width: auto; height: auto; margin: 0 auto 8px; }
.logo-negocio-chica { max-width: 130px; max-height: 90px; }
h1.titulo-texto { font-size: 20px; }
.subtitulo { text-align: center; color: #888; font-size: 13px; margin-top: 4px; margin-bottom: 16px; }
input, select, button { width: 100%; padding: 12px; margin: 8px 0; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; font-size: 15px; font-family: Arial, sans-serif; }
button { background: var(--color-primario); color: white; border: none; font-weight: bold; cursor: pointer; }
button:hover { background: var(--color-primario-oscuro); }
button.secundario { background: white; color: var(--color-primario); border: 1px solid var(--color-primario); }
button.secundario:hover { background: var(--color-acento); }
button.peligro { background: white; color: #dc2626; border: 1px solid #dc2626; }
button.peligro:hover { background: #fef2f2; }
.producto { border: 1px dashed var(--color-primario); padding: 10px; margin: 10px 0; border-radius: 5px; position: relative; }
.producto .quitar { position: absolute; top: 4px; right: 4px; width: auto; background: none; color: var(--color-primario-oscuro); border: none; font-weight: bold; margin: 0; padding: 4px 8px; cursor: pointer; }
.fila { display: flex; gap: 8px; }
.fila > * { flex: 1; }
.total { text-align: right; font-size: 18px; font-weight: bold; color: var(--color-primario); margin: 10px 0; }
#mensaje { text-align: center; font-weight: bold; font-family: Arial, sans-serif; }

.nav { display: flex; gap: 4px; max-width: 700px; margin: 0 auto 12px; flex-wrap: wrap; }
.nav a { flex: 1; min-width: 70px; text-align: center; padding: 8px 4px; border-radius: 8px; background: white; color: var(--color-primario); text-decoration: none; font-weight: bold; border: 1px solid var(--color-primario); font-size: 11px; font-family: Arial, sans-serif; }
.nav a.activo { background: var(--color-primario); color: white; }

table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; font-family: Arial, sans-serif; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid #eee; }
th { color: #888; font-size: 12px; text-transform: uppercase; }
.stock-bajo { color: #dc2626; font-weight: bold; }
.tarjeta { background: var(--color-acento); border-radius: 8px; padding: 14px; margin: 8px 0; }
.tarjeta .valor { font-size: 22px; font-weight: bold; color: var(--color-primario); font-family: 'Georgia', serif; }
.tarjeta .etiqueta { font-size: 12px; color: #886b6f; font-family: Arial, sans-serif; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }