/* Visual style inspired by the CECOS incident software: light blue background, white cards, blue accent */
:root {
  --fons: #e9ecf7; --panell: #ffffff; --text: #1f2633; --suau: #6b7385; --vora: #dde2ee;
  --accent: #2f55c9; --accent-text: #ffffff; --tria: #cfdaf7; --incident: #d93636; --camp: #f5f6fa;
  --optima: #1f8a4c; --acceptable: #c9a100; --suboptima: #d9731a; --perillosa: #c62828; --barra: #2f55c9;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fons: #121722; --panell: #1c2331; --text: #e6e9f0; --suau: #9aa3b5; --vora: #2c3546;
    --accent: #6d8ff0; --tria: #26365e; --camp: #232b3b; --incident: #ff6b6b; --barra: #6d8ff0;
  }
}
:root[data-theme="dark"] {
  --fons: #121722; --panell: #1c2331; --text: #e6e9f0; --suau: #9aa3b5; --vora: #2c3546;
  --accent: #6d8ff0; --tria: #26365e; --camp: #232b3b; --incident: #ff6b6b; --barra: #6d8ff0;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.4 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fons); color: var(--text); }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
.boto { background: var(--accent); color: var(--accent-text); border: 0; border-radius: 6px; padding: .6rem 1.1rem; font-weight: 600; }
.boto:disabled { opacity: .45; cursor: not-allowed; }
.panell { background: var(--panell); border-radius: 10px; padding: 1rem 1.2rem; box-shadow: 0 1px 2px rgba(20, 30, 60, .06); }
.suau { color: var(--suau); }
.etiqueta { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .82rem; font-weight: 700; color: #fff; }
.v-optima { background: var(--optima); } .v-acceptable { background: var(--acceptable); color: #1d232b; }
.v-suboptima { background: var(--suboptima); } .v-perillosa { background: var(--perillosa); }

/* Room screen */
.sala { display: grid; grid-template-columns: 30% 34% 1fr; grid-template-rows: auto 1fr; gap: 12px; height: 100vh; padding: 0 12px 12px; }
.capcalera { grid-column: 1 / -1; display: flex; gap: 1.2rem; align-items: center; padding: .5rem .2rem; }
.capcalera .marca { font-weight: 800; color: var(--accent); letter-spacing: .02em; }
.capcalera .info { margin-left: auto; display: flex; gap: 1.2rem; align-items: center; color: var(--suau); font-size: .9rem; }
.columna { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.mapa-panell { padding: 0; overflow: hidden; display: flex; }
#mapa { flex: 1; min-height: 300px; }
.incident { background: var(--tria); border-radius: 8px; padding: .6rem .8rem; }
.incident .num { color: var(--incident); font-weight: 700; margin-right: .8rem; }
.incident .tipus { font-size: .8rem; font-weight: 600; }
.camps { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; margin-top: .8rem; }
.camp label { display: block; font-size: .8rem; color: var(--suau); }
.camp div { background: var(--camp); border: 1px solid var(--vora); border-radius: 6px; padding: .35rem .6rem; font-size: .9rem; }
.registre { flex: 1; }
.registre .entrada { padding: .45rem 0; border-bottom: 1px solid var(--vora); }
.registre .meta { color: var(--suau); font-size: .85rem; }
.registre .text { text-transform: uppercase; font-size: .9rem; }
.registre .nova { animation: nova 1.5s ease-out; }
@keyframes nova { from { background: var(--tria); } to { background: transparent; } }
.pestanyes { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--vora); margin: -.2rem 0 .8rem; }
.pestanyes span { padding-bottom: .4rem; color: var(--suau); font-weight: 600; }
.pestanyes span.activa { color: var(--accent); border-bottom: 2px solid var(--accent); }
.opcions { display: flex; flex-direction: column; gap: .45rem; margin-top: .6rem; }
.opcio { text-align: left; border: 1px solid var(--vora); background: var(--panell); color: var(--text); border-radius: 6px; padding: .55rem .75rem; position: relative; overflow: hidden; }
.opcio.triada { border-color: var(--accent); background: var(--tria); }
.opcio .vots { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--barra); transition: width .3s; }
.opcio .nvots { float: right; color: var(--suau); font-size: .85rem; margin-left: .5rem; }
.accions { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.retroaccio { border-left: 4px solid var(--vora); padding: .4rem .8rem; margin-top: .8rem; background: var(--camp); border-radius: 0 6px 6px 0; }
.unitats-llista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem; margin: .5rem 0; }
.opcio.unitat { padding: .4rem .6rem; font-size: .9rem; }
.punt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.unitats-triades { margin: .6rem 0 0; padding: 0; list-style: none; }
.unitats-triades li { padding: .25rem 0; border-bottom: 1px solid var(--vora); }
.qr { display: flex; align-items: center; gap: .5rem; }
.qr img, .qr canvas { width: 64px; height: 64px; background: #fff; padding: 3px; border-radius: 4px; }
.formulari { max-width: 560px; margin: 8vh auto; display: flex; flex-direction: column; gap: 1rem; }
.formulari label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; }
.formulari select, .formulari input { font: inherit; padding: .5rem; border-radius: 6px; border: 1px solid var(--vora); background: var(--camp); color: var(--text); }
.resum table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.resum td, .resum th { padding: .4rem; border-bottom: 1px solid var(--vora); text-align: left; vertical-align: top; }
.llegenda { display: flex; flex-wrap: wrap; gap: .6rem; font-size: .8rem; padding: .4rem .6rem; }
.llegenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; background: var(--c); }
@media (max-width: 1100px) {
  .sala { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
  .mapa-panell { height: 60vh; }
}

/* Audience (mobile) */
.vota { max-width: 560px; margin: 0 auto; padding: 1rem 16px 2rem; }
.vota h1 { color: var(--accent); font-size: 1.2rem; }
.vota .opcio { width: 100%; font-size: 1.05rem; padding: .9rem; }