body {
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  background: #0D1120;
}

.header {
  text-align: center;
  color: white;
  padding: 20px;
  position: relative;
}

.header img {
  max-width: 250px;
}

.subtitulo {
  text-align: center;
  font-size: 14px;
  color: #dcdcdc;
  margin-top: 5px;
  letter-spacing: 1px;
}

.header h2 {
  font-size: 24px;
  margin-bottom: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px;
}

.card {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

h3 {
  color: #0d2f6b;
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 14px;
}

label {
  font-size: 13px;
  font-weight: bold;
  margin-top: 10px;
  display: block;
}

.label-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-btn {
  cursor: pointer;
  font-size: 11px;
  background: #1d5eff;
  color: white;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 13px;
}

.info-box {
  display: none;
  margin-top: 5px;
  padding: 10px;
  background: #eef5ff;
  border-left: 3px solid #1d5eff;
  border-radius: 6px;
  font-size: 12px;
}

.result-info-toggle {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #0d2f6b;
  font-weight: bold;
}

.result-info-btn {
  width: 13px;
  height: 13px;
  padding: 0;
  border-radius: 50%;
  background: #1d5eff;
  color: white;
  font-size: 11px;
  line-height: 1;
}

.calc-info-box {
  margin-bottom: 14px;
  line-height: 1.45;
}

.calc-info-box p {
  margin: 8px 0;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 12px;
}

.info-table th {
  background: #1d5eff;
  color: white;
  padding: 6px;
  text-align: left;
  border-radius: 4px;
}

.info-table td {
  padding: 6px;
  border-bottom: 1px solid #ddd;
}

.info-table tr:last-child td {
  border-bottom: none;
}

input, select {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  margin-bottom: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

input:disabled, select:disabled {
  background: #f0f0f0;
  color: #aaa;
  border-color: #ddd;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  margin-bottom: 10px;
  align-items: center;
}

.row input {
  margin-top: 0;
  margin-bottom: 0;
}

.cost-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.cost-row input {
  margin-top: 0;
}

.cost-detail {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
}

.safety-box {
  background: #eef8f6;
}

.safety-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 8px;
}

.safety-option {
  padding: 7px 4px;
  border-radius: 8px;
  background: #cfe9e4;
  color: #0f3f39;
  font-size: 12px;
  font-weight: bold;
}

.safety-option.active {
  background: #0d9488;
  color: white;
}

.safety-summary {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
}

.safety-title {
  font-weight: bold;
  color: #0d2f6b;
  margin-bottom: 5px;
}

.safety-note {
  margin-bottom: 6px;
  color: #405064;
  font-size: 11px;
  line-height: 1.35;
}

.safety-line {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) minmax(120px, auto);
  gap: 8px;
  align-items: baseline;
  padding: 2px 0;
}

.safety-line span {
  color: #405064;
}

.safety-line b {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.safety-line.total {
  border-top: 1px solid rgba(13,47,107,0.18);
  margin-top: 4px;
  padding-top: 5px;
}

.alto-wrapper {
  position: relative;
}

.alto-wrapper input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 8px;
}

.m2-badge {
  position: absolute;
  bottom: 5px;
  right: 8px;
  font-size: 10px;
  color: #1d5eff;
  font-weight: bold;
  pointer-events: none;
  line-height: 1;
}

.m2-badge.warning {
  color: #ef4444 !important;
  font-weight: bold;
}

button {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: #6cba86;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

button:hover {
  opacity: 0.9;
}

button:active {
  transform: scale(0.96);
  opacity: 0.85;
}

.button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.secondary-btn {
  background: #1d5eff;
}

.danger-btn {
  background: #6b7280;
}

.small-btn {
  width: auto;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
}

.validation-box {
  display: none;
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  background: #fff3cd;
  border-left: 3px solid #f59e0b;
  color: #684b00;
  font-size: 12px;
}

.copy-status {
  display: block;
  min-height: 16px;
  margin-top: 6px;
  color: #0d2f6b;
  font-size: 12px;
  text-align: right;
}

.history-box {
  margin-top: 15px;
  padding: 12px;
  border-radius: 10px;
  background: #f3f4f6;
}

.history-box h4 {
  margin: 0 0 8px;
  color: #0d2f6b;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-list {
  display: grid;
  gap: 8px;
}

.history-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
  background: white;
  font-size: 12px;
}

.history-item p {
  margin: 0;
}

.history-empty {
  margin: 0;
  color: #777;
  font-size: 12px;
}

.result-box {
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 15px;
  font-size: 14px;
}

.firma {
  margin-top: auto;
  text-align: right;
  font-size: 10px;
  color: #c9c7c7;
}

.blue { background: #e7f1ff; }
.green { background: #e6f4ea; }
.orange { background: #fff3cd; }
.gray   { background: #f3f4f6; }

.big { font-size: 24px; font-weight: bold; }

#btn-quitar-formato {
  transition: all 0.2s;
}
#btn-quitar-formato:hover {
  background: #dc2626;
}

@media(max-width:768px){
  .container { grid-template-columns:1fr; }
  .button-row { grid-template-columns:1fr; }
}

.params-print-box { display: none; }
.formatos-print-box { display: none; }
.proyeccion-print-box { display: none; }

.print-value {
  display: none;
  font-size: 12px;
  font-weight: bold;
  color: #0d2f6b;
  padding: 4px 0;
  margin-bottom: 6px;
}

@media print {
  @page {
    size: letter;
    margin: 5mm;
  }

  .print-value { display: block !important; }
  select { display: none !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  body { background: #ffffff !important; margin: 0; font-size: 9.5px; color: #111827 !important; }

  .header {
    background: #0D1120 !important;
    padding: 4px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    justify-content: center !important;
  }
  .header img { max-width: 88px !important; }
  .header h2 { font-size: 12px !important; margin: 0 !important; color: white !important; }
  .subtitulo { font-size: 8px !important; margin: 0 !important; color: #dcdcdc !important; }
  .knowhow-btn, .theme-btn { display: none !important; }

  .container {
    display: block !important;
    padding: 5px 8px !important;
  }

  .card-params { display: none !important; }
  .kh-overlay, .proj-overlay { display: none !important; }

  .card-results {
    background: #ffffff !important;
    color: #111827 !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    border: 1px solid #e0e0e0 !important;
  }

  h3 { font-size: 11px !important; margin-bottom: 4px !important; }

  .result-boxes-print-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 3px !important;
    margin-bottom: 4px !important;
    align-items: stretch !important;
  }

  .result-box {
    padding: 4px 6px !important;
    margin-bottom: 0 !important;
    border-radius: 6px !important;
    font-size: 9.5px !important;
    line-height: 1.18 !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
  }

  #cliente_print_box{
    margin-bottom: 5px !important;
    min-height: 0 !important;
  }

  .blue   { background: #e7f1ff !important; }
  .green  { background: #e6f4ea !important; }
  .orange { background: #fff3cd !important; }
  .gray   { background: #f3f4f6 !important; }

  .big { font-size: 12px !important; font-weight: bold !important; }

  .result-box.gray > div {
    gap: 3px !important;
    margin-top: 3px !important;
  }

  .result-box.gray > div > div {
    padding: 4px !important;
    border-radius: 5px !important;
  }

  .result-box.gray .big {
    font-size: 11px !important;
  }

  .result-info-toggle,
  #info-calculos,
  .copy-status,
  .safety-box,
  .history-box,
  .validation-box,
  button,
  .firma { display: none !important; }

  .formatos-print-box    { display: block !important; margin-bottom: 5px !important; }
  .formatos-print-box > div {
    border-radius: 7px !important;
    padding: 7px 9px !important;
  }

  .params-print-box      { display: block !important; margin-top: 5px !important; }
  .params-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 3px !important;
  }
  .param-item {
    padding: 4px 6px !important;
    border-radius: 5px !important;
  }
  .param-label {
    font-size: 8px !important;
    letter-spacing: 0 !important;
  }
  .param-val {
    font-size: 9.5px !important;
  }

  .proyeccion-print-box.has-data  { display: block !important; margin-top: 5px !important; }
  .proyeccion-print-box table {
    font-size: 8px !important;
  }
  .proyeccion-print-box th,
  .proyeccion-print-box td {
    padding: 2px 4px !important;
    white-space: nowrap !important;
  }
  .safety-box.has-factor {
    display: block !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    padding: 5px 8px !important;
    background: #eef8f6 !important;
    color: #111827 !important;
    min-height: 0 !important;
    border-left: 3px solid #0d9488 !important;
  }
  .safety-box.has-factor .safety-options {
    display: none !important;
  }
  .safety-box.has-factor .safety-title {
    color: #0d2f6b !important;
    margin-bottom: 3px !important;
  }
  .safety-box.has-factor .safety-note {
    color: #333 !important;
    font-size: 8.5px !important;
    margin-bottom: 3px !important;
  }
  .safety-box.has-factor .safety-summary {
    color: #111827 !important;
    font-size: 8.8px !important;
  }
  .safety-box.has-factor .safety-line,
  .safety-box.has-factor .safety-line span,
  .safety-box.has-factor .safety-line b {
    color: #000000 !important;
  }
  .safety-box.has-factor .safety-line {
    grid-template-columns: 1fr 160px !important;
    padding: 1px 0 !important;
  }
  .safety-box.has-factor .safety-line.total {
    border-top: 1px solid #9fb6b2 !important;
    margin-top: 3px !important;
    padding-top: 3px !important;
  }
}

.params-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.param-item {
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
}

.param-label {
  font-size: 10px;
  color: #555;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.param-val {
  font-size: 13px;
  font-weight: bold;
  color: #0d2f6b;
  margin-top: 2px;
}

.firma-print {
  display: none;
  text-align: right;
  font-size: 10px;
  color: #888;
  margin-top: 10px;
}

.knowhow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.5);
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
  position: absolute;
  bottom: 14px;
  right: 18px;
}
.knowhow-btn:hover {
  background: rgba(255,255,255,0.35);
  border-color: white;
}

.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.5);
  color: white;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
  position: absolute;
  bottom: -12px;
  right: 19.5px;
  padding: 0;
}
.theme-btn:hover {
  background: rgba(255,255,255,0.35);
  border-color: white;
}

body.dark-theme {
  background: #070b16;
  color: #e5edf7;
}

body.dark-theme .card,
body.dark-theme .kh-modal,
body.dark-theme .proj-modal {
  background: #111827;
  color: #e5edf7;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

body.dark-theme h3,
body.dark-theme .history-box h4,
body.dark-theme .result-info-toggle,
body.dark-theme .kh-modal h2,
body.dark-theme .proj-modal h2 {
  color: #9cc2ff;
}

body.dark-theme label,
body.dark-theme .kh-section p {
  color: #d9e3ef;
}

body.dark-theme input,
body.dark-theme select,
body.dark-theme textarea {
  background: #0b1220;
  color: #e5edf7;
  border-color: #334155;
}

body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder {
  color: #7b8798;
}

body.dark-theme input:disabled,
body.dark-theme select:disabled {
  background: #111827;
  color: #64748b;
  border-color: #263244;
}

body.dark-theme .info-box,
body.dark-theme .history-box,
body.dark-theme .history-item,
body.dark-theme .safety-box {
  background: #172033;
  color: #dce6f3;
}

body.dark-theme .blue { background: #132a4a; color: #dcecff; }
body.dark-theme .green { background: #123325; color: #ddf8eb; }
body.dark-theme .orange { background: #3b2a10; color: #ffe8b0; }
body.dark-theme .gray { background: #1f2937; color: #e5e7eb; }

body.dark-theme .result-box[style*="background:#f0e6ff"] {
  background: #2a2140 !important;
  color: #eee7ff;
}

body.dark-theme .result-box[style*="background:#e8f7f3"] {
  background: #12342f !important;
  color: #defaf5;
}

body.dark-theme .result-box.gray > div > div {
  background: #263244 !important;
}

body.dark-theme .cost-detail,
body.dark-theme .safety-summary,
body.dark-theme .history-empty,
body.dark-theme .proj-subtitle,
body.dark-theme .kh-modal .kh-subtitle {
  color: #aebbd0;
}

body.dark-theme .safety-option {
  background: #21423e;
  color: #d9fffa;
}

body.dark-theme .safety-option.active {
  background: #14b8a6;
  color: #062320;
}

body.dark-theme .safety-title {
  color: #93c5fd;
}

body.dark-theme .safety-line span {
  color: #aebbd0;
}

body.dark-theme .safety-note {
  color: #aebbd0;
}

body.dark-theme .param-val,
body.dark-theme .copy-status,
body.dark-theme .m2-badge {
  color: #93c5fd;
}

body.dark-theme .kh-section {
  background: #172033;
  color: #dce6f3;
}

body.dark-theme .kh-section.green { background: #10281d; }
body.dark-theme .kh-section.orange { background: #30240d; }
body.dark-theme .kh-section.purple { background: #2a1a3d; }
body.dark-theme .kh-section.gray { background: #1f2937; }
body.dark-theme .kh-section.teal { background: #102d2a; }

body.dark-theme .kh-close,
body.dark-theme .proj-close {
  background: #1f2937;
  color: #e5edf7;
}

body.dark-theme .proj-table td {
  border-bottom-color: #2b3647;
}

body.dark-theme .proj-table tr:nth-child(even) td,
body.dark-theme .proj-table .total-row td {
  background: #172033;
}

.kh-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.kh-overlay.open {
  display: flex;
}
.kh-modal {
  background: white;
  border-radius: 16px;
  max-width: 720px;
  width: 100%;
  padding: 28px 30px;
  position: relative;
  margin: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.kh-modal h2 {
  color: #0d2f6b;
  font-size: 20px;
  margin: 0 0 4px;
}
.kh-modal .kh-subtitle {
  font-size: 12px;
  color: #888;
  margin-bottom: 20px;
}
.kh-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: #f3f4f6;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 18px;
  cursor: pointer;
  color: #444;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.kh-close:hover { background: #e5e7eb; }
.kh-section {
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #f8faff;
  border-left: 4px solid #1d5eff;
}
.kh-section h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #353971;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kh-section p {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.6;
  color: #333;
}
.kh-section p:last-child { margin-bottom: 0; }
.kh-section.green { border-left-color: #22c55e; background: #f0fdf4; }
.kh-section.orange { border-left-color: #f59e0b; background: #fffbeb; }
.kh-section.purple { border-left-color: #a855f7; background: #faf5ff; }
.kh-section.gray   { border-left-color: #6b7280; background: #f9fafb; }
.kh-section.teal   { border-left-color: #0d9488; background: #f0fdfa; }
.kh-icon { font-size: 16px; }
@media(max-width:600px){
  .kh-modal { padding: 20px 16px; }
}
@media print {
  .kh-overlay, .knowhow-btn, .theme-btn { display: none !important; }
}

.proj-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.proj-overlay.open { display: flex; }
.proj-modal {
  background: white;
  border-radius: 16px;
  max-width: 850px;
  width: 100%;
  padding: 26px 28px;
  position: relative;
  margin: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.proj-modal h2 {
  color: #0d2f6b; font-size: 19px; margin: 0 0 4px;
}
.proj-subtitle { font-size: 12px; color: #888; margin-bottom: 18px; }
.proj-close {
  position: absolute; top: 14px; right: 16px;
  background: #f3f4f6; border: none; border-radius: 50%;
  width: 30px; height: 30px; font-size: 18px; cursor: pointer;
  color: #444; display: flex; align-items: center; justify-content: center;
}
.proj-close:hover { background: #e5e7eb; }

.proj-table-wrap { overflow-x: auto; }
.proj-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.proj-table th {
  background: #0d2f6b; color: white;
  padding: 9px 12px; text-align: right;
  font-size: 12px; white-space: nowrap;
}
.proj-table th:first-child { text-align: left; }
.proj-table td {
  padding: 8px 12px; border-bottom: 1px solid #e5e7eb; text-align: right;
}
.proj-table td:first-child { text-align: left; }
.proj-table tr:last-child td { border-bottom: none; }
.proj-table tr:nth-child(even) td { background: #f8faff; }
.proj-table .total-row td {
  font-weight: bold;
  background: #ede9ff;
}

@media(max-width:600px){
  .proj-modal { padding: 18px 14px; }
}
@media print {
  .proj-overlay { display: none !important; }

  body.dark-theme {
    background: #ffffff !important;
    color: #111827 !important;
  }

  body.dark-theme .card,
  body.dark-theme .card-results,
  body.dark-theme .kh-modal,
  body.dark-theme .proj-modal {
    background: #ffffff !important;
    color: #111827 !important;
    box-shadow: none !important;
  }

  body.dark-theme .blue { background: #e7f1ff !important; color: #111827 !important; }
  body.dark-theme .green { background: #e6f4ea !important; color: #111827 !important; }
  body.dark-theme .orange { background: #fff3cd !important; color: #111827 !important; }
  body.dark-theme .gray { background: #f3f4f6 !important; color: #111827 !important; }

  body.dark-theme .result-box[style*="background:#f0e6ff"] {
    background: #f0e6ff !important;
    color: #111827 !important;
  }

  body.dark-theme .result-box[style*="background:#e8f7f3"] {
    background: #e8f7f3 !important;
    color: #111827 !important;
  }

  body.dark-theme .result-box.gray > div > div {
    background: #e8e8e8 !important;
    color: #111827 !important;
  }

  body.dark-theme h3,
  body.dark-theme .param-val,
  body.dark-theme .formatos-print-box h4,
  body.dark-theme .params-print-box h4,
  body.dark-theme .proyeccion-print-box h4 {
    color: #0d2f6b !important;
  }

  body.dark-theme .param-label {
    color: #555 !important;
  }

  #costo_total_res,
  #costo_detalle_res,
  body.dark-theme #costo_total_res,
  body.dark-theme #costo_detalle_res {
    color: #111827 !important;
  }
}
/* Ajuste para el modal de sugerencias en móviles */
@media(max-width:600px){
  #sugerencias-overlay .proj-modal {
    padding: 18px 14px;
    max-height: 85vh;
    overflow-y: auto;
  }
  
  #sugerencias-overlay textarea {
    font-size: 16px; /* Evita zoom en iOS */
  }
}