/* SOLINFOR · Herramientas gratis (herramientas.html y herramienta-*.html), 12/10/2026. Usa los colores y botones de la web. */
.hr-hero { padding-bottom: 28px; }
.hr-hero h1 { margin-bottom: 10px; }
.hr-seccion { padding: 28px 16px 40px; }
.hr-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.hr-tarjeta { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 16px; background: #fff; border: 1px solid #d9e2ec;
  box-shadow: 0 6px 18px rgba(16, 42, 67, .08); color: #1f2a37; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.hr-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(16, 42, 67, .14); }
.hr-tarjeta i { font-size: 1.9rem; color: #0b63b6; }
.hr-tarjeta b { font-size: 1.15rem; }
.hr-tarjeta span { color: #4a5868; line-height: 1.45; }
.hr-tarjeta em { margin-top: auto; font-style: normal; font-weight: 700; color: #0b63b6; }
.hr-nota { color: #5a6878; font-size: .92rem; margin: 14px 0 0; }
.hr-caja, .hr-hoja { background: #fff; border: 1px solid #d9e2ec; border-radius: 16px; padding: 22px; box-shadow: 0 6px 18px rgba(16, 42, 67, .06); }
.hr-estrecha { max-width: 720px; margin: 0 auto; }
.hr-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.hr-caja h2 { font-size: 1.25rem; margin: 0 0 12px; }
.hr-caja label, .hr-campos label { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; font-weight: 600; color: #33414f; }
.hr-caja input, .hr-caja select, .hr-hoja input[type=number], .hr-campos input { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid #b8c4d0;
  border-radius: 10px; background: #fff; color: #1f2a37; min-width: 0; }
.hr-caja input:focus, .hr-hoja input:focus, .hr-caja select:focus { outline: 3px solid rgba(11, 99, 182, .25); border-color: #0b63b6; }
.hr-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.hr-junto { display: flex; gap: 8px; }
.hr-junto input { width: 90px; flex: 0 0 auto; }
.hr-junto select { flex: 1 1 auto; }
.hr-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.hr-btn-2 { font: inherit; font-weight: 700; padding: 11px 18px; border-radius: 999px; border: 2px solid #0b63b6; background: #fff; color: #0b63b6; cursor: pointer; }
.hr-btn-2:hover { background: #eaf3fc; }
button.sv-btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.hr-tabla { width: 100%; border-collapse: collapse; }
.hr-tabla th, .hr-tabla td { padding: 8px 10px; border-bottom: 1px solid #e3e9ef; text-align: left; }
.hr-tabla thead th { background: #f2f6fa; font-size: .9rem; }
.hr-caja td:last-child, .hr-tabla.hr-caja td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hr-tabla.hr-caja input { width: 100px; text-align: right; }
.hr-tabla tfoot th, .hr-tabla tfoot td { font-weight: 700; background: #fafcfe; }
.hr-resultado { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: #eef5fc; border-left: 6px solid #0b63b6; line-height: 1.55; font-size: 1.05rem; }
.hr-resultado.bien { background: #e8f5ea; border-color: #2e7d32; }
.hr-resultado.mal { background: #fdecea; border-color: #b3261e; }
.hr-resultado.aviso { background: #fff6e0; border-color: #b07000; }
.hr-resultado b.grande { font-size: 1.6rem; display: block; }
.hr-anuncio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; padding: 18px 22px;
  border-radius: 16px; background: linear-gradient(135deg, #0b3d6e, #0b63b6); color: #fff; }
.hr-anuncio p { margin: 0; flex: 1 1 320px; line-height: 1.5; }
.hr-anuncio .sv-btn { background: #fff; color: #0b3d6e; }
.hr-explica { margin-top: 18px; background: #fff; border: 1px solid #d9e2ec; border-radius: 12px; padding: 12px 16px; }
.hr-explica summary { cursor: pointer; font-weight: 700; }
.hr-imprimir-cab, .hr-titulo-hoja { display: none; }
.hr-desliza { overflow-x: auto; }
.hr-alergenos th, .hr-alergenos td { text-align: center; padding: 6px 4px; }
.hr-alergenos td:first-child, .hr-alergenos th:first-child { text-align: left; min-width: 180px; }
.hr-alergenos td:first-child input { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid #c8d2dc; border-radius: 8px; box-sizing: border-box; }
.hr-alergenos input[type=checkbox] { width: 22px; height: 22px; accent-color: #b3261e; cursor: pointer; }
.hr-vertical { height: 120px; vertical-align: bottom; white-space: nowrap; }
.hr-vertical span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); font-size: .85rem; }
.hr-alergenos .hr-quitar { border: 0; background: none; color: #8a96a3; font-size: 1.2rem; cursor: pointer; }
.hr-pie-hoja { display: none; }
.hr-pestanas { display: flex; gap: 6px; margin-bottom: 14px; }
.hr-pestanas button { font: inherit; font-weight: 700; padding: 8px 14px; border-radius: 999px; border: 2px solid #0b63b6; background: #fff; color: #0b63b6; cursor: pointer; }
.hr-pestanas button.si { background: #0b63b6; color: #fff; }
.hr-cartel { background: #fff; border: 3px solid #0b3d6e; border-radius: 22px; padding: 28px 20px; text-align: center; max-width: 380px; margin: 0 auto; }
.hr-cartel b { display: block; font-size: 1.3rem; color: #0b3d6e; }
.hr-cartel h2 { font-size: 2rem; margin: 6px 0 16px; }
.hr-cartel #qr-dibujo { display: inline-block; padding: 10px; background: #fff; }
.hr-cartel #qr-dibujo img, .hr-cartel #qr-dibujo canvas { width: 240px !important; height: 240px !important; }
.hr-cartel p { margin: 14px 0 0; color: #33414f; }
.hr-preguntas { list-style: none; padding: 0; margin: 0; counter-reset: p; }
.hr-preguntas li { counter-increment: p; padding: 14px 0; border-bottom: 1px solid #e3e9ef; }
.hr-preguntas li p { margin: 0 0 10px; font-size: 1.08rem; }
.hr-preguntas li p::before { content: counter(p) ". "; font-weight: 800; color: #0b63b6; }
.hr-preguntas span { display: flex; flex-wrap: wrap; gap: 8px; }
.hr-preguntas button { font: inherit; font-weight: 700; padding: 9px 16px; border-radius: 999px; border: 2px solid #0b63b6; background: #fff; color: #0b63b6; cursor: pointer; }
.hr-preguntas button.si { background: #0b63b6; color: #fff; }
@media print {
  .topbar, .nav, .hr-hero, .hr-no-imprimir, .kd-barra, .whatsapp, footer { display: none !important; }
  body { background: #fff !important; }
  .hr-seccion { padding: 0; }
  .hr-hoja, .hr-caja { border: 0; box-shadow: none; padding: 0; }
  .hr-imprimir-cab { display: block; font-size: 1.2rem; margin-bottom: 10px; }
  .hr-titulo-hoja, .hr-pie-hoja { display: block; }
  .hr-titulo-hoja { font-size: 1.6rem; text-align: center; margin: 0 0 10px; }
  .hr-campos { display: none; }
  .hr-dos { display: block; }
  .hr-cartel { border-width: 4px; margin-top: 30mm; max-width: 120mm; }
  .hr-alergenos input[type=text] { border: 0; padding: 0; }
  .hr-tabla.hr-caja input { border: 0; }
}
@page { margin: 12mm; }
/* La carta de alérgenos se imprime apaisada (14 columnas). */
.hr-apaisada { page: apaisada; }
@page apaisada { size: A4 landscape; margin: 10mm; }
/* Etiquetas de precio (herramienta-etiquetas.html) */
.hr-medida { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; background: #f6f9fc; border-radius: 10px; padding: 10px 12px 0; margin-bottom: 12px; }
.hr-casillas { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }
.hr-casilla { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px !important; font-weight: 600; margin: 0 !important; }
.hr-casilla input { width: 20px; height: 20px; }
.hr-area { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; border: 1px solid #b8c4d0; border-radius: 10px; }
.hr-et-lista input { width: 100%; box-sizing: border-box; font: inherit; padding: 6px 8px; border: 1px solid #c8d2dc; border-radius: 8px; }
.hr-et-lista td:nth-child(2) input { width: 90px; } .hr-et-lista td:nth-child(4) input { width: 70px; }
.hr-quitar { border: 0; background: none; color: #8a96a3; font-size: 1.2rem; cursor: pointer; }
.et-hojas { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; padding: 0 16px 40px; zoom: .55; }
.et-hoja { position: relative; background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .18); overflow: hidden; box-sizing: border-box; }
.et-etiqueta { position: absolute; box-sizing: border-box; padding: 1.5mm 2mm; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .8mm; overflow: hidden; text-align: center; color: #000; font-family: Arial, Helvetica, sans-serif; }
.et-etiqueta.borde { outline: .2mm dashed #9aa5b1; outline-offset: -.1mm; }
.et-nombre { font-weight: 700; line-height: 1.1; max-height: 2.3em; overflow: hidden; }
.et-fila { display: flex; align-items: baseline; gap: 1.5mm; }
.et-precio { font-weight: 800; line-height: 1; }
.et-barras { width: 92%; display: block; }
.et-mal { color: #b3261e; font-size: 7pt; font-weight: 700; }
@media print {
  .et-hojas { zoom: 1; display: block; padding: 0; }
  .et-hoja { box-shadow: none; break-after: page; }
  .et-etiqueta.borde { outline-color: #ccc; }
}
/* Diseñador de etiquetas (js/sol-etiquetas.js) */
.hr-peq { padding: 7px 12px; font-size: .9rem; }
.se-barra, .se-anadir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.se-barra label { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px !important; margin: 0 !important; }
.se-barra select { max-width: 260px; }
.se-importar { cursor: pointer; }
.se-zoom { margin-left: auto !important; font-weight: 600; }
.se-anadir span { font-weight: 700; color: #33414f; }
.se-trabajo { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
@media (max-width: 860px) { .se-trabajo { grid-template-columns: 1fr; } }
.se-lienzo { background: repeating-conic-gradient(#eef2f6 0 25%, #f8fafc 0 50%) 0 0 / 16px 16px; border-radius: 12px; padding: 24px; overflow: auto; min-height: 220px;
  display: flex; align-items: center; justify-content: center; }
.se-etiqueta { position: relative; background: #fff; overflow: hidden; box-sizing: border-box; color: #000; font-family: Arial, Helvetica, sans-serif; flex: 0 0 auto; }
.se-disenando { box-shadow: 0 3px 14px rgba(0, 0, 0, .2); }
.se-borde { outline: .2mm dashed #a7b1bc; outline-offset: -.1mm; }
.se-el { position: absolute; box-sizing: border-box; overflow: hidden; line-height: 1.1; }
.se-texto { display: flex; align-items: center; white-space: pre-wrap; word-break: break-word; }
.se-barras svg, .se-qr-in, .se-qr-in img, .se-qr-in canvas { width: 100% !important; height: 100% !important; display: block; }
.se-imagen img { width: 100%; height: 100%; object-fit: contain; display: block; }
.se-mal { color: #b3261e; font-size: 6pt; font-weight: 700; display: flex; align-items: center; justify-content: center; text-align: center; background: #fdecea; }
.se-disenando .se-el { cursor: move; outline: .15mm dashed rgba(11, 99, 182, .45); touch-action: none; }
.se-disenando .se-el.se-sel { outline: .3mm solid #0b63b6; overflow: visible; }
.se-asa { position: absolute; right: -1mm; bottom: -1mm; width: 2mm; height: 2mm; background: #0b63b6; border-radius: .4mm; cursor: nwse-resize; }
.se-props { background: #f6f9fc; border-radius: 12px; padding: 14px; }
.se-props label { display: flex; flex-direction: column; gap: 3px; margin: 0 0 9px; font-weight: 600; font-size: .9rem; color: #33414f; }
.se-props input, .se-props select { font: inherit; font-weight: 400; padding: 7px 9px; border: 1px solid #b8c4d0; border-radius: 8px; background: #fff; }
.se-props .se-casilla { flex-direction: row; align-items: center; gap: 8px; }
.se-props .se-casilla input { width: 18px; height: 18px; }
.se-ayuda { margin: 0 0 10px; font-size: .9rem; color: #4a5868; line-height: 1.45; }
.se-quitar { font: inherit; font-weight: 700; padding: 8px 12px; border-radius: 999px; border: 2px solid #b3261e; background: #fff; color: #b3261e; cursor: pointer; margin-top: 4px; }
.et-hoja .se-etiqueta { position: absolute; }
@media print { .se-borde { outline-color: #ccc; } }
/* ¿Cuánto lleva pagado en cuotas? (herramienta-cuotas-tpv.html, js/herr-cuotas.js): barras de HTML, una por año */
.cu-titulo { font-size: 1rem; margin: 20px 0 8px; color: #33414f; }
.cu-grafico { display: flex; flex-direction: column; gap: 2px; }
.cu-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ano valor" "pista pista"; align-items: end; gap: 2px 10px; padding: 4px 0; }
.cu-ano { grid-area: ano; } .cu-valor { grid-area: valor; } .cu-pista { grid-area: pista; }
.cu-fila:hover { background: #f4f8fc; }
.cu-ano { font-size: .9rem; color: #33414f; line-height: 1.2; }
.cu-pista { display: flex; gap: 2px; padding-right: 2px; height: 18px; box-sizing: border-box; }
.cu-antes, .cu-nuevo { display: block; height: 100%; min-width: 0; }
.cu-antes { background: #9cc2e8; }
.cu-nuevo { background: #0b63b6; border-radius: 0 4px 4px 0; }
.cu-valor { display: flex; align-items: baseline; gap: 8px; text-align: right; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cu-valor b { font-size: .95rem; color: #1f2a37; }
.cu-valor small { order: -1; font-size: .78rem; color: #5a6878; }
.cu-leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: .85rem; color: #4a5868; }
.cu-leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
/* Vales de regalo (herramienta-vales-regalo.html, js/herr-vales.js): 95 × 65 mm, 8 por hoja A4 */
.vl-colores { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.vl-colores legend { font-weight: 600; color: #33414f; padding: 0; margin-bottom: 6px; }
.hr-caja .vl-color { position: relative; flex-direction: row; margin: 0; cursor: pointer; }
.vl-color input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; }
.vl-color span { display: block; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #c8d2dc; }
.vl-color input:checked + span { box-shadow: 0 0 0 3px #1f2a37; }
.vl-color input:focus-visible + span { outline: 3px solid rgba(11, 99, 182, .45); outline-offset: 3px; }
.vl-color em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vl-logo-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hr-caja .vl-subir { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; color: #0b63b6; font-weight: 700; cursor: pointer; }
#vl-texto { font-weight: 400; resize: vertical; }
.vl-muestra { display: flex; justify-content: center; padding: 20px 8px; border-radius: 12px; overflow: hidden;
  background: repeating-conic-gradient(#eef2f6 0 25%, #f8fafc 0 50%) 0 0 / 16px 16px; }
.vl-muestra .vl-vale { box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
@media (max-width: 520px) { .vl-muestra .vl-vale { zoom: .74; } }
.vl-vale { --vl-color: #0b63b6; position: relative; flex: 0 0 auto; box-sizing: border-box; width: 95mm; height: 65mm; padding: 4.5mm 5mm 4mm 14mm;
  display: flex; flex-direction: column; overflow: hidden; background: #fff; color: #1f2a37; font-family: Arial, Helvetica, sans-serif;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.vl-vale::after { content: ''; position: absolute; inset: 2.5mm 2.5mm 2.5mm 11.5mm; border: .35mm solid var(--vl-color); border-radius: 2mm; opacity: .4; pointer-events: none; }
.vl-cinta { position: absolute; left: 0; top: 0; bottom: 0; width: 9mm; display: flex; align-items: center; justify-content: center; background: var(--vl-color); color: #fff; }
.vl-cinta span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9pt; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; white-space: nowrap; }
.vl-cab { display: flex; align-items: center; gap: 3mm; min-height: 9mm; }
.vl-cab img { max-height: 11mm; max-width: 28mm; object-fit: contain; }
.vl-cab b { font-size: 11pt; line-height: 1.15; max-height: 2.3em; overflow: hidden; color: var(--vl-color); }
.vl-centro { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.vl-centro small { font-size: 7.5pt; letter-spacing: .14em; text-transform: uppercase; color: #5a6878; }
.vl-imp { font-size: 22pt; font-weight: 800; line-height: 1.1; max-height: 2.3em; overflow: hidden; overflow-wrap: anywhere; }
.vl-imp.vl-imp-m { font-size: 16pt; }
.vl-imp.vl-imp-p { font-size: 12.5pt; }
.vl-cond { margin: 0 0 1.5mm; font-size: 7.5pt; line-height: 1.25; max-height: 3.75em; overflow: hidden; color: #4a5868; white-space: pre-line; }
.vl-pie { display: flex; justify-content: space-between; align-items: flex-end; gap: 2mm; font-size: 8pt; color: #33414f; }
.vl-num { padding: .6mm 1.8mm; border: .3mm solid var(--vl-color); border-radius: 1.5mm; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vl-hojas { display: none; }
@media print {
  .vl-hojas { display: block; }
  .vl-hoja { page: vales; display: grid; grid-template-columns: repeat(2, 95mm); grid-auto-rows: 65mm; width: 190mm; margin: 0 auto; }
  .vl-hoja + .vl-hoja { break-before: page; }
  .vl-hoja .vl-vale { outline: .25mm dashed #888; outline-offset: -.125mm; break-inside: avoid; }
}
@page vales { size: A4 portrait; margin: 10mm 9mm; }
/* Botón principal dentro de las cajas blancas: la web pinta .sv-btn en blanco (pensado para bandas oscuras) y aquí no se veía. */
.hr-seccion .hr-caja .sv-btn, .hr-seccion .hr-hoja .sv-btn { background: #0b63b6; color: #fff !important; }
.hr-seccion .hr-caja .sv-btn:hover, .hr-seccion .hr-hoja .sv-btn:hover { background: #0b3d6e; }