/* ================================================
   GEAR RATIO CALCULATOR v2 — Cajas Graf
   ================================================ */

:root {
  --cg-blue:      #2857a5;
  --cg-blue-dk:   #1a3d7a;
  --cg-blue-lt:   #4a7fd4;
  --cg-black:     #0d0d0d;
  --cg-dark:      #1a1a2e;
  --cg-mid:       #16213e;
  --cg-white:     #ffffff;
  --cg-gray-dk:   #c8d0db;   /* más claro que antes para mejor lectura */
  --cg-accent:    #f0a030;
  --cg-green:     #22c55e;
  --cg-red:       #ef4444;
  --radius:       8px;
  --shadow:       0 4px 20px rgba(0,0,0,0.25);
  --tr:           0.2s ease;
  /* fondo de inputs — oscuro para contraste */
  --input-bg:     #0b1628;
  --input-border: rgba(74,127,212,0.5);
  /* font scale */
  --f-base: 15px;
  --f-sm:   13.5px;
  --f-xs:   12px;
  --f-label:13px;
}
* { box-sizing: border-box; }
/* Evitar overflow horizontal en toda la calculadora */
.calc2-wrap { overflow-x: hidden; }

.sub_bar_text {
  line-height: 45px;
}

/* ─────────────────────────────────────────
   TABS
───────────────────────────────────────── */
.calc2-tabs {
  display: flex;
  background: var(--cg-black);
  border-bottom: 2px solid var(--cg-blue);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.calc2-tabs::-webkit-scrollbar { display: none; }

.calc2-tab-btn {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cg-gray-dk);
  background: transparent;
  border: none;
  padding: 0.9rem 1.8rem;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color var(--tr), border-color var(--tr);
}
.calc2-tab-btn:hover  { color: var(--cg-white); }
.calc2-tab-btn.active { color: var(--cg-white); border-bottom-color: var(--cg-blue-lt); }

/* ─────────────────────────────────────────
   PAGE WRAP & PANEL
───────────────────────────────────────── */
.calc2-wrap  { background: var(--cg-dark); min-height: 60vh; }
.calc2-panel { display: none; padding: 1rem; max-width: 1440px; margin: 0 auto; }
.calc2-panel.active { display: block; }

/* ─────────────────────────────────────────
   GRID — 3 breakpoints
───────────────────────────────────────── */
.calc2-grid {
  display: grid;
  gap: 1rem;
  /* mobile: stack everything */
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "trans"
    "gears"
    "results";
}
/* tablet: trans+gears side by side, results below */
@media (min-width: 640px) and (max-width: 1099px) {
  .calc2-grid {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "trans gears"
      "results results";
  }
}
/* desktop: 3 columns */
@media (min-width: 1100px) {
  .calc2-grid {
    grid-template-columns: 290px 260px 1fr;
    grid-template-areas: "trans gears results";
    align-items: start;
  }
}

/* min-width:0 permite que los grid items encojan por debajo de su contenido */
.calc2-col-trans   { grid-area: trans;   min-width: 0; }
.calc2-col-gears   { grid-area: gears;   min-width: 0; }
.calc2-col-results { grid-area: results; min-width: 0; }

/* ─────────────────────────────────────────
   CARD
───────────────────────────────────────── */
.calc2-card {
  background: var(--cg-mid);
  border-radius: var(--radius);
  border: 1px solid rgba(40,87,165,.35);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.calc2-card-head {
  background: var(--cg-black);
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-bottom: 2px solid var(--cg-blue);
}
.calc2-card-head h3 {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.calc2-card-icon {
  width: 24px; height: 24px;
  background: var(--cg-blue);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800;
  color: white; flex-shrink: 0;
}
.calc2-card-body { padding: .9rem; }

/* ─────────────────────────────────────────
   FORM SECTIONS
───────────────────────────────────────── */
.calc2-section {
  background: rgba(10,20,50,.55);   /* fondo propio oscuro, aísla de Bootstrap */
  border-radius: 6px;
  padding: .8rem;
  margin-bottom: .8rem;
  border: 1px solid rgba(74,127,212,.15);
}
.calc2-section:last-child { margin-bottom: 0; }

.calc2-section-label {
  font-size: var(--f-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #a8cbf0 !important;   /* azul claro fuerte, forzado contra Bootstrap */
  margin-bottom: .5rem;
  display: block;
}

/* ─────────────────────────────────────────
   RADIO PILLS
───────────────────────────────────────── */
.calc2-radio-group { display: flex; gap: .45rem; flex-wrap: wrap; }
.calc2-radio-group label { position: relative; cursor: pointer; }
.calc2-radio-group input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.calc2-radio-group .pill {
  display: inline-block;
  padding: .45rem 1.1rem;
  font-size: 1rem;           /* era .9rem — ahora más legible */
  font-weight: 700;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,.3);
  color: #dde4ef;            /* gris claro visible */
  background: rgba(255,255,255,.07);
  transition: all var(--tr);
  user-select: none;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.2;
}
.calc2-radio-group input[type=radio]:checked + .pill {
  background: var(--cg-blue);
  border-color: var(--cg-blue-lt);
  color: white;
}
.calc2-radio-group label:hover .pill {
  border-color: var(--cg-blue-lt);
  color: white;
  background: rgba(74,127,212,.2);
}

/* ─────────────────────────────────────────
   INPUTS
───────────────────────────────────────── */
.calc2-input-row {
  display: flex; gap: .4rem; align-items: center; margin-top: .5rem;
}
.calc2-input-row > label {
  font-size: var(--f-sm);
  color: #dde4ef !important;   /* forzado contra Bootstrap */
  white-space: nowrap;
  min-width: 50px;
  font-weight: 600;
}

/* base para TODOS los inputs y selects */
.calc2-input {
  flex: 1; width: 100%; min-width: 0;   /* anula min-width intrínseco del browser */
  background: #0b1628 !important;        /* forzado: sobreescribe Bootstrap */
  border: 1.5px solid var(--input-border);
  border-radius: 5px;
  color: #ffffff !important;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: var(--f-base);
  padding: .55rem .7rem;
  transition: border-color var(--tr), box-shadow var(--tr);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.calc2-input:focus {
  outline: none;
  border-color: var(--cg-blue-lt);
  box-shadow: 0 0 0 3px rgba(74,127,212,.25);
}
.calc2-input::placeholder {
  color: #7a9abb !important;  /* gris-azul sólido — legible sobre #0b1628 */
  font-size: var(--f-sm);
  opacity: 1;                 /* Firefox pone 0.54 por defecto */
}

/* addon (RPM, mm, etc.) */
.calc2-input-addon {
  font-size: var(--f-sm);
  color: #dde4ef;
  font-weight: 700;
  background: rgba(74,127,212,.2);
  border-radius: 4px;
  padding: .55rem .6rem;
  white-space: nowrap;
  border: 1px solid rgba(74,127,212,.35);
  letter-spacing: .03em;
}

/* select: flecha personalizada, fondo oscuro siempre */
select.calc2-input {
  background-color: #0b1628 !important;
  color: #ffffff !important;
  padding-right: 1.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c8d8f0'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .55rem center !important;
  cursor: pointer;
}
/* opciones del select también oscuras */
select.calc2-input option {
  background: #0b1628 !important;
  color: #ffffff !important;
}

/* tyre selects */
.tyre-selects { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: .35rem; margin-top: .5rem; }
.tyre-label { font-size: var(--f-xs); color: #a8cbf0 !important; font-weight: 600; text-align: center; margin-bottom: .2rem; }
.tyre-sel-group { display: flex; flex-direction: column; min-width: 0; }

/* computed — texto calculado (ratio, perimeter) */
.calc2-computed {
  font-size: var(--f-sm);
  color: var(--cg-accent);
  font-weight: 700;
  margin-top: .4rem;
  min-height: 1.3em;
  letter-spacing: .02em;
}

/* ─────────────────────────────────────────
   GEARS PANEL
───────────────────────────────────────── */
.gear-entry {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) minmax(0,1fr);
  gap: .35rem;
  align-items: center;
  margin-bottom: .55rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.gear-entry:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.gear-entry .calc2-computed { grid-column: 1 / -1; font-size: var(--f-xs); margin-top: 0; padding-left: 2px; }

.gear-num {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: var(--f-sm);
  font-weight: 700;
  color: #dde4ef !important;
  background: rgba(40,87,165,.45);
  border: 1px solid rgba(74,127,212,.4);
  border-radius: 4px;
  padding: .3rem .35rem;
  text-align: center;
  min-width: 36px;
}
.gear-ratio-row {
  display: grid; grid-template-columns: 36px minmax(0,1fr) auto;
  gap: .4rem; align-items: center; margin-bottom: .55rem;
}
.gear-ratio-row:last-child { margin-bottom: 0; }

.gearbox2-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--f-sm);
  color: #7eb8f5;        /* azul claro visible */
  cursor: pointer; margin-top: .65rem;
  text-decoration: underline; text-underline-offset: 2px;
  background: none; border: none; padding: 0;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
}
.gearbox2-toggle:hover { color: white; }

/* ─────────────────────────────────────────
   RESULTS TABLE
───────────────────────────────────────── */
.calc2-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 6px;
  margin-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--cg-blue) transparent;
}
.calc2-table {
  width: 100%; border-collapse: collapse;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: var(--f-base);
  min-width: 540px;
}
.calc2-table thead th {
  background: #060e1f;    /* más oscuro que --cg-black para contraste */
  color: #c8d8f0;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .75rem .65rem;
  text-align: center;
  border-bottom: 2px solid var(--cg-blue);
  white-space: nowrap;
  line-height: 1.3;
}
.calc2-table thead th small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  color: #8aa0be;
  margin-top: 2px;
}
.calc2-table tbody tr.tr-gear:nth-child(odd)  td,
.calc2-table tbody tr.tr-gear:nth-child(odd)  th { background: rgba(40,87,165,.13); }
.calc2-table tbody tr.tr-gear:nth-child(even) td,
.calc2-table tbody tr.tr-gear:nth-child(even) th { background: rgba(40,87,165,.07); }
.calc2-table tbody tr.tr-gear:hover td,
.calc2-table tbody tr.tr-gear:hover th  { background: rgba(40,87,165,.32); }

.calc2-table tbody th {
  background: var(--cg-black); color: var(--cg-blue-lt);
  font-weight: 800; font-size: 1.1rem;
  padding: .65rem .7rem; text-align: center;
}
.calc2-table tbody td {
  color: var(--cg-white); padding: .6rem .55rem;
  text-align: center; vertical-align: middle;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: var(--f-base);
}
.calc2-table .speed-range,
.calc2-table .rpm-range   { display: flex; flex-direction: column; line-height: 1.5; }
.calc2-table .speed-from,
.calc2-table .rpm-entry   { color: var(--cg-gray-dk); font-size: var(--f-sm); }
.calc2-table .speed-to    { color: white;            font-weight: 700; font-size: 1rem; }
.calc2-table .rpm-exit    { color: var(--cg-accent); font-weight: 700; font-size: 1rem; }
.calc2-table .delta-pos   { color: var(--cg-green);  font-weight: 600; }
.calc2-table .delta-neg   { color: var(--cg-red);    font-weight: 600; }
.calc2-table .empty-msg td {
  color: var(--cg-gray-dk); font-style: italic;
  padding: 2rem; text-align: center; font-size: var(--f-base);
}

/* ─────────────────────────────────────────
   CHART
───────────────────────────────────────── */
.calc2-chart-wrap {
  background: var(--cg-mid);
  border-radius: var(--radius);
  border: 1px solid rgba(40,87,165,.35);
  padding: 1rem;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
.calc2-chart-wrap h4 {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: var(--f-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--cg-gray-dk); margin: 0 0 .75rem;
}
.calc2-chart-wrap canvas { max-height: 300px; }

/* ─────────────────────────────────────────
   COMPARE PANEL
───────────────────────────────────────── */
.calc2-compare-grid {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
}
@media (min-width: 900px) {
  .calc2-compare-grid { grid-template-columns: 1fr 1fr; }
}

/* Gráfico dentro de las cards de comparación */
.calc2-compare-grid .calc2-chart-wrap {
  border-radius: 0 0 var(--radius) var(--radius);
  border-top: 1px solid rgba(40,87,165,.35);
  border-left: none; border-right: none; border-bottom: none;
  box-shadow: none;
  margin: 0 !important;
  padding: .85rem;
}
.calc2-compare-grid .calc2-chart-wrap canvas { max-height: 260px; }

/* ─────────────────────────────────────────
   SHARE BAR
───────────────────────────────────────── */
.calc2-share {
  display: flex; gap: .5rem; flex-wrap: wrap;
  justify-content: center; padding: 1.2rem 1rem;
}
.calc2-share a, .calc2-share button {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.2rem;
  border-radius: 20px; font-size: .9rem; font-weight: 600;
  font-family: 'Barlow Semi Condensed', sans-serif;
  border: none; cursor: pointer; text-decoration: none;
  transition: opacity var(--tr), transform var(--tr);
}
.calc2-share a:hover, .calc2-share button:hover { opacity: .85; transform: translateY(-1px); color: white !important; }
.share-fb    { background: #3b5998; color: white; }
.share-tw    { background: #1da1f2; color: white; }
.share-wa    { background: #25d366; color: white; }
.share-copy  { background: #2857a5; color: white; }
.share-print { background: #555;    color: white; }

/* ─────────────────────────────────────────
   UTILS
───────────────────────────────────────── */
.hide { display: none !important; }

/* ─────────────────────────────────────────
   PRINT BANNER
───────────────────────────────────────── */
.print-banner-wrap { display: none; }

/* ─────────────────────────────────────────
   MOBILE — ≤ 639px
───────────────────────────────────────── */
@media (max-width: 639px) {
  :root { --f-base: 14px; --f-sm: 12.5px; --f-label: 12px; }

  /* evitar overflow horizontal global */
  .calc2-wrap, .calc2-panel, .calc2-grid,
  .calc2-card, .calc2-card-body, .calc2-section { max-width: 100%; }
  .calc2-wrap { overflow-x: hidden; }

  .calc2-panel   { padding: .5rem; }
  .calc2-grid    { gap: .6rem; }
  .calc2-card-body { padding: .6rem; }
  .calc2-section   { padding: .6rem; }

  /* pills menores */
  .calc2-radio-group .pill { padding: .32rem .65rem; font-size: .82rem; }

  /* neumático: 3 columnas con min-width 0 para evitar overflow */
  .tyre-selects {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,68px);
    gap: .25rem;
  }
  .tyre-sel-group { min-width: 0; }
  .tyre-label     { font-size: 11px; }

  /* inputs en el grid de neumático no pueden crecer */
  .tyre-sel-group .calc2-input {
    width: 100%;
    min-width: 0;
    padding-left: .4rem;
    padding-right: 1.4rem;  /* espacio para la flecha */
    font-size: var(--f-sm);
  }

  /* tabla hace scroll horizontal en mobile */
  .calc2-table-wrap { margin-bottom: .75rem; }
  .calc2-table { min-width: 460px; font-size: var(--f-sm); }
  .calc2-table thead th { padding: .5rem .4rem; font-size: var(--f-xs); }
  .calc2-table tbody td, .calc2-table tbody th { padding: .45rem .35rem; }

  /* share bar en columna */
  .calc2-share { flex-direction: column; align-items: stretch; padding: .75rem; }
  .calc2-share a, .calc2-share button { justify-content: center; }

  /* select base */
  select.calc2-input { font-size: var(--f-sm); }

  /* chart */
  .calc2-chart-wrap canvas { max-height: 220px; }
}

/* ─────────────────────────────────────────
   EXTRA PEQUEÑO — ≤ 500px
   Achicamos todo para que los formularios
   entren sin desborde horizontal
───────────────────────────────────────── */
@media (max-width: 500px) {
  :root {
    --f-base:  12.5px;
    --f-sm:    11.5px;
    --f-xs:    10.5px;
    --f-label: 10.5px;
  }

  /* padding mínimo */
  .calc2-panel      { padding: .35rem; }
  .calc2-grid       { gap: .45rem; }
  .calc2-card-body  { padding: .45rem; }
  .calc2-section    { padding: .45rem; margin-bottom: .5rem; }

  /* inputs y selects muy compactos */
  .calc2-input {
    padding: .35rem .45rem !important;
    font-size: var(--f-sm) !important;
  }
  select.calc2-input {
    padding-right: 1.2rem !important;
  }

  /* addon más estrecho */
  .calc2-input-addon {
    padding: .35rem .4rem;
    font-size: var(--f-xs);
  }

  /* label inline ocupa menos espacio */
  .calc2-input-row > label {
    min-width: 40px;
    font-size: var(--f-xs) !important;
  }

  /* pills más chicas */
  .calc2-radio-group .pill {
    padding: .25rem .5rem;
    font-size: .75rem;
  }

  /* neumático: tercera columna fija a 56px */
  .tyre-selects {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,56px);
    gap: .2rem;
  }
  .tyre-label { font-size: 10px; }

  /* número de marcha más angosto */
  .gear-entry     { grid-template-columns: 28px minmax(0,1fr) minmax(0,1fr); gap: .25rem; }
  .gear-ratio-row { grid-template-columns: 28px minmax(0,1fr) auto; gap: .25rem; }
  .gear-num       { min-width: 28px; font-size: var(--f-xs); padding: .25rem .2rem; }

  /* card head menos alto */
  .calc2-card-head { padding: .45rem .7rem; }
  .calc2-card-head h3 { font-size: .9rem; }
  .calc2-card-icon    { width: 20px; height: 20px; font-size: .7rem; }

  /* tabla resultado */
  .calc2-table { min-width: 380px; }
  .calc2-table thead th { font-size: 10px; padding: .4rem .3rem; }
  .calc2-table tbody td,
  .calc2-table tbody th { font-size: var(--f-sm); padding: .35rem .25rem; }
}

/* ─────────────────────────────────────────
   PRINT
───────────────────────────────────────── */
@media print {
  /* Ocultar todo lo que no es contenido */
  .navbar, nav, header, .navbar-default,
  .footer, #site_nav,
  .calc2-tabs, .calc2-share,
  .calc2-col-trans, .calc2-col-gears { display: none !important; }

  /* Ocultar panel compare — las tablas de op1 y op2 ya se imprimen abajo */
  #panel-compare { display: none !important; }

  /* Mostrar banner de impresión */
  .print-banner-wrap { display: block !important; width: 100%; margin-bottom: 1.5rem; }
  .print-banner-wrap img { width: 100%; }

  /* Mostrar AMBOS panels de opciones (op1 y op2) apilados */
  #panel-op1, #panel-op2 { display: block !important; padding: 0 !important; }
  /* Separar op2 con salto de página opcional */
  #panel-op2 { margin-top: 1.5rem; page-break-before: auto; }

  .calc2-wrap { background: white !important; }
  .calc2-grid { display: block !important; }
  .calc2-col-results { display: block !important; }

  /* Mostrar gráfico si tiene datos (respeta la clase .hide) */
  .calc2-chart-wrap:not(.hide) { display: block !important; break-inside: avoid; }

  /* Colores blanco/negro */
  body, .calc2-wrap, .calc2-col-results,
  .calc2-card, .calc2-card-head { background: white !important; }

  .calc2-card-head { border-bottom-color: #000 !important; }
  .calc2-card-head h3 { color: #000 !important; }
  .calc2-card-icon    { background: #000 !important; }

  .calc2-table { min-width: unset; font-size: 10pt; }
  .calc2-table thead th  { background: #ccc !important; color: #000 !important; font-size: 9pt; }
  .calc2-table tbody th  { background: #eee !important; color: #000 !important; }
  .calc2-table tbody td  { color: #000 !important; background: white !important; }
  .calc2-table .speed-to, .calc2-table .rpm-exit { color: #000 !important; }
  .calc2-table .speed-from, .calc2-table .rpm-entry { color: #555 !important; }
  .calc2-table .delta-pos { color: #155724 !important; }
  .calc2-table .delta-neg { color: #721c24 !important; }
  .calc2-chart-wrap { border: 1px solid #ccc !important; background: white !important; }
  .calc2-chart-wrap h4 { color: #000 !important; }
}