/home/simp499cl/public_html/notas-prechequeo
Edit: /home/simp499cl/public_html/notas-prechequeo/gauges-inspeccion.css (7217B)
:root {
--bg: #ffffff;
--ink: #121212;
--muted: #7d7d7d;
--line: #ececec;
--red: #E63223;
--orange: #F97317;
--green: #22C55E;
--panel: #ffffff;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
}
button, input, select { font: inherit; }
.page-shell {
width: min(1220px, calc(100% - 32px));
margin: 0 auto;
padding: 52px 0 80px;
}
.hero {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 26px;
}
.eyebrow {
margin: 0 0 8px;
font-size: 10px;
font-weight: 800;
letter-spacing: .28em;
color: #d97835;
}
h1, h2, h3 { margin: 0; }
h1 {
font-size: clamp(36px, 5vw, 62px);
line-height: .95;
text-transform: uppercase;
letter-spacing: -.04em;
font-stretch: condensed;
}
h2 { font-size: 28px; }
h3 { font-size: 16px; margin-bottom: 18px; }
.legend {
display: flex;
gap: 18px;
font-size: 11px;
color: #8a8a8a;
letter-spacing: .08em;
}
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.dot { width: 16px; height: 6px; border-radius: 99px; display: inline-block; }
.dot-red { background: var(--red); }
.dot-orange { background: var(--orange); }
.dot-green { background: var(--green); }
.gauge-board {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
overflow: hidden;
min-height: 330px;
}
.gauge-category-section,
.gauge-final-section {
min-width: 0;
background: #fff;
}
.gauge-category-section {
padding: 28px 18px 24px;
border-right: 1px solid #f1f1f1;
display: flex;
align-items: center;
}
.gauge-category-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
align-items: start;
}
.gauge-final-section {
padding: 24px 14px;
display: flex;
align-items: center;
justify-content: center;
}
.gauge-card {
min-width: 0;
padding: 8px 4px 10px;
text-align: center;
background: #fff;
}
.gauge-card.summary {
width: 100%;
padding-inline: 4px;
display: grid;
grid-template-columns: minmax(110px, .8fr) minmax(200px, 1.2fr);
align-items: center;
gap: 14px;
}
.gauge-card.summary .gauge-main {
min-width: 0;
}
.final-rating-label {
justify-self: end;
width: min(100%, 160px);
padding: 10px 12px;
border-radius: 999px;
text-align: center;
text-transform: uppercase;
font-weight: 900;
letter-spacing: .10em;
line-height: 1.05;
font-size: clamp(10px, calc(var(--gauge-size, 200px) * 0.06), 16px);
color: #fff;
transition: background-color .12s linear, font-size .2s ease;
}
.gauge-wrap {
position: relative;
width: min(var(--gauge-size, 150px), 100%);
max-width: 100%;
margin: 0 auto;
transition: width .2s ease;
}
.gauge-face {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: #fff;
transition: box-shadow .2s ease;
}
.gauge-svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.gauge-title {
margin-top: 12px;
font-size: 11px;
line-height: 1.2;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
white-space: normal;
}
.gauge-tick-mark {
stroke: #181818;
stroke-width: 1.4;
stroke-linecap: round;
}
.gauge-tick {
font-size: 10px;
font-weight: 700;
fill: #202020;
text-anchor: middle;
dominant-baseline: middle;
}
.gauge-value {
font-weight: 900;
fill: #111;
text-anchor: middle;
dominant-baseline: middle;
letter-spacing: -.04em;
}
.gauge-status {
font-weight: 900;
text-anchor: middle;
dominant-baseline: middle;
letter-spacing: .13em;
}
.needle-hub-outer { fill: #151515; }
.needle-hub-inner { transition: fill .12s linear; }
.needle, .needle-tip { transition: fill .12s linear; }
@media (max-width: 900px) {
.gauge-board {
grid-template-columns: 1fr;
}
.gauge-category-section {
border-right: 0;
border-bottom: 1px solid #f1f1f1;
padding: 24px 14px 20px;
}
.gauge-category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 12px;
}
.gauge-final-section {
padding: 28px 14px 30px;
}
.gauge-card:not(.summary) .gauge-wrap {
width: min(var(--gauge-size, 150px), 100%);
}
.gauge-card.summary .gauge-wrap {
width: min(var(--gauge-size, 200px), 58vw);
}
.gauge-card.summary {
grid-template-columns: minmax(96px, .75fr) minmax(0, 1.25fr);
gap: 10px;
max-width: 520px;
margin: 0 auto;
}
.final-rating-label {
width: min(100%, 140px);
padding: 9px 10px;
}
}
@media (max-width: 480px) {
.gauge-category-grid { gap: 18px 8px; }
.gauge-title { font-size: 10px; letter-spacing: .08em; }
}
.admin-panel { margin-top: 26px; }
.admin-header {
display: flex;
justify-content: space-between;
gap: 18px;
align-items: end;
margin-bottom: 16px;
}
.header-actions { display: flex; gap: 10px; }
.btn {
border-radius: 10px;
border: 1px solid #dcdcdc;
padding: 10px 14px;
cursor: pointer;
font-weight: 700;
}
.btn-primary { color: #fff; background: #111; border-color: #111; }
.btn-secondary { background: #fff; color: #111; }
.admin-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.control-card {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 14px;
padding: 18px;
}
.stack { display: grid; gap: 12px; }
.score-row {
display: grid;
grid-template-columns: 1fr 1.3fr 54px;
align-items: center;
gap: 10px;
}
.score-row strong { font-size: 13px; }
.score-row output { text-align: right; font-weight: 800; }
.field-grid { display: grid; gap: 14px; }
.field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field {
display: grid;
gap: 8px;
font-size: 12px;
font-weight: 700;
}
.field span { color: #444; }
.field small { color: #949494; font-size: 10px; font-weight: 500; line-height: 1.25; }
.field input[type="range"] { width: 100%; }
.field input[type="color"] {
width: 100%;
height: 42px;
border: 1px solid #dedede;
border-radius: 9px;
padding: 4px;
background: white;
}
.field select {
width: 100%;
height: 42px;
border: 1px solid #dedede;
border-radius: 9px;
background: #fff;
padding: 0 10px;
}
.field output { color: #8b8b8b; font-size: 11px; }
.full-width { margin-top: 16px; }
@media (max-width: 1050px) {
.admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
.page-shell { width: min(100% - 20px, 1220px); padding-top: 28px; }
.hero, .admin-header { align-items: flex-start; flex-direction: column; }
.legend { flex-wrap: wrap; }
.admin-grid { grid-template-columns: 1fr; }
.field-grid.two { grid-template-columns: 1fr; }
.score-row { grid-template-columns: 1fr; }
.score-row output { text-align: left; }
}
.checkbox-field .checkbox-line { display:flex; align-items:center; gap:8px; margin-top:4px; font-size:12px; font-weight:700; color:#30343b; }
.checkbox-field .checkbox-line input[type="checkbox"] { width:16px; height:16px; accent-color:var(--green); cursor:pointer; }