/*
 * YCC Blanco Ejecutivo refinado — reference component styles.
 * Requires design/tokens/tokens.css. Uses only --ycc-* tokens; no raw colors.
 * Framework-agnostic: port these rules into the chosen stack's components and keep class semantics.
 * Breakpoints (max-width): 1150, 1050, 900, 780, 390 — see tokens.json › breakpoint.
 * Text-size floor (adopted 13/10/2026): var(--ycc-layout-reference-11) for table cells, buttons, tabs, nav and form text; var(--ycc-layout-reference-10) for tags, eyebrows, captions.
 */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ycc-color-bg-canvas);
  color: var(--ycc-color-text-primary);
  font-family: var(--ycc-font-family-sans);
  font-size: var(--ycc-font-size-body);
  line-height: var(--ycc-font-line-height-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
:focus-visible {
  outline: var(--ycc-focus-width) solid var(--ycc-color-focus-ring);
  outline-offset: var(--ycc-focus-offset);
}
::selection { background: var(--ycc-color-bg-selection); color: var(--ycc-color-text-primary); }
.ycc-visually-hidden {
  position: absolute; width: var(--ycc-layout-reference-1); height: var(--ycc-layout-reference-1); padding: 0; margin: var(--ycc-layout-reference-negative-1);
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Typography ---------- */
.ycc-h1 {
  font-size: var(--ycc-font-size-display);
  font-weight: var(--ycc-font-weight-bold);
  line-height: var(--ycc-font-line-height-heading);
  letter-spacing: var(--ycc-font-letter-spacing-display);
  margin: var(--ycc-space-2) 0 var(--ycc-space-2-5);
}
.ycc-h2 {
  font-size: var(--ycc-font-size-xl);
  font-weight: var(--ycc-font-weight-bold);
  line-height: var(--ycc-font-line-height-snug);
  letter-spacing: var(--ycc-font-letter-spacing-subtle);
  margin: 0 0 var(--ycc-space-4);
}
.ycc-h3 {
  font-size: var(--ycc-font-size-lg);
  font-weight: var(--ycc-font-weight-bold);
  line-height: 1.45;
  letter-spacing: var(--ycc-font-letter-spacing-subtle);
  margin: 0 0 var(--ycc-space-2);
}
.ycc-eyebrow {
  font-size: var(--ycc-font-size-sm);
  letter-spacing: var(--ycc-font-letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--ycc-color-text-brand);
}
.ycc-muted {
  font-size: var(--ycc-font-size-md);
  line-height: var(--ycc-font-line-height-relaxed);
  color: var(--ycc-color-text-secondary);
}

/* ---------- App shell ---------- */
.ycc-app {
  display: grid;
  grid-template-columns: var(--ycc-size-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}
.ycc-sidebar {
  position: sticky; top: 0; height: 100vh; overflow: auto;
  display: flex; flex-direction: column; gap: var(--ycc-space-6);
  padding: var(--ycc-layout-reference-27) var(--ycc-space-4-5);
  background: var(--ycc-color-bg-surface);
  border-right: var(--ycc-border-width-hairline) solid var(--ycc-color-border-default);
  z-index: var(--ycc-z-sidebar);
}
.ycc-logo {
  display: block;
  width: var(--ycc-size-logo-width); max-width: 100%;
  background: var(--ycc-color-bg-surface); /* logo always on true white — no grey band */
  padding: var(--ycc-layout-reference-7) 0;
}
.ycc-nav { display: grid; gap: var(--ycc-layout-reference-7); }
.ycc-nav__item {
  display: flex; align-items: center; gap: var(--ycc-layout-reference-13);
  min-height: var(--ycc-size-nav-item-height);
  padding: var(--ycc-space-3) var(--ycc-space-3-5);
  border: var(--ycc-border-width-hairline) solid transparent;
  border-radius: var(--ycc-radius-lg);
  background: none;
  color: var(--ycc-color-text-nav);
  font-size: var(--ycc-font-size-md);
  text-align: left;
  transition: background var(--ycc-motion-duration-base) ease, color var(--ycc-motion-duration-base) ease;
}
.ycc-nav__item svg { width: var(--ycc-size-icon-nav); height: var(--ycc-size-icon-nav); flex: none; stroke-width: var(--ycc-icon-stroke-width-nav); }
.ycc-nav__item:hover:not([aria-current="page"]) { background: var(--ycc-color-bg-tint); color: var(--ycc-color-text-primary); }
.ycc-nav__item[aria-current="page"] {
  background: var(--ycc-color-bg-inverse);
  color: var(--ycc-color-text-on-inverse);
  border-color: var(--ycc-color-bg-inverse);
  border-left: var(--ycc-border-width-nav-marker) solid var(--ycc-color-accent-default);
  box-shadow: var(--ycc-shadow-nav-active);
}
.ycc-header {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: var(--ycc-layout-reference-11);
  min-height: var(--ycc-size-header-height);
  padding: var(--ycc-layout-reference-19) var(--ycc-space-9);
  background: color-mix(in srgb, var(--ycc-color-bg-surface) 93%, transparent);
  backdrop-filter: blur(var(--ycc-layout-reference-10));
  border-bottom: var(--ycc-border-width-hairline) solid var(--ycc-color-border-default);
}
.ycc-main {
  padding: var(--ycc-layout-reference-35) var(--ycc-space-9);
  max-width: var(--ycc-size-main-max-width);
  animation: ycc-enter var(--ycc-motion-duration-slow) ease;
}
@keyframes ycc-enter {
  from { opacity: .5; transform: translateY(var(--ycc-motion-distance-enter)); }
  to { opacity: 1; transform: none; }
}
.ycc-page-heading {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--ycc-space-6); margin-bottom: var(--ycc-space-7);
}
.ycc-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--ycc-layout-reference-15);
  margin-bottom: var(--ycc-space-5-5);
  font-size: var(--ycc-font-size-sm);
  color: var(--ycc-color-text-tertiary);
}

/* ---------- Buttons ---------- */
.ycc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ycc-space-1-5);
  min-height: var(--ycc-size-button-height);
  padding: var(--ycc-space-2-5) var(--ycc-layout-reference-15);
  border: var(--ycc-border-width-hairline) solid var(--ycc-color-action-secondary-border);
  border-radius: var(--ycc-radius-lg);
  background: var(--ycc-color-action-secondary-bg);
  color: var(--ycc-color-action-secondary-text);
  font-size: var(--ycc-font-size-md);
  line-height: 1.5;
  transition: background var(--ycc-motion-duration-base), border-color var(--ycc-motion-duration-base),
    box-shadow var(--ycc-motion-duration-base), transform var(--ycc-motion-duration-base);
}
.ycc-btn:hover { background: var(--ycc-color-action-secondary-bg-hover); border-color: var(--ycc-color-border-hover); }
.ycc-btn:active { transform: translateY(var(--ycc-motion-distance-press)); }
.ycc-btn--primary {
  background: var(--ycc-color-action-primary-bg);
  border-color: var(--ycc-color-action-primary-bg);
  color: var(--ycc-color-action-primary-text);
  box-shadow: var(--ycc-shadow-button-primary);
}
.ycc-btn--primary:hover {
  background: var(--ycc-color-action-primary-bg-hover);
  border-color: var(--ycc-color-action-primary-bg-hover);
  box-shadow: var(--ycc-shadow-button-primary-hover);
}
.ycc-btn--sm { min-height: var(--ycc-size-button-height-sm); padding: var(--ycc-space-2) var(--ycc-layout-reference-11); font-size: var(--ycc-font-size-md); }
.ycc-btn--on-inverse { background: var(--ycc-color-bg-surface); color: var(--ycc-color-text-primary); border-color: var(--ycc-color-bg-surface); }
.ycc-btn--danger { color: var(--ycc-color-text-danger); border-color: var(--ycc-color-border-danger); }
.ycc-btn--icon {
  width: var(--ycc-size-close-button); height: var(--ycc-size-close-button); min-height: 0; padding: 0;
  font-size: var(--ycc-font-size-3xl);
}

/* ---------- Tags (status) ---------- */
.ycc-tag {
  display: inline-flex; align-items: center; gap: var(--ycc-space-1);
  padding: var(--ycc-layout-reference-5) var(--ycc-layout-reference-9);
  border: var(--ycc-border-width-hairline) solid var(--ycc-color-status-info-border);
  border-radius: var(--ycc-radius-sm);
  background: var(--ycc-color-status-info-bg);
  color: var(--ycc-color-status-info-text);
  font-size: var(--ycc-font-size-sm);
  line-height: 1.5;
}
.ycc-tag--done { background: var(--ycc-color-status-done-bg); color: var(--ycc-color-status-done-text); border-color: var(--ycc-color-status-done-border); }
.ycc-tag--pending { background: var(--ycc-color-status-pending-bg); color: var(--ycc-color-status-pending-text); border-color: var(--ycc-color-status-pending-border); }
.ycc-tag--pending::before { content: '◷'; color: var(--ycc-color-text-brand); }
.ycc-tag--neutral { background: var(--ycc-color-status-neutral-bg); color: var(--ycc-color-status-neutral-text); border-color: transparent; }
.ycc-tag--danger { background: var(--ycc-color-status-danger-bg); color: var(--ycc-color-status-danger-text); border-color: var(--ycc-color-status-danger-border); }

/* ---------- Surfaces ---------- */
.ycc-panel {
  padding: var(--ycc-layout-reference-25);
  margin-bottom: var(--ycc-space-5);
  background: var(--ycc-color-bg-surface);
  border: var(--ycc-border-width-hairline) solid var(--ycc-color-border-default);
  border-radius: var(--ycc-radius-2xl);
  box-shadow: var(--ycc-shadow-card);
}
.ycc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ycc-layout-reference-21); align-items: stretch; }
.ycc-split { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--ycc-layout-reference-21); align-items: start; }

/* KPI card */
.ycc-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ycc-layout-reference-17); margin-bottom: var(--ycc-layout-reference-27); }
.ycc-metric {
  position: relative;
  min-height: var(--ycc-size-card-min-height);
  padding: var(--ycc-space-5-5);
  background: var(--ycc-color-bg-surface);
  border: var(--ycc-border-width-hairline) solid var(--ycc-color-border-default);
  border-radius: var(--ycc-radius-2xl);
  box-shadow: var(--ycc-shadow-card);
  color: var(--ycc-color-text-primary);
  text-align: left;
  transition: box-shadow var(--ycc-motion-duration-slow), border-color var(--ycc-motion-duration-slow), transform var(--ycc-motion-duration-slow);
}
a.ycc-metric:hover, button.ycc-metric:hover {
  transform: translateY(var(--ycc-motion-distance-lift));
  box-shadow: var(--ycc-shadow-card-hover);
  border-color: var(--ycc-color-border-subtle-hover);
}
.ycc-metric__top { display: flex; justify-content: space-between; align-items: center; gap: var(--ycc-space-2-5); font-size: var(--ycc-font-size-md); color: var(--ycc-color-text-secondary); }
.ycc-metric__top > span {
  display: inline-grid; place-items: center; width: var(--ycc-layout-reference-24); height: var(--ycc-layout-reference-24);
  border-radius: var(--ycc-layout-reference-7); background: var(--ycc-color-bg-tint); color: var(--ycc-color-text-brand);
}
.ycc-metric__value {
  display: block;
  margin: var(--ycc-space-3) 0 var(--ycc-space-2);
  font-size: var(--ycc-font-size-metric);
  font-weight: var(--ycc-font-weight-bold);
  line-height: var(--ycc-font-line-height-tight);
  letter-spacing: var(--ycc-font-letter-spacing-metric);
  font-variant-numeric: tabular-nums;
}
.ycc-metric__caption { font-size: var(--ycc-font-size-sm); color: var(--ycc-color-text-tertiary); }

/* Home: welcome + Próximas acciones */
.ycc-executive { display: grid; grid-template-columns: 1.45fr 1fr; gap: var(--ycc-layout-reference-21); margin-bottom: var(--ycc-layout-reference-25); align-items: stretch; }
.ycc-welcome {
  position: relative; overflow: hidden;
  padding: var(--ycc-space-8);
  background: var(--ycc-color-bg-surface);
  border: var(--ycc-border-width-hairline) solid var(--ycc-color-border-default);
  border-radius: var(--ycc-radius-4xl);
  box-shadow: var(--ycc-shadow-card);
}
.ycc-welcome::after { /* decorative outline square, top-right */
  content: ''; position: absolute; right: var(--ycc-layout-reference-negative-45); top: var(--ycc-layout-reference-negative-70); width: var(--ycc-layout-reference-195); height: var(--ycc-layout-reference-195);
  border: var(--ycc-border-width-hairline) solid var(--ycc-color-border-decorative);
  box-shadow: 0 0 0 var(--ycc-layout-reference-30) var(--ycc-color-bg-decorative);
  transform: rotate(35deg); opacity: .8; pointer-events: none;
}
.ycc-welcome__title {
  margin: var(--ycc-space-4) 0;
  font-size: var(--ycc-font-size-display-lg);
  font-weight: var(--ycc-font-weight-bold);
  line-height: var(--ycc-font-line-height-display);
  letter-spacing: var(--ycc-layout-reference-negative-1);
}
.ycc-welcome__foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--ycc-space-3);
  margin-top: var(--ycc-space-6-5); padding-top: var(--ycc-layout-reference-17);
  border-top: var(--ycc-border-width-hairline) solid var(--ycc-color-border-default);
  font-size: var(--ycc-font-size-sm); color: var(--ycc-color-text-secondary);
}
.ycc-actionpanel {
  padding: var(--ycc-layout-reference-29);
  background: var(--ycc-color-bg-inverse);
  color: var(--ycc-color-text-on-inverse);
  border-radius: var(--ycc-radius-4xl);
  box-shadow: var(--ycc-shadow-hero);
}
.ycc-actionpanel .ycc-eyebrow { color: var(--ycc-color-text-on-inverse-muted); }
.ycc-actionpanel__title { margin: var(--ycc-layout-reference-15) 0 var(--ycc-layout-reference-17); font-size: var(--ycc-font-size-3xl); line-height: 1.35; letter-spacing: var(--ycc-font-letter-spacing-heading); }
.ycc-actionrow {
  display: flex; justify-content: space-between; align-items: center; gap: var(--ycc-space-3);
  width: 100%; padding: var(--ycc-space-3-5) 0;
  border: 0; border-top: var(--ycc-border-width-hairline) solid var(--ycc-color-border-inverse-divider);
  background: none; color: var(--ycc-color-text-on-inverse);
  font-size: var(--ycc-font-size-md); text-align: left;
  transition: background var(--ycc-motion-duration-base);
}
.ycc-actionrow:hover { background: var(--ycc-color-bg-inverse-hover); }
.ycc-actionrow small { display: block; margin-top: var(--ycc-space-1-5); font-size: var(--ycc-font-size-sm); color: var(--ycc-color-text-on-inverse-muted); }

/* Service catalog card */
.ycc-servicegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ycc-space-5-5); }
.ycc-servicecard {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: var(--ycc-size-service-card-min-height);
  padding: var(--ycc-layout-reference-27);
  background: var(--ycc-color-bg-surface);
  border: var(--ycc-border-width-hairline) solid var(--ycc-color-border-default);
  border-radius: var(--ycc-radius-3xl);
  box-shadow: var(--ycc-shadow-card);
  transition: border-color var(--ycc-motion-duration-slow), box-shadow var(--ycc-motion-duration-slow), transform var(--ycc-motion-duration-slow);
}
.ycc-servicecard::before {
  content: ''; position: absolute; top: 0; left: var(--ycc-layout-reference-27); right: var(--ycc-layout-reference-27); height: var(--ycc-layout-reference-2);
  background: linear-gradient(90deg, var(--ycc-color-palette-navy-900), var(--ycc-color-accent-fade));
  opacity: 0; transition: opacity var(--ycc-motion-duration-slow);
}
.ycc-servicecard:hover { border-color: var(--ycc-color-border-hover); box-shadow: var(--ycc-shadow-service-hover); transform: translateY(var(--ycc-motion-distance-lift)); }
.ycc-servicecard:hover::before { opacity: 1; }
.ycc-servicecard__top { display: flex; justify-content: space-between; align-items: center; gap: var(--ycc-space-4-5); margin-bottom: var(--ycc-space-5-5); }
.ycc-servicecard__code { font-size: var(--ycc-font-size-2xl); letter-spacing: var(--ycc-font-letter-spacing-heading); color: var(--ycc-color-text-decorative); }
.ycc-servicecard__title { margin: 0 0 var(--ycc-space-3); font-size: var(--ycc-font-size-3xl); font-weight: var(--ycc-font-weight-bold); line-height: var(--ycc-font-line-height-snug); letter-spacing: var(--ycc-font-letter-spacing-heading); }
.ycc-servicecard__desc { flex: 1; min-height: var(--ycc-layout-reference-41); margin: 0 0 var(--ycc-layout-reference-19); }
.ycc-servicecard .ycc-tag { align-self: flex-start; }
.ycc-servicecard__actions {
  display: flex; align-items: stretch; gap: var(--ycc-space-3);
  margin-top: var(--ycc-space-5); padding-top: var(--ycc-space-5);
  border-top: var(--ycc-border-width-hairline) solid var(--ycc-color-border-default);
}
.ycc-servicecard__actions .ycc-btn { flex: 1; min-height: var(--ycc-size-control-height); }
.ycc-servicecard__actions .ycc-btn:not(.ycc-btn--primary) { flex: .85; }

/* Icon tiles */
.ycc-icon-tile {
  display: grid; place-items: center; flex: none;
  width: var(--ycc-size-icon-tile); height: var(--ycc-size-icon-tile);
  margin-bottom: var(--ycc-layout-reference-15);
  background: var(--ycc-color-bg-tint);
  color: var(--ycc-color-text-primary);
  border: var(--ycc-border-width-hairline) solid var(--ycc-color-border-icon-tile);
  border-radius: var(--ycc-radius-2xl);
}
.ycc-icon-tile svg { width: var(--ycc-size-icon-glyph); height: var(--ycc-size-icon-glyph); }
.ycc-icon-tile--service {
  width: var(--ycc-size-icon-tile-service); height: var(--ycc-size-icon-tile-service);
  margin: 0;
  background: var(--ycc-color-bg-inverse); color: var(--ycc-color-text-on-inverse);
  border-color: var(--ycc-color-bg-inverse); border-radius: var(--ycc-layout-reference-14);
  box-shadow: var(--ycc-shadow-icon-tile);
  transition: background var(--ycc-motion-duration-slow);
}
.ycc-icon-tile--service svg { width: var(--ycc-size-icon-glyph-service); height: var(--ycc-size-icon-glyph-service); }
.ycc-servicecard:hover .ycc-icon-tile--service { background: var(--ycc-color-action-primary-bg-hover); }

/* ---------- Tabs ---------- */
.ycc-tabs {
  display: flex; flex-wrap: wrap; gap: var(--ycc-layout-reference-7);
  margin-bottom: var(--ycc-space-5-5); padding-bottom: var(--ycc-space-3-5);
  border-bottom: var(--ycc-border-width-hairline) solid var(--ycc-color-border-default);
}
.ycc-tab {
  min-height: var(--ycc-size-tab-height);
  padding: var(--ycc-layout-reference-9) var(--ycc-layout-reference-13);
  border: var(--ycc-border-width-hairline) solid transparent;
  border-radius: var(--ycc-radius-md);
  background: none;
  color: var(--ycc-color-text-secondary);
  font-size: var(--ycc-font-size-md);
  transition: background var(--ycc-motion-duration-base), color var(--ycc-motion-duration-base);
}
.ycc-tab:hover:not([aria-selected="true"]) { background: var(--ycc-color-bg-tint); color: var(--ycc-color-text-brand); }
.ycc-tab[aria-selected="true"] { background: var(--ycc-color-bg-inverse); border-color: var(--ycc-color-bg-inverse); color: var(--ycc-color-text-on-inverse); }

/* ---------- Forms ---------- */
.ycc-field { margin-bottom: var(--ycc-space-4-5); }
.ycc-field__label { display: block; margin-bottom: var(--ycc-space-2); font-size: var(--ycc-font-size-md); line-height: 1.6; color: var(--ycc-color-text-label); }
.ycc-field__hint { margin-top: var(--ycc-space-1-5); font-size: var(--ycc-font-size-md); color: var(--ycc-color-text-secondary); }
.ycc-field__error { margin-top: var(--ycc-space-1-5); font-size: var(--ycc-font-size-md); color: var(--ycc-color-text-danger); }
.ycc-input, .ycc-select, .ycc-textarea {
  width: 100%;
  min-height: var(--ycc-size-control-height);
  padding: var(--ycc-space-3) var(--ycc-layout-reference-13);
  background: var(--ycc-color-bg-surface);
  color: var(--ycc-color-text-primary);
  border: var(--ycc-border-width-hairline) solid var(--ycc-color-border-control);
  border-radius: var(--ycc-radius-lg);
  font-size: var(--ycc-font-size-md);
  box-shadow: var(--ycc-shadow-control);
  transition: border-color var(--ycc-motion-duration-base), box-shadow var(--ycc-motion-duration-base);
}
.ycc-textarea { min-height: var(--ycc-layout-reference-110); line-height: var(--ycc-font-line-height-relaxed); resize: vertical; }
.ycc-input::placeholder, .ycc-textarea::placeholder { color: var(--ycc-color-text-placeholder); }
.ycc-input:hover, .ycc-select:hover, .ycc-textarea:hover { border-color: var(--ycc-color-text-secondary); }
.ycc-input[aria-invalid="true"], .ycc-select[aria-invalid="true"], .ycc-textarea[aria-invalid="true"] { border-color: var(--ycc-color-border-danger); }
.ycc-toolbar { display: flex; flex-wrap: wrap; gap: var(--ycc-space-2-5); margin-bottom: var(--ycc-space-5); }
.ycc-toolbar .ycc-input { flex: 1; min-width: var(--ycc-layout-reference-150); width: auto; }
.ycc-form-actions {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--ycc-space-3);
  margin-top: var(--ycc-layout-reference-23); padding-top: var(--ycc-space-4-5);
  border-top: var(--ycc-border-width-hairline) solid var(--ycc-color-border-default);
}

/* ---------- Feedback ---------- */
.ycc-notice {
  margin-bottom: var(--ycc-layout-reference-21); padding: var(--ycc-space-3-5) var(--ycc-layout-reference-17);
  background: var(--ycc-color-bg-muted);
  border: var(--ycc-border-width-hairline) solid var(--ycc-color-border-default);
  border-left: var(--ycc-border-width-accent) solid var(--ycc-color-border-accent);
  border-radius: var(--ycc-radius-lg);
  font-size: var(--ycc-font-size-md); line-height: var(--ycc-font-line-height-relaxed);
  color: var(--ycc-color-text-label);
}
.ycc-notice--danger { background: var(--ycc-color-status-danger-bg); border-color: var(--ycc-color-status-danger-border); border-left-color: var(--ycc-color-border-danger); color: var(--ycc-color-text-danger); }
.ycc-empty {
  margin-top: var(--ycc-space-4-5); padding: var(--ycc-layout-reference-35);
  background: var(--ycc-color-bg-surface-subtle);
  border: var(--ycc-border-width-hairline) dashed var(--ycc-color-border-default);
  border-radius: var(--ycc-radius-xl);
  text-align: center;
  font-size: var(--ycc-font-size-md); line-height: var(--ycc-font-line-height-relaxed);
  color: var(--ycc-color-text-secondary);
}
.ycc-skeleton {
  display: block; height: 1em; border-radius: var(--ycc-radius-sm);
  background: linear-gradient(90deg, var(--ycc-color-border-default), var(--ycc-color-bg-muted), var(--ycc-color-border-default));
  background-size: 200% 100%;
  animation: ycc-shimmer 1.2s linear infinite;
}
@keyframes ycc-shimmer { to { background-position: -200% 0; } }
.ycc-toast {
  position: fixed; right: var(--ycc-space-6); bottom: var(--ycc-space-6); z-index: var(--ycc-z-toast);
  max-width: min(var(--ycc-layout-reference-420), 90vw);
  padding: var(--ycc-space-4) var(--ycc-layout-reference-21);
  background: var(--ycc-color-bg-inverse); color: var(--ycc-color-text-on-inverse);
  border: var(--ycc-border-width-hairline) solid var(--ycc-color-palette-blue-700);
  border-radius: var(--ycc-radius-2xl);
  box-shadow: var(--ycc-shadow-toast);
  font-size: var(--ycc-font-size-md); line-height: var(--ycc-font-line-height-normal);
}
.ycc-progress { height: var(--ycc-layout-reference-7); margin-top: var(--ycc-space-3-5); overflow: hidden; border-radius: var(--ycc-radius-full); background: var(--ycc-color-border-default); }
.ycc-progress > span { display: block; height: 100%; background: var(--ycc-color-accent-default); }

/* ---------- Data display ---------- */
.ycc-table-wrap { overflow: auto; border-radius: var(--ycc-radius-md); scrollbar-width: thin; }
.ycc-table { width: 100%; border-collapse: collapse; line-height: 1.6; }
.ycc-table th {
  padding: var(--ycc-space-3-5) var(--ycc-space-3);
  background: var(--ycc-color-bg-muted);
  color: var(--ycc-color-text-tertiary);
  font-size: var(--ycc-font-size-sm); font-weight: var(--ycc-font-weight-regular);
  letter-spacing: var(--ycc-font-letter-spacing-table-header);
  text-transform: uppercase; text-align: left;
}
.ycc-table td {
  padding: var(--ycc-space-4) var(--ycc-space-3);
  border-bottom: var(--ycc-border-width-hairline) solid var(--ycc-color-border-default);
  font-size: var(--ycc-font-size-md); vertical-align: middle;
}
.ycc-table td:first-child { min-width: var(--ycc-layout-reference-190); }
.ycc-table tbody tr { transition: background var(--ycc-motion-duration-fast); }
.ycc-table tbody tr:hover { background: var(--ycc-color-bg-row-hover); }
.ycc-table tbody tr:last-child td { border-bottom: 0; }
.ycc-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--ycc-layout-reference-15);
  padding: var(--ycc-layout-reference-17) 0;
  border-bottom: var(--ycc-border-width-hairline) solid var(--ycc-color-border-default);
  font-size: var(--ycc-font-size-md);
}
.ycc-row:last-child { border-bottom: 0; }
.ycc-preview {
  margin-top: var(--ycc-space-4-5); padding: var(--ycc-layout-reference-25);
  background: var(--ycc-color-bg-muted);
  border: var(--ycc-border-width-hairline) solid var(--ycc-color-border-default);
  border-left: var(--ycc-border-width-accent) solid var(--ycc-color-border-accent);
  border-radius: var(--ycc-radius-xl);
  font-size: var(--ycc-font-size-base); line-height: var(--ycc-font-line-height-loose);
}

/* Conversation: public vs. internal notes (RF-09) */
.ycc-msg {
  margin: var(--ycc-space-3) 0; padding: var(--ycc-layout-reference-15);
  background: var(--ycc-color-bg-muted);
  border: var(--ycc-border-width-hairline) solid var(--ycc-color-border-default);
  border-radius: var(--ycc-radius-xl);
  font-size: var(--ycc-font-size-md);
}
.ycc-msg--internal { background: var(--ycc-color-bg-tint); border-left: var(--ycc-border-width-accent) solid var(--ycc-color-border-accent); }

/* Calendar */
.ycc-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--ycc-layout-reference-7); }
.ycc-calendar__weekday { padding: var(--ycc-layout-reference-11); text-align: center; font-size: var(--ycc-font-size-sm); letter-spacing: .var(--ycc-layout-reference-5); color: var(--ycc-color-text-secondary); }
.ycc-calendar__day {
  min-height: var(--ycc-size-calendar-day-min-height); padding: var(--ycc-space-2-5);
  background: var(--ycc-color-bg-surface);
  border: var(--ycc-border-width-hairline) solid var(--ycc-color-border-default);
  border-radius: var(--ycc-layout-reference-10);
  font-size: var(--ycc-font-size-md);
}
.ycc-calendar__event {
  display: block; margin-top: var(--ycc-layout-reference-7); padding: var(--ycc-layout-reference-5);
  background: var(--ycc-color-bg-tint); color: var(--ycc-color-text-brand);
  border-left: var(--ycc-border-width-accent) solid var(--ycc-color-border-accent);
  border-radius: var(--ycc-radius-xs);
  font-size: var(--ycc-font-size-sm); line-height: 1.6;
}

/* ---------- Modal (use <dialog> with showModal(); never prompt/confirm) ---------- */
.ycc-modal {
  width: min(var(--ycc-size-modal-width), 95vw); max-height: 89vh;
  padding: 0;
  background: var(--ycc-color-bg-surface); color: var(--ycc-color-text-primary);
  border: var(--ycc-border-width-hairline) solid var(--ycc-color-bg-surface);
  border-radius: var(--ycc-radius-modal);
  box-shadow: var(--ycc-shadow-modal);
}
.ycc-modal::backdrop { background: var(--ycc-color-bg-backdrop); backdrop-filter: blur(var(--ycc-layout-reference-5)); }
.ycc-modal__head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--ycc-layout-reference-15);
  padding: var(--ycc-layout-reference-23) var(--ycc-space-7);
  background: var(--ycc-color-bg-surface-subtle);
  border-bottom: var(--ycc-border-width-hairline) solid var(--ycc-color-border-default);
}
.ycc-modal__head .ycc-h2 { margin: 0; }
.ycc-modal__body { padding: var(--ycc-space-7); }

/* ---------- Responsive ---------- */
@media (min-width: 1750px) { .ycc-main { margin: 0 auto; } }
@media (max-width: 1150px) {
  .ycc-app { grid-template-columns: var(--ycc-size-sidebar-width-compact) minmax(0, 1fr); }
  .ycc-sidebar { padding: var(--ycc-layout-reference-23) var(--ycc-space-3-5); }
  .ycc-logo { width: var(--ycc-size-logo-width-compact); }
  .ycc-main { padding: var(--ycc-space-7); }
  .ycc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ycc-split { grid-template-columns: 1fr; }
  .ycc-executive { gap: var(--ycc-space-4-5); }
  .ycc-servicecard { padding: var(--ycc-space-6); }
  .ycc-servicecard__actions { flex-wrap: wrap; }
  .ycc-servicecard__actions .ycc-btn { flex: 1 1 auto; }
}
@media (max-width: 1050px) { .ycc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .ycc-executive { grid-template-columns: 1fr; }
  .ycc-servicegrid { grid-template-columns: 1fr; }
  .ycc-servicecard__actions { flex-wrap: nowrap; }
}
@media (max-width: 780px) {
  .ycc-app { display: block; }
  .ycc-sidebar { position: relative; height: auto; padding: var(--ycc-space-4); gap: var(--ycc-space-3-5); }
  .ycc-logo { width: var(--ycc-size-logo-width); }
  .ycc-nav { display: flex; overflow-x: auto; gap: var(--ycc-space-1-5); padding-bottom: var(--ycc-layout-reference-3); scrollbar-width: thin; }
  .ycc-nav__item { min-height: var(--ycc-layout-reference-38); padding: var(--ycc-space-2-5) var(--ycc-space-3); white-space: nowrap; font-size: var(--ycc-font-size-md); }
  .ycc-sidebar__aside { display: none; }
  .ycc-header { padding: var(--ycc-layout-reference-15); min-height: auto; }
  .ycc-main { padding: var(--ycc-layout-reference-25) var(--ycc-layout-reference-15); }
  .ycc-page-heading { flex-direction: column; align-items: flex-start; gap: var(--ycc-space-4); }
  .ycc-h1 { font-size: var(--ycc-font-size-display-sm); }
  .ycc-welcome, .ycc-actionpanel { padding: var(--ycc-space-6-5); }
  .ycc-welcome__title { font-size: var(--ycc-layout-reference-28); }
  .ycc-servicecard__desc { min-height: 0; }
  .ycc-metrics { gap: var(--ycc-space-3); }
  .ycc-metric { padding: var(--ycc-space-4-5); min-height: var(--ycc-layout-reference-132); }
  .ycc-metric__value { font-size: var(--ycc-font-size-display-sm); }
  .ycc-grid { grid-template-columns: 1fr; gap: var(--ycc-space-4-5); }
  .ycc-panel { padding: var(--ycc-layout-reference-21); }
  .ycc-tabs { flex-wrap: nowrap; overflow-x: auto; gap: var(--ycc-space-1-5); }
  .ycc-tab { white-space: nowrap; min-height: var(--ycc-layout-reference-38); }
  .ycc-calendar { gap: var(--ycc-space-1); }
  .ycc-calendar__day { min-height: var(--ycc-layout-reference-72); padding: var(--ycc-layout-reference-5); }
  .ycc-calendar__event { font-size: var(--ycc-font-size-sm); padding: var(--ycc-layout-reference-3); }
  .ycc-modal__head, .ycc-modal__body { padding: var(--ycc-space-5-5); }
}
@media (max-width: 390px) {
  .ycc-servicecard__actions { flex-direction: column; }
  .ycc-servicecard__actions .ycc-btn { width: 100%; }
  .ycc-metric__top > span { display: none; }
  .ycc-metric { padding: var(--ycc-space-4); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .ycc-sidebar, .ycc-header, .ycc-tabs, .ycc-breadcrumb, button { display: none !important; }
  .ycc-app { display: block; }
  .ycc-main { padding: 0; }
  body { background: var(--ycc-color-bg-surface); }
  .ycc-panel, .ycc-metric, .ycc-welcome, .ycc-servicecard { box-shadow: none !important; transform: none !important; }
  .ycc-actionpanel { background: var(--ycc-color-bg-surface); color: var(--ycc-color-text-primary); border: var(--ycc-layout-reference-1) solid var(--ycc-color-border-default); }
}