/* =============================================================
   Tibor5 — Calculadora DTF multi-medida
   Todo scopeado bajo .t5-calc para no tocar nada del tema.
   Paleta alineada con el cotizador (azul de marca #0b3989).
============================================================= */

.t5-calc{
  --t5-blue:#0b3989;
  --t5-blue-d:#072866;
  --t5-blue-soft:#eef3fb;
  --t5-line:#e2ecf3;
  --t5-ink:#0f2038;
  --t5-muted:#5a738c;
  --t5-bg:#f4f8fb;
  --t5-verde:#16a34a;
  --t5-ambar:#d97706;
  --t5-rojo:#dc2626;
  --t5-radius:14px;

  display:grid;
  grid-template-columns:1fr 400px;
  gap:24px;
  align-items:start;
  max-width:1216px;
  margin:0 auto;
  padding:24px 16px 48px;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--t5-ink);
  box-sizing:border-box;
}
.t5-calc *,.t5-calc *::before,.t5-calc *::after{box-sizing:border-box}

/* ---------- Lienzo ---------- */
.t5-canvas-card{
  background:#fff;
  border:1px solid var(--t5-line);
  border-radius:var(--t5-radius);
  padding:20px;
}
.t5-canvas-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:14px;flex-wrap:wrap;
}
.t5-canvas-title{font-weight:800;font-size:1.02rem;letter-spacing:-.01em}
.t5-chip{
  font-size:.74rem;font-weight:700;padding:.28rem .7rem;border-radius:999px;
  background:var(--t5-blue-soft);color:var(--t5-blue);white-space:nowrap;
}

.t5-canvas-wrap{position:relative;width:100%;overflow-x:auto;overflow-y:hidden}
#t5-canvas{display:block;width:100%;height:240px}

.t5-canvas-empty{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  gap:8px;color:var(--t5-muted);background:var(--t5-bg);
  border:1.5px dashed var(--t5-line);border-radius:10px;text-align:center;padding:16px;
}
.t5-empty-ico{font-size:1.7rem;opacity:.65}
.t5-canvas-empty p{margin:0;font-size:.9rem}

/* KPIs */
.t5-kpis{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--t5-line);
}
.t5-kpi b{display:block;font-size:1.5rem;font-weight:800;line-height:1.1;color:var(--t5-blue)}
.t5-kpi span{display:block;font-size:.78rem;color:var(--t5-muted);margin-top:2px}
.t5-kpi.is-verde b{color:var(--t5-verde)}
.t5-kpi.is-ambar b{color:var(--t5-ambar)}
.t5-kpi.is-rojo  b{color:var(--t5-rojo)}

.t5-bar{margin-top:8px;height:6px;border-radius:999px;background:var(--t5-line);overflow:hidden}
.t5-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--t5-blue);transition:width .3s ease,background .3s ease}
.t5-kpi.is-verde .t5-bar i{background:var(--t5-verde)}
.t5-kpi.is-ambar .t5-bar i{background:var(--t5-ambar)}
.t5-kpi.is-rojo  .t5-bar i{background:var(--t5-rojo)}

.t5-nota{
  margin:14px 0 0;padding:10px 12px;border-radius:10px;font-size:.84rem;
  background:#fffbeb;border:1px solid #fde68a;color:#92400e;
}

/* Leyenda de colores por medida */
.t5-leyenda{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.t5-leyenda-item{
  display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;
  background:#fff;border:1px solid var(--t5-line);border-radius:999px;padding:.34rem .8rem;
}
.t5-leyenda-dot{width:12px;height:12px;border-radius:3px;flex:none}

/* ---------- Panel ---------- */
.t5-panel{
  background:#fff;border:1px solid var(--t5-line);border-radius:var(--t5-radius);
  padding:20px;position:sticky;top:96px;
}
.t5-panel-head{display:flex;gap:12px;align-items:flex-start;padding-bottom:16px;border-bottom:1px solid var(--t5-line)}
.t5-panel-ico{
  width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--t5-blue);color:#fff;font-size:1.1rem;
}
.t5-panel-head b{display:block;font-size:.98rem;font-weight:800}
.t5-panel-head small{display:block;color:var(--t5-muted);font-size:.8rem;margin-top:2px;line-height:1.4}

.t5-step{padding:18px 0;border-bottom:1px solid var(--t5-line)}
.t5-step:last-child{border-bottom:none;padding-bottom:0}
.t5-step-head{display:flex;align-items:center;gap:9px;font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--t5-muted);margin-bottom:14px}
.t5-num{
  width:22px;height:22px;border-radius:50%;background:var(--t5-blue);color:#fff;
  display:grid;place-items:center;font-size:.72rem;font-weight:800;flex:none;
}

.t5-field{margin-bottom:14px}
.t5-label{display:block;font-size:.82rem;font-weight:600;margin-bottom:7px}

/* Segmentado */
.t5-seg{display:flex;gap:6px}
.t5-seg-btn{
  flex:1;padding:.6rem .5rem;border-radius:10px;border:1.5px solid var(--t5-line);
  background:#fff;color:var(--t5-muted);font-weight:700;font-size:.86rem;cursor:pointer;
  font-family:inherit;transition:.18s;
}
.t5-seg-btn:hover{border-color:var(--t5-blue)}
.t5-seg-btn.is-on{background:var(--t5-blue);border-color:var(--t5-blue);color:#fff}

/* Interruptor una / varias medidas */
.t5-switch-row{margin-top:16px;padding-top:14px;border-top:1px dashed var(--t5-line)}
.t5-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.t5-switch input{position:absolute;opacity:0;width:0;height:0}
.t5-switch-track{
  width:42px;height:24px;border-radius:999px;background:#cbd5e1;
  position:relative;transition:background .2s;flex:none;
}
.t5-switch-dot{
  position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.t5-switch input:checked + .t5-switch-track{background:var(--t5-blue)}
.t5-switch input:checked + .t5-switch-track .t5-switch-dot{transform:translateX(18px)}
.t5-switch input:focus-visible + .t5-switch-track{outline:2px solid var(--t5-blue);outline-offset:2px}
.t5-switch-txt{font-size:.88rem;font-weight:700}
.t5-switch-help{display:block;margin-top:6px;font-size:.76rem;color:var(--t5-muted);line-height:1.4}

/* Filas de medidas */
.t5-rows{display:flex;flex-direction:column;gap:10px}
.t5-row{
  display:grid;grid-template-columns:1fr 1fr 72px 30px;gap:8px;align-items:end;
  padding:10px;border:1px solid var(--t5-line);border-radius:11px;background:var(--t5-bg);
  border-left:4px solid var(--t5-blue);
}
.t5-row.is-solo{grid-template-columns:1fr 1fr 72px}
.t5-row-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.t5-row-f label{font-size:.7rem;font-weight:700;color:var(--t5-muted);text-transform:uppercase;letter-spacing:.04em}
.t5-row-f input{
  width:100%;padding:.5rem .55rem;border:1.5px solid var(--t5-line);border-radius:8px;
  font-size:.9rem;font-family:inherit;background:#fff;color:var(--t5-ink);min-width:0;
}
.t5-row-f input:focus{outline:none;border-color:var(--t5-blue)}
.t5-row-del{
  width:30px;height:34px;border:none;background:none;color:#b91c1c;font-size:1.1rem;
  cursor:pointer;border-radius:8px;line-height:1;
}
.t5-row-del:hover{background:#fee2e2}

.t5-add{
  width:100%;margin-top:10px;padding:.62rem;border:1.5px dashed var(--t5-blue);
  border-radius:10px;background:#fff;color:var(--t5-blue);font-weight:700;font-size:.86rem;
  cursor:pointer;font-family:inherit;transition:.18s;
}
.t5-add:hover{background:var(--t5-blue-soft)}

.t5-hint{margin:12px 0 0;font-size:.78rem;color:var(--t5-muted);line-height:1.5}

/* Tramos */
.t5-tramos{display:flex;flex-wrap:wrap;gap:6px}
.t5-tramo{
  font-size:.72rem;color:var(--t5-muted);background:var(--t5-bg);
  border:1px solid var(--t5-line);border-radius:8px;padding:.3rem .5rem;
}
.t5-tramo b{color:var(--t5-ink);font-weight:700}

/* Precio */
.t5-precio-linea{display:flex;justify-content:space-between;align-items:center;font-size:.88rem;padding:.32rem 0;color:var(--t5-muted)}
.t5-precio-linea b{color:var(--t5-ink);font-weight:700}
.t5-precio-envio{font-size:.8rem;color:var(--t5-muted);padding:.5rem 0 0;line-height:1.35}
.t5-precio-total{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:10px;padding-top:12px;border-top:2px solid var(--t5-line);
}
.t5-precio-total span{font-size:.9rem;font-weight:700}
.t5-precio-total b{font-size:1.7rem;font-weight:800;color:var(--t5-blue);letter-spacing:-.02em}
.t5-precio-vacio{font-size:.86rem;color:var(--t5-muted);padding:.4rem 0}
.t5-error{
  font-size:.85rem;color:#991b1b;background:#fef2f2;border:1px solid #fecaca;
  border-radius:9px;padding:.6rem .7rem;margin:.4rem 0;
}

.t5-cta{
  display:block;width:100%;margin-top:16px;padding:.9rem 1rem;border-radius:999px;
  background:var(--t5-blue);color:#fff;text-align:center;font-weight:800;font-size:.95rem;
  text-decoration:none;transition:.2s;
}
.t5-cta:hover{background:var(--t5-blue-d);color:#fff;transform:translateY(-2px)}
.t5-cta.is-off{opacity:.45;pointer-events:none}
.t5-cta-help{display:block;margin-top:8px;font-size:.76rem;color:var(--t5-muted);text-align:center;line-height:1.4}

.t5-aviso{
  max-width:720px;margin:32px auto;padding:16px 18px;border-radius:12px;
  background:#fffbeb;border:1px solid #fde68a;color:#92400e;font-size:.92rem;
}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .t5-calc{grid-template-columns:1fr;gap:18px;padding:16px 14px 40px}
  .t5-panel{position:static}
  #t5-canvas{height:200px}
}
@media(max-width:520px){
  .t5-kpis{grid-template-columns:1fr;gap:12px}
  .t5-kpi b{font-size:1.3rem}
  .t5-row{grid-template-columns:1fr 1fr;gap:8px}
  .t5-row.is-solo{grid-template-columns:1fr 1fr}
  .t5-row-del{grid-column:2;justify-self:end}
  #t5-canvas{height:170px}
}

/* ---------- Leyenda fija del lienzo (área facturable / pliegos) ---------- */
.t5-calc .t5-leyenda-fija{
  display:flex;justify-content:center;gap:22px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--t5-line);
}
.t5-calc .t5-lf-item{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;color:var(--t5-muted);font-weight:600;
}
.t5-calc .t5-lf-box{
  width:16px;height:12px;border:2px solid var(--t5-blue);border-radius:2px;flex:none;
}
.t5-calc .t5-lf-dash{
  width:16px;height:12px;border:1px dashed #94a3b8;border-radius:2px;flex:none;
}

/* Cajas de KPI tintadas segun el semaforo (referencia Comuvarte) */
.t5-calc .t5-kpi{
  padding:12px 14px;border-radius:11px;
  background:var(--t5-bg);border:1px solid var(--t5-line);
  transition:background .25s,border-color .25s;
}
.t5-calc .t5-kpi.is-verde{background:#f0fdf4;border-color:#bbf7d0}
.t5-calc .t5-kpi.is-ambar{background:#fffbeb;border-color:#fde68a}
.t5-calc .t5-kpi.is-rojo{background:#fef2f2;border-color:#fecaca}

/* =============================================================
   FIX 0.1.1 — el atributo [hidden] debe ganar SIEMPRE
   Varias piezas (.t5-canvas-empty, .t5-kpis, .t5-leyenda...) llevan
   display:grid/flex, y una regla de autor pisa el [hidden]{display:none}
   del navegador. Sin esto, el cartel de "introduce una medida" se queda
   tapando el lienzo aunque ya haya resultado.
============================================================= */
.t5-calc [hidden]{ display:none !important; }

/* =============================================================
   FIX 0.1.1 — ancho: sacar la calculadora de la caja de 900 px
   La plantilla de pagina del tema envuelve el contenido en un div con
   max-width:900px y padding:40px puestos EN LINEA, por eso hace falta
   !important. Scopeado con :has() -> solo en la pagina que lleva el
   shortcode; el resto del sitio no se entera.
============================================================= */
body:has(.t5-calc) .container > div{
  max-width:none !important;
  padding:0 !important;
  background:none !important;
  border:none !important;
  border-radius:0 !important;
}
body:has(.t5-calc) .container{
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
body:has(.t5-calc) .entry-content{
  line-height:normal !important;
}

/* Respiro para el titulo de la pagina */
body:has(.t5-calc) .container > div > h1{
  max-width:1216px;
  margin:0 auto 8px !important;
  padding:0 16px;
}

/* El panel se estrecha antes de que las cajas KPI se rompan.
   OJO — llevan min-width:981px a propósito: sin él, estas dos reglas también
   casaban en móvil y, por estar MÁS ABAJO en el archivo que la de 980px,
   ganaban por cascada. El resultado era un grid de dos columnas a 360px con
   el panel aplastado a ~30px (una palabra por línea). */
@media(min-width:981px) and (max-width:1180px){
  .t5-calc{grid-template-columns:1fr 360px;gap:18px}
}
@media(min-width:981px) and (max-width:1040px){
  .t5-calc{grid-template-columns:1fr 330px;gap:16px}
  .t5-calc .t5-kpi b{font-size:1.25rem}
}

/* =============================================================
   FIX 0.1.2 — el lienzo NO se aplasta nunca
   La tela de 570 mm ocupa siempre todo el alto del contenedor y el
   largo se desborda a la derecha con scroll horizontal, igual que la
   vista previa de tibor1. Antes se encajaba el largo entero en el ancho
   disponible y a 6 m el rollo quedaba en una tira de 78 px.
   El alto lo fija AQUI (.t5-canvas-wrap) y el JS lo lee.
============================================================= */
.t5-calc .t5-canvas-wrap{
  height:260px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-top:14px;              /* hueco para las marcas de metro */
  scrollbar-width:thin;
}
.t5-calc #t5-canvas{
  display:block;
  height:100%;
  width:auto;                    /* lo fija el JS: puede superar el contenedor */
  max-width:none;
}
.t5-calc .t5-canvas-wrap::-webkit-scrollbar{height:10px}
.t5-calc .t5-canvas-wrap::-webkit-scrollbar-track{background:var(--t5-bg);border-radius:999px}
.t5-calc .t5-canvas-wrap::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
.t5-calc .t5-canvas-wrap::-webkit-scrollbar-thumb:hover{background:#94a3b8}

.t5-calc .t5-scroll-hint{
  display:block;text-align:center;font-size:.74rem;color:var(--t5-muted);margin-top:6px;
}

@media(max-width:980px){ .t5-calc .t5-canvas-wrap{height:220px} }
@media(max-width:520px){ .t5-calc .t5-canvas-wrap{height:180px} }

/* =============================================================
   FIX 0.1.3 — el scroll es del PREVISUALIZADOR, no de la pagina
   Los items de CSS Grid llevan min-width:auto, asi que un lienzo de
   3.000 px estiraba la columna 1fr -> el grid -> la pagina entera, y el
   overflow-x del contenedor nunca llegaba a activarse.
   min-width:0 devuelve el desbordamiento a .t5-canvas-wrap, que es quien
   tiene que hacer scroll (igual que la vista previa del cotizador).

   NOTA: NO se toca overflow-x del body a proposito. Eso arreglaria el
   sintoma pero rompe el position:sticky de la cabecera del tema.
============================================================= */
.t5-calc{ min-width:0; }
.t5-calc > *{ min-width:0; }
.t5-calc .t5-canvas-col{ min-width:0; }
.t5-calc .t5-canvas-card{ min-width:0; }
.t5-calc .t5-canvas-wrap{ max-width:100%; }
.t5-calc .t5-panel{ min-width:0; }

/* FIX 0.1.4 — mas aire para que el rollo de 570 mm se vea completo */
.t5-calc .t5-canvas-wrap{ height:300px; }
@media(max-width:980px){ .t5-calc .t5-canvas-wrap{height:240px} }
@media(max-width:520px){ .t5-calc .t5-canvas-wrap{height:190px} }

/* ---------- Banner de reorganizacion inteligente ---------- */
.t5-calc .t5-ahorro{
  margin-top:14px;padding:11px 14px;border-radius:10px;
  font-size:.86rem;font-weight:600;line-height:1.45;
}
.t5-calc .t5-ahorro.is-ganado{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d}
.t5-calc .t5-ahorro.is-oferta{background:var(--t5-blue-soft);border:1px solid var(--t5-line);color:var(--t5-blue)}

/* =============================================================
   MÓVIL 0.2.2 — optimización en pantallas pequeñas
   Todo aditivo y scopeado en .t5-calc. El escritorio no cambia.
   Va al final del archivo a propósito: así estas reglas ganan a las
   media queries de más arriba sin necesidad de !important.
============================================================= */
@media(max-width:980px){

  /* 1. UNA SOLA COLUMNA. Se redeclara aquí, al final del archivo, para que
        gane por cascada a cualquier regla anterior. Es el fallo que dejaba
        el móvil con dos columnas y el panel aplastado.
        El orden se deja el del DOM: previsualizador arriba, configuración
        debajo (decisión de Javier). */
  .t5-calc{
    grid-template-columns:1fr !important;
    gap:18px;
    padding:16px 14px 40px;
  }
  .t5-calc .t5-canvas-col,
  .t5-calc .t5-panel{ order:initial; width:100%; max-width:100%; }

  /* 2. iOS Safari hace ZOOM automático al enfocar un input de menos de 16px,
        y al salir del campo la página se queda descuadrada. 16px lo evita. */
  .t5-calc .t5-row-f input{ font-size:16px; padding:.6rem; }

  /* 3. Áreas táctiles de 44px (mínimo de las guías de Apple y Material).
        La papelera medía 30×34 y la columna del grid hay que ensancharla
        con ella, o el botón se sale de su celda. */
  .t5-calc .t5-row        { grid-template-columns:1fr 1fr 72px 44px; }
  .t5-calc .t5-row.is-solo{ grid-template-columns:1fr 1fr 72px; }
  .t5-calc .t5-row-del    { width:44px;height:44px;font-size:1.25rem }
  .t5-calc .t5-seg-btn    { min-height:44px;padding:.7rem .5rem }
  .t5-calc .t5-add        { min-height:44px }

  /* Interruptores más grandes (recorrido = 48 − 3 − 22 − 3 = 20px) */
  .t5-calc .t5-switch-track{ width:48px;height:28px }
  .t5-calc .t5-switch-dot  { width:22px;height:22px }
  .t5-calc .t5-switch input:checked + .t5-switch-track .t5-switch-dot{ transform:translateX(20px) }

  /* 4. Al arrastrar el rollo hacia la derecha, Chrome y Safari interpretan el
        gesto como "volver atrás" y sacan al usuario de la página. */
  .t5-calc .t5-canvas-wrap{ overscroll-behavior-x:contain }

  /* 5. Sin destello gris al tocar */
  .t5-calc button,
  .t5-calc .t5-cta{ -webkit-tap-highlight-color:transparent }
}

@media(max-width:520px){
  /* La papelera vuelve a la segunda fila (la regla de arriba la deja en
     su propia columna, que a 360px no cabe). */
  .t5-calc .t5-row,
  .t5-calc .t5-row.is-solo{ grid-template-columns:1fr 1fr }

  /* KPIs apilados pero más compactos: ocupaban media pantalla */
  .t5-calc .t5-kpi  { padding:10px 12px }
  .t5-calc .t5-kpi b{ font-size:1.35rem }

  /* El total es lo que el cliente busca: que se vea */
  .t5-calc .t5-precio-total b{ font-size:1.9rem }

  /* 190px dejaba el rollo de 570 mm demasiado aplastado */
  .t5-calc .t5-canvas-wrap{ height:210px }

  /* Menos padding en las tarjetas para ganar ancho útil */
  .t5-calc .t5-canvas-card,
  .t5-calc .t5-panel{ padding:16px 14px }
}

/* =============================================================
   0.2.3 — LAYOUT A PRUEBA DE CASCADA (sustituye al grid)

   PROBLEMA: las dos columnas se definían con grid-template-columns en
   CINCO sitios distintos del archivo (base, 1180, 1040, 980, 520). En
   móvil casaban varias a la vez y ganaba la última escrita, no la más
   específica -> el móvil se quedaba con dos columnas y el panel
   aplastado a ~30 px (una palabra por línea).

   SOLUCIÓN: flex con envoltura. La segunda columna baja sola cuando no
   cabe, SIN media queries. Ya no hay nada que una regla posterior pueda
   pisar. Todas las declaraciones grid-template-columns de más arriba
   quedan inertes: no aplican a un contenedor flex.

   Anchos: el lienzo pide 520 px y el panel 400 px. Mientras sumen menos
   que el ancho disponible van en paralelo (escritorio, igual que antes:
   a 1216 px el lienzo queda en 760 px, exactamente como con 1fr 400px).
   En cuanto no caben, el panel baja debajo y ambos ocupan el 100 %.
   Orden: lienzo arriba, configuración debajo (orden natural del DOM).
============================================================= */
.t5-calc{
  display:flex !important;
  flex-wrap:wrap;
  align-items:flex-start;
}
.t5-calc > .t5-canvas-col{
  flex:1 1 520px;      /* crece para llenar el hueco sobrante */
  min-width:0;
  max-width:100%;
}
.t5-calc > .t5-panel{
  flex:0 1 400px;      /* no crece: se queda en 400 px como antes */
  min-width:0;
  max-width:100%;
}