@import url("fonts.css");

/* Paleta extraída de sercaemergencias.com.ar (azul institucional, contraste
   oscuro de las secciones de confianza, fondos claros y tarjetas blancas). */
:root {
  --serca-primary: #3d6d92;
  --serca-primary-light: #5b93b8;
  --serca-primary-dark: #1c3a54;
  --serca-ink: #17191c;
  --serca-accent: #e6b44a;
  --serca-danger: #c43d4b;
  --serca-warning: #d98c28;
  --serca-success: #1f8a5f;
  --serca-bg: #eef3f7;
  --serca-surface: #ffffff;
  --serca-text: #17222c;
  --serca-muted: #5c6b78;
  --serca-border: #dde6ed;
  --serca-tint: #e7eef5;
  --sidebar-width: 17.5rem;
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --shadow-soft: 0 10px 30px -12px rgb(23 41 57 / 18%);
  --shadow-card: 0 1px 2px rgb(23 41 57 / 6%), 0 8px 20px -14px rgb(23 41 57 / 14%);
  font-family: var(--font-body);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes serca-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes serca-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(61 109 146 / 45%); } 70% { box-shadow: 0 0 0 7px rgb(61 109 146 / 0%); } }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--serca-bg); color: var(--serca-text); }
button, input, select, textarea { font: inherit; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 10; background: white; padding: .75rem; }
.skip-link:focus { top: 1rem; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) 1fr; }
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 1.5rem 1rem; color: white;
  background: linear-gradient(175deg, var(--serca-primary-dark) 0%, #0f2438 78%, #0a1a29 100%);
  display: flex; flex-direction: column;
}
.brand { display: flex; align-items: center; gap: .85rem; padding: .35rem .5rem 1.8rem; }
.brand-mark {
  width: 2.85rem; height: 2.85rem; border-radius: .9rem; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--serca-primary-light), var(--serca-primary));
  color: white; box-shadow: 0 6px 16px -4px rgb(0 0 0 / 45%);
}
.brand-mark svg { width: 1.6rem; height: 1.6rem; }
.brand strong { font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; }
.brand strong, .brand small { display: block; }
.brand small { margin-top: .12rem; color: #9fb3c4; font-size: .7rem; letter-spacing: .03em; }
.sidebar nav { display: grid; gap: .3rem; }
.sidebar nav a {
  position: relative; color: #c9d7e3; text-decoration: none; padding: .78rem 1rem 0.78rem 1.4rem;
  border-radius: .65rem; font-weight: 500; transition: background-color .18s ease, color .18s ease;
}
.sidebar nav a:hover { background: rgb(255 255 255 / 6%); color: white; }
.sidebar nav a.active {
  color: white; background: linear-gradient(90deg, rgb(91 147 184 / 28%), rgb(91 147 184 / 6%)); font-weight: 650;
}
.sidebar nav a.active::before {
  content: ""; position: absolute; left: .35rem; top: .55rem; bottom: .55rem; width: .2rem;
  border-radius: 999px; background: var(--serca-primary-light);
}
.sidebar nav a[aria-disabled="true"] { opacity: .72; pointer-events: none; }
.sidebar-footer { margin-top: auto; padding: 1rem .5rem 0; color: #8fa2b3; font-size: .78rem; }
.sidebar-footer span, .sidebar-footer small { display: block; }
.sidebar-footer form { margin: .5rem 0; }
.sidebar-footer button { padding: 0; border: 0; color: #c9d7e3; background: transparent; cursor: pointer; text-decoration: underline; }
main { padding: 2rem clamp(1.25rem, 3vw, 3rem); overflow: hidden; }
.topbar, .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); }
h1 { margin-bottom: 0; font-size: clamp(1.8rem, 3vw, 2.35rem); font-weight: 700; letter-spacing: -.02em; }
h2 { margin-bottom: 0; font-size: 1.15rem; font-weight: 650; }
.eyebrow { margin-bottom: .35rem; color: var(--serca-primary); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.primary-action {
  display: inline-block; text-decoration: none; text-align: center;
  border: 0; border-radius: .75rem; padding: .85rem 1.15rem; color: white;
  background: linear-gradient(135deg, var(--serca-primary-light), var(--serca-primary));
  font-weight: 700; box-shadow: 0 10px 20px -8px rgb(61 109 146 / 45%);
  transition: transform .15s ease, box-shadow .15s ease; cursor: pointer;
}
.primary-action:hover { transform: translateY(-1px); box-shadow: 0 14px 24px -8px rgb(61 109 146 / 55%); }
.primary-action:active { transform: translateY(0); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2rem 0 1rem; }
.stat-card {
  position: relative; padding: 1.2rem; border: 1px solid var(--serca-border); border-radius: 1rem;
  background: var(--serca-surface); overflow: hidden; box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease; animation: serca-fade-in .4s ease both;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.stat-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: .25rem; background: var(--tone); }
.stat-card span { display: block; color: var(--serca-muted); font-size: .84rem; }
.stat-card strong { display: block; margin-top: .5rem; font-size: 1.8rem; }
.stat-success { --tone: var(--serca-primary); }
.stat-warning { --tone: var(--serca-warning); }
.stat-primary { --tone: #3374c5; }
.stat-danger { --tone: var(--serca-danger); }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); gap: 1rem; }
.panel {
  min-height: 24rem; padding: 1.35rem; border: 1px solid var(--serca-border); border-radius: 1.1rem;
  background: var(--serca-surface); box-shadow: var(--shadow-card); animation: serca-fade-in .45s ease both;
}
.status-pill { padding: .4rem .65rem; border-radius: 999px; background: var(--serca-tint); color: var(--serca-primary-dark); font-size: .75rem; font-weight: 700; }
.empty-state { min-height: 18rem; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--serca-muted); }
.empty-state h3 { margin: .75rem 0 .35rem; color: var(--serca-text); }
.empty-state p { max-width: 28rem; }
.empty-icon { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--serca-tint); color: var(--serca-primary); font-weight: 900; }
.resource-list { list-style: none; padding: 1rem 0 0; margin: 0; }
.resource-list li { display: flex; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--serca-border); }
.dot { display: inline-block; width: .55rem; height: .55rem; margin-right: .45rem; border-radius: 50%; background: #9ba8a3; }
.dot.available { background: var(--serca-primary); box-shadow: 0 0 0 4px var(--serca-tint); animation: serca-pulse 2.4s ease-in-out infinite; }
.dot.assigned { background: #3374c5; }
.dot.busy { background: var(--serca-danger); }
.dot.offline { background: #6b7280; }
.dot.delayed { background: var(--serca-warning); }
.map-panel { min-height: auto; margin-top: 1rem; }
.map-actions { display: flex; align-items: center; gap: .6rem; }
.layer-toggle {
  border: 1px solid var(--serca-border); border-radius: 999px; padding: .4rem .7rem;
  background: white; color: var(--serca-muted); font-size: .75rem; font-weight: 700;
}
.layer-toggle.active { border-color: var(--serca-primary); color: var(--serca-primary-dark); background: var(--serca-tint); }
.map-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, .8fr); gap: 1rem; margin-top: 1rem; }
.local-map {
  position: relative; min-height: 24rem; overflow: hidden; border: 1px solid #c3d4e0;
  border-radius: .8rem; background: #dbe6ef;
}
.local-map.map-offline {
  background-color: #e5edf3;
  background-image: linear-gradient(#c5d6e2 1px, transparent 1px), linear-gradient(90deg, #c5d6e2 1px, transparent 1px);
  background-size: 3rem 3rem;
}
.ambulance-marker-wrapper { background: transparent; border: 0; }
.ambulance-marker {
  display: grid; place-items: center; min-width: 3rem; min-height: 2rem;
  border: 3px solid white; border-radius: 999px; padding: .35rem .5rem;
  color: white; background: var(--serca-primary); font-size: .72rem; font-weight: 850;
  box-shadow: 0 5px 14px rgb(23 45 37 / 35%);
}

.marker-available { background: var(--serca-success); }
.marker-assigned, .marker-en_route { background: #3374c5; }
.marker-busy, .marker-at_scene, .marker-transporting { background: var(--serca-danger); }
.marker-offline {
  background: #6b7280;
}

.marker-delayed {
  background: #d97706;
}

.fleet-alert {
  border-left: 4px solid #c0392b;
  background: #fff7f5;
}
.marker-maintenance { background: var(--serca-warning); }
.traffic-marker-wrapper { background: transparent; border: 0; }
.traffic-marker {
  display: grid; place-items: center; width: 1.85rem; height: 1.85rem;
  border: 3px solid white; border-radius: 50%; color: white; background: #d69e2e;
  box-shadow: 0 4px 12px rgb(45 38 23 / 35%); font-size: 1rem; font-weight: 900;
}
.traffic-road_closed { background: #a72032; }
.traffic-road_work { background: #dd6b20; }
.traffic-accident { background: #c43d4b; }
.traffic-traffic_jam { background: #d69e2e; }
.fleet-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--serca-border); border-radius: .8rem; }
.fleet-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem; border-bottom: 1px solid var(--serca-border); }
.fleet-list li:not(.map-loading) { cursor: pointer; }
.fleet-list li:not(.map-loading):hover { background: #f5f9f7; }
.fleet-list li:last-child { border-bottom: 0; }
.fleet-list li > span:last-child { text-align: right; }
.fleet-list small { color: var(--serca-muted); }
.map-loading { color: var(--serca-muted); }
.map-note { margin: .85rem 0 0; color: var(--serca-muted); font-size: .78rem; }
.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; margin-top: .85rem; color: var(--serca-muted); font-size: .75rem; }
.map-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.map-legend span:last-child { margin-left: auto; }
.legend-symbol { width: .65rem; height: .65rem; border-radius: 50%; background: #999; }
.legend-symbol.closure { background: #a72032; }
.legend-symbol.work { background: #dd6b20; }
.legend-symbol.accident { background: #c43d4b; }
.legend-symbol.traffic { background: #d69e2e; }
.legend-symbol.available { background: var(--serca-success); }
.legend-symbol.assigned { background: #3374c5; }
.legend-symbol.busy { background: var(--serca-danger); }
.legend-symbol.offline { background: #6b7280; }
.dispatch-map-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(17rem, .75fr); gap: 1rem; margin-top: 1rem; }
.call-location-map { min-height: 31rem; cursor: crosshair; }
.call-location-map::before {
  content: "Gran Mendoza";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--serca-muted);
  font-weight: 700;
}
.call-location-map.leaflet-container::before { display: none; }
.dispatch-map-sidebar { min-width: 0; }
.dispatch-map-sidebar h3 { margin-bottom: .7rem; font-size: .95rem; }
.ambulance-state-legend { display: grid; gap: .45rem; margin-bottom: .8rem; color: var(--serca-muted); font-size: .75rem; }
.fleet-list.compact { max-height: 21rem; overflow-y: auto; }
.fleet-list.compact li { font-size: .8rem; }
.address-results button { display: grid; width: 100%; text-align: left; }
.address-results button span { color: var(--serca-muted); font-size: .72rem; }
.review-panel { min-height: auto; margin-top: 1rem; }
.review-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.review-item { padding: .9rem 1rem; border: 1px solid var(--serca-border); border-left: 4px solid #d69e2e; border-radius: .7rem; background: #fbfdfc; }
.review-item.review-critical { border-left-color: #a72032; }
.review-item.review-high { border-left-color: #dd6b20; }
.review-item > div { display: flex; justify-content: space-between; gap: 1rem; }
.review-actions { margin-top: .75rem; justify-content: flex-end; }
.secondary-action {
  border: 1px solid var(--serca-border);
  border-radius: .55rem;
  background: #fff;
  color: var(--serca-text);
  padding: .55rem .8rem;
  cursor: pointer;
}
.secondary-action:disabled { opacity: .55; cursor: wait; }
.care-form { max-width: 1050px; margin: 0 auto; }
.care-form fieldset { border: 1px solid var(--serca-border); border-radius: .75rem; margin: 1rem 0; padding: 1rem; }
.practice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.practice-option { display: flex; gap: .6rem; padding: .7rem; border: 1px solid var(--serca-border); border-radius: .6rem; }
.practice-option span { display: grid; }
.care-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .7rem; }
.error-banner { background: #fff0f0; color: #8d1f2d; }
.coverage-date { display: grid; gap: .25rem; color: var(--serca-muted); font-size: .75rem; }
.workforce-top-actions { display: flex; align-items: end; gap: .7rem; }
.coverage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.coverage-card { padding: 1.1rem; border: 1px solid var(--serca-border); border-left: 5px solid var(--serca-primary); border-radius: .8rem; background: white; }
.coverage-card.coverage-incomplete, .coverage-card.coverage-missing { border-left-color: var(--serca-danger); }
.shift-time { margin: .65rem 0; color: var(--serca-muted); font-size: .75rem; }
.crew-list { list-style: none; margin: 0; padding: 0; }
.crew-list li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .65rem 0; border-top: 1px solid var(--serca-border); }
.crew-list span, .crew-list small, .crew-list strong { display: block; }
.crew-list small { color: var(--serca-muted); }
.crew-list button { border: 0; color: var(--serca-primary); background: transparent; cursor: pointer; font-weight: 700; }
.coverage-alert { padding: .65rem; border-radius: .55rem; color: #8d1f2d; background: #fff0f0; font-size: .78rem; }
.transfer-toolbar, .transfer-toolbar label { display: flex; align-items: center; gap: .5rem; }
.transfer-layout { display: grid; grid-template-columns: minmax(20rem, .8fr) minmax(30rem, 1.4fr); gap: 1rem; margin-top: 1.5rem; }
.transfer-form, .route-sheet { min-height: auto; }
.transfer-form fieldset { margin: 1rem 0; border: 1px solid var(--serca-border); border-radius: .65rem; }
.requirements-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.requirements-grid label { display: flex; align-items: center; gap: .4rem; }
.requirements-grid input { width: auto; }
.transfer-list { display: grid; gap: .65rem; margin-top: 1rem; }
.transfer-item { display: grid; grid-template-columns: 4rem 1fr auto; gap: .8rem; padding: .9rem; border: 1px solid var(--serca-border); border-left: 5px solid #3374c5; border-radius: .7rem; }
.transfer-cancelled { opacity: .65; border-left-color: var(--serca-muted); }
.transfer-in_progress { border-left-color: var(--serca-warning); }
.transfer-completed { border-left-color: var(--serca-primary); }
.transfer-time strong, .transfer-time small { display: block; }
.transfer-time small, .transfer-main small { color: var(--serca-muted); }
.transfer-main > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.transfer-main p { margin: .4rem 0; font-size: .82rem; }
.transfer-actions { display: flex; align-items: center; gap: .4rem; }
.service-filters, .service-results, .service-detail { min-height: auto; margin-top: 1rem; }
.service-filters .form-actions { margin-top: 1rem; }
.service-table-wrap { margin-top: 1rem; overflow-x: auto; }
.service-table { width: 100%; border-collapse: collapse; }
.service-table th, .service-table td { padding: .75rem; border-bottom: 1px solid var(--serca-border); text-align: left; font-size: .8rem; }
.service-table th { color: var(--serca-muted); }
.service-table td small, .service-table td strong { display: block; }
.pagination { display: flex; justify-content: center; gap: .35rem; margin-top: 1rem; }
.pagination button { width: 2rem; height: 2rem; border: 1px solid var(--serca-border); border-radius: .4rem; background: white; }
.pagination button.active { color: white; background: var(--serca-primary); }
.detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin: 1rem 0; }
.detail-grid > div { padding: .75rem; border-radius: .55rem; background: #eef3f8; }
.detail-grid small, .detail-grid strong { display: block; }
.detail-grid small { color: var(--serca-muted); }
.service-timeline { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; list-style: none; }
.service-timeline li { padding: .65rem; border-left: 3px solid var(--serca-primary); background: #eef3f8; }
.service-timeline span, .service-timeline strong { display: block; }
.service-timeline span { color: var(--serca-muted); font-size: .7rem; }
.contract-create, .contract-results, .contract-detail { min-height: auto; margin-top: 1rem; }
.contract-create summary { cursor: pointer; font-weight: 800; }
.contract-create form { margin-top: 1rem; }
.contract-create fieldset { margin: 1rem 0; border: 1px solid var(--serca-border); border-radius: .7rem; }
.contract-filters { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: .6rem; }
.contract-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.contract-card { padding: 1rem; border: 1px solid var(--serca-border); border-left: 5px solid #3374c5; border-radius: .7rem; }
.contract-card.contract-active { border-left-color: var(--serca-primary); }
.contract-card.contract-suspended { border-left-color: var(--serca-warning); }
.contract-card.contract-cancelled, .contract-card.contract-expired { opacity: .7; border-left-color: var(--serca-muted); }
.contract-card small, .contract-card p { color: var(--serca-muted); }
.contract-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: .7rem 0; }
.contract-stats span { padding: .5rem; border-radius: .45rem; background: #eef3f8; font-size: .72rem; }
.contract-stats strong { display: block; }
.contract-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.pricing-create { min-height: auto; margin-top: 1rem; }
.pricing-layout { display: grid; grid-template-columns: minmax(18rem, .65fr) minmax(34rem, 1.35fr); gap: 1rem; margin-top: 1rem; }
.pricing-list, .pricing-editor { min-height: auto; }
.plan-card { padding: .8rem 0; border-bottom: 1px solid var(--serca-border); }
.plan-card small, .plan-card strong { display: block; }
.plan-card small { color: var(--serca-muted); }
.plan-versions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.version-chip { border: 1px solid var(--serca-border); border-radius: 999px; padding: .35rem .55rem; background: white; cursor: pointer; }
.version-published { color: var(--serca-primary-dark); background: var(--serca-tint); }
.version-draft { color: #8a570f; background: #fff4df; }
.pricing-services { display: grid; gap: .4rem; }
.pricing-service-row { display: grid; grid-template-columns: 1.5fr repeat(5, minmax(5rem, .7fr)); gap: .4rem; align-items: end; padding: .55rem; border-radius: .55rem; background: #eef2f7; }
.pricing-service-row small, .pricing-service-row strong { display: block; }
.pricing-service-row label { font-size: .68rem; }
.simulation-form { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.simulation-total { display: flex; justify-content: flex-end; gap: 1rem; margin-top: .7rem; padding: .8rem; background: var(--serca-tint); }
.review-item span, .review-item small { color: var(--serca-muted); font-size: .75rem; }
.review-item p { margin: .55rem 0; color: #3d4a56; font-size: .84rem; line-height: 1.4; }
.success-banner { margin-top: 1rem; padding: .9rem 1rem; border: 1px solid #b9cfe0; border-radius: .75rem; color: var(--serca-primary-dark); background: var(--serca-tint); }
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; background: radial-gradient(circle at 15% 15%, #234a68 0%, #16324a 45%, #0d2033 100%); }
.login-card {
  width: min(100%, 27rem); padding: 2.25rem 2rem; border: 1px solid rgb(255 255 255 / 8%); border-radius: 1.3rem;
  background: white; box-shadow: 0 30px 70px -20px rgb(6 18 30 / 55%); animation: serca-fade-in .5s ease both;
}
.login-brand { color: var(--serca-text); padding-left: 0; }
.login-brand small { color: var(--serca-muted); }
.login-tagline { margin: 1.1rem 0 .2rem; color: var(--serca-primary); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.login-copy { color: var(--serca-muted); }
.stack-form { display: grid; gap: 1rem; margin-top: 1.25rem; }
.stack-form label, .form-grid label, .search-field { display: grid; gap: .4rem; color: #3d4a56; font-size: .82rem; font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid #c6d2dc; border-radius: .6rem; padding: .72rem .8rem; color: var(--serca-text); background: white; transition: border-color .15s ease, outline-color .15s ease; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgb(61 109 146 / 18%); border-color: var(--serca-primary); }
.form-error { padding: .75rem; border: 1px solid #e4aab1; border-radius: .6rem; color: #862735; background: #fff0f2; }
.secondary-action {
  display: inline-block; padding: .75rem 1rem; border: 1px solid var(--serca-border); border-radius: .7rem;
  color: var(--serca-text); background: white; text-decoration: none; transition: border-color .15s ease, background-color .15s ease;
}
.secondary-action:hover { border-color: var(--serca-primary-light); background: var(--serca-tint); }
.call-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.form-section { min-height: auto; }
.form-section > h2 { margin-bottom: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.span-2 { grid-column: span 2; }
.required-note { color: var(--serca-danger); font-size: .72rem; }
.search-results { display: grid; max-height: 18rem; overflow: auto; margin-top: .35rem; border-radius: .6rem; }
.search-results button { display: grid; gap: .2rem; padding: .75rem; border: 0; border-bottom: 1px solid var(--serca-border); text-align: left; background: #f7f9fb; cursor: pointer; }
.search-results button:hover { background: #eaf1f7; }
.search-results span, .selected-client span { color: var(--serca-muted); font-size: .75rem; }
.selected-client { display: grid; gap: .2rem; margin-top: .75rem; padding: .9rem; border-left: 4px solid var(--serca-primary); border-radius: .5rem; background: #eaf1f7; }
.selected-client em { color: #922d3b; font-size: .78rem; font-style: normal; font-weight: 700; }
.hidden { display: none; }
.form-actions { display: flex; justify-content: flex-end; gap: .75rem; }
.operations-board { display: grid; gap: .7rem; margin-top: 1rem; }
.call-card { padding: .9rem 1rem; border: 1px solid var(--serca-border); border-left: 5px solid #d69e2e; border-radius: .75rem; background: #fbfdfc; }
.call-card.priority-emergency { border-left-color: #a72032; }
.call-card.priority-urgent { border-left-color: #dd6b20; }
.call-card.priority-green { border-left-color: var(--serca-primary); }
.call-card-heading, .call-card-heading > div, .call-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.call-card-heading span { padding: .25rem .5rem; border-radius: 999px; color: var(--serca-primary-dark); background: var(--serca-tint); font-size: .7rem; font-weight: 700; }
.call-card-heading time, .call-card p, .call-actions small { color: var(--serca-muted); font-size: .78rem; }
.call-card h3 { margin: .65rem 0 .25rem; font-size: 1rem; }
.reports-panel { margin-top: 1.25rem; }
.zone-bar-row { display: grid; grid-template-columns: 10rem 1fr auto; align-items: center; gap: .75rem; padding: .55rem 0; }
.zone-bar-label { font-weight: 700; font-size: .84rem; }
.zone-bar-track { height: .55rem; border-radius: 999px; background: var(--serca-tint); overflow: hidden; }
.zone-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--serca-primary-light), var(--serca-primary)); transition: width .3s ease; }
.zone-bar-value { font-size: .78rem; color: var(--serca-muted); white-space: nowrap; }
.zone-departments { grid-column: 2 / -1; margin: -.1rem 0 .6rem 10.75rem; color: var(--serca-muted); font-size: .72rem; }
.clinical-panel { margin-top: 1.25rem; }
.required-note { color: var(--serca-muted); font-size: .78rem; }
.call-card p { margin-bottom: .75rem; }
.call-actions select { max-width: 17rem; }
.call-actions { flex-wrap: wrap; }
.call-actions small { flex-basis: 100%; }
.call-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin: .65rem 0; }
.call-metrics span { padding: .4rem; border-radius: .45rem; color: var(--serca-muted); background: #f0f5f3; font-size: .68rem; }
.call-metrics strong { display: block; margin-top: .12rem; color: var(--serca-text); font-size: .78rem; }
.dispatch-action { border: 0; border-radius: .55rem; padding: .6rem .75rem; color: white; background: var(--serca-primary); font-weight: 700; cursor: pointer; }
.dispatch-action:disabled { opacity: .55; cursor: wait; }

@media (max-width: 920px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .sidebar nav { grid-template-columns: repeat(2, 1fr); }
  .sidebar-footer { display: none; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .workspace-grid { grid-template-columns: 1fr; }
  .map-layout { grid-template-columns: 1fr; }
  .dispatch-map-layout { grid-template-columns: 1fr; }
  .map-actions { flex-wrap: wrap; justify-content: flex-end; }
  .review-list { grid-template-columns: 1fr; }
  .coverage-grid { grid-template-columns: 1fr; }
  .transfer-layout { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: repeat(2, 1fr); }
  .contract-grid { grid-template-columns: 1fr; }
  .contract-filters { grid-template-columns: 1fr; }
  .pricing-layout { grid-template-columns: 1fr; }
  .pricing-service-row { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
}

@media print {
  .sidebar, .no-print { display: none !important; }
  .app-shell { display: block; }
  main { padding: 0; }
  .panel { border: 0; padding: 0; }
  .transfer-layout { display: block; }
  .transfer-item { break-inside: avoid; }
  .service-filters, .service-results { display: none !important; }
  .service-detail.hidden { display: none !important; }
}

@media (max-width: 560px) {
  main { padding: 1.25rem 1rem; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .primary-action { width: 100%; }
  .stat-grid, .sidebar nav { grid-template-columns: 1fr; }
}
.billing-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
.billing-kpis article { background: white; border: 1px solid var(--serca-border); border-radius: .8rem; padding: 1rem; display: grid; gap: .35rem; }
.billing-kpis strong { font-size: 1.45rem; color: var(--serca-primary); }
.billing-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.billing-generators { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.billing-generators form, .billing-issue { display: flex; align-items: end; gap: .7rem; }
.billing-list { display: grid; gap: .55rem; }
.billing-row, .invoice-row { display: flex; justify-content: space-between; gap: .8rem; align-items: center; border: 1px solid var(--serca-border); border-radius: .65rem; padding: .8rem; }
.billing-row span, .invoice-row > div { display: grid; gap: .2rem; }
.invoice-row > div:last-child { justify-items: end; }
.billing-issue { margin-top: 1rem; justify-content: flex-end; }
.billing-tools { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.billing-tools > div:last-child { display: flex; gap: .6rem; flex-wrap: wrap; }
@media (max-width: 900px) { .billing-layout, .billing-kpis { grid-template-columns: 1fr; } }

.admin-tabs { display: flex; gap: .5rem; margin: 1.25rem 0 1rem; }
.admin-tab { border: 1px solid var(--serca-border); border-radius: 999px; padding: .55rem 1rem; background: white; color: var(--serca-muted); font-weight: 700; cursor: pointer; }
.admin-tab.active { color: var(--serca-primary-dark); background: var(--serca-tint); border-color: var(--serca-primary); }
.admin-create { margin-bottom: 1rem; }
.admin-create summary { cursor: pointer; font-weight: 800; }
.admin-create form { margin-top: 1rem; }
.admin-detail { margin-top: 1rem; }
.role-checkboxes, .permission-checkboxes { display: grid; gap: .4rem; max-height: 16rem; overflow-y: auto; padding: .25rem; }
.permission-domain-group { border: 1px solid var(--serca-border); border-radius: .6rem; margin: 0 0 .5rem; padding: .5rem .75rem; }
.permission-domain-group legend { text-transform: capitalize; font-weight: 700; color: var(--serca-muted); font-size: .78rem; }
.checkbox-option { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.checkbox-option input { width: auto; }
.checkbox-option small { color: var(--serca-muted); }
.temp-password-banner { margin: 1rem 0; padding: .9rem 1rem; border: 1px solid var(--serca-accent); border-radius: .75rem; background: #fff8e8; color: #6b4a10; }
.temp-password-banner code { padding: .2rem .5rem; border-radius: .4rem; background: white; border: 1px solid var(--serca-border); font-weight: 700; }
[hidden] { display: none !important; }

.walkthrough-launcher {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: .45rem;
  border: 2px solid white;
  border-radius: 999px;
  padding: .65rem .9rem;
  color: white;
  background: var(--serca-primary-dark);
  box-shadow: 0 8px 24px rgb(15 36 56 / 35%);
  font-weight: 800;
  cursor: pointer;
}
.walkthrough-launcher:hover { background: var(--serca-primary); }
.walkthrough-shade {
  position: fixed;
  z-index: 10000;
  background: rgb(8 20 31 / 72%);
  backdrop-filter: blur(1px);
}
.walkthrough-focus {
  position: fixed;
  z-index: 10001;
  border: 3px solid #f7ca62;
  border-radius: .8rem;
  box-shadow: 0 0 0 4px rgb(247 202 98 / 28%), 0 0 28px rgb(247 202 98 / 70%);
  pointer-events: none;
  transition: inset .2s ease, width .2s ease, height .2s ease;
}
.walkthrough-dialog {
  position: fixed;
  z-index: 10002;
  width: min(24rem, calc(100vw - 2rem));
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 1rem;
  padding: 1.1rem;
  color: white;
  background: #102b42;
  box-shadow: 0 20px 55px rgb(0 0 0 / 42%);
}
.walkthrough-dialog header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.walkthrough-dialog h2 { margin: 0; font-size: 1.05rem; }
.walkthrough-dialog p { margin: .7rem 0 1rem; color: #d8e4ed; line-height: 1.5; }
.walkthrough-dialog small { color: #9fb3c4; }
.walkthrough-close {
  border: 0;
  padding: .1rem .35rem;
  color: white;
  background: transparent;
  font-size: 1.35rem;
  cursor: pointer;
}
.walkthrough-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.walkthrough-actions > div { display: flex; gap: .5rem; }
.walkthrough-actions button {
  border: 1px solid #7891a5;
  border-radius: .55rem;
  padding: .5rem .7rem;
  color: white;
  background: transparent;
  cursor: pointer;
}
.walkthrough-actions .walkthrough-next { border-color: #f7ca62; color: #102b42; background: #f7ca62; font-weight: 800; }
.walkthrough-actions button:disabled { opacity: .4; cursor: default; }
body.walkthrough-open { overflow: hidden; }

@media (max-width: 560px) {
  .walkthrough-launcher span { display: none; }
  .walkthrough-launcher { width: 3rem; height: 3rem; justify-content: center; padding: 0; }
}