:root{
  --bg: #f3f5f7;
  --panel: #ffffff;
  --muted: #607d8b;
  --text: #1b1f23;
  --border: #e3e7ea;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 14px;

  --kvW: 220px;

  --brand: #0F6B47;
  --brand-light: #3A9D72;
  --brand-dark: #0A4A30;
  --champagne: #A8D5C0;

  --green: #0F6B47;
  --red: #c62828;
  --amber: #f9a825;
  --slate: #546e7a;
  --orange: #ef6c00;
  --purple: #6a1b9a;
  --grayChip: #E8F1EC;
  --grayText: #263238;
  --noRev: #546e7a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a{color:inherit}

/* ===== TEMA OSCURO ===== */
[data-theme="dark"]{
  --bg: #050807;
  --panel: #0B1410;
  --muted: #8a9b95;
  --text: #E8F1EC;
  --border: #1a2520;
  --shadow: 0 10px 30px rgba(0,0,0,.4);
  --grayChip: #142019;
  --grayText: #d8e5df;
}
[data-theme="dark"] body{background:var(--bg);color:var(--text)}
[data-theme="dark"] .topbar{background:rgba(11,20,16,.7);border-color:#1a2520}
[data-theme="dark"] .btn{background:#11201a;color:var(--text);border-color:#1a2520}
[data-theme="dark"] .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
[data-theme="dark"] .pill{background:#11201a;border-color:#1a2520}
[data-theme="dark"] .card{background:var(--panel);border-color:#1a2520}
[data-theme="dark"] .item, [data-theme="dark"] .optbtn, [data-theme="dark"] .textbox{background:#11201a;border-color:#1a2520;color:var(--text)}
[data-theme="dark"] table{background:var(--panel);color:var(--text)}
[data-theme="dark"] th{background:#11201a;color:#d8e5df}
[data-theme="dark"] tbody tr:nth-child(even){background:#0e1814}
[data-theme="dark"] tbody tr:hover{background:#152a22}
[data-theme="dark"] .tab{background:#11201a;color:var(--muted);border-color:#1a2520}
[data-theme="dark"] .tab.active{background:var(--brand);border-color:var(--brand);color:#fff}
[data-theme="dark"] .chip{background:var(--grayChip);color:var(--text);border-color:rgba(255,255,255,.08)}
/* Overrides para textos negros / grises hardcodeados — adaptan a oscuro */
[data-theme="dark"] .item .label,
[data-theme="dark"] .kv .k,
[data-theme="dark"] th,
[data-theme="dark"] .field label,
[data-theme="dark"] .card-title h2,
[data-theme="dark"] .item .label{ color: #d8e5df !important; }
[data-theme="dark"] .topTitle{ color: #3A9D72 !important; }
[data-theme="dark"] .topSubtitle{ color: #93b4dd !important; }
[data-theme="dark"] .chip,
[data-theme="dark"] .metric .m-value{ color: #ffffff !important; }
[data-theme="dark"] tr.sel{ background:#1f2e26 !important; }
[data-theme="dark"] .optbtn.selectedAccent{ background:#142a40 !important; color:#cfe0ff !important; }
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] select,
[data-theme="dark"] textarea{
  background:#11201a !important;
  color:#e8f1ec !important;
  border-color:#1a2520 !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder{ color:#6a8079 !important; }

/* ===== TABLAS: zebra + hover ===== */
tbody tr:nth-child(even){background:#fbfcfc}
tbody tr:hover{background:#eaf3ee;cursor:default}
tbody tr.sel:hover{background:#d8efe2}

/* ===== TOPBAR ACTIONS ===== */
.topActions{display:flex;align-items:center;gap:8px;margin-left:auto}
.topActions .iconBtn{
  appearance:none;background:transparent;border:1px solid var(--border);
  color:var(--muted);border-radius:999px;padding:6px 12px;font-size:12px;
  font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:background .15s, color .15s, border-color .15s;
}
.topActions .iconBtn:hover{background:var(--grayChip);color:var(--text);border-color:var(--brand-light)}
.topActions .iconBtn.danger:hover{background:#fff0f0;color:#a31616;border-color:#f1c0c0}
.topActions .iconBtn svg{width:14px;height:14px}

.container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 14px 20px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}

.brand{
  display:flex;
  flex-direction:column;
  gap: 2px;
}
.brand h1{
  font-size: 16px;
  margin:0;
  font-weight: 700;
}
.brand .sub{
  font-size: 12px;
  color: var(--muted);
}

.pills{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pill{
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card-h{
  padding: 12px 14px 8px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}
.card-title{
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.card-title h2{
  margin:0;
  font-size: 14px;
  font-weight: 800;
  color: var(--grayText);
}
.card-title .hint{
  font-size: 12px;
  color: var(--muted);
}

.card-b{
  padding: 12px 14px 14px;
}

.toolbar{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content:flex-start;
}

.btn{
  appearance:none;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 650;
  cursor:pointer;
  transition: transform .05s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active{transform: translateY(1px)}
.btn.primary{
  background: #0F6B47;
  border-color: #0F6B47;
  color:#fff;
}
.btn.danger{
  background: #fff;
  border-color: #f1c0c0;
  color: #a31616;
}
.btn:disabled{
  opacity: .55;
  cursor: not-allowed;
}

.items{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.items.cols3{grid-template-columns: repeat(3, minmax(0,1fr));}

.item{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 10px 8px;
  background: #fff;
}
.item .label{
  font-size: 12px;
  color: #37474f;
  margin-bottom: 8px;
  line-height: 1.25;
  min-height: 34px;
}
.item .opt{
  display:grid;
  gap: 6px;
}
.item .opt.cols2{grid-template-columns: repeat(2, minmax(0,1fr));}

/*
  Para botones largos (p. ej. "POSICIONAMIENTO DIARIO") queremos que, si el contenedor
  se queda estrecho, el grid pase automáticamente a 1 columna (sin depender del ancho
  de pantalla). En contenedores anchos volverá a 2 columnas.
*/
.item .opt.cols2.stackOnNarrow{grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));}
/*
  En español hay palabras largas (p.ej. FUNDAMENTAL, SENTIMIENTO).
  Preferimos NO partir palabras; por eso, en grupos "cols3" usamos auto-fit
  con un ancho mínimo: si no cabe en 3 columnas, baja a 2 (o 1) de forma limpia.
*/
.item .opt.cols3{grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));}

.optbtn{
  border: 1px solid var(--border);
  background: #f0f0f0;
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 800;
  /* un pelin mas grande, pero adaptable */
  font-size: clamp(11px, 1.05vw, 12px);
  cursor:pointer;
  transition: filter .15s ease, transform .05s ease, box-shadow .15s ease, border-color .15s ease;

  /* Texto: saltos solo entre palabras (no cortar en mitad) */
  white-space: normal;
  /* no partir palabras (si algo no cabe, preferimos reflow de columnas) */
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;

  line-height: 1.15;
  text-align: center;
  min-height: 40px;
}
.optbtn:disabled{
  /* Mantener el aspecto marcado aunque esté bloqueado */
  opacity: 1;
  cursor: not-allowed;
  filter: none;
}
.optbtn:active{transform: translateY(1px)}
.optbtn.selected{
  /* Marcado: contorno/sombra (sirve también si el botón ya está coloreado por estado) */
  border-color: rgba(59,130,246,.75);
  box-shadow: 0 6px 18px rgba(59,130,246,.18);
  filter: saturate(1.05);
}

.optbtn.selectedAccent{
  /* Marcado “neutro” (instrumento/estrategia): fondo azul suave Win11 */
  background: #e7f0ff;
  color: #0b1b3a;
}

.optbtn:hover{
  filter: brightness(0.98);
}

.rightTabs{
  display:flex;
  gap: 8px;
  padding: 10px 14px 0;
  flex-wrap: wrap;
}
.tab{
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 750;
  cursor:pointer;
  color: var(--muted);
}
.tab.active{
  background: #0F6B47;
  border-color: #0F6B47;
  color: #fff;
}

.metrics{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
.metric .m-label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 750;
  margin-bottom: 6px;
}
.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  font-weight: 900;
  font-size: 13px;
  background: var(--grayChip);
  color: #000;
}

.detailsGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.kv{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin: 6px 0;
}
.kv .k{
  font-size: 12px;
  color: #37474f;
  font-weight: 650;
}
.kv .v{
  width: 220px;
}

.textbox{
  width:100%;
  min-height: 150px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: #fff;
  white-space: pre-wrap;
}

.tableWrap{
  overflow:auto;
  border: 1px solid var(--border);
  border-radius: 14px;
}
table{
  width:100%;
  border-collapse: collapse;
  background:#fff;
}
th,td{
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  text-align:left;
  white-space: nowrap;
}
th{
  position: sticky;
  top: 0;
  background: #fbfbfc;
  z-index: 1;
  font-weight: 850;
  color: #37474f;
}
tr.sel{background: #eef2ff;}
.small{
  font-size: 12px;
  color: var(--muted);
}

.footerBar{
  position: sticky;
  bottom: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.toast{
  position: fixed;
  right: 14px;
  bottom: 14px;
  max-width: 520px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(58,157,114,.4);
  background: linear-gradient(135deg, #0F6B47, #0A4A30);
  color:#fff;
  font-weight: 600;
  box-shadow: var(--shadow);
  transform: translateY(8px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
}
.toast.show{
  opacity: 1;
  transform: translateY(0);
}

.modalBack{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display:none;
  z-index: 9998;
}
.modalBack.show{display:block}
.modal{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(980px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow:auto;
  background:#fff;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.modal .mh{
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}
.modal .mb{padding: 12px 14px 14px;}
.modalTabs{display:flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;}
.modalTab{
  border:1px solid var(--border);
  background:#fff;
  border-radius:999px;
  padding: 8px 10px;
  font-size:12px;
  font-weight:800;
  color: var(--muted);
  cursor:pointer;
}
.modalTab.active{background:#0F6B47;color:#fff;border-color:#0F6B47}


/* ---- Diario (modal) ---- */
.journalWrap{display:flex; flex-direction:column; gap: 10px;}
.journalGrid{
  margin-top: 8px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:12px; font-weight:800; color:#37474f;}
.field input, .field select, .field textarea{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 10px;
  font-size: 13px;
  background: #fff;
}
.field textarea{resize: vertical; min-height: 90px;}
.journalGrid .span2{grid-column: 1 / -1;}
.journalImgs{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 8px;}
.imgBox{border: 1px solid var(--border); border-radius: 14px; padding: 10px; background:#fff; display:flex; flex-direction:column; gap: 8px;}
.journalImg{width:100%; height:auto; border-radius: 12px; border: 1px solid var(--border);}
.imgEmpty{font-size:12px; color: var(--muted); padding: 18px 10px; border: 1px dashed var(--border); border-radius: 12px; text-align:center;}
.journalActions{display:flex; gap: 8px; flex-wrap: wrap; margin-top: 4px;}
@media (max-width: 1100px){
  .grid2{grid-template-columns: 1fr}
  .metrics{grid-template-columns: repeat(2, minmax(0,1fr));}
  .detailsGrid{grid-template-columns: 1fr;}
  .items{grid-template-columns: 1fr}
  .items.cols3{grid-template-columns: 1fr}
  .journalGrid{grid-template-columns: 1fr;}
  .journalImgs{grid-template-columns: 1fr;}
}


/* Diario - pegar imagen desde portapapeles */
.imgPasteZone{
  font-size: 12px;
  color: var(--muted);
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  text-align: center;
  cursor: text;
  user-select: none;
}
.imgPasteZone:focus{
  outline: 2px solid rgba(34, 211, 238, 0.35);
  outline-offset: 2px;
}
.imgBox input[type="text"]{
  width: 100%;
}


/* ---- Ajustes UI (cabecera + resultados) ---- */
.topbar{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 16px;
  padding-left: clamp(100px, 11vw, 150px);
  padding-right: clamp(280px, 30vw, 460px);
  min-height: 110px;
}
.topLogo{
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(70px, 9vw, 110px);
  height: clamp(70px, 9vw, 110px);
  filter: drop-shadow(0 3px 12px rgba(15,107,71,.32));
  transition: transform .25s ease;
}
.topLogo:hover{ transform: translateY(-50%) scale(1.05) rotate(-2deg); }
.topLogo svg, .topLogo img{
  width: 100%; height: 100%; display: block; object-fit: contain;
}
.topTitleWrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  text-align: center;
}
.topActions{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0 !important;
}
@media (max-width: 900px) {
  .topbar{ padding-left: 90px; padding-right: 14px; flex-wrap: wrap; }
  .topActions{ position: static; transform: none; margin-top: 8px; }
}
.topTitle{
  text-align: center;
  font-weight: 950;
  letter-spacing: .8px;
  color: #0F6B47;
  font-size: clamp(18px, 2.4vw, 32px);
  line-height: 1.05;
  text-transform: uppercase;
}
.topSubtitle{
  text-align: center;
  font-weight: 700;
  letter-spacing: .4px;
  color: #1e40af;
  font-size: clamp(15px, 1.7vw, 20px);
  font-style: italic;
  line-height: 1.1;
  margin-top: 4px;
}

/* Etiquetas centradas y alineadas en tarjetas de Resultados */
.metric{
  display: flex;
  flex-direction: column;
}
.metric .m-label{
  text-align: center;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 34px; /* hace que 1 línea se alinee con 2 líneas */
  line-height: 1.15;
  margin-bottom: 6px;
}

/* Resultado matrices: mismo tamaño de pastillas dentro de cada tarjeta */
.kv{
  display: grid;
  grid-template-columns: 1fr minmax(160px, var(--kvW));
  align-items: center;
}
.kv .v{
  width: auto;
}
.kv .v .chip{
  width: 100%;
}

/* En pantallas estrechas, reducimos el ancho fijo del valor */
@media (max-width: 520px){
  :root{ --kvW: 200px; }
}