* { box-sizing: border-box; }
:root { --lime: #b9d719; --ink: #07131b; --muted: #b8c8cd; --white: #f6fafb; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--white); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at 50% 12%, #112a35 0, var(--ink) 46%, #030b10 100%); }
button, input { font: inherit; } button { cursor: pointer; }
#app { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.screen { width: 100%; display: none; animation: fade-in .25s ease; } .screen.active { display: block; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.login-box { width: min(430px, 100%); margin: auto; padding: 35px 28px 30px; text-align: center; background: rgba(12,29,38,.96); border: 1px solid rgba(185,215,25,.22); border-radius: 21px; box-shadow: 0 24px 70px rgba(0,0,0,.38); }
.brand-mark { width: 70px; height: 70px; display: block; margin: 0 auto 12px; border-radius: 20px; object-fit: cover; box-shadow: 0 0 0 5px rgba(185,215,25,.08); } .brand-logo { width: min(285px, 100%); display: block; margin: 0 auto 20px; }
.login-box h1, .page-heading h1, .welcome-row h1 { margin: 0; } .login-box h1 { font-size: 20px; } .subtitle { margin: 8px 0 27px; color: #c5d0d4; font-size: 15px; }
#login-form { display: grid; gap: 9px; text-align: left; } label, .eyebrow { color: #dce5e8; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .optional-password-label { margin-top: 5px; } .optional-password-label span { color: #91a5aa; font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; }
input { width: 100%; padding: 14px; color: var(--white); background: #08151c; border: 1px solid #49616a; border-radius: 10px; font-size: 16px; } input:focus { outline: 0; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(185,215,25,.16); }
.login-note { margin: 18px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.btn { border: 0; border-radius: 10px; padding: 14px 16px; font-weight: 800; transition: .2s ease; } .btn:disabled { cursor: not-allowed; opacity: .48; } .btn-primary { margin-top: 8px; color: #142000; background: var(--lime); } .btn-primary:hover:not(:disabled) { background: #cae832; box-shadow: 0 7px 20px rgba(185,215,25,.2); } .btn-secondary { margin-top: 8px; color: #dce5e8; background: #173141; border: 1px solid #49616a; } .btn-secondary:hover:not(:disabled) { background: #214554; }
.btn-success { color: #112000; background: var(--lime); } .btn-success:hover:not(:disabled) { background: #cae832; } .btn-danger { color: #fff; background: #b94b52; } .btn-danger:hover:not(:disabled) { background: #d45c64; }
.btn-loader { display: none; width: 16px; height: 16px; margin: auto; border: 2px solid rgba(20,32,0,.3); border-top-color: #142000; border-radius: 50%; animation: spin .7s linear infinite; } .is-loading .btn-label { display: none; } .is-loading .btn-loader { display: block; } @keyframes spin { to { transform: rotate(360deg); } }
.app-shell { width: min(620px, 100%); overflow: hidden; color: #10232b; background: #f1f5f5; border-radius: 22px; box-shadow: 0 24px 70px rgba(0,0,0,.38); }
.app-header { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; color: var(--white); background: #0b1d25; } .app-identity, .header-actions, .welcome-row, .section-heading, .jornada-item, .profile-card { display: flex; align-items: center; } .app-identity { gap: 10px; } .app-identity img { width: 34px; height: 34px; border-radius: 10px; } .app-identity strong { display: block; font-size: 15px; } .app-identity .eyebrow { color: var(--lime); font-size: 9px; } .header-actions { gap: 13px; } .connection-status { color: var(--lime); font-size: 11px; white-space: nowrap; } .connection-status span { display: inline-block; width: 7px; height: 7px; margin-right: 3px; background: currentColor; border-radius: 50%; } .connection-status.offline { color: #f0ae4c; } .btn-logout { padding: 4px 0; color: #d8e2e5; background: transparent; border: 0; font-size: 12px; }
.app-content { min-height: 590px; padding: 25px 20px 18px; } .welcome-row { justify-content: space-between; margin-bottom: 18px; } .welcome-row h1, .page-heading h1 { margin-top: 4px; font-size: 24px; } .date-label { color: #668087; font-size: 13px; text-transform: capitalize; }
.timer-card { padding: 21px; text-align: center; background: linear-gradient(140deg, #12323c, #0a1c25); border-radius: 20px; box-shadow: 0 12px 25px rgba(7,19,27,.14); } .timer-ring { --progress: 0deg; width: 190px; height: 190px; display: grid; place-items: center; margin: 0 auto 13px; background: conic-gradient(var(--lime) var(--progress), rgba(255,255,255,.13) 0); border-radius: 50%; } .timer-ring > div { width: 164px; height: 164px; display: grid; place-content: center; border-radius: 50%; background: #0d2731; } .timer { color: var(--white); font: 700 27px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: 1px; } .timer-ring small { display: block; margin-top: 9px; color: #b9c9cd; font-size: 12px; } .location-box { margin: 0; color: #b8d8df; font-size: 12px; }
.button-group { display: grid; gap: 10px; margin: 17px 0; } .content-card { padding: 18px; background: #fff; border-radius: 16px; box-shadow: 0 5px 17px rgba(16,35,43,.07); } .section-heading { justify-content: space-between; margin-bottom: 11px; } .section-heading h2, .empty-panel h2 { margin: 0; font-size: 16px; } .section-heading span { color: #789098; font-size: 11px; }
.finish-card { margin-bottom: 17px; } .finish-card h2 { margin: 0; font-size: 25px; } .finish-card > p { margin: 7px 0 28px; color: #71868d; line-height: 1.5; } .finish-card label { display: block; margin: 18px 0 8px; color: #182530; font-size: 14px; letter-spacing: 0; text-transform: none; } .finish-card input, .finish-card textarea { color: #182530; background: #fff; border-color: #e0e5e7; } .finish-card input:focus, .finish-card textarea:focus { border-color: var(--lime); } .finish-card textarea { min-height: 118px; resize: vertical; } .character-count { display: block; margin-top: 5px; color: #8a9ba1; text-align: right; font-size: 11px; } .btn-dark { width: 100%; margin-top: 25px; color: #fff; background: #101927; } .save-note { display: block; margin-top: 17px; color: #7a8d93; text-align: center; font-size: 12px; }
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 17px; } .metric-card { position: relative; overflow: hidden; padding: 16px; background: #fff; border-radius: 16px; box-shadow: 0 5px 17px rgba(16,35,43,.07); } .metric-card::after { content: ""; position: absolute; top: -25px; right: -25px; width: 75px; height: 75px; background: rgba(185,215,25,.2); border-radius: 50%; } .metric-card span, .metric-card small { display: block; color: #8a9ba1; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .metric-card strong { display: block; margin: 9px 0 2px; font-size: 28px; } .metric-card small { color: #71868d; font-size: 12px; letter-spacing: 0; text-transform: none; }
#jornadas-container { display: grid; gap: 8px; } .jornada-item { justify-content: space-between; padding: 12px; border-left: 3px solid var(--lime); background: #f4f8f8; border-radius: 9px; } .jornada-item strong, .jornada-item small { display: block; } .jornada-item strong { font-size: 14px; } .jornada-item small { margin-top: 4px; color: #6c8188; font-size: 12px; } .status-dot { width: 9px; height: 9px; background: #8aa3a8; border-radius: 50%; } .jornada-item.active .status-dot { background: var(--lime); box-shadow: 0 0 0 4px rgba(185,215,25,.2); } .empty-text, .page-heading p { color: #71868d; font-size: 13px; line-height: 1.5; } .empty-text { margin: 0; padding: 14px 0 5px; text-align: center; }
.page-heading { margin-bottom: 22px; } .page-heading p { margin-bottom: 0; } .empty-panel { text-align: center; } .panel-icon, .profile-avatar { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 10px; color: #132400; background: var(--lime); border-radius: 50%; font-weight: 800; } .profile-card { gap: 13px; } .profile-card .profile-avatar { flex: 0 0 44px; margin: 0; } .profile-card strong { display: block; margin-top: 4px; font-size: 14px; word-break: break-all; }
.bottom-nav { display: grid; grid-template-columns: repeat(4, 1fr); padding: 9px 8px 10px; background: #fff; border-top: 1px solid #e5eded; } .nav-item { display: grid; gap: 3px; justify-items: center; padding: 6px 2px; color: #789098; background: transparent; border: 0; font-size: 10px; } .nav-item span { font-size: 18px; line-height: 1; } .nav-item.active { color: #557000; font-weight: 800; }
.error-message { position: fixed; top: 18px; left: 50%; z-index: 5; display: none; max-width: min(400px, calc(100% - 30px)); padding: 12px 16px; color: #fff; background: #b94b52; border-radius: 9px; box-shadow: 0 8px 22px rgba(0,0,0,.25); font-size: 13px; transform: translateX(-50%); } .error-message.show { display: block; } .error-message.success { background: #3c8b62; }
.action-feedback { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: rgba(11,27,37,.58); opacity: 0; transition: opacity .18s ease; } .action-feedback[hidden] { display: none; } .action-feedback.is-visible { opacity: 1; } .action-feedback-card { width: min(380px, 100%); padding: 30px 25px 26px; color: #17202d; text-align: center; background: #fff; border-radius: 25px; box-shadow: 0 22px 55px rgba(7,19,27,.28); } .action-feedback-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 50%; background: #edf1f3; } .feedback-spinner { width: 43px; height: 43px; border: 6px solid #e2e8eb; border-top-color: var(--lime); border-radius: 50%; animation: spin .8s linear infinite; } .feedback-check, .feedback-error { display: none; width: 43px; height: 43px; place-items: center; color: #fff; border-radius: 50%; font-size: 28px; font-weight: 900; } .action-feedback-icon.is-success { background: #e5f7e9; } .action-feedback-icon.is-success .feedback-spinner, .action-feedback-icon.is-error .feedback-spinner { display: none; } .action-feedback-icon.is-success .feedback-check { display: grid; background: #39a96b; } .action-feedback-icon.is-error { background: #fff0ef; } .action-feedback-icon.is-error .feedback-error { display: grid; background: #d95555; } .action-feedback-card h2 { margin: 0 0 9px; font-size: 21px; letter-spacing: -.02em; } .action-feedback-card p { margin: 0; color: #617181; font-size: 15px; line-height: 1.45; } .action-feedback-card small { display: block; margin-top: 15px; color: #81909d; font-size: 12px; font-weight: 700; line-height: 1.4; }
@media (max-width: 480px) { #app { padding: 0; align-items: stretch; } .login-box { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; border: 0; border-radius: 0; box-shadow: none; } .app-shell { min-height: 100vh; border-radius: 0; } .app-content { min-height: calc(100vh - 122px); } }

/* Referencia visual móvil Spotlight: fondo claro, tarjetas blancas y jerarquía compacta. */
body { color: #152033; background: #f7f9fb; }
.app-shell { width: min(500px, 100%); color: #152033; background: #f7f9fb; border-radius: 0; box-shadow: 0 24px 70px rgba(30,45,60,.12); }
.app-header { padding: 22px 25px 12px; color: #152033; background: transparent; }
.app-brand-logo { width: 157px !important; height: auto !important; border-radius: 0 !important; }
.app-brand-icon { width: 42px !important; height: 42px !important; flex: 0 0 42px; border-radius: 8px !important; object-fit: cover; }
.login-box .brand-logo { padding: 10px 14px; background: #fff; border-radius: 12px; }
.connection-status { color: #6c7c8f; }
.connection-status span { background: #a8c800; }
.btn-logout { color: #708095; }
.app-content { padding: 16px 25px 20px; }
.welcome-row { margin-bottom: 20px; }
.welcome-row .eyebrow { color: #9aa6b6; font-size: 14px; }
.welcome-row h1, .page-heading h1 { font-size: 30px; letter-spacing: -.04em; }
.timer-card { padding: 25px; background: #fff; border: 1px solid #e4e8ed; border-radius: 27px; box-shadow: 0 8px 22px rgba(30,45,60,.06); }
.timer-ring { position: relative; width: 245px; height: 245px; background: conic-gradient(var(--lime) var(--progress), var(--lime) 0); }
.timer-ring > div { width: 225px; height: 225px; background: #fff; }
.timer { color: #101b2d; font-size: 37px; }
.timer-ring small { color: #6e7d91; font-size: 15px; }
.timer-ring::before { content: "JORNADA"; position: absolute; z-index: 1; top: 72px; color: #9ba6b4; font-size: 14px; font-weight: 800; letter-spacing: .1em; }
.content-card, .metric-card { border: 1px solid #e4e8ed; border-radius: 27px; box-shadow: 0 8px 22px rgba(30,45,60,.06); }
.finish-card { padding: 26px; }
.finish-card h2 { font-size: 29px; letter-spacing: -.04em; }
.finish-card > p { margin-bottom: 28px; font-size: 16px; }
.finish-card label { font-size: 16px; font-weight: 800; }
.finish-card input, .finish-card textarea { border-color: #e0e5e7; border-radius: 16px; }
.finish-card input { border-color: var(--lime); }
.finish-card textarea { min-height: 160px; }
.btn-dark { padding: 18px 16px; border-radius: 17px; font-size: 16px; }
.metrics-grid { gap: 16px; }
.metric-card { padding: 18px; }
.metric-card strong { font-size: 30px; }
.jornadas-list { padding: 22px; }
.jornada-item { padding: 15px; background: #fff; border: 1px solid #e5e9ed; border-left: 3px solid var(--lime); border-radius: 15px; }
.bottom-nav { padding: 15px 8px 17px; border-top: 0; border-radius: 27px 27px 0 0; box-shadow: 0 -4px 18px rgba(30,45,60,.05); }
.nav-item { padding: 8px 2px; font-size: 11px; }
.nav-item span { color: #93a1b2; }
.nav-item.active { color: #152033; }
.nav-item.active span { color: #152033; }

/* Composición aprobada de la pantalla principal. */
#app { padding: 0; align-items: start; }
.app-shell { width: min(450px, 100%); min-height: 100vh; overflow: visible; box-shadow: none; }
.app-header { padding: 21px 25px 14px; }
.app-identity { gap: 10px; }
.app-identity strong { color: #111b2c; font-size: 21px; letter-spacing: -.03em; }
.brand-symbol { position: relative; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; background: var(--lime); border-radius: 7px; }
.brand-symbol::before { content: ""; width: 18px; height: 18px; border: 6px solid #173141; border-top-color: transparent; border-radius: 50%; transform: rotate(-18deg); }
.brand-symbol::after { content: ""; position: absolute; top: 7px; left: 22px; width: 6px; height: 15px; background: #173141; border-radius: 4px; transform: rotate(28deg); }
.header-actions { gap: 8px; }
.current-time { min-width: 87px; padding: 10px 13px; color: #fff; background: #111b2c; border-radius: 24px; text-align: center; font-size: 16px; font-weight: 800; }
.connection-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.btn-logout { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.app-content { padding: 15px 25px 24px; }
.welcome-row { margin: 0 0 19px; }
.welcome-row .eyebrow { color: #98a3b2; font-size: 13px; letter-spacing: .08em; }
.welcome-row h1 { margin-top: 5px; color: #111b2c; font-size: 29px; line-height: 1.1; }
.date-label { display: none; }
.start-destination { margin-bottom: 16px; }
.start-destination label { display: block; margin-bottom: 8px; color: #17202d; font-size: 16px; font-weight: 800; letter-spacing: 0; text-transform: none; }
.start-destination input { padding: 18px 16px; color: #17202d; background: #fff; border: 2px solid var(--lime); border-radius: 17px; font-size: 15px; }
.start-destination input::placeholder, .finish-card input::placeholder, .finish-card textarea::placeholder { color: #a5aebb; opacity: 1; }
.start-destination .character-count { margin-top: -24px; padding: 0 13px 11px 0; position: relative; pointer-events: none; }
.timer-card { margin-bottom: 11px; padding: 34px 22px 26px; border-radius: 25px; }
.timer-ring { --ring-color: #edf0f4; width: 218px; height: 218px; margin-bottom: 25px; background: conic-gradient(var(--ring-color) var(--progress), var(--ring-color) 0); }
.timer-ring.is-active { --ring-color: var(--lime); }
.timer-ring > div { width: 201px; height: 201px; }
.timer-ring::before { top: 66px; font-size: 12px; }
#timer { color: #101a2b; font: 700 36px/1 "Segoe UI", Arial, sans-serif; letter-spacing: 3px; }
.timer-ring small { margin-top: 10px; color: #566171; font-size: 14px; font-weight: 700; }
.start-jornada-btn { width: 100%; margin-top: 0; padding: 17px 16px; border-radius: 16px; box-shadow: 0 11px 24px rgba(17,27,44,.16); font-size: 16px; }
.workday-wish { margin: 17px 0 0; color: #708096; font-size: 14px; font-weight: 700; }
.finish-card { margin: 0 0 12px; padding: 26px 21px 25px; border-radius: 25px; }
.finish-card h2 { font-size: 28px; }
.finish-card > p { margin: 7px 0 25px; font-size: 16px; }
.finish-card label { margin-top: 20px; font-size: 16px; }
.finish-card input, .finish-card textarea { width: 100%; padding: 17px 15px; border-radius: 16px; font: inherit; font-size: 15px; }
.finish-card input { border: 1.5px solid var(--lime); }
.finish-card textarea { min-height: 142px; }
.character-count { font-size: 12px; }
.btn-dark { background: #111b2c; }
.save-note { color: #748398; font-size: 12px; }
.save-note::first-letter { color: var(--lime); }
.metrics-grid { gap: 16px; margin: 0 -4px 23px; }
.metric-card { min-height: 127px; padding: 17px; border-radius: 21px; }
.metric-card span { color: #91a0b3; font-size: 11px; }
.metric-card strong { margin: 8px 0 4px; color: #111b2c; font-size: 30px; }
.metric-card small { color: #6f7b8b; }
.jornadas-list { padding: 0; background: transparent; border: 0; box-shadow: none; }
.section-heading { margin-bottom: 10px; }
.section-heading h2 { color: #283444; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.section-heading span { display: none; }
#jornadas-container { gap: 11px; }
.jornada-item { padding: 13px 16px; border: 1px solid #e3e7ec; border-left: 1px solid #e3e7ec; border-radius: 17px; box-shadow: 0 4px 12px rgba(30,45,60,.03); }
.jornada-item strong { color: #172131; font-size: 15px; }
.jornada-item small { color: #7b8796; font-size: 12px; }
.jornada-summary { min-width: 68px; text-align: right; }
.bottom-nav { position: sticky; bottom: 0; margin: 0 20px 17px; padding: 14px 7px; border: 1px solid #e5e9ed; border-radius: 27px; box-shadow: 0 8px 22px rgba(30,45,60,.09); }
.nav-item { min-height: 53px; border-radius: 16px; }
.nav-item.active { background: #fff; box-shadow: 0 5px 15px rgba(30,45,60,.06); }
.nav-item span { font-size: 19px; }
@media (min-width: 451px) { body { background: #e9eef2; } .app-shell { margin: 0 auto; } }

/* Historial: resumen y consulta, basado en el diseño aprobado. */
.history-title-row { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 8px; margin-bottom: 20px; }
.history-title-row .page-heading { margin: 0; text-align: center; }
.history-title-row .page-heading h1 { margin: 0; font-size: 21px; letter-spacing: -.03em; }
.icon-button { width: 36px; height: 36px; color: #152033; background: transparent; border: 0; font-size: 28px; line-height: 1; }
.history-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 17px; }
.history-metric { min-height: 112px; padding: 14px 12px; background: #fff; border: 1px solid #e4e8ed; border-radius: 16px; box-shadow: 0 6px 17px rgba(30,45,60,.06); }
.history-metric span, .history-metric small { display: block; color: #6e7d91; font-size: 11px; }
.history-metric strong { display: block; margin: 11px 0 5px; color: #111b2c; font-size: 24px; letter-spacing: -.04em; }
.history-filters { margin-bottom: 17px; padding: 18px; }
.history-filters h2 { margin: 0 0 12px; color: #283444; font-size: 15px; }
.history-filters h2:nth-of-type(2) { margin-top: 20px; }
.date-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.date-range label span { display: block; margin-bottom: 5px; color: #718096; font-size: 11px; }
.date-range input { padding: 11px 9px; color: #152033; background: #fff; border-color: #e0e5e7; border-radius: 11px; font-size: 12px; }
.date-range .btn { grid-column: 1 / -1; margin-top: 2px; padding: 12px; font-size: 13px; }
.quick-filters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.quick-filters button { padding: 10px 4px; color: #506176; background: #fff; border: 1px solid #e3e8ed; border-radius: 10px; font-size: 11px; }
.quick-filters button.active { color: #17202d; background: #cfe833; border-color: #cfe833; font-weight: 800; }
.calendar-card { margin-bottom: 17px; padding: 18px; }
.calendar-card .section-heading { margin-bottom: 14px; }
.calendar-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; color: #718096; font-size: 10px; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 3px; }
.calendar-legend i { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: #7ad58e; }
.calendar-legend i.holiday { background: #ffc532; }.calendar-legend i.sunday { background: #f05245; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: #17202d; }
.calendar-toolbar button { width: 28px; height: 28px; color: #17202d; background: transparent; border: 0; font-size: 28px; }
.calendar-toolbar strong { text-transform: capitalize; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; }
.calendar-weekday { padding-bottom: 6px; color: #7d8999; font-size: 10px; font-weight: 700; }
.calendar-day { display: grid; place-items: center; min-height: 30px; color: #17202d; border-radius: 50%; font-size: 12px; }
.calendar-day.today { background: #cfe833; font-weight: 800; }.calendar-day.sunday { color: #ef4d43; }.calendar-day.muted { color: #b0bac6; }
.history-records { padding-bottom: 20px; }
@media (max-width: 360px) { .history-metrics { gap: 5px; }.history-metric { padding: 12px 8px; }.history-metric strong { font-size: 20px; }.calendar-legend { gap: 4px; font-size: 9px; } }

/* Alertas del empleado: envío rápido y seguimiento sin acciones destructivas. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }.incident-form-card { margin-bottom: 20px; padding: 22px; }.incident-form-card h2 { margin: 0 0 17px; color: #17202d; font-size: 16px; letter-spacing: .07em; text-transform: uppercase; }.incident-type-list { display: grid; gap: 10px; padding: 0; margin: 0; border: 0; }.incident-choice { position: relative; display: grid !important; grid-template-columns: 48px 1fr 26px; gap: 13px; align-items: center; min-height: 79px; padding: 13px; margin: 0 !important; color: #17202d !important; background: #fff; border: 1px solid #e1e6eb; border-radius: 18px; box-shadow: 0 5px 14px rgba(30,45,60,.035); cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }.incident-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }.incident-choice:has(input:focus-visible) { outline: 3px solid rgba(185,215,25,.35); outline-offset: 2px; }.incident-choice:has(input:checked) { border: 2px solid #17202d; box-shadow: 0 8px 19px rgba(23,32,45,.1); }.incident-choice-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; font-size: 24px; font-weight: 900; }.incident-choice-start .incident-choice-icon { color: #e23c31; background: #ffe5e2; }.incident-choice-end .incident-choice-icon { color: #e68011; background: #fff0d8; }.incident-choice-time .incident-choice-icon { color: #6751c6; background: #eeeaff; }.incident-choice-location .incident-choice-icon { color: #3a80c8; background: #e1f0ff; }.incident-choice-other .incident-choice-icon { color: #3a80c8; background: #e1efff; }.incident-choice-copy { min-width: 0; }.incident-choice-copy strong, .incident-choice-copy small { display: block; }.incident-choice-copy strong { color: #17202d; font-size: 15px; line-height: 1.2; }.incident-choice-copy small { margin-top: 4px; color: #748194; font-size: 12px; font-weight: 500; line-height: 1.3; }.incident-choice-radio { width: 25px; height: 25px; display: block; border: 2px solid #bfc8d3; border-radius: 50%; }.incident-choice:has(input:checked) .incident-choice-radio { border: 7px solid #17202d; }.incident-observation-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 21px; }.incident-observation-heading label { margin: 0 !important; color: #17202d; font-size: 14px; letter-spacing: 0; text-transform: none; }.incident-observation-heading label span, .incident-observation-heading > span { color: #8a96a4; font-size: 12px; font-weight: 700; }.incident-form-card textarea { width: 100%; min-height: 130px; padding: 15px; margin-top: 9px; color: #17202d; background: #fff; border: 1px solid #dfe5eb; border-radius: 16px; font: inherit; font-size: 15px; line-height: 1.45; resize: vertical; }.incident-form-card textarea:focus { outline: 0; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(185,215,25,.14); }.incident-form-card .btn { margin-top: 18px; }.incidents-list { padding-bottom: 22px; }.incidents-list .section-heading { margin-bottom: 11px; }.incidents-list .section-heading h2 { font-size: 15px; }.incident-item { display: flex; gap: 12px; padding: 15px; margin-bottom: 10px; background: #fff; border: 1px solid #e3e7ec; border-radius: 17px; box-shadow: 0 4px 12px rgba(30,45,60,.03); }.incident-icon { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; color: #8d6510; background: #fff3d6; border-radius: 50%; font-size: 19px; font-weight: 900; }.incident-body { min-width: 0; }.incident-body strong, .incident-body small, .incident-body span { display: block; }.incident-body strong { color: #172131; font-size: 14px; }.incident-body small { margin-top: 4px; color: #728094; font-size: 12px; line-height: 1.35; }.incident-body span { margin-top: 7px; color: #9a7530; font-size: 11px; font-weight: 700; }
.support-switcher { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 5px; margin: 0 0 17px; background: #edf1f4; border-radius: 16px; }.support-switcher button { min-height: 43px; color: #738094; background: transparent; border: 0; border-radius: 12px; font-size: 12px; font-weight: 800; }.support-switcher button span { margin-right: 5px; font-size: 16px; }.support-switcher button.active { color: #17202d; background: #fff; box-shadow: 0 3px 10px rgba(30,45,60,.08); }.correction-fields { padding: 17px 14px; margin-top: 17px; background: #fffaf0; border: 1.5px solid #eebd3b; border-radius: 18px; }.correction-heading { display: flex; gap: 9px; align-items: flex-start; }.correction-heading > span { color: #b77e07; font-size: 20px; }.correction-heading strong { display: block; color: #7e5014; font-size: 14px; }.correction-heading p { margin: 3px 0 0; color: #895d28; font-size: 12px; line-height: 1.35; }.correction-times { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }.correction-times label:first-child { grid-column: 1 / -1; }.correction-fields label { display: block; margin: 13px 0 6px; color: #4a4f57; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }.correction-fields label span { color: #8b949d; font-size: 11px; font-weight: 600; text-transform: none; }.correction-fields input, .correction-fields textarea { width: 100%; color: #17202d; background: #fff; border: 1px solid #dce2e8; border-radius: 12px; font: inherit; font-size: 14px; }.correction-fields input { min-height: 44px; padding: 9px 10px; }.correction-fields textarea { min-height: 90px; margin-top: 0; padding: 11px; }.correction-requests-list { margin-top: -8px; }.correction-request-item, .notification-item { display: flex; gap: 12px; padding: 15px; margin-bottom: 10px; background: #fff; border: 1px solid #e3e7ec; border-radius: 17px; box-shadow: 0 4px 12px rgba(30,45,60,.03); }.correction-request-item .incident-icon { color: #6751c6; background: #eeeaff; }.notifications-heading { display: flex; gap: 13px; align-items: center; margin: 3px 0 18px; }.notifications-heading .panel-icon { flex: 0 0 44px; margin: 0; color: #244d77; background: #e1f0ff; }.notifications-heading h2 { margin: 3px 0; color: #17202d; font-size: 21px; }.notifications-heading p { margin: 0; color: #748194; font-size: 13px; line-height: 1.35; }.notification-item { cursor: pointer; }.notification-item.is-unread { border-color: #bfda44; background: #fdfff5; }.notification-icon { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; color: #386a9b; background: #e1f0ff; border-radius: 50%; font-size: 18px; font-weight: 800; }