/* =========================
   FORM ELEMENTS
========================= */

.mf-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow:visible;
}

.mf-field--full{
  grid-column:1 / -1;
}

.mf-label{
  font-size:12px;
  font-weight:700;
  color:#7c8597;
}

.mf-label--with-icon{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.mf-label-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:999px;
  background:#edf3ff;
  color:#3f67e9;
  box-shadow:inset 0 0 0 1px rgba(74,111,228,.12);
  flex:0 0 auto;
}

.mf-label-icon svg{
  width:14px;
  height:14px;
  display:block;
}

.mf-label-copy{
  display:inline-block;
  line-height:1.2;
}

.mf-field-tip{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  margin-left:2px;
  outline:none;
  overflow:visible;
  z-index:40;
}

.mf-field-tip-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  background:#e9f0ff;
  color:#3d63e8;
  font-size:11px;
  font-weight:800;
  line-height:1;
  box-shadow:inset 0 0 0 1px rgba(61,99,232,.14);
  cursor:help;
}

.mf-field-tip-bubble{
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(4px);
  width:clamp(200px, 24vw, 280px);
  max-width:min(280px, calc(100vw - 32px));
  padding:11px 13px;
  border-radius:12px;
  background:#13233f;
  color:#fff;
  font-size:12px;
  line-height:1.45;
  box-shadow:0 14px 28px rgba(15,23,42,.22);
  text-align:left;
  white-space:normal;
  text-transform:none;
  letter-spacing:normal;
  overflow-wrap:break-word;
  word-break:normal;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:1500;
}

.mf-field-tip:hover,
.mf-field-tip:focus-within,
.mf-field-tip:focus{
  z-index:1400;
}

.mf-field-tip:hover .mf-field-tip-bubble,
.mf-field-tip:focus-within .mf-field-tip-bubble,
.mf-field-tip:focus .mf-field-tip-bubble{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

.mf-side-hero-label .mf-field-tip-bubble,
.mf-side-metric-label .mf-field-tip-bubble{
  left:0;
  right:auto;
  width:min(240px, calc(100vw - 28px));
  transform:translateY(4px);
}

/* Smart placement classes (set by JS) to avoid clipping/cutoff in any zone. */
.mf-field-tip.mf-tip-right .mf-field-tip-bubble{
  left:0 !important;
  right:auto !important;
  transform:translateY(4px) !important;
}

.mf-field-tip.mf-tip-right:hover .mf-field-tip-bubble,
.mf-field-tip.mf-tip-right:focus-within .mf-field-tip-bubble,
.mf-field-tip.mf-tip-right:focus .mf-field-tip-bubble{
  transform:translateY(0) !important;
}

.mf-field-tip.mf-tip-left .mf-field-tip-bubble{
  left:auto !important;
  right:0 !important;
  transform:translateY(4px) !important;
}

.mf-field-tip.mf-tip-left:hover .mf-field-tip-bubble,
.mf-field-tip.mf-tip-left:focus-within .mf-field-tip-bubble,
.mf-field-tip.mf-tip-left:focus .mf-field-tip-bubble{
  transform:translateY(0) !important;
}

.mf-field-tip.mf-tip-center .mf-field-tip-bubble{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) translateY(4px) !important;
}

.mf-field-tip.mf-tip-center:hover .mf-field-tip-bubble,
.mf-field-tip.mf-tip-center:focus-within .mf-field-tip-bubble,
.mf-field-tip.mf-tip-center:focus .mf-field-tip-bubble{
  transform:translateX(-50%) translateY(0) !important;
}

/* Vertical fallback: if there is not enough room above, open below the trigger. */
.mf-field-tip.mf-tip-bottom .mf-field-tip-bubble{
  top:calc(100% + 10px) !important;
  bottom:auto !important;
}

.mf-field-tip.mf-tip-bottom.mf-tip-right .mf-field-tip-bubble{
  transform:translateY(-4px) !important;
}

.mf-field-tip.mf-tip-bottom.mf-tip-left .mf-field-tip-bubble{
  transform:translateY(-4px) !important;
}

.mf-field-tip.mf-tip-bottom.mf-tip-center .mf-field-tip-bubble{
  transform:translateX(-50%) translateY(-4px) !important;
}

.mf-field-tip.mf-tip-bottom.mf-tip-right:hover .mf-field-tip-bubble,
.mf-field-tip.mf-tip-bottom.mf-tip-right:focus-within .mf-field-tip-bubble,
.mf-field-tip.mf-tip-bottom.mf-tip-right:focus .mf-field-tip-bubble,
.mf-field-tip.mf-tip-bottom.mf-tip-left:hover .mf-field-tip-bubble,
.mf-field-tip.mf-tip-bottom.mf-tip-left:focus-within .mf-field-tip-bubble,
.mf-field-tip.mf-tip-bottom.mf-tip-left:focus .mf-field-tip-bubble{
  transform:translateY(0) !important;
}

.mf-field-tip.mf-tip-bottom.mf-tip-center:hover .mf-field-tip-bubble,
.mf-field-tip.mf-tip-bottom.mf-tip-center:focus-within .mf-field-tip-bubble,
.mf-field-tip.mf-tip-bottom.mf-tip-center:focus .mf-field-tip-bubble{
  transform:translateX(-50%) translateY(0) !important;
}

.mf-side-hero-label .mf-field-tip:hover .mf-field-tip-bubble,
.mf-side-hero-label .mf-field-tip:focus-within .mf-field-tip-bubble,
.mf-side-hero-label .mf-field-tip:focus .mf-field-tip-bubble,
.mf-side-metric-label .mf-field-tip:hover .mf-field-tip-bubble,
.mf-side-metric-label .mf-field-tip:focus-within .mf-field-tip-bubble,
.mf-side-metric-label .mf-field-tip:focus .mf-field-tip-bubble{
  transform:translateY(0);
}

.mf-result,
.mf-result-label-wrap,
.mf-result-label-wrap .mf-field-tip{
  overflow:visible;
}

.mf-result-label-wrap .mf-field-tip-bubble{
  left:50%;
  right:auto;
  width:clamp(180px, 20vw, 240px);
  max-width:min(240px, calc(100vw - 24px));
  transform:translateX(-50%) translateY(4px);
}

.mf-result-label-wrap .mf-field-tip:hover .mf-field-tip-bubble,
.mf-result-label-wrap .mf-field-tip:focus-within .mf-field-tip-bubble,
.mf-result-label-wrap .mf-field-tip:focus .mf-field-tip-bubble{
  transform:translateX(-50%) translateY(0);
}

@media (max-width: 768px){
  .mf-field-tip-bubble{
    left:50%;
    right:auto;
    bottom:calc(100% + 8px);
    width:min(240px, calc(100vw - 28px));
    max-width:calc(100vw - 28px);
    transform:translateX(-50%) translateY(4px);
  }

  .mf-field-tip:hover .mf-field-tip-bubble,
  .mf-field-tip:focus-within .mf-field-tip-bubble,
  .mf-field-tip:focus .mf-field-tip-bubble{
    transform:translateX(-50%) translateY(0);
  }

  .mf-side-hero-label .mf-field-tip-bubble,
  .mf-side-metric-label .mf-field-tip-bubble{
    left:50%;
    right:auto;
  }

  .mf-form-grid .mf-field .mf-label .mf-field-tip-bubble{
    left:50%;
    right:auto;
  }
}

.mf-result-label-wrap,
.mf-side-hero-label,
.mf-side-metric-label{
  display:flex;
  align-items:center;
  gap:6px;
}

.mf-result-label-wrap > span{
  display:inline-block;
  line-height:1.3;
}

/* In result cards, keep tooltip trigger inline (overrides `.mf-result span { display:block; }`). */
.mf-result-label-wrap .mf-field-tip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
}

/* Form labels: place tooltip by column to avoid clipping in 2-col grids */
.mf-form-grid .mf-field:nth-child(odd) .mf-label .mf-field-tip-bubble{
  left:0;
  right:auto;
  transform:translateY(4px);
}

.mf-form-grid .mf-field:nth-child(odd) .mf-label .mf-field-tip:hover .mf-field-tip-bubble,
.mf-form-grid .mf-field:nth-child(odd) .mf-label .mf-field-tip:focus-within .mf-field-tip-bubble,
.mf-form-grid .mf-field:nth-child(odd) .mf-label .mf-field-tip:focus .mf-field-tip-bubble{
  transform:translateY(0);
}

.mf-form-grid .mf-field:nth-child(even) .mf-label .mf-field-tip-bubble{
  left:auto;
  right:0;
  transform:translateY(4px);
}

.mf-form-grid .mf-field:nth-child(even) .mf-label .mf-field-tip:hover .mf-field-tip-bubble,
.mf-form-grid .mf-field:nth-child(even) .mf-label .mf-field-tip:focus-within .mf-field-tip-bubble,
.mf-form-grid .mf-field:nth-child(even) .mf-label .mf-field-tip:focus .mf-field-tip-bubble{
  transform:translateY(0);
}

.mf-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  min-width:0;
}

.mf-input-wrap--with-icon{
  border:1px solid #bcd0ff;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}

.mf-input-wrap--with-icon::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:42px;
  background:#f2f6ff;
  border-right:1px solid rgba(76,125,255,.14);
  pointer-events:none;
}

.mf-input-leading{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#3f67e9;
  z-index:1;
  pointer-events:none;
}

.mf-input-leading svg{
  width:14px;
  height:14px;
  display:block;
}

.mf-input{
  display:block;
  width:100%;
  min-height:46px;
  border:1px solid #bcd0ff;
  border-radius:12px;
  padding:10px 72px 10px 12px;
  font-size:14px;
  color:#1f2937;
  background:#fff;
  outline:none;
  box-shadow:0 0 0 1px rgba(76,125,255,.04);
}

.mf-input-wrap--with-icon .mf-input{
  border-color:transparent;
  border-radius:0;
  box-shadow:none;
  padding-left:54px;
}

.mf-tool .mf-input,
.mf-tool .mf-select-card{
  border-color:#bcd0ff;
}

.mf-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:38px;
  cursor:pointer;
}

.mf-input-wrap--richselect{
  min-height:62px;
}

.mf-select-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:62px;
  padding:10px 14px;
  border:1px solid #bcd0ff;
  border-radius:14px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(76,125,255,.05);
}

.mf-select-card-copy{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}

.mf-select-card-badge{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:#3c67df;
}

.mf-select-card-title{
  font-size:15px;
  line-height:1.2;
  font-weight:900;
  color:#13233f;
}

.mf-select-card-description{
  font-size:12px;
  line-height:1.35;
  color:#61718f;
}

.mf-select-card-chevron{
  flex:0 0 auto;
  width:12px;
  height:12px;
  border-right:2px solid #4a6fe4;
  border-bottom:2px solid #4a6fe4;
  transform:rotate(45deg) translateY(-2px);
}

.mf-select--rich{
  position:absolute;
  inset:0;
  opacity:0;
}

.mf-input:focus{
  border-color:#4c7dff;
  box-shadow:0 0 0 3px rgba(76,125,255,.14);
}

.mf-input-wrap--with-icon:focus-within{
  border-color:#4c7dff;
  box-shadow:0 0 0 3px rgba(76,125,255,.14);
}

.mf-input-wrap--with-icon:focus-within::before{
  border-right-color:rgba(76,125,255,.2);
}

.mf-input-wrap--with-icon:focus-within .mf-input{
  border-color:transparent;
  box-shadow:none;
}

.mf-input::placeholder{
  color:#9aa3b2;
}

.mf-input-suffix{
  position:absolute;
  right:34px;
  font-size:12px;
  font-weight:700;
  color:#7c8597;
  pointer-events:none;
}

.mf-help{
  font-size:12px;
  color:#7c8597;
}

.mf-help--info{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  border:1px solid #d8e5ff;
  border-radius:16px;
  background:#edf4ff;
  color:#4f6285;
}

.mf-help-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:24px;
  height:24px;
  border-radius:999px;
  background:#dbe7ff;
  color:#3769e5;
  font-size:14px;
  font-weight:800;
  line-height:1;
}

.mf-help-content{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.mf-help-title{
  font-size:13px;
  font-weight:800;
  color:#2f4673;
}

.mf-help-text{
  font-size:12px;
  line-height:1.45;
}

.mf-compat-warning{
  display:block;
  width:100%;
  padding:16px;
  border-radius:14px;
  border:1px solid rgba(30,58,138,.22);
  background:linear-gradient(180deg, #f6f9ff 0%, #eef4ff 100%);
  color:#1e2f52;
}

.mf-compat-warning h3{
  margin:0 0 8px;
  font-size:16px;
  line-height:1.3;
  font-weight:800;
  color:#1d3f9b;
}

.mf-compat-warning p{
  margin:0 0 8px;
  font-size:14px;
  line-height:1.55;
}

.mf-compat-warning p:last-child{
  margin-bottom:0;
}

/* =========================
   BUTTON
========================= */

.mf-btn-primary{
  width:100%;
  min-height:44px;
  padding:12px;
  border:none;
  border-radius:12px;
  background:linear-gradient(135deg,#3b6ae6,#2d5fe0);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

/* =========================
   HERO
========================= */

.mf-title{
  font-size:clamp(32px,4vw,50px);
  color:#3f6ff0;
  font-weight:900;
}

.mf-subtitle{
  color:#6f7887;
  font-size:15px;
}

/* =========================
   CARD
========================= */

.mf-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  border-radius:18px;
  padding:18px;
  overflow:visible;
}

.mf-card-title{
  font-size:18px;
  font-weight:900;
}

/* =========================
   RESULTS GRID
========================= */

.mf-results-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.mf-result{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px;
  border-radius:12px;
  background:#f7f8fd;
  border:1px solid #edf1f7;
}

.mf-result > span{
  display:block;
  font-size:12px;
  font-weight:700;
  color:#7c8597;
  line-height:1.3;
}

.mf-result .mf-result-label-wrap{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.mf-result-label-wrap--inline{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-wrap:nowrap !important;
}

.mf-result-label-wrap--inline > span{
  display:inline !important;
  line-height:1.3;
}

.mf-result-label-wrap--inline .mf-field-tip--inline{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  vertical-align:middle;
}

/* Hard fallback over the real DOM structure rendered in result cards. */
.mf-results-grid .mf-result > span.mf-result-label-wrap{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:6px !important;
  white-space:nowrap !important;
}

.mf-results-grid .mf-result > span.mf-result-label-wrap > span{
  display:inline !important;
  margin:0 !important;
}

.mf-results-grid .mf-result > span.mf-result-label-wrap > .mf-field-tip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  flex:0 0 auto !important;
}

/* Hard fix: result-label text + tooltip icon always in one line and aligned. */
.mf-results-grid .mf-result > .mf-result-label-wrap{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap;
}

.mf-results-grid .mf-result > .mf-result-label-wrap > span{
  display:inline !important;
  line-height:1.3;
  margin:0;
}

.mf-results-grid .mf-result > .mf-result-label-wrap .mf-field-tip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
}

/* Result tooltips: always float above cards/sidebar and avoid clipping near edges. */
.mf-results-grid,
.mf-results-grid .mf-result,
.mf-results-grid .mf-result-label-wrap,
.mf-results-grid .mf-field-tip{
  overflow:visible !important;
}

.mf-results-grid .mf-field-tip{
  z-index:80;
}

.mf-results-grid .mf-field-tip-bubble{
  z-index:1200;
  max-width:min(300px, calc(100vw - 24px));
}

.mf-results-grid .mf-result:nth-child(3n + 1) .mf-field-tip-bubble{
  left:0;
  right:auto;
  transform:translateY(4px);
}

.mf-results-grid .mf-result:nth-child(3n + 1) .mf-field-tip:hover .mf-field-tip-bubble,
.mf-results-grid .mf-result:nth-child(3n + 1) .mf-field-tip:focus-within .mf-field-tip-bubble,
.mf-results-grid .mf-result:nth-child(3n + 1) .mf-field-tip:focus .mf-field-tip-bubble{
  transform:translateY(0);
}

.mf-results-grid .mf-result:nth-child(3n) .mf-field-tip-bubble{
  left:auto;
  right:0;
  transform:translateY(4px);
}

.mf-results-grid .mf-result:nth-child(3n) .mf-field-tip:hover .mf-field-tip-bubble,
.mf-results-grid .mf-result:nth-child(3n) .mf-field-tip:focus-within .mf-field-tip-bubble,
.mf-results-grid .mf-result:nth-child(3n) .mf-field-tip:focus .mf-field-tip-bubble{
  transform:translateY(0);
}

@media (max-width: 768px){
  .mf-results-grid .mf-field-tip-bubble{
    left:50%;
    right:auto;
    transform:translateX(-50%) translateY(4px);
  }

  .mf-results-grid .mf-field-tip:hover .mf-field-tip-bubble,
  .mf-results-grid .mf-field-tip:focus-within .mf-field-tip-bubble,
  .mf-results-grid .mf-field-tip:focus .mf-field-tip-bubble{
    transform:translateX(-50%) translateY(0);
  }
}

.mf-result strong{
  display:block;
  font-size:18px;
  line-height:1.15;
  font-weight:800;
  color:#425674;
  font-variant-numeric:tabular-nums;
}

.mf-result--soft{
  background:#f8faff;
  border-color:#e7edf8;
}

.mf-result--soft span{
  color:#7b89a2;
}

.mf-result--soft strong{
  color:#425674;
  font-weight:700;
}

.mf-result--insight strong{
  color:#465b79;
  font-size:16px;
  line-height:1.35;
  font-weight:600;
}

.mf-empty-state{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:74px;
  padding:14px 16px;
  border-radius:14px;
  border:1px dashed #dbe3f2;
  background:#fbfcff;
  text-align:center;
}

.mf-empty-state span{
  font-size:13px;
  line-height:1.5;
  font-weight:600;
}

.mf-empty-state--results{
  grid-column:1 / -1;
}

.mf-empty-state--results span{
  color:#7c8aa1;
}

.mf-side-mainbox--empty{
  display:block;
}

.mf-empty-state--summary{
  min-height:168px;
  border:none;
  background:rgba(255,255,255,.08);
  padding:18px;
}

.mf-empty-state--summary span{
  color:rgba(255,255,255,.82);
}

.mf-side-insight-box--empty{
  padding:0;
}

.mf-empty-state--insight{
  min-height:84px;
  justify-content:flex-start;
  text-align:left;
  border:none;
  background:transparent;
  padding:0;
}

.mf-empty-state--insight span{
  color:#7890b3;
  font-weight:500;
}

/* =========================
   NOTA MEDIA BUILDER
========================= */

.mf-grades-builder{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.mf-form-grid.mf-form-grid--nota-media{
  display:block;
  width:100%;
}

.mf-grades-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.mf-grades-copy{
  margin-top:4px;
  font-size:13px;
  line-height:1.55;
  color:#6f7f95;
}

.mf-grades-add{
  flex:0 0 auto;
  min-height:42px;
  padding:10px 16px;
  border:1px solid #d8e4ff;
  border-radius:12px;
  background:#eef4ff;
  color:#3155d6;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.mf-grades-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mf-grades-row{
  position:relative;
  padding:18px 14px 14px;
  border:1px solid #e7edf8;
  border-radius:16px;
  background:#fbfcff;
}

.mf-grades-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) minmax(120px, .7fr) minmax(120px, .7fr);
  gap:12px;
  align-items:end;
}

.mf-grades-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.mf-grades-field--name{
  min-width:220px;
}

.mf-grades-remove-icon{
  position:absolute;
  top:10px;
  right:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  color:#d46a78;
  cursor:pointer;
  z-index:2;
}

.mf-grades-remove-icon svg{
  width:18px;
  height:18px;
  display:block;
}

.mf-grades-remove-icon:hover{
  color:#c65466;
}

.mf-grades-remove-icon:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.mf-grades-hint{
  margin-top:10px;
  font-size:12px;
  line-height:1.45;
  color:#7b89a2;
}

/* =========================
   SIDEBAR (FINAL LIMPIO)
========================= */

.mf-side{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* CARD AZUL */
.mf-side-card{
  background:linear-gradient(135deg,#3b6ae6,#2d5fe0);
  border-radius:18px;
  padding:18px;
  color:#fff;
}

.mf-side-card-title{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:10px;
}

/* RESULTADO */
.mf-side-hero-label{
  font-size:11px;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
}

.mf-side-hero-value{
  font-size:22px;
  font-weight:900;
}

/* GRID */
.mf-side-metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}

.mf-side-metric{
  padding:12px;
  border-radius:12px;
  background:rgba(255,255,255,.12);
}

.mf-side-metric-label{
  font-size:11px;
}

.mf-side-metric-value{
  font-size:16px;
  font-weight:800;
}

/* INSIGHT FUERA */
.mf-side-insight-box{
  background:#fff;
  border:1px solid #e8ecf5;
  border-radius:14px;
  padding:14px;
}

.mf-side-insight{
  color:#334155;
  font-size:14px;
  line-height:1.6;
}

/* =========================
   TABLE
========================= */

.mf-table-wrap{
  overflow-x:auto;
}

.mf-table{
  min-width:680px;
}

/* =========================
   FAQ
========================= */

.mf-faq-item{
  border:1px solid #e6ebf5;
  border-radius:16px;
}

/* =========================
   NEXT PANEL
========================= */

.mf-next-panel{
  padding:22px;
  border-radius:22px;
  background:rgba(47,100,226,.05);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
}

.mf-next-panel-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:6px 12px;
  border-radius:999px;
  background:#edf3ff;
  border:1px solid #dbe6ff;
  font-size:12px;
  line-height:1;
  font-weight:700;
  color:#4f6fa7;
}

.mf-next-panel-title{
  margin:0;
  max-width:760px;
  color:#263754;
}

.mf-next-panel-sub{
  margin:0;
  max-width:760px;
  color:#6d7f99;
}

.mf-next-panel-preview{
  width:100%;
}

.mf-next-panel-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  align-self:center;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:768px){
  .mf-side-metrics{
    grid-template-columns:1fr 1fr;
  }

  .mf-grades-head{
    flex-direction:column;
    align-items:stretch;
  }

  .mf-grades-grid{
    grid-template-columns:1fr;
  }

  .mf-grades-actions{
    justify-content:stretch;
  }

  .mf-grades-remove,
  .mf-grades-add{
    width:100%;
  }
}

/* =========================
   CHART SVG
========================= */

.mf-chart-wrap{
  width:100%;
  border:1px solid #edf1f7;
  border-radius:14px;
  padding:10px 12px 6px;
  background:#fff;
  overflow:hidden;
}

.mf-chart-inner{
  width:100%;
  overflow-x:auto;
}

.mf-chart-svg{
  display:block;
  width:100%;
  height:auto;
}

.mf-chart-svg line{
  stroke:#d9dfeb;
  stroke-width:1;
}

.mf-chart-svg path{
  fill:none;
  stroke:#4b4cff;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mf-chart-svg text{
  fill:#8b94a6;
  font-size:12px;
}

.mf-chart{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mf-chart-surface{
  position:relative;
}

.mf-chart-svg .mf-chart-grid{
  stroke:#e5ecf7;
  stroke-width:1;
}

.mf-chart-svg .mf-chart-y-label{
  fill:#8c9ab4;
  font-size:12px;
  font-weight:600;
}

.mf-chart-svg .mf-chart-band{
  fill:rgba(var(--mf-embed-primary-rgb, 47,100,226), .10);
  stroke:rgba(var(--mf-embed-primary-rgb, 47,100,226), .22);
  stroke-width:1.5;
  stroke-dasharray:8 8;
}

.mf-chart-svg .mf-chart-area{
  fill:url(#mfChartAreaGradient);
  stroke:none;
}

.mf-chart-svg .mf-chart-line{
  fill:none;
  stroke:url(#mfChartLineGradient);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mf-chart-svg .mf-chart-point{
  fill:var(--mf-primary, #4e6bff);
  stroke:#ffffff;
  stroke-width:3;
  transition:r .18s ease, fill .18s ease, stroke .18s ease;
}

.mf-chart-svg .mf-chart-point.is-active{
  fill:#ffffff;
  stroke:var(--mf-primary, #4e6bff);
  stroke-width:4;
}

.mf-chart-svg .mf-chart-hit{
  fill:transparent;
  pointer-events:all;
  cursor:pointer;
}

.mf-chart-svg .mf-chart-tooltip{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}

.mf-chart-svg .mf-chart-tooltip-box{
  fill:#ffffff;
  stroke:#dbe4f2;
  stroke-width:1.5;
  filter:drop-shadow(0 10px 20px rgba(15,23,42,.10));
}

.mf-chart-svg .mf-chart-tooltip-label{
  fill:#6f7e98;
  font-size:11px;
  font-weight:700;
}

.mf-chart-svg .mf-chart-tooltip-value{
  fill:#12213f;
  font-size:13px;
  font-weight:800;
}

.mf-chart-svg .mf-chart-point-group:hover .mf-chart-tooltip,
.mf-chart-svg .mf-chart-point-group:focus-within .mf-chart-tooltip{
  opacity:1;
  transform:translateY(0);
}

.mf-chart-svg .mf-chart-point-group:hover .mf-chart-point,
.mf-chart-svg .mf-chart-point-group:focus-within .mf-chart-point{
  r:7;
}

.mf-chart-svg .mf-chart-reference-line{
  stroke:#9fb0ca;
  stroke-width:2;
  stroke-dasharray:7 7;
}

.mf-chart-svg .mf-chart-reference-label{
  fill:#7c8597;
  font-size:11px;
  font-weight:800;
}

.mf-chart-svg .mf-chart-x-tick{
  stroke:#c2cee2;
  stroke-width:2;
  stroke-linecap:round;
}

.mf-chart-svg .mf-chart-x-label{
  fill:#5d6d8a;
  font-size:13px;
  font-weight:700;
}

.mf-chart-labels{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(72px, 1fr));
  gap:8px;
  align-items:start;
}

.mf-chart-label{
  text-align:center;
  font-size:13px;
  line-height:1.35;
  color:#6f7e98;
  font-weight:700;
}

.mf-chart-label.is-active{
  color:var(--mf-primary, #17915f);
}

.mf-chart-svg .mf-scale-segment-box{
  fill:#eef2ff;
}

.mf-chart-svg .mf-scale-segment--under .mf-scale-segment-box{
  fill:#dbeafe;
}

.mf-chart-svg .mf-scale-segment--healthy .mf-scale-segment-box{
  fill:#dcfce7;
}

.mf-chart-svg .mf-scale-segment--warning .mf-scale-segment-box{
  fill:#fef3c7;
}

.mf-chart-svg .mf-scale-segment--danger .mf-scale-segment-box{
  fill:#fee2e2;
}

.mf-chart-svg .mf-scale-segment--neutral .mf-scale-segment-box{
  fill:#eef2ff;
}

.mf-chart-svg .mf-scale-label{
  font-size:13px;
  font-weight:800;
  fill:#334155;
}

.mf-chart-svg .mf-scale-range{
  font-size:12px;
  font-weight:700;
  fill:#7c8597;
}

.mf-chart-svg .mf-scale-bubble{
  fill:#111827;
}

.mf-chart-svg .mf-scale-bubble-tail{
  fill:#111827;
}

.mf-chart-svg .mf-scale-bubble-label{
  font-size:11px;
  font-weight:700;
  fill:rgba(255,255,255,.78);
  text-transform:uppercase;
}

.mf-chart-svg .mf-scale-bubble-value{
  font-size:16px;
  font-weight:900;
  fill:#fff;
}

.mf-chart-svg .mf-scale-marker-line{
  stroke:#111827;
  stroke-width:2;
  stroke-linecap:round;
}

.mf-chart-svg .mf-scale-marker-dot{
  fill:#111827;
  stroke:#fff;
  stroke-width:3;
}

.mf-chart-svg .mf-bars-label{
  fill:#475569;
  font-size:13px;
  font-weight:700;
}

.mf-chart-svg .mf-bars-track{
  fill:#edf2fb;
}

.mf-chart-svg .mf-bars-value{
  fill:var(--mf-primary, #4e6bff);
}

.mf-chart-svg .mf-bars-value--secondary{
  fill:var(--mf-primary-soft, #8aa0c8);
}

.mf-chart-svg .mf-bars-value--success{
  fill:#22c55e;
}

.mf-chart-svg .mf-bars-value--warning{
  fill:#f59e0b;
}

.mf-chart-svg .mf-bars-number{
  fill:#1e293b;
  font-size:13px;
  font-weight:800;
}

.mf-chart-svg .mf-chart-line--secondary{
  fill:none;
  stroke:var(--mf-primary-soft, #8aa0c8);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mf-chart-svg .mf-chart-point--secondary{
  fill:#ffffff;
  stroke:var(--mf-primary-soft, #8aa0c8);
  stroke-width:3;
}

.mf-chart-svg .mf-chart-threshold-line{
  stroke:#c2cee2;
  stroke-width:2;
  stroke-dasharray:7 7;
}

.mf-chart-svg .mf-chart-threshold-label{
  fill:#5d6d8a;
  font-size:12px;
  font-weight:700;
}

.mf-chart-svg .mf-chart-legend-line{
  stroke:url(#mfChartLineGradient);
  stroke-width:4;
  stroke-linecap:round;
}

.mf-chart-svg .mf-chart-legend-line--secondary{
  stroke:var(--mf-primary-soft, #8aa0c8);
}

.mf-chart-svg .mf-chart-legend-text{
  fill:#5d6d8a;
  font-size:12px;
  font-weight:700;
}

/* =========================
   CONSUMO ELÉCTRICO ADVANCED UI
========================= */

.mf-ce-builder{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.mf-ce-topbar,
.mf-ce-addbar{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.mf-ce-top-item{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.mf-ce-top-item--grow{
  grid-column:span 2;
}

.mf-ce-btn{
  min-height:46px;
}

.mf-ce-editor{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  border:1px solid #e8ecf5;
  border-radius:16px;
  background:#fbfcff;
}

.mf-ce-editor-title{
  font-size:14px;
  font-weight:800;
  color:#1f2937;
}

.mf-ce-empty{
  padding:16px;
  border-radius:12px;
  background:#fff;
  border:1px dashed #d8dfed;
  color:#6b7280;
  font-size:14px;
}

.mf-ce-rows{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mf-ce-row{
  background:#fff;
  border:1px solid #e8ecf5;
  border-radius:16px;
  padding:14px;
  box-shadow:0 6px 18px rgba(15,23,42,.04);
}

.mf-ce-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

.mf-ce-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.mf-ce-field label{
  font-size:11px;
  font-weight:700;
  color:#7c8597;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.mf-ce-field input,
.mf-ce-field select{
  width:100%;
  min-height:42px;
  border:1px solid #dfe4ef;
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  color:#1f2937;
  background:#fff;
  outline:none;
}

.mf-ce-field input:focus,
.mf-ce-field select:focus{
  border-color:#4c7dff;
  box-shadow:0 0 0 3px rgba(76,125,255,.14);
}

.mf-ce-static-value{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:10px 12px;
  border:1px solid #dfe4ef;
  border-radius:12px;
  background:#f8fbff;
  color:#475569;
  font-size:14px;
  font-weight:700;
}

.mf-ce-field.is-hidden{
  display:none;
}

.mf-ce-row-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:12px;
}

.mf-ce-chip{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  background:#f3f6fd;
  color:#516076;
  font-size:12px;
  font-weight:700;
}

.mf-ce-remove{
  margin-left:auto;
  min-height:32px;
  padding:6px 12px;
  border:none;
  border-radius:999px;
  background:#eef2ff;
  color:#3155d6;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

.mf-ce-remove:hover{
  filter:brightness(.98);
}

.mf-ce-category-preview{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mf-ce-categories{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.mf-ce-categories--results{
  margin-top:4px;
}

.mf-ce-cat-card{
  background:#fff;
  border:1px solid #e8ecf5;
  border-radius:16px;
  padding:14px;
  box-shadow:0 8px 22px rgba(15,23,42,.04);
}

.mf-ce-cat-icon{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#eef3ff;
  color:#3f6ff0;
  margin-bottom:10px;
}

.mf-ce-cat-icon svg{
  width:20px;
  height:20px;
  display:block;
}

.mf-ce-cat-name{
  font-size:13px;
  font-weight:800;
  color:#111827;
  margin-bottom:6px;
}

.mf-ce-cat-main{
  font-size:18px;
  font-weight:900;
  line-height:1.15;
  color:#1f2937;
  margin-bottom:8px;
}

.mf-ce-cat-meta{
  display:flex;
  flex-direction:column;
  gap:3px;
  color:#6b7280;
  font-size:12px;
  font-weight:600;
}

@media (max-width: 1024px){
  .mf-ce-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .mf-ce-categories{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  .mf-ce-topbar,
  .mf-ce-addbar,
  .mf-ce-grid{
    grid-template-columns:1fr;
  }

  .mf-ce-top-item--grow{
    grid-column:auto;
  }

  .mf-ce-categories{
    grid-template-columns:1fr;
  }

  .mf-ce-remove{
    margin-left:0;
  }
}

/* =========================
   CONSUMO ELECTRICO REDESIGN
========================= */

.mf-form-grid.mf-form-grid--ce{
  display:block;
}

.mf-form-grid.mf-form-grid--alcoholemia{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  width:100%;
}

.mf-ce-builder{
  gap:20px;
}

.mf-ce-shell{
  display:block;
}

.mf-ce-panel{
  padding:18px;
  border:1px solid #e8ecf5;
  border-radius:22px;
  background:linear-gradient(180deg, #fbfcff 0%, #f7f9fe 100%);
  box-shadow:0 14px 36px rgba(15,23,42,.05);
}

.mf-ce-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.mf-ce-block-title{
  font-size:16px;
  font-weight:900;
  color:#111827;
  line-height:1.2;
}

.mf-ce-block-copy{
  margin-top:4px;
  font-size:13px;
  line-height:1.55;
  color:#667085;
}

.mf-ce-controls-grid{
  display:grid;
  grid-template-columns:minmax(0, 220px);
  gap:12px;
}

.mf-ce-preset-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:16px;
}

.mf-ce-preset-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  width:100%;
  padding:15px 16px;
  border:1px solid #dfe6f5;
  border-radius:18px;
  background:#ffffff;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.mf-ce-preset-card:hover{
  border-color:#9db4ff;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(76,125,255,.10);
}

.mf-ce-preset-card.is-active{
  border-color:#4c7dff;
  background:linear-gradient(180deg, #f7f9ff 0%, #edf3ff 100%);
  box-shadow:0 10px 26px rgba(76,125,255,.14);
}

.mf-ce-preset-title{
  font-size:14px;
  font-weight:900;
  color:#162033;
}

.mf-ce-preset-copy{
  font-size:12px;
  line-height:1.5;
  color:#64748b;
}

.mf-ce-library{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.mf-ce-library-group{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mf-ce-library-title{
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#6b7a90;
}

.mf-ce-library-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.mf-ce-library-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  width:100%;
  padding:14px;
  border:1px solid #e2e8f4;
  border-radius:18px;
  background:#fff;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.mf-ce-library-card:hover{
  border-color:#9db4ff;
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(76,125,255,.08);
}

.mf-ce-library-icon{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#eef3ff;
  color:#3f6ff0;
}

.mf-ce-library-icon svg{
  width:20px;
  height:20px;
  display:block;
}

.mf-ce-library-name{
  font-size:14px;
  font-weight:900;
  color:#0f172a;
}

.mf-ce-library-copy{
  font-size:12px;
  line-height:1.5;
  color:#64748b;
}

.mf-ce-empty--soft{
  background:#f8fbff;
}

.mf-ce-device-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mf-ce-device-card{
  border:1px solid #e4eaf5;
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.04);
  overflow:hidden;
}

.mf-ce-device-shell{
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) auto auto;
  gap:14px;
  align-items:center;
  padding:16px 18px;
}

.mf-ce-device-main{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.mf-ce-device-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:#eef3ff;
  color:#3f6ff0;
}

.mf-ce-device-icon svg{
  width:22px;
  height:22px;
  display:block;
}

.mf-ce-device-copy{
  min-width:0;
}

.mf-ce-device-name-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.mf-ce-device-name{
  font-size:16px;
  font-weight:900;
  color:#0f172a;
}

.mf-ce-device-badge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 8px;
  border-radius:999px;
  background:#eef3ff;
  color:#3b5fe2;
  font-size:11px;
  font-weight:800;
}

.mf-ce-device-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
  color:#64748b;
  font-size:12px;
  font-weight:700;
}

.mf-ce-device-stats{
  display:flex;
  gap:10px;
}

.mf-ce-device-stat{
  min-width:110px;
  padding:10px 12px;
  border:1px solid #e2e8f4;
  border-radius:14px;
  background:#f8fbff;
}

.mf-ce-device-stat span{
  display:block;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#6b7a90;
}

.mf-ce-device-stat strong{
  display:block;
  margin-top:4px;
  font-size:16px;
  color:#162033;
}

.mf-ce-device-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}

.mf-ce-action{
  min-height:36px;
  padding:8px 12px;
  border:none;
  border-radius:999px;
  background:#3155d6;
  color:#fff;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

.mf-ce-action--soft{
  background:#eef2ff;
  color:#3155d6;
}

.mf-ce-action--danger{
  background:#fff1f2;
  color:#d92d20;
}

.mf-ce-device-editor{
  display:none;
  padding:0 18px 18px;
  border-top:1px solid #edf2fb;
  background:#fcfdff;
}

.mf-ce-device-card.is-open .mf-ce-device-editor{
  display:block;
}

.mf-ce-form-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  padding-top:16px;
}

.mf-ce-field--wide{
  grid-column:span 2;
}

.mf-ce-side-chart{
  margin-bottom:14px;
}

.mf-ce-side-chart .mf-chart{
  margin:0;
}

.mf-ce-side-chart .mf-chart-surface{
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
}

@media (max-width: 1024px){
  .mf-ce-library-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .mf-ce-form-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .mf-ce-device-shell{
    grid-template-columns:1fr;
  }

  .mf-ce-device-actions{
    justify-content:flex-start;
  }
}

@media (max-width: 768px){
  .mf-ce-preset-grid,
  .mf-ce-library-grid,
  .mf-ce-form-grid,
  .mf-ce-controls-grid{
    grid-template-columns:1fr;
  }

  .mf-ce-field--wide{
    grid-column:auto;
  }

  .mf-ce-device-stats{
    flex-direction:column;
  }
}

/* Compact iteration */
.mf-ce-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.mf-ce-preset-chip{
  min-height:36px;
  padding:8px 14px;
  border:1px solid #dfe6f5;
  border-radius:999px;
  background:#fff;
  color:#35507d;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}

.mf-ce-preset-chip:hover{
  border-color:#b9ccff;
  background:#eef4ff;
  color:#2d5fe0;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(76,125,255,.10);
}

.mf-ce-preset-chip.is-active{
  border-color:#4c7dff;
  background:#e8f0ff;
  color:#244fcf;
  box-shadow:0 10px 24px rgba(76,125,255,.14);
}

.mf-ce-add-inline{
  display:block;
  margin-top:14px;
}

.mf-ce-top-item--full{
  width:100%;
}

.mf-ce-add-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 112px;
  gap:10px;
  align-items:center;
}

.mf-ce-add-row .mf-input-wrap{
  min-width:0;
}

.mf-ce-add-btn{
  min-height:42px;
  padding:10px 12px;
  font-size:13px;
}

.mf-ce-inline-help{
  margin-top:10px;
  font-size:12px;
  line-height:1.55;
  color:#6b7a90;
}

.mf-ce-table-wrap{
  overflow-x:auto;
  border:1px solid #e4eaf5;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.04);
}

.mf-ce-table{
  width:100%;
  min-width:0;
  border-collapse:collapse;
  table-layout:fixed;
}

.mf-ce-table th,
.mf-ce-table td{
  padding:8px 8px;
  border-bottom:1px solid #edf2fb;
  text-align:left;
  vertical-align:middle;
}

.mf-ce-table th{
  background:#f8fbff;
  font-size:11px;
  font-weight:800;
  color:#6b7a90;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.mf-ce-table td{
  font-size:12px;
  color:#162033;
}

.mf-ce-table-name{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.mf-ce-table-name strong{
  font-size:13px;
  line-height:1.3;
  color:#0f172a;
}

.mf-ce-table-name span{
  font-size:10px;
  font-weight:800;
  color:#6b7a90;
}

.mf-ce-table-config{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:10px;
  color:#64748b;
  font-weight:700;
}

.mf-ce-table-actions{
  display:flex;
  flex-wrap:nowrap;
  gap:4px;
  white-space:nowrap;
}

.mf-ce-table .mf-ce-action{
  width:28px;
  min-width:28px;
  min-height:28px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.mf-ce-table-impact{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.mf-ce-table-impact strong{
  font-size:12px;
  color:#0f172a;
}

.mf-ce-table-impact span{
  font-size:10px;
  color:#6b7a90;
}

.mf-ce-edit-row{
  display:none;
}

.mf-ce-edit-row.is-open{
  display:table-row;
}

.mf-ce-edit-row td{
  padding:0;
  background:#fcfdff;
}

.mf-ce-edit-row .mf-ce-device-editor{
  display:block;
  padding:16px 18px;
  border-top:1px solid #edf2fb;
  background:#fcfdff;
}

.mf-ce-side-chart{
  margin:0;
}

.mf-ce-side-chart .mf-chart{
  margin:0;
}

.mf-ce-side-chart .mf-chart-surface{
  padding:14px;
  border:1px solid #e8ecf5;
  border-radius:16px;
  background:#fff;
  box-shadow:none;
}

.mf-side-chart-outer:empty{
  display:none;
}

.mf-chart--ce-bars .mf-chart-surface{
  padding:16px 12px;
}

.mf-chart-svg .mf-ce-bars-track{
  fill:#e9eef8;
}

.mf-chart-svg .mf-ce-bars-label{
  fill:#556a87;
  font-size:13px;
  font-weight:700;
}

.mf-chart-svg .mf-ce-bars-value{
  fill:#5f7492;
  font-size:13px;
  font-weight:700;
}

.mf-ce-cat-card{
  position:relative;
}

.mf-extra-wrap .mf-ce-cat-card--frio{background:#eef3ff;border-color:#c9d7ff;}
.mf-extra-wrap .mf-ce-cat-card--electronica{background:#f3f6fa;border-color:#d7e0ea;}
.mf-extra-wrap .mf-ce-cat-card--iluminacion{background:#fff7e6;border-color:#f6d999;}
.mf-extra-wrap .mf-ce-cat-card--lavado{background:#eafbf5;border-color:#b7eed8;}
.mf-extra-wrap .mf-ce-cat-card--cocina{background:#fff1e8;border-color:#f8c8a6;}
.mf-extra-wrap .mf-ce-cat-card--climatizacion{background:#eaf8ff;border-color:#b2e3f8;}
.mf-extra-wrap .mf-ce-cat-card--agua-caliente{background:#f3eeff;border-color:#d7c4ff;}
.mf-extra-wrap .mf-ce-cat-card--otros{background:#f4f7fa;border-color:#d8e0ea;}

.mf-ce-table .mf-ce-action svg{
  width:14px;
  height:14px;
  display:block;
}

.mf-ce-cat-progress{
  margin-top:10px;
}

.mf-ce-cat-progress-svg{
  width:100%;
  height:6px;
  display:block;
}

.mf-ce-cat-progress-track{
  fill:rgba(255,255,255,.45);
}

.mf-ce-cat-progress-bar{
  display:block;
}

.mf-ce-cat-progress-bar--frio{fill:#4E6BFF;}
.mf-ce-cat-progress-bar--electronica{fill:#7A8CA9;}
.mf-ce-cat-progress-bar--iluminacion{fill:#F59E0B;}
.mf-ce-cat-progress-bar--lavado{fill:#10B981;}
.mf-ce-cat-progress-bar--cocina{fill:#F97316;}
.mf-ce-cat-progress-bar--climatizacion{fill:#0EA5E9;}
.mf-ce-cat-progress-bar--agua-caliente{fill:#8B5CF6;}
.mf-ce-cat-progress-bar--otros{fill:#94A3B8;}

.mf-ce-results-reading{
  margin-top:6px;
}

.mf-ce-optimized{
  margin-bottom:18px;
  padding:16px;
  border:1px solid #dce8ff;
  border-radius:18px;
  background:linear-gradient(180deg, #f5f9ff 0%, #eef5ff 100%);
}

.mf-ce-optimized-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.mf-ce-optimized-stat{
  padding:12px 13px;
  border-radius:14px;
  background:#fff;
  border:1px solid #e2ebfb;
}

.mf-ce-optimized-stat span{
  display:block;
  font-size:11px;
  font-weight:700;
  color:#6b7a90;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.mf-ce-optimized-stat strong{
  display:block;
  margin-top:5px;
  font-size:18px;
  color:#425674;
  font-weight:700;
}

.mf-ce-recommendations{
  margin-top:18px;
}

.mf-ce-recommendation-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mf-ce-recommendation-card{
  padding:14px 16px;
  border:1px solid #e6ecf7;
  border-radius:16px;
  background:#fbfcff;
  box-shadow:0 6px 18px rgba(15,23,42,.04);
}

.mf-ce-recommendation-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.mf-ce-recommendation-head strong{
  font-size:14px;
  color:#425674;
  font-weight:700;
}

.mf-ce-recommendation-card p{
  margin:8px 0 0;
  font-size:13px;
  line-height:1.6;
  color:#516076;
}

.mf-ce-recommendation-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  background:#eef3ff;
  color:#3155d6;
  font-size:11px;
  font-weight:800;
}

.mf-nutri-categories{
  margin-top:18px;
}

.mf-nutri-category-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.mf-nutri-category-grid--1{
  grid-template-columns:1fr;
}

.mf-nutri-category-grid--2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.mf-alcohol-builder{
  margin-top:18px;
  grid-column:1 / -1;
  width:100%;
}

.mf-alcohol-builder .mf-ce-panel{
  width:100%;
}

.mf-alcohol-inline{
  min-height:38px;
  padding:8px 10px;
  font-size:12px;
}

.mf-alcohol-builder .mf-icon-btn{
  width:30px;
  height:30px;
  border:none;
  border-radius:999px;
  background:#fff1f2;
  color:#d92d20;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  flex:0 0 auto;
}

.mf-alcohol-builder .mf-icon-btn:hover{
  filter:brightness(.98);
}

.mf-nutri-category-card{
  position:relative;
  min-height:180px;
  padding:18px 18px 20px;
  border:1px solid #e6ecf7;
  border-radius:18px;
  background:#fbfcff;
  box-shadow:0 8px 22px rgba(15,23,42,.04);
  overflow:hidden;
}

.mf-nutri-category-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  border-radius:18px 0 0 18px;
  background:var(--mf-nutri-accent,#6d86ab);
}

.mf-nutri-category-card::after{
  content:"";
  position:absolute;
  right:-34px;
  bottom:-34px;
  width:108px;
  height:108px;
  border-radius:999px;
  background:var(--mf-nutri-soft,rgba(109,134,171,.08));
}

.mf-nutri-category-card--protein{
  --mf-nutri-accent:#10b981;
  --mf-nutri-soft:rgba(16,185,129,.09);
}

.mf-nutri-category-card--carbs{
  --mf-nutri-accent:#3b82f6;
  --mf-nutri-soft:rgba(59,130,246,.09);
}

.mf-nutri-category-card--fiber{
  --mf-nutri-accent:#8b5cf6;
  --mf-nutri-soft:rgba(139,92,246,.09);
}

.mf-nutri-category-card--hydration{
  --mf-nutri-accent:#38bdf8;
  --mf-nutri-soft:rgba(56,189,248,.09);
}

.mf-nutri-category-card--performance{
  --mf-nutri-accent:#f59e0b;
  --mf-nutri-soft:rgba(245,158,11,.09);
}

.mf-nutri-category-top{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.mf-nutri-category-chip{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  background:var(--mf-nutri-soft,rgba(109,134,171,.08));
  color:var(--mf-nutri-accent,#6d86ab);
  font-size:11px;
  font-weight:800;
  letter-spacing:.01em;
}

.mf-cf-badge{
  border-color:transparent;
}

.mf-cf-badge--danger{
  background:#fee2e2;
  color:#b42318;
}

.mf-cf-badge--warning{
  background:#fef3c7;
  color:#b45309;
}

.mf-cf-badge--neutral{
  background:#dbeafe;
  color:#1d4ed8;
}

.mf-cf-badge--healthy{
  background:#dcfce7;
  color:#15803d;
}

.mf-nutri-category-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  background:var(--mf-nutri-accent,#6d86ab);
  box-shadow:0 0 0 6px var(--mf-nutri-soft,rgba(109,134,171,.08));
  flex:0 0 auto;
}

.mf-nutri-category-title{
  position:relative;
  z-index:1;
  margin:0 0 10px;
  color:#425674;
  font-size:20px;
  line-height:1.2;
  font-weight:700;
}

.mf-nutri-category-text{
  position:relative;
  z-index:1;
  margin:0;
  color:#556883;
  font-size:14px;
  line-height:1.65;
}

@media (max-width: 1024px){
  .mf-nutri-category-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 640px){
  .mf-nutri-category-grid{
    grid-template-columns:1fr;
  }
}

.mf-chart-wrap:empty{
  display:none;
}

.mf-chart-inner--stacked{
  margin-top:18px;
}

.mf-chart-subhead{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:14px;
}

.mf-chart-subtitle{
  margin:0;
  font-size:16px;
  line-height:1.25;
  font-weight:700;
  color:#49607e;
}

.mf-chart-subcopy{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:#7586a1;
}

.mf-ce-bars{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mf-ce-bar-row{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.mf-ce-bar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.mf-ce-bar-label{
  font-size:13px;
  font-weight:700;
  color:#536985;
}

.mf-ce-bar-value{
  font-size:13px;
  font-weight:700;
  color:#536985;
}

.mf-ce-bar-track{
  position:relative;
  height:10px;
  border-radius:999px;
  background:#e8eef8;
  overflow:hidden;
}

.mf-ce-bar-fill{
  display:block;
  height:100%;
  border-radius:999px;
}

.mf-side-metrics > :last-child:nth-child(odd){
  grid-column:1 / -1;
}

.mf-chart--bars .mf-chart-surface{
  padding:18px 20px;
}

.mf-chart-svg .mf-bars-label{
  font-size:14px;
  font-weight:800;
}

.mf-chart-svg .mf-bars-number{
  font-size:13px;
  font-weight:800;
}

@media (max-width: 768px){
  .mf-form-grid.mf-form-grid--alcoholemia{
    grid-template-columns:1fr;
  }

  .mf-ce-add-row{
    grid-template-columns:1fr;
  }

  .mf-ce-table{
    table-layout:auto;
    min-width:0;
  }

  .mf-alcohol-builder .mf-ce-table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .mf-alcohol-builder .mf-ce-table{
    min-width:720px;
  }

  .mf-ce-optimized-grid{
    grid-template-columns:1fr;
  }
}