:root {
  --color-primary: #1b7a6e;
  --color-primary-text-on: #ffffff;
  --color-background: #ffffff;
  --color-surface: #f8f9fa;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #6b7280;
  --color-border: #e5e7eb;
  --color-success: #22c55e;
  --color-star-inactive: #d1d5da;
  --color-error: #ef4444;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--color-background);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
}
.screen {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 390px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 32px 24px;
  gap: 24px;
}
.screen.active { display: flex; }
#screen-exito { justify-content: center; }

.logo {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.logo img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.logo .fallback-initial { font-size:32px; font-weight:700; color:var(--color-text-secondary); line-height:1; }

.heading-lg { font-size:24px; font-weight:700; line-height:32px; text-align:center; color:var(--color-text-primary); width:100%; }
.heading-sm { font-size:18px; font-weight:600; line-height:24px; color:var(--color-text-primary); width:100%; }
.heading-sm.text-left { text-align:left; }
.heading-sm.text-center { text-align:center; }
.body-md { font-size:16px; font-weight:400; line-height:24px; color:var(--color-text-secondary); text-align:center; width:100%; }
.caption-xs { font-size:12px; font-weight:400; line-height:16px; color:var(--color-text-secondary); text-align:center; width:100%; }

.seccion-garzon { display:flex; flex-direction:column; align-items:flex-start; gap:16px; width:100%; }
.seccion-rating { display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; }
.seccion-sos { display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; }

.chips-container { display:flex; flex-wrap:wrap; gap:8px; width:100%; }
.chips-garzon { justify-content:flex-start; }
.chips-motivo { justify-content:center; }

.chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 4px 8px;
  border-radius: 9999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-family: 'Inter', sans-serif;
  font-size: 16px; font-weight: 400; line-height: 24px;
  color: var(--color-text-primary);
  cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.chip:active { transform: scale(0.97); }
.chip.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-text-on);
  font-weight: 600;
}

.stars-container { display:flex; gap:4px; }
.star {
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; background:none; border:none; padding:0;
  -webkit-tap-highlight-color: transparent;
}
.star svg { width:28px; height:28px; display:block; }
.star-icon { fill: var(--color-star-inactive); }
.star.active .star-icon { fill: var(--color-primary); }
.star:active { transform: scale(0.9); }

.input-comentario {
  width:100%; height:140px; padding:16px;
  border-radius:8px; border:1px solid var(--color-border);
  background:var(--color-background);
  font-family:'Inter',sans-serif; font-size:16px; line-height:24px;
  color:var(--color-text-primary); resize:none; outline:none;
}
.input-comentario::placeholder { color:var(--color-text-secondary); }
.input-comentario:focus { border-color:var(--color-primary); }

.cta {
  width:100%; height:56px; padding:16px 24px;
  border-radius:9999px; border:none;
  background:var(--color-primary); color:var(--color-primary-text-on);
  font-family:'Inter',sans-serif; font-size:16px; font-weight:600; line-height:24px;
  text-align:center; cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.cta:active { opacity:0.9; }
.cta.loading { opacity:0.6; cursor:not-allowed; }
.cta.confirmed { background:var(--color-success); }

.error-text { font-size:14px; color:var(--color-error); text-align:center; width:100%; display:none; }
.error-text.visible { display:block; }

.icon-exito {
  width:64px; height:64px; border-radius:50%;
  background:var(--color-success);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.icon-exito svg { width:32px; height:32px; }

.sello { width:48px; height:48px; flex-shrink:0; margin-top:auto; }
.sello svg { width:48px; height:48px; display:block; }