/* Herramientas y guías gratuitas (7-oct-2026). Se apoya en app.css (variables, botones, cabecera y pie). */
.herr{max-width:720px}
.herr h2{font-size:clamp(20px, 3vw, 24px); margin-top:6px}
.herr h3{font-size:18px}
.herr .bloque-gratis p,.herr .bloque-gratis li{max-width:68ch}
.herr-migas{font-size:14px; color:var(--tinta-2)}
.herr-migas a{color:var(--tinta-2)}
.herr-form{display:grid; gap:14px; padding:18px; background:var(--papel); border:1px solid var(--linea); border-radius:14px}
.herr-form .campo > span,.herr-form legend{font-weight:600; font-size:15px; color:var(--tinta)}
.herr-form .campo small{font-weight:400; color:var(--tinta-2)}
.herr-form input[type=date],.herr-form input[type=text],.herr-form input[type=number],.herr-form input[type=url],.herr-form select{min-height:46px; font-size:16px}
.herr-form fieldset{border:0; margin:0; padding:0; display:grid; gap:8px; min-width:0}
.herr-form .campo input:focus-visible,.herr-form .campo select:focus-visible,.grupo-asist input:focus-visible{outline:3px solid var(--primario); outline-offset:2px}
.casilla{display:flex; gap:10px; align-items:flex-start; font-size:15px; line-height:1.35; cursor:pointer}
.casilla input{width:22px; height:22px; flex:none; margin:1px 0 0; accent-color:var(--primario)}
.herr-fila{display:grid; gap:12px; grid-template-columns:1fr}
@media (min-width:560px){ .herr-fila{grid-template-columns:1fr 1fr} .herr-fila.tres{grid-template-columns:repeat(3, 1fr)} }
.herr-ayuda{font-size:13px; color:var(--tinta-2)}
.herr-error{color:var(--aviso); background:var(--aviso-fondo); border:1px solid #f1d58f; border-radius:10px; padding:10px 14px; font-size:15px}
.herr-resultado{display:grid; gap:12px; scroll-margin-top:12px}
.herr-resultado:focus{outline:none}
.herr-aviso{background:var(--aviso-fondo); color:var(--aviso); border:1px solid #f1d58f; border-radius:10px; padding:10px 14px; font-size:15px}
.herr-ficticio{background:var(--aviso-fondo); color:var(--aviso); border:1px solid #f1d58f; border-radius:10px; padding:10px 14px; font-size:15px; font-weight:600}
.herr-acciones{display:flex; flex-wrap:wrap; gap:10px}
.herr-acciones .btn{min-height:44px}
.hitos{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.hito{display:grid; gap:4px; padding:14px 16px; background:var(--blanco); border:1px solid var(--linea); border-left:5px solid var(--dorado); border-radius:10px}
.hito.pasado{border-left-color:var(--tinta-3); opacity:.85}
.hito.ahora{border-left-color:var(--ok); background:#f4fbf7}
.hito b{font-family:var(--f-display); font-size:18px; font-weight:500}
.hito .fecha{font-size:17px; font-weight:600}
.hito small{color:var(--tinta-2); font-size:14px}
.insignia{display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.03em; background:var(--papel-2); color:var(--tinta-2); margin-right:6px}
.insignia.ok{background:var(--ok-fondo); color:var(--ok)}
.insignia.aviso{background:var(--aviso-fondo); color:var(--aviso)}
.mensaje-salida{padding:16px; background:var(--blanco); border:1px solid var(--linea); border-left:5px solid var(--dorado); border-radius:10px; font-size:17px; line-height:1.55; white-space:pre-wrap; word-break:break-word; user-select:all}
.tonos{display:flex; flex-wrap:wrap; gap:8px}
.tonos label{cursor:pointer}
.tonos input{position:absolute; opacity:0; width:1px; height:1px}
.tonos span{display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; border:1.5px solid var(--tinta); border-radius:999px; font-weight:600; font-size:15px; background:transparent}
.tonos input:checked + span{background:var(--primario); color:var(--papel)}
.tonos input:focus-visible + span{outline:3px solid var(--primario); outline-offset:2px}
.grupo-asist{display:grid; gap:8px; padding:12px; background:var(--blanco); border:1px solid var(--linea); border-radius:10px}
.grupo-asist input[type=text]{font-weight:600}
.tabla-herr{width:100%; border-collapse:collapse; font-size:15px}
.tabla-herr th,.tabla-herr td{padding:8px 8px; border-bottom:1px solid var(--linea); text-align:right; vertical-align:top}
.tabla-herr th:first-child,.tabla-herr td:first-child{text-align:left}
.tabla-herr thead th{background:var(--papel-2); font-weight:700; color:var(--tinta)}
.tabla-herr tbody th{font-weight:600}
.envoltorio-tabla{overflow-x:auto}
.lista-tareas{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.tarea{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:12px 14px; background:var(--blanco); border:1px solid var(--linea); border-radius:10px}
.tarea input{width:24px; height:24px; margin:2px 0 0; accent-color:var(--primario)}
.tarea .fecha{font-weight:700}
.tarea.pasada .fecha{color:var(--tinta-3); text-decoration:line-through}
.tarea.urgente{border-color:var(--acento)}
.tarea input:checked ~ div .texto-tarea{text-decoration:line-through; color:var(--tinta-3)}
.herr-cta{display:grid; gap:10px; margin-top:6px; padding:18px; background:var(--blanco); border:1px solid var(--dorado); border-radius:14px}
.herr-cta p{max-width:60ch; color:var(--tinta-2)}
.herr-cta .btn{justify-self:start}
.herr-fuentes{font-size:14px; color:var(--tinta-2)}
.herr-fuentes li{margin:2px 0}
.herr-barras{display:grid; gap:6px; margin:6px 0 2px}
.herr-barra{display:grid; grid-template-columns:5.5rem 1fr 4.6rem; gap:8px; align-items:center; font-size:14px}
.herr-barra .pista{height:16px; background:var(--papel-2); border-radius:4px; overflow:hidden; display:flex}
.herr-barra .civ{background:var(--primario)}
.herr-barra .rel{background:var(--dorado)}
.herr-barra .n{text-align:right; font-variant-numeric:tabular-nums}
.leyenda{display:flex; gap:16px; font-size:14px; color:var(--tinta-2)}
.leyenda i{display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.herr-indice{display:grid; gap:12px; list-style:none; margin:0; padding:0}
.herr-indice li{padding:14px 16px; background:var(--blanco); border:1px solid var(--linea); border-radius:12px; display:grid; gap:4px}
.herr-indice a{font:500 19px/1.2 var(--f-display); color:var(--tinta)}
.herr-indice p{font-size:15px; color:var(--tinta-2)}
@media print{
  .herr-form,.herr-cta,.herr-acciones,.faq,.herr-migas,.herr-noimprimir,.antetitulo{display:none !important}
  .herr{max-width:none}
  .hito,.tarea,.mensaje-salida{break-inside:avoid; border-color:#999}
  .tarea input{appearance:auto}
  a{color:inherit; text-decoration:none}
}
.grupo-asist .herr-fila.tres{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px}
.grupo-asist .campo > span{font-size:13px; line-height:1.2}
.grupo-asist .campo small{display:block}
.tabla-herr th,.tabla-herr td{padding:8px 6px}
@media (max-width:420px){ .tabla-herr{font-size:14px} }
.menus{display:grid; gap:8px}
.menu-fila{display:grid; grid-template-columns:2fr 1fr; gap:8px}
.menu-fila input{width:100%; min-height:46px; font:500 16px/1.3 var(--f-texto); color:var(--tinta); background:var(--blanco); border:2px solid var(--linea); border-radius:10px; padding:10px 12px}
@media (max-width:420px){ .tabla-herr{font-size:13px} .tabla-herr th,.tabla-herr td{padding:7px 3px} }