/* ==========================================================
   CUADERNO DE PESCA — estética de cuaderno de campo
   Hoja rayada, letra manuscrita, birome, lápiz y resaltador.
   ========================================================== */

@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Patrick Hand";
  src: url("../fonts/patrick-hand-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* papel */
  --papel: #f8f2e2;
  --papel-sombra: #ece3cc;
  --renglon: #c6d6e6;
  --margen: #e5a3a0;
  --anillo: #9b9486;

  /* tintas */
  --birome: #1d3a8f;        /* azul birome */
  --birome-suave: #4a64ad;
  --lapiz: #3b3b3b;         /* grafito */
  --lapiz-suave: #6f6a60;
  --rojo: #c0392b;          /* corrección / alerta */
  --verde: #2e7d4f;
  --naranja: #d0711c;

  /* resaltadores */
  --resaltador: rgba(255, 226, 0, 0.55);
  --resaltador-verde: rgba(120, 230, 120, 0.45);
  --resaltador-rosa: rgba(255, 120, 170, 0.35);
  --postit: #fff3a6;
  --cinta: rgba(214, 196, 140, 0.75);

  --renglon-alto: 30px;
  --margen-izq: 46px;

  --f-titulo: "Caveat", "Segoe Print", cursive;
  --f-texto: "Patrick Hand", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }

html {
  background: #4a3220 url("../img/mesa.svg") repeat;
}
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  /* luz de lámpara sobre la mesa */
  background: radial-gradient(ellipse 90% 70% at 50% 25%, rgba(255, 220, 160, .18), rgba(0, 0, 0, .35) 80%);
  color: var(--lapiz);
  font-family: var(--f-texto);
  font-size: 19px;
  line-height: var(--renglon-alto);
  -webkit-tap-highlight-color: transparent;
}

/* ---------- la hoja (papel con humedad) ---------- */
.hoja {
  position: relative;
  max-width: 640px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 40px 16px 120px calc(var(--margen-izq) + 12px);
  background-color: var(--papel);
  background-image:
    /* manchas de agua, aros y puntitos de óxido */
    url("../img/papel-manchas.svg"),
    /* grano y fibras del papel */
    url("../img/papel-grano.svg"),
    /* el agua corrió la tinta del margen */
    linear-gradient(90deg, transparent calc(var(--margen-izq) - 3px), rgba(229, 163, 160, .25) calc(var(--margen-izq) - 2px), var(--margen) calc(var(--margen-izq) - 1px), var(--margen) calc(var(--margen-izq) + 1px), rgba(229, 163, 160, .25) calc(var(--margen-izq) + 2px), transparent calc(var(--margen-izq) + 3px)),
    /* renglones */
    repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--renglon-alto) - 1.5px), var(--renglon) calc(var(--renglon-alto) - 1px), var(--renglon) var(--renglon-alto)),
    /* el papel amarillea más en los bordes */
    linear-gradient(90deg, rgba(176, 130, 60, .16), transparent 9%, transparent 91%, rgba(176, 130, 60, .2)),
    linear-gradient(180deg, rgba(176, 130, 60, .14), transparent 6%, transparent 94%, rgba(176, 130, 60, .2));
  background-size: 640px 1900px, 300px 300px, auto, auto, auto, auto;
  background-repeat: repeat-y, repeat, no-repeat, repeat, no-repeat, no-repeat;
  background-position: center top, 0 0, 0 0, 0 4px, 0 0, 0 0;
  box-shadow:
    inset 0 0 0 1px rgba(150, 110, 50, .18),
    inset 0 0 70px rgba(160, 115, 45, .16),
    0 2px 0 #e6dcc4, 0 4px 0 #d9cdb0, 0 6px 0 #cfc1a2,      /* hojas de abajo */
    0 16px 40px rgba(20, 10, 0, .55);
}

/* espiral del cuaderno (anillos de metal) */
.hoja::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  background:
    radial-gradient(ellipse 5px 6px at 50% 72%, rgba(40, 30, 20, .7) 0 4px, transparent 5px) 0 0 / 28px 28px repeat-x,
    radial-gradient(ellipse 4px 12px at 50% 30%, transparent 0 2px, #9a968c 2.5px 3.5px, #e8e4da 4px, transparent 4.5px) 0 0 / 28px 28px repeat-x;
  pointer-events: none;
}

/* el papel mojado corre un poco la tinta */
.hoja h1, .hoja h2, .hoja h3, .tinta, .manuscrita {
  text-shadow: 0 0 1px rgba(29, 58, 143, .35), 0 0 6px rgba(29, 58, 143, .08);
}
.hoja p, .hoja li, .hoja td { text-shadow: 0 0 .6px rgba(59, 59, 59, .25); }

/* ---------- tipografía ---------- */
h1, h2, h3 {
  font-family: var(--f-titulo);
  color: var(--birome);
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
}
h1 { font-size: 2.6rem; }
h2 { font-size: 2rem; margin-top: var(--renglon-alto); }
h3 { font-size: 1.55rem; }

p { margin: 0 0 var(--renglon-alto) 0; }
small, .chico { font-size: .85rem; color: var(--lapiz-suave); }

.tinta { color: var(--birome); }
.rojo { color: var(--rojo); }
.verde { color: var(--verde); }
.manuscrita { font-family: var(--f-titulo); font-size: 1.4em; }

/* resaltador con borde irregular */
.resaltar {
  background: linear-gradient(100deg, transparent 0 2%, var(--resaltador) 3% 96%, transparent 98%);
  padding: 0 .2em;
  border-radius: 3px 8px 4px 9px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.resaltar.verde-r { background: linear-gradient(100deg, transparent 0 2%, var(--resaltador-verde) 3% 96%, transparent 98%); color: inherit; }
.resaltar.rosa-r { background: linear-gradient(100deg, transparent 0 2%, var(--resaltador-rosa) 3% 96%, transparent 98%); }

.tachado { text-decoration: line-through; text-decoration-color: var(--rojo); text-decoration-thickness: 2px; }

/* ---------- encabezado ---------- */
.encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.encabezado .fecha {
  font-family: var(--f-titulo);
  color: var(--lapiz-suave);
  font-size: 1.3rem;
  transform: rotate(-1.5deg);
}
.encabezado .doodle-trucha { width: 120px; flex-shrink: 0; margin-top: -6px; }

.lugar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--f-titulo);
  font-size: 1.5rem;
  color: var(--birome);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.lugar .flecha { font-size: 1rem; color: var(--lapiz-suave); white-space: nowrap; }

.estado-datos {
  font-size: .85rem;
  color: var(--lapiz-suave);
}
.estado-datos.offline { color: var(--rojo); }

/* ---------- bloques / notas ---------- */
.nota {
  position: relative;
  margin: var(--renglon-alto) 0;
}
.nota-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nota-titulo svg { width: 34px; height: 34px; flex-shrink: 0; }

/* papel pegado con cinta */
.pegado {
  position: relative;
  background: #fffdf6;
  padding: 18px 16px 12px;
  margin: 34px 4px var(--renglon-alto);
  box-shadow: 1px 2px 6px rgba(70, 50, 20, .18);
  transform: rotate(-.6deg);
  line-height: 1.5;
}
.pegado:nth-of-type(even) { transform: rotate(.5deg); }
.pegado::before {
  content: "";
  position: absolute;
  top: -12px; left: 50%;
  width: 110px; height: 24px;
  margin-left: -55px;
  background: var(--cinta);
  transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.postit {
  background: var(--postit);
  padding: 12px 14px;
  margin: 18px 6px;
  box-shadow: 2px 3px 7px rgba(80, 70, 0, .22);
  transform: rotate(1.2deg);
  line-height: 1.45;
  font-size: 1.02rem;
}
.postit.alerta { background: #ffd9cf; }
.postit.ok { background: #dff5d8; }
.postit strong { font-family: var(--f-titulo); font-size: 1.35rem; font-weight: 700; display: block; color: var(--lapiz); }

/* ---------- índice de pesca ---------- */
.indice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 18px;
  align-items: center;
}
.indice-numero {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 4.6rem;
  line-height: 1;
  color: var(--birome);
  padding: 8px 14px 4px;
  position: relative;
}
.indice-numero sub { font-size: 1.6rem; color: var(--lapiz-suave); vertical-align: baseline; }
.indice-veredicto {
  font-family: var(--f-titulo);
  font-size: 2rem;
  line-height: 1.05;
  color: var(--lapiz);
}
.indice-ventana { font-size: 1rem; line-height: 1.4; color: var(--lapiz-suave); }

.razones { list-style: none; padding: 0; margin: 8px 0 0; }
.razones li {
  position: relative;
  padding-left: 30px;
  line-height: 1.45;
  margin: 6px 0;
}
.razones li::before {
  position: absolute;
  left: 2px; top: -3px;
  font-family: var(--f-titulo);
  font-size: 1.7rem;
  font-weight: 700;
}
.razones li.bien::before { content: "✓"; color: var(--verde); }
.razones li.mal::before { content: "✗"; color: var(--rojo); }
.razones li.neutro::before { content: "~"; color: var(--naranja); }

/* ---------- datos tipo "anotado" ---------- */
.datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}
.dato {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px dashed rgba(29, 58, 143, .25);
  min-height: var(--renglon-alto);
}
.dato .etq { color: var(--lapiz-suave); font-size: .95rem; }
.dato .val {
  font-family: var(--f-titulo);
  font-size: 1.45rem;
  color: var(--birome);
  font-weight: 700;
  white-space: nowrap;
}
.dato .val small { font-family: var(--f-texto); font-weight: 400; }

.grande-clima {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}
.grande-clima .temp {
  font-family: var(--f-titulo);
  font-size: 4rem;
  line-height: 1;
  font-weight: 700;
  color: var(--birome);
}
.grande-clima .desc { line-height: 1.3; }
.grande-clima svg { width: 70px; height: 70px; flex-shrink: 0; }

.flecha-viento { display: inline-block; width: 22px; height: 22px; vertical-align: -4px; }

/* gráficos rough.js */
.grafico { width: 100%; margin: 4px 0; }
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.leyenda { font-size: .85rem; color: var(--lapiz-suave); line-height: 1.4; }
.leyenda span { white-space: nowrap; margin-right: 10px; }
.muestra { display: inline-block; width: 18px; height: 10px; vertical-align: 0; margin-right: 4px; border: 1.5px solid var(--lapiz); }

/* ---------- tabla solunar ---------- */
.tabla-mano {
  width: 100%;
  border-collapse: collapse;
  line-height: 1.4;
  margin: 6px 0 4px;
}
.tabla-mano th {
  font-family: var(--f-titulo);
  font-size: 1.3rem;
  color: var(--birome);
  text-align: left;
  border-bottom: 2px solid var(--birome);
  padding: 2px 4px;
}
.tabla-mano td {
  padding: 5px 4px;
  border-bottom: 1px solid var(--renglon);
  vertical-align: top;
}
.tabla-mano td.hora { font-family: var(--f-titulo); font-size: 1.35rem; font-weight: 700; color: var(--birome); white-space: nowrap; }
.tabla-mano tr.ahora td { background: var(--resaltador); }
.tabla-mano tr.pasado td { opacity: .5; }

.estrellas { font-size: 1.6rem; color: var(--naranja); letter-spacing: 2px; font-family: var(--f-titulo); }

.luna-dibujo { width: 92px; height: 92px; flex-shrink: 0; }

.fila { display: flex; align-items: center; gap: 14px; }

/* pronóstico próximos días */
.dias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dia {
  text-align: center;
  line-height: 1.35;
  padding: 6px 2px;
  border: 1.5px solid var(--lapiz-suave);
  border-radius: 14px 6px 16px 8px / 8px 14px 6px 16px;
}
.dia .nombre { font-family: var(--f-titulo); font-size: 1.35rem; color: var(--birome); font-weight: 700; }
.dia svg { width: 44px; height: 44px; }
.dia .ind { font-family: var(--f-titulo); font-size: 1.2rem; font-weight: 700; }

/* nota de honestidad */
.aclaracion {
  font-size: .9rem;
  line-height: 1.4;
  color: var(--lapiz-suave);
  border-left: 3px solid var(--margen);
  padding-left: 10px;
  margin: 10px 0;
}

/* ---------- botones a mano ---------- */
.boton {
  font-family: var(--f-titulo);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--birome);
  background: transparent;
  border: 2px solid var(--birome);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 4px 16px;
  cursor: pointer;
  transition: transform .1s;
}
.boton:active { transform: scale(.96) rotate(-1deg); }
.boton.lleno { background: var(--birome); color: var(--papel); }
.boton.chico { font-size: 1.1rem; padding: 0 10px; }
.boton:disabled { opacity: .5; }

.enlace {
  background: none; border: none; padding: 0;
  color: var(--birome);
  font: inherit;
  text-decoration: underline wavy rgba(29,58,143,.45);
  text-underline-offset: 4px;
  cursor: pointer;
}

input[type="text"], input[type="search"] {
  width: 100%;
  font-family: var(--f-texto);
  font-size: 1.1rem;
  color: var(--birome);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--birome);
  padding: 4px 2px;
  outline: none;
}
input::placeholder { color: var(--lapiz-suave); opacity: .7; }

/* ---------- pestañas inferiores (separadores del cuaderno) ---------- */
.pestanias {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 0 6px env(safe-area-inset-bottom);
  pointer-events: none;
  z-index: 20;
}
.pestanias button {
  pointer-events: auto;
  flex: 1;
  max-width: 150px;
  font-family: var(--f-titulo);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--lapiz);
  border: 1.5px solid rgba(0,0,0,.18);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: 6px 2px 10px;
  cursor: pointer;
  transform: translateY(6px);
  transition: transform .15s;
  box-shadow: 0 -2px 6px rgba(0,0,0,.08);
}
.pestanias button svg { display: block; width: 26px; height: 26px; margin: 0 auto 2px; }
.pestanias button[data-ir="hoy"] { background: #f6d77a; }
.pestanias button[data-ir="segura"] { background: #f4a98f; }
.pestanias button[data-ir="herramientas"] { background: #a9d6b5; }
.pestanias button[data-ir="manual"] { background: #a9c6ea; }
.pestanias button.activa { transform: translateY(0); }

/* ---------- vistas ---------- */
.vista { display: none; }
.vista.activa { display: block; animation: aparecer .25s ease-out; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.proximamente { text-align: center; padding-top: 30px; }
.proximamente svg { width: 200px; height: auto; margin: 10px auto; display: block; }
.proximamente ul { text-align: left; display: inline-block; }

/* ---------- hoja emergente (elegir lugar) ---------- */
.velo {
  position: fixed; inset: 0;
  background: rgba(40, 30, 10, .4);
  display: none;
  z-index: 40;
}
.velo.abierto { display: block; }
.panel {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: min(640px, 100%);
  transform: translate(-50%, 105%);
  max-height: 88vh;
  overflow-y: auto;
  background-color: var(--papel);
  background-image: repeating-linear-gradient(180deg, transparent 0, transparent 29px, var(--renglon) 29px, var(--renglon) 30px);
  padding: 22px 18px 30px;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 30px rgba(0,0,0,.3);
  transition: transform .25s ease-out, visibility 0s linear .25s;
  visibility: hidden;
  z-index: 41;
}
.panel.abierto { transform: translate(-50%, 0); visibility: visible; transition: transform .25s ease-out; }
.panel h2 { margin-top: 0; }

.lista-lugares { list-style: none; padding: 0; margin: 6px 0; }
.lista-lugares li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px dashed var(--renglon);
  min-height: var(--renglon-alto);
  padding: 4px 0;
  line-height: 1.3;
}
.lista-lugares li button.elegir { flex: 1; text-align: left; background: none; border: none; font: inherit; color: var(--birome); cursor: pointer; padding: 4px 0; }
.lista-lugares li .sub { display: block; font-size: .8rem; color: var(--lapiz-suave); }
.lista-lugares .borrar { background: none; border: none; color: var(--rojo); font-family: var(--f-titulo); font-size: 1.4rem; cursor: pointer; }

.cargando {
  text-align: center;
  font-family: var(--f-titulo);
  font-size: 1.6rem;
  color: var(--lapiz-suave);
  padding: 40px 0;
}
.cargando svg { width: 90px; display: block; margin: 0 auto 10px; animation: lanzar 1.6s ease-in-out infinite; transform-origin: 20% 90%; }
@keyframes lanzar { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(14deg); } }

.pie {
  margin-top: 40px;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--lapiz-suave);
}

.toast {
  position: fixed;
  left: 50%; bottom: 90px;
  transform: translateX(-50%) rotate(-1deg);
  background: var(--postit);
  padding: 8px 16px;
  box-shadow: 2px 3px 8px rgba(0,0,0,.25);
  font-size: 1rem;
  z-index: 60;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  max-width: 90vw;
}
.toast.visible { opacity: 1; }

@media (max-width: 420px) {
  :root { --margen-izq: 30px; }
  html, body { font-size: 17.5px; }
  .hoja { padding-left: calc(var(--margen-izq) + 8px); padding-right: 12px; }
  .encabezado .doodle-trucha { width: 92px; }
  .indice-numero { font-size: 3.8rem; padding: 6px 8px 2px; }
  .indice-veredicto { font-size: 1.7rem; }
  .datos { gap: 0 12px; }
  .dato .val { font-size: 1.3rem; }
}

@media print {
  .pestanias, .velo, .panel { display: none !important; }
}

/* ==========================================================
   SALIDA SEGURA
   ========================================================== */
.doodle-salva { width: 74px; flex-shrink: 0; }
.doodle-salva svg { width: 100%; height: auto; }

.pestanias button.en-curso::after {
  content: "";
  position: absolute;
  top: 6px; right: 10px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 3px rgba(46,125,79,.25);
  animation: latido 1.6s ease-in-out infinite;
}
.pestanias button { position: relative; }
@keyframes latido { 50% { transform: scale(1.35); opacity: .6; } }

.subpestanias {
  display: flex;
  gap: 6px;
  margin: 14px 0 4px;
  flex-wrap: wrap;
}
.subpestanias button {
  font-family: var(--f-titulo);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--lapiz-suave);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 2px 6px;
  cursor: pointer;
}
.subpestanias button.activa {
  color: var(--birome);
  border-bottom-color: var(--resaltador);
  background: linear-gradient(100deg, transparent 0 2%, var(--resaltador) 3% 96%, transparent 98%);
  border-radius: 3px 8px 4px 9px;
}

/* formulario a mano */
.formulario label {
  display: block;
  margin: 8px 0 2px;
  color: var(--lapiz-suave);
  font-size: .95rem;
  line-height: 1.3;
}
.formulario input[type=text], .formulario input[type=email], .formulario input[type=tel],
.formulario input[type=datetime-local], .formulario select, .nuevo-contacto input {
  display: block;
  width: 100%;
  font-family: var(--f-texto);
  font-size: 1.1rem;
  color: var(--birome);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--birome);
  padding: 4px 2px;
  margin-top: 2px;
  outline: none;
  border-radius: 0;
}
.formulario select { cursor: pointer; }
.formulario input:focus, .formulario select:focus, .nuevo-contacto input:focus { background: rgba(255,226,0,.18); }
.formulario label.check { display: flex; align-items: center; gap: 8px; color: var(--lapiz); margin-top: 10px; }
.formulario label.check input { width: 20px; height: 20px; accent-color: var(--birome); }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.formulario h4, .ficha h4 { font-family: var(--f-titulo); font-size: 1.35rem; color: var(--birome); margin: 10px 0 2px; }
.nuevo-contacto { margin: 4px 0; }
.nuevo-contacto summary { list-style: none; cursor: pointer; display: inline-block; }
.nuevo-contacto summary::-webkit-details-marker { display: none; }
.nuevo-contacto input { margin-bottom: 6px; }
.nuevo-contacto .boton { margin-top: 4px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.chip {
  font-family: var(--f-texto);
  font-size: .95rem;
  color: var(--birome);
  background: #fff;
  border: 1.5px dashed var(--birome);
  border-radius: 14px;
  padding: 0 10px;
  line-height: 1.8;
  cursor: pointer;
}
.chip:active { background: var(--resaltador); }

.errores { color: var(--rojo); padding-left: 18px; margin: 8px 0 0; line-height: 1.4; }
.errores:empty { display: none; }

.boton.grande { font-size: 1.7rem; padding: 6px 26px; }
.boton.verde-b { border-color: var(--verde); }
.boton.lleno.verde-b { background: var(--verde); color: #fff; }
.boton.rojo-b { border-color: var(--rojo); color: var(--rojo); }
.boton.lleno.rojo-b { background: var(--rojo); color: #fff; }

.acciones-fila { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin: 14px 0; }

.tarjeta-salida .destino-salida { font-family: var(--f-titulo); font-size: 1.6rem; color: var(--birome); margin: 4px 0 6px; line-height: 1.2; }
.tarjeta-salida .nota-titulo svg { width: 46px; height: 40px; }
.cuenta { margin: 10px 0 6px; line-height: 1.4; }
.estado-lista { list-style: none; padding: 0; margin: 6px 0 0; font-size: .95rem; }
.estado-lista li { position: relative; padding-left: 26px; line-height: 1.4; margin: 5px 0; }
.estado-lista li::before { position: absolute; left: 0; top: -2px; font-family: var(--f-titulo); font-size: 1.5rem; font-weight: 700; }
.estado-lista li.bien::before { content: "✓"; color: var(--verde); }
.estado-lista li.mal::before { content: "!"; color: var(--rojo); left: 6px; }
.estado-lista li.neutro::before { content: "~"; color: var(--naranja); }

/* botón SOS: mantener apretado */
.sos-zona { text-align: center; margin: 26px 0 10px; }
.sos-zona .chico { display: block; max-width: 300px; margin: 6px auto 0; line-height: 1.35; }
.sos {
  position: relative;
  width: 132px; height: 132px;
  border-radius: 50%;
  border: 4px solid #8f1d12;
  background: radial-gradient(circle at 35% 30%, #e85a4a, var(--rojo) 60%, #8f1d12);
  color: #fff;
  font-family: var(--f-titulo);
  font-size: 2.6rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 6px 0 #6d150d, 0 10px 20px rgba(0,0,0,.25);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.sos:active { transform: translateY(3px); box-shadow: 0 3px 0 #6d150d, 0 6px 14px rgba(0,0,0,.25); }
.sos-relleno {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 0;
  background: rgba(255,255,255,.35);
}
.sos.cargando .sos-relleno { height: 100%; transition: height 2s linear; }
.sos-texto { position: relative; }

.telefonos { list-style: none; padding: 0; margin: 6px 0; }
.telefonos li { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px dashed var(--renglon); line-height: 2.1; }
.telefonos a { font-family: var(--f-titulo); font-size: 1.8rem; font-weight: 700; color: var(--rojo); min-width: 62px; text-decoration: none; }

/* pantalla de emergencia: alto contraste a propósito */
.emergencia {
  position: fixed; inset: 0;
  z-index: 100;
  display: none;
  background: #111;
  color: #ffe600;
  overflow-y: auto;
  padding: max(20px, env(safe-area-inset-top)) 16px 30px;
}
.emergencia.abierto { display: block; }
.emergencia.flash { background: #fff; }
.emergencia.estrobo .em-caja { visibility: hidden; }
.emergencia.estrobo::after {
  content: "Tocá para parar la señal";
  position: fixed; bottom: 20px; left: 0; right: 0;
  text-align: center; color: #888; font-family: sans-serif;
}
.em-caja { max-width: 520px; margin: 0 auto; text-align: center; font-family: system-ui, sans-serif; }
.em-label { font-size: 1.1rem; color: #ccc; margin-top: 10px; }
.em-viejo { color: #ff8a65; }
.em-grande { font-size: clamp(2.6rem, 13vw, 4.2rem); font-weight: 800; line-height: 1.1; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.em-dms { font-size: 1.15rem; margin-top: 8px; color: #fff; }
.em-extra { font-size: 1rem; color: #bbb; margin-top: 6px; }
.em-buscando { font-size: 1.6rem; padding: 40px 0; }
.em-estado { color: #9be59b; min-height: 1.4em; margin: 12px 0; font-size: 1.05rem; line-height: 1.4; }
.em-botones { display: grid; gap: 10px; margin-top: 10px; }
.em-btn {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 14px;
  border-radius: 12px;
  border: 2px solid #ffe600;
  background: transparent;
  color: #ffe600;
  text-decoration: none;
  cursor: pointer;
}
.em-btn.em-911 { background: #d32f2f; border-color: #d32f2f; color: #fff; font-size: 1.5rem; }
.em-btn.em-cerrar { border-color: #666; color: #ccc; }
.em-tels { color: #aaa; margin-top: 16px; font-size: .95rem; line-height: 1.5; }

/* ==========================================================
   PRIMEROS AUXILIOS
   ========================================================== */
.fichas { list-style: none; padding: 0; margin: 10px 0; }
.ficha-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: none; border: none;
  border-bottom: 1px dashed var(--renglon);
  padding: 8px 2px;
  text-align: left;
  font: inherit; color: var(--lapiz);
  cursor: pointer;
  line-height: 1.3;
}
.ficha-btn b { font-family: var(--f-titulo); font-size: 1.45rem; color: var(--birome); display: block; }
.ficha-btn small { display: block; font-size: .88rem; color: var(--lapiz-suave); }
.ficha-ico { width: 46px; height: 46px; flex-shrink: 0; }
.ficha-ico svg { width: 100%; height: 100%; }
.ficha .nota-titulo svg { width: 46px; height: 46px; }
.ficha-resumen { font-size: 1.02rem; margin: 6px 0 4px; line-height: 1.4; }
.pasos { padding-left: 22px; margin: 4px 0; line-height: 1.45; }
.pasos li { margin: 7px 0; padding-left: 2px; }
.pasos li::marker { font-family: var(--f-titulo); font-weight: 700; color: var(--birome); font-size: 1.25rem; }
.senales { padding-left: 20px; line-height: 1.45; margin: 4px 0; }
.tel-rapidos { margin: 14px 0 0; display: flex; gap: 8px; }
.tel-rapidos a { text-decoration: none; }
.checklist { list-style: none; padding: 0; margin: 6px 0; }
.checklist li { border-bottom: 1px dashed var(--renglon); line-height: 1.3; padding: 6px 0; }
.checklist label { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.checklist input { width: 20px; height: 20px; accent-color: var(--verde); flex-shrink: 0; }
.checklist input:checked + span { text-decoration: line-through; text-decoration-color: var(--verde); color: var(--lapiz-suave); }

@media (max-width: 420px) {
  .dos-col { grid-template-columns: 1fr; }
  .doodle-salva { width: 58px; }
}
.em-estado.error { color: #ff8a65; }
.tabla-tippets td, .tabla-tippets th { font-size: .95rem; }
.tabla-tippets small { color: var(--lapiz-suave); }
#form-lider { margin-top: 18px; }

/* ==========================================================
   RÍOS Y LAGOS
   ========================================================== */
.pestanias button[data-ir="rios"] { background: #c9b8e8; }
.pestanias button[data-ir="rios"] svg { width: 34px; }
.chip.activo { background: var(--resaltador); border-style: solid; font-weight: 700; }
#cat-buscar { margin: 14px 0 4px; font-size: 1.15rem; }
.lista-ambientes { list-style: none; padding: 0; margin: 6px 0 20px; }
.amb-btn {
  display: block; width: 100%;
  background: none; border: none; border-bottom: 1px dashed var(--renglon);
  padding: 8px 2px; text-align: left; font: inherit; cursor: pointer; line-height: 1.3;
}
.amb-nombre { display: block; font-family: var(--f-titulo); font-size: 1.45rem; font-weight: 700; color: var(--birome); }
.amb-jur { display: block; font-size: .85rem; color: var(--lapiz-suave); }
.amb-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.amb-etiquetas.grande { margin: 4px 0 10px; }
.amb-etiquetas.grande .etiqueta { font-size: .9rem; }
.etiqueta {
  font-size: .78rem; line-height: 1.5;
  padding: 0 7px;
  border: 1.3px solid var(--lapiz-suave);
  border-radius: 10px 4px 10px 4px;
  color: var(--lapiz); background: #fffdf6;
  white-space: nowrap;
}
.etiqueta.e-verde { border-color: var(--verde); color: var(--verde); }
.etiqueta.e-rojo { border-color: var(--rojo); color: var(--rojo); }
.etiqueta.e-azul { border-color: var(--birome); color: #fff; background: var(--birome); }
.etiqueta.e-naranja { border-color: var(--naranja); color: var(--naranja); }
.texto-oficial { line-height: 1.55; font-size: 1rem; }
.texto-oficial p { margin: 0 0 10px; }
.texto-oficial mark { background: var(--resaltador); padding: 0 2px; border-radius: 3px; color: inherit; }
.texto-oficial mark.m-verde { background: var(--resaltador-verde); }
.texto-oficial mark.m-rojo { background: var(--resaltador-rosa); }
.reglamento-hoy .nota-titulo svg { width: 36px; height: 36px; }
@media (max-width: 420px) {
  .pestanias button { font-size: 1rem; }
  .pestanias button svg { width: 22px; height: 22px; }
}

/* ==========================================================
   PAPELES PEGADOS Y POST-ITS con textura
   ========================================================== */
.pegado {
  background-color: #fffcf2;
  background-image: url("../img/papel-grano.svg"), linear-gradient(160deg, rgba(255,255,255,.5), rgba(214, 190, 140, .18));
  box-shadow: 1px 2px 3px rgba(70, 50, 20, .2), 3px 8px 14px rgba(70, 50, 20, .12);
}
.postit {
  background-image: url("../img/papel-grano.svg"), linear-gradient(170deg, rgba(255,255,255,.25), rgba(0,0,0,.04) 85%, rgba(0,0,0,.09));
  box-shadow: 0 1px 1px rgba(0,0,0,.12), 2px 6px 10px -2px rgba(80, 70, 0, .3);
  border-bottom-right-radius: 40px 6px;
}
.panel { background-image: url("../img/papel-grano.svg"), repeating-linear-gradient(180deg, transparent 0, transparent 29px, var(--renglon) 29px, var(--renglon) 30px); }

/* ==========================================================
   NUDOS DIBUJADOS
   ========================================================== */
.pasos-dibujados { list-style: none; padding: 0; counter-reset: paso; }
.pasos-dibujados li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 14px 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(29, 58, 143, .2);
  position: relative;
}
.pasos-dibujados li::before {
  content: counter(paso);
  position: absolute;
  top: 2px; left: 0;
  width: 28px; height: 28px;
  border: 2px solid var(--birome);
  border-radius: 50% 45% 55% 48%;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--birome);
  text-align: center;
  line-height: 25px;
  background: rgba(255, 252, 240, .8);
}
.paso-dibujo { margin-left: 22px; }
.paso-dibujo svg.dibujo-nudo { width: 100%; height: auto; max-height: 180px; display: block; }
.leyenda-nudo { font-size: .85rem; line-height: 1.5; margin: 4px 0 0; }
.leyenda-nudo span { margin-right: 8px; white-space: nowrap; font-weight: 700; }
@media (min-width: 560px) {
  .pasos-dibujados li { grid-template-columns: 240px 1fr; gap: 14px; align-items: center; }
  .paso-dibujo { margin-left: 0; padding-left: 26px; }
}

.cat-vacio { list-style: none; text-align: center; color: var(--lapiz-suave); padding: 14px 6px; line-height: 1.45; border: 1.5px dashed rgba(29,58,143,.25); border-radius: 14px 6px 16px 8px; }

/* ==========================================================
   MANUAL
   ========================================================== */
.progreso-manual { margin: 10px 0 4px; }
.progreso-manual .barra { height: 12px; border: 1.5px solid var(--birome); border-radius: 8px 4px 9px 5px; overflow: hidden; background: rgba(255,255,255,.4); }
.progreso-manual .barra span { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--verde) 0 4px, #4a9a68 4px 8px); }
.progreso-manual small { display: block; line-height: 1.6; color: var(--lapiz-suave); }
.capitulos { list-style: none; padding: 0; margin: 10px 0; }
.capitulo { border-bottom: 1px dashed var(--renglon); }
.cap-cab { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; padding: 10px 2px; text-align: left; font: inherit; color: var(--lapiz); cursor: pointer; line-height: 1.25; }
.cap-num { flex-shrink: 0; width: 34px; height: 34px; border: 2px solid var(--birome); border-radius: 50% 46% 54% 48%; text-align: center; font-family: var(--f-titulo); font-size: 1.35rem; font-weight: 700; color: var(--birome); line-height: 30px; }
.capitulo.completo .cap-num { background: var(--resaltador-verde); }
.cap-txt { flex: 1; }
.cap-txt b { display: block; font-family: var(--f-titulo); font-size: 1.5rem; color: var(--birome); }
.cap-txt small { display: block; font-size: .88rem; color: var(--lapiz-suave); }
.cap-estado { font-size: .85rem; color: var(--lapiz-suave); white-space: nowrap; }
.lecciones { list-style: none; padding: 0 0 10px 46px; margin: 0; line-height: 1.9; }
.lecciones .repaso { color: var(--naranja); }
.miga { font-size: .88rem; color: var(--lapiz-suave); margin: 10px 0 0; line-height: 1.4; }
.titulo-leccion { font-size: 2.3rem; margin: 4px 0 8px; }
.leccion { line-height: 1.6; }
.leccion p { margin: 0 0 14px; }
.leccion ul, .leccion ol { padding-left: 22px; margin: 0 0 14px; }
.leccion li { margin: 6px 0; }
.leccion .tabla-mano { margin: 8px 0 16px; }
.figura-manual { margin: 10px 0 18px; padding: 8px; background: rgba(255, 253, 246, .75); border: 1px solid rgba(150,110,50,.2); box-shadow: 1px 2px 5px rgba(70,50,20,.12); transform: rotate(-.4deg); }
.figura-manual svg { width: 100%; height: auto; display: block; }
.nota-margen, .nota-rio { display: block; margin: 16px 4px; }
.navegacion-leccion { justify-content: space-between; margin-top: 24px; }
.resultados-manual { list-style: none; padding: 0; margin: 10px 0; }
.resultados-manual .frag { display: block; font-size: .9rem; color: var(--lapiz); margin-top: 4px; line-height: 1.4; }
.resultados-manual mark { background: var(--resaltador); padding: 0 2px; }
#manual-buscar { margin: 14px 0 6px; font-size: 1.15rem; }
.quiz { padding-left: 0; list-style: none; counter-reset: q; }
.pregunta { counter-increment: q; margin: 18px 0; padding-bottom: 12px; border-bottom: 1px dashed var(--renglon); }
.enunciado { font-family: var(--f-titulo); font-size: 1.45rem; color: var(--birome); line-height: 1.2; margin: 0 0 8px; }
.enunciado::before { content: counter(q) ". "; }
.opciones { display: grid; gap: 8px; }
.opcion { text-align: left; font: inherit; line-height: 1.35; padding: 8px 12px; background: #fffdf6; border: 1.5px solid var(--lapiz-suave); border-radius: 12px 5px 14px 6px; cursor: pointer; color: var(--lapiz); }
.opcion:hover:not(:disabled) { border-color: var(--birome); }
.opcion.correcta { border-color: var(--verde); background: rgba(120,230,120,.25); }
.opcion.incorrecta { border-color: var(--rojo); background: rgba(255,120,170,.2); text-decoration: line-through; }
.opcion:disabled { cursor: default; }
.explicacion { margin: 8px 0 0; line-height: 1.45; font-size: .98rem; }

/* ---------- Caja de moscas ---------- */
.caja-resumen { font-size: 1.05rem; margin: 10px 0 8px; line-height: 1.4; }
.caja-resumen b { font-family: var(--f-titulo); font-size: 1.4rem; color: var(--birome); }
#mos-buscar { margin: 4px 0 6px; font-size: 1.15rem; }
.mos-imita { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 1rem; }
.mos-imita select, .mos-notas textarea {
  font-family: var(--f-texto); font-size: 1.02rem; color: var(--birome);
  background: rgba(255, 253, 246, .7); border: 1.5px solid var(--lapiz-suave);
  border-radius: 10px 4px 12px 5px; padding: 4px 8px;
}
.mos-imita select { flex: 1; min-width: 0; }
.lista-moscas, .lista-moscas ul { list-style: none; padding: 0; margin: 0; }
.mos-grupo { margin: 14px 0 6px; }
.mos-grupo h3 { margin: 0 0 4px; border-bottom: 1.5px dashed var(--renglon); }
.mos-grupo ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mos-tarjeta {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: stretch; text-align: left;
  font: inherit; color: var(--lapiz); cursor: pointer; padding: 6px 8px 8px;
  background: rgba(255, 253, 246, .78); border: 1.5px solid rgba(29, 58, 143, .25);
  border-radius: 14px 6px 16px 8px; box-shadow: 1px 2px 4px rgba(70, 50, 20, .1);
}
.mos-tarjeta:active { transform: scale(.97) rotate(-.5deg); background: var(--resaltador); }
.mos-mini svg { width: 100%; height: auto; display: block; }
.mos-texto b { display: block; font-family: var(--f-titulo); font-size: 1.3rem; color: var(--birome); line-height: 1.1; }
.mos-texto small { display: block; font-size: .82rem; color: var(--lapiz-suave); line-height: 1.3; margin: 2px 0 4px; }
.mos-ficha h2 { margin: 0 0 6px; font-size: 2.2rem; }
.mos-grande { margin: 4px -4px 8px; padding: 6px; background: rgba(255, 253, 246, .8); border: 1px solid rgba(150,110,50,.2); box-shadow: 1px 2px 5px rgba(70,50,20,.12); transform: rotate(-.6deg); }
.mos-grande svg { width: 100%; height: auto; display: block; }
.mos-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.mos-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.mos-datos div { border: 1.5px dashed rgba(29,58,143,.3); border-radius: 12px 5px 14px 6px; padding: 4px 10px; }
.mos-datos dt { font-size: .85rem; color: var(--lapiz-suave); }
.mos-datos dd { margin: 0; font-family: var(--f-titulo); font-size: 1.5rem; color: var(--birome); font-weight: 700; }
.mos-meses { display: flex; gap: 3px; margin: 8px 0 4px; flex-wrap: wrap; }
.mos-meses span { flex: 1; min-width: 26px; text-align: center; font-size: .8rem; padding: 2px 0; border-radius: 6px; color: var(--lapiz-suave); border: 1px solid var(--renglon); }
.mos-meses span.si { background: var(--resaltador); color: var(--lapiz); font-weight: 700; }
.mos-meses span.hoy { outline: 2px solid var(--birome); }
.mos-ficha h3 { margin: 14px 0 2px; }
.mos-ficha p { line-height: 1.5; margin: 0 0 8px; }
.mos-receta th { font-size: 1.1rem; width: 32%; vertical-align: top; border-bottom: 1px solid var(--renglon); }
.mos-estado, .mos-cantidad { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.mos-cantidad b { font-family: var(--f-titulo); font-size: 1.8rem; color: var(--birome); min-width: 28px; text-align: center; }
.mos-notas { display: block; font-size: .95rem; color: var(--lapiz-suave); }
.mos-notas textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; resize: vertical; }

/* ---------- Moscas sugeridas por ambiente ---------- */
.sugeridas .nota-titulo svg { width: 46px; height: 40px; }
.sug-fase { line-height: 1.45; margin: 6px 0 8px; }
.sug-top { margin: 4px 0 8px; font-size: 1.05rem; }
.sug-top b { font-family: var(--f-titulo); font-size: 1.45rem; }
.sug-grupo { margin: 12px 0 4px; font-size: 1.35rem; border-bottom: 1.5px dashed var(--renglon); }
.sug-items { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.sug-item { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; font: inherit; color: var(--lapiz); cursor: pointer;
  background: rgba(255, 253, 246, .7); border: 1.5px solid rgba(29, 58, 143, .2); border-radius: 12px 5px 14px 6px; padding: 4px 8px; }
.sug-item:active { background: var(--resaltador); }
.sug-dibujo { width: 84px; flex-shrink: 0; }
.sug-dibujo svg { width: 100%; height: auto; display: block; }
.sug-item b { font-family: var(--f-titulo); font-size: 1.25rem; color: var(--birome); }
.sug-item small { color: var(--lapiz-suave); font-size: .82rem; }
.sug-item .sug-porque { display: block; color: var(--lapiz); font-size: .88rem; line-height: 1.3; margin-top: 1px; }
.sug-lista { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0; }
.sug-chip { font: inherit; font-size: .95rem; color: var(--birome); background: rgba(255, 253, 246, .8); border: 1.5px dashed var(--birome); border-radius: 12px 5px 12px 6px; padding: 1px 9px; cursor: pointer; }
.sug-chip.tengo { border-style: solid; border-color: var(--verde); color: var(--verde); }

/* ==========================================================
   LIBRETA DE CAMPO (v1.7) — reemplaza la hoja rayada con manchas:
   mesa con curvas de nivel, hoja marfil con cuadrícula de puntos,
   mapa topográfico tenue en la esquina y cinta señaladora.
   ========================================================== */
:root {
  --papel: #fbf8f1;
  --papel-sombra: #ece5d3;
  --renglon: rgba(30, 60, 100, .14);
  --margen-izq: 10px;
  --cinta-senal: #b8482a;
}
html { background: #1e3b36 url("../img/topo-mesa.svg") 0 0 / 700px 700px repeat; }
body { background: radial-gradient(ellipse 120% 80% at 50% 10%, rgba(255, 255, 255, .05), rgba(0, 0, 0, .38) 85%) fixed; }

.hoja {
  padding: 50px 18px 120px 22px;
  border-radius: 3px 16px 16px 3px;
  background-color: var(--papel);
  background-image:
    /* mapa topográfico tenue en la esquina */
    url("../img/topo-hoja.svg"),
    /* grano del papel */
    url("../img/papel-grano.svg"),
    /* cuadrícula de puntos (bullet journal) */
    radial-gradient(circle at 1.5px 1.5px, rgba(30, 60, 100, .22) 1.1px, transparent 1.7px),
    /* sombra del lomo y luz pareja */
    linear-gradient(90deg, rgba(60, 40, 10, .10), transparent 22px),
    linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 160px);
  background-size: 560px 560px, 300px 300px, 24px 24px, auto, auto;
  background-repeat: no-repeat, repeat, repeat, no-repeat, no-repeat;
  background-position: right -170px top -150px, 0 0, 10px 14px, 0 0, 0 0;
  box-shadow:
    inset 0 0 0 1px rgba(120, 100, 60, .14),
    2px 0 0 #f1ece0, 4px 1px 0 #e4ddca, 6px 2px 0 #d8cfb8,   /* hojas de atrás */
    0 20px 50px rgba(0, 0, 0, .5);
}
/* cinta señaladora */
.hoja::before {
  top: -4px; left: 22px; right: auto;
  width: 15px; height: 62px;
  background: linear-gradient(90deg, rgba(0,0,0,.12), transparent 30%, rgba(255,255,255,.15) 55%, rgba(0,0,0,.1)), var(--cinta-senal);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
  z-index: 2;
}
/* elástico de la libreta (solo en pantallas anchas, por fuera de la hoja) */
@media (min-width: 720px) {
  .hoja::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: -30px; width: 11px; border-radius: 6px;
    background: linear-gradient(90deg, #1b1b1b, #3a3a3a 45%, #222);
    box-shadow: 0 0 6px rgba(0,0,0,.4);
    pointer-events: none;
  }
  .hoja { margin-top: 24px; margin-bottom: 24px; }
}
/* tinta prolija (sin la tinta corrida del papel mojado) */
.hoja h1, .hoja h2, .hoja h3, .tinta, .manuscrita { text-shadow: none; }
.hoja p, .hoja li, .hoja td { text-shadow: none; }
@media (max-width: 420px) {
  .hoja { padding-left: 16px; padding-right: 14px; }
}
/* fotos propias de moscas */
.mos-foto { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; display: block; border-radius: 4px; }
.mos-con-foto { margin: 4px -4px 4px; padding: 8px 8px 4px; background: #fff; transform: rotate(-1deg); box-shadow: 1px 3px 8px rgba(40,30,10,.25); }
.mos-con-foto .mos-foto { aspect-ratio: 4 / 3; }
.mos-con-foto figcaption { font-family: var(--f-titulo); color: var(--lapiz-suave); text-align: center; font-size: 1.1rem; }
.mos-esquema { width: 46%; margin: 0 0 4px auto; opacity: .9; }
.mos-esquema svg { width: 100%; height: auto; display: block; }
.mos-foto-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.mos-foto-acciones label.boton { cursor: pointer; }

/* ---------- Directorio: guías y casas de pesca ---------- */
.directorio .nota-titulo svg { width: 40px; height: 40px; }
.dir-lista { list-style: none; padding: 0; margin: 10px 0 4px; display: grid; gap: 8px; }
.dir-item { position: relative; background: rgba(255, 253, 246, .85); border: 1.5px solid rgba(29, 58, 143, .2); border-radius: 14px 6px 16px 8px; padding: 8px 10px; line-height: 1.35; }
.dir-item.destacado { border: 2px solid #d8a800; background: #fffbea; box-shadow: 2px 3px 0 rgba(216, 168, 0, .25); }
.dir-dest { position: absolute; top: -9px; right: 10px; font-size: .75rem; background: #f4c430; color: #4a3900; padding: 0 8px; border-radius: 8px; font-weight: 700; }
.dir-cab { display: flex; gap: 8px; align-items: center; }
.dir-ico { font-size: 1.5rem; }
.dir-cab b { font-family: var(--f-titulo); font-size: 1.45rem; color: var(--birome); display: block; line-height: 1.05; }
.dir-cab small { color: var(--lapiz-suave); font-size: .85rem; }
.dir-serv { margin: 4px 0; font-size: .9rem; color: var(--lapiz); }
.dir-botones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.dir-btn { font-size: .95rem; text-decoration: none; color: var(--birome); border: 1.5px solid var(--birome); border-radius: 12px 5px 12px 6px; padding: 1px 10px; }
.dir-btn.wa { background: #25d366; border-color: #1da851; color: #fff; }
.dir-extra { margin-top: 6px; font-size: .95rem; border-top: 1px dashed var(--renglon); padding-top: 6px; }
.dir-extra p { margin: 0 0 6px; }
.dir-sumate { margin: 10px 0 0; }
.dir-sumate-form label { display: block; margin: 6px 0; font-size: .95rem; }
.dir-sumate-form input, .dir-sumate-form select, .dir-sumate-form textarea { width: 100%; font-family: var(--f-texto); font-size: 1rem; color: var(--birome); background: rgba(255,253,246,.8); border: 1.5px solid var(--lapiz-suave); border-radius: 8px; padding: 4px 8px; }
.trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; }