/* Control360: composición compacta por ancho disponible. Conserva orden DOM y campos. */
#controlCards .control-card .control-360-body {
  height: auto; max-height: none; overflow: visible; gap: 12px; padding: 14px;
}
#controlCards .control-card .control-360-body > label,
#controlCards .control-card .control-design-field label {
  display: grid; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; color: #334155;
}
#controlCards .control-card .control-360-body > label > select,
#controlCards .control-card .control-360-body > label > textarea,
#controlCards .control-card .control-design-field select,
#controlCards .control-card .control-design-field input:not([type="checkbox"]) {
  width: 100%; min-width: 0; min-height: 40px; box-sizing: border-box; padding: 8px 32px 8px 10px;
  border: 1px solid #cbd5e1; border-radius: 8px; background-color: #fff; color: #0f172a;
  font: inherit; font-size: 14px; font-weight: 400;
}
#controlCards .control-card .control-360-body > label > textarea { min-height: 72px; padding: 10px; resize: vertical; }
#controlCards .control-card .control-design-field select:hover:not(:disabled) { border-top-color: #94a3b8; border-right-color: #94a3b8; border-bottom-color: #94a3b8; }
#controlCards .control-card .control-360-body > label > select:focus-visible,
#controlCards .control-card .control-360-body > label > textarea:focus-visible,
#controlCards .control-card .control-design-field select:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
#controlCards .control-card .control-design-grid [hidden],
#controlCards .control-card .control-360-body > [hidden] { display: none !important; }
#controlCards .control-card .control-360-status { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#controlCards .control-card .c360-status-block {
  padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff;
}
#controlCards .control-card .c360-status-block h3 { line-height: 1.4; font-size: 13px; }
#controlCards .control-card .c360-status-text { font-size: 13px; line-height: 1.5; }
#controlCards .control-card .c360-reasons { margin: 0; padding-left: 18px; line-height: 1.5; font-size: 13px; }
#controlCards .control-card .c360-reasons li + li { margin-top: 3px; }
#controlCards .control-card .control-evaluation-heading {
  grid-column: 1 / -1; margin: 0; padding-top: 12px; border-top: 1px solid #e2e8f0;
  color: #0f172a; font-size: 15px;
}
#controlCards .control-card .control-360-body > .risk-field { display: grid; align-content: start; gap: 6px; min-width: 0; }
#controlCards .control-card .control-360-body > .risk-field > span:first-child { font-size: 13px; font-weight: 600; }
#controlCards .control-card .control-360-body > .risk-field .risk-warning { font-size: 12px; line-height: 1.5; }
#controlCards .control-card .control-design-field {
  container-type: inline-size; grid-column: 1 / -1; padding: 14px; margin: 0;
  border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;
}
#controlCards .control-card .control-design-field h4 { margin: 0 0 4px; color: #0f172a; font-size: 15px; font-weight: 700; }
#controlCards .control-card .design-owner-note { margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: #475569; }
#controlCards .control-card .control-design-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
#controlCards .control-card .design-periodicity-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
#controlCards .control-card .control-design-grid .check-field {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-column: auto;
  gap: 4px 10px; align-items: center; align-self: stretch; padding: 10px 12px;
  min-width: 0; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc;
}
#controlCards .control-card .design-field-title { font-size: 13px; font-weight: 600; color: #334155; }
#controlCards .control-card .control-design-grid label.key-switch {
  display: inline-flex; flex-direction: row; align-items: center; gap: 8px;
  margin: 0; min-height: 32px; font-size: 13px; cursor: pointer;
}
#controlCards .control-card .control-design-field small { font-size: 12px; font-weight: 400; color: #475569; line-height: 1.4; }
#controlCards .control-card .control-design-grid .design-note,
#controlCards .control-card .design-key-help { grid-column: 1 / -1; }
#controlCards .control-card .design-key-help { font-size: 12px; line-height: 1.4; color: #475569; }
#controlCards .control-card .design-key-help summary { width: fit-content; padding: 4px 0; cursor: pointer; color: #334155; }
#controlCards .control-card .design-key-help summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; border-radius: 3px; }
#controlCards .control-card .design-key-help p { margin: 6px 0 0; }
#controlCards .control-card .control-design-assessment {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; padding: 14px;
  border: 1px solid #c7d2fe; border-radius: 10px; background: #f8faff;
}
#controlCards .control-card .control-design-assessment > b { grid-column: 1 / -1; color: #1e3a8a; font-size: 14px; }
#controlCards .control-card .design-proposal-metrics,
#controlCards .control-card .design-proposal-decision { display: grid; align-content: start; gap: 8px; min-width: 0; }
#controlCards .control-card .control-design-assessment output { font-size: 14px; line-height: 1.5; font-weight: 600; }
#controlCards .control-card [data-design-breakdown] { margin: 0; color: #475569; font-size: 13px; }
#controlCards .control-card [data-design-proposal] { font-size: 16px; line-height: 1.4; }
#controlCards .control-card .design-proposal-context { display: grid; gap: 6px; margin: 0; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
#controlCards .control-card .design-proposal-context > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; font-size: 12px; line-height: 1.5; }
#controlCards .control-card .design-proposal-context dt { font-weight: 600; color: #334155; }
#controlCards .control-card .design-proposal-context dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: #475569; }
#controlCards .control-card .control-design-assessment .btn { justify-self: start; min-height: 40px; padding: 8px 12px; white-space: normal; }
#controlCards .control-card .control-design-assessment > small { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid #e2e8f0; }
@container (min-width: 860px) {
  #controlCards .control-card .control-design-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #controlCards .control-card .control-design-assessment { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
@container (max-width: 570px) {
  #controlCards .control-card .control-design-grid { grid-template-columns: minmax(0, 1fr); }
  #controlCards .control-card .design-proposal-context > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (min-width: 1001px) {
  #controlCards .control-card .control-360-body > label:has([name="implementation"]),
  #controlCards .control-card .control-360-body > label:has([name="compliance"]),
  #controlCards .control-card .control-360-body > label:has([name="owner_user_id"]),
  #controlCards .control-card .control-360-body > label:has([name="target_date"]),
  #controlCards .control-card .control-360-body > label:has([name="recommended_plan_status"]) { grid-column: span 1; }
}
#controlCards .control-card .control-360-body > label:has([name="evidence"]),
#controlCards .control-card .control-360-body > label:has([name="recommendation"]),
#controlCards .control-card .control-360-body > label:has([name="pending_actions"]),
#controlCards .control-card .control-360-body > label:has([name="observations"]) { grid-column: 1 / -1; }
@media (max-width: 800px) {
  #controlCards .control-card .control-360-status { grid-template-columns: minmax(0, 1fr); }
  #controlCards .control-card .control-360-body { padding: 10px; gap: 10px; }
  #controlCards .control-card .control-design-field { padding: 12px; }
}
@media (pointer: coarse) {
  #controlCards .control-card .control-design-field select,
  #controlCards .control-card .control-design-grid label.key-switch,
  #controlCards .control-card .control-design-assessment .btn,
  #controlCards .control-card .design-key-help summary { min-height: 44px; box-sizing: border-box; }
}
@media (prefers-reduced-motion: reduce) {
  #controlCards .control-card .key-switch-track, #controlCards .control-card .key-switch-track::after { transition: none; }
}
/* Estado del interruptor reconocible por contraste, además del texto Sí/No. */
#controlCards .control-card .control-design-grid .key-switch-track { background: #64748b; }
#controlCards .control-card .control-design-grid .key-switch input:checked + .key-switch-track { background: #15803d; }
@container (max-width: 380px) {
  #controlCards .control-card .design-periodicity-group { grid-template-columns: minmax(0, 1fr); }
}