/* ================================================================
   Materiales Morfología ESO · Enróllate con la Lengua
   Hoja de estilos compartida — estética cuaderno de espiral
   Paleta y tipografías hereditadas de la LandingPage oficial.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Patrick+Hand&family=Permanent+Marker&family=Manrope:wght@300;400;500;600;700;800&family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
   /* Paleta general (sin tocar, identifica la marca) */
  --papel:        #fffdf6;
  --papel-2:      #fff8e8;
  --papel-3:      #fff5db;
  --margin:       #e23434;
  --tinta:        #1f1812;
  --tinta-soft:   #4a3f33;
  --tinta-tenue:  #a09382;       /* antes #7a6f60 — bordes más amables */
  --rojo:         #e23434;
  --rojo-deep:    #b51e1e;
  --amarillo:     #ffd84a;
  --amarillo-bg:  #fff7c2;
  --verde:        #2ea850;
  --verde-bg:     #c8eccd;
  --azul:         #2b4f8a;
  --azul-bg:      #d8e3f3;
  --rosa-bg:      #fde0e6;
  --lila-bg:      #e7dff5;
  --melocoton:    #fce4d6;

   /* Versiones suavizadas para fondos de tabla (no chillan al imprimir) */
  --tabla-cab:    #8a6a55;       /* marrón cálido en vez de tinta puro */
  --tabla-cab-tx: #fffaf0;
  --tabla-banda:  #d77470;       /* rojo terracota suave en vez de rojo plano */
  --tabla-banda-tx:#fffaf0;
  --tabla-cabAzul:#5a7aa8;       /* azul suave para fc--simple */
  --rosa-cab:     #f9d2da;       /* row-header impar */
  --rosa-cab-2:   #f5c2cc;       /* row-header par */
  --melocoton-2:  #f8dac8;
  --borde-celda:  #c8bdac;       /* gris cálido medio para bordes */

   /* Líneas horizontales del papel cuadriculado */
  --line: rgba(31,24,18,.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #ece6d6;
  color: var(--tinta);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

/* Breadcrumb «volver al cuaderno» — integración con la landing del ecosistema */
.back-cuaderno {
  display: inline-block;
  font-family: 'Patrick Hand', cursive;
  font-size: 1.05rem;
  color: var(--rojo-deep);
  text-decoration: none;
  letter-spacing: .02em;
  background: rgba(255,253,246,.85);
  padding: 5px 14px 6px;
  border: 1px dashed rgba(184,84,80,.45);
  border-radius: 3px;
  transform: rotate(-1deg);
  margin: 14px 0 -6px 22px;
  transition: transform .22s, background .22s, color .22s;
}
.back-cuaderno:hover,
.back-cuaderno:focus-visible {
  transform: rotate(0deg) translateX(-3px);
  background: #fffdf6;
  color: var(--rojo);
  outline: none;
}
@media print { .back-cuaderno { display: none; } }

/* Hoja del cuaderno */
.hoja {
  max-width: 1100px;
  margin: 30px auto;
  background: var(--papel);
  position: relative;
  padding: 50px 60px 60px 110px;        /* hueco izquierdo para el margen rojo */
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 4px 14px rgba(31,24,18,.10),
    0 18px 38px rgba(31,24,18,.10);
   /* Renglones tenues estilo papel pautado */
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 26px, var(--line) 26px 27px);
  background-position: 0 70px;
}

/* Línea vertical de margen (roja, cuaderno escolar) */
.hoja::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 80px;
  width: 2px;
  background: var(--margin);
}

/* Agujeros de la espiral, decorativo */
.hoja::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 30px;
  width: 18px;
  background-image: radial-gradient(circle at 50% 50%, #d8d0bf 0 5px, transparent 6px);
  background-size: 18px 60px;
  background-repeat: repeat-y;
  background-position: 0 50px;
}

/* Cabecera */
.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--tinta-tenue);
}
.cabecera .logo {
  height: 64px;
  width: auto;
}
.cabecera .marca {
  font-family: 'Caveat', cursive;
  font-size: 1.6rem;
  color: var(--tinta);
  line-height: 1.1;
}
.cabecera .marca b { color: var(--rojo-deep); }
.cabecera .marca small {
  display: block;
  font-family: 'Patrick Hand', cursive;
  color: var(--tinta-tenue);
  font-size: 1rem;
}

/* Título principal de la ficha (Permanent Marker, como rotulador escolar) */
.titulo {
  font-family: 'Permanent Marker', 'Caveat', cursive;
  font-size: 2.8rem;
  color: var(--rojo-deep);                 /* algo más profundo y menos chillón */
  letter-spacing: 1px;
  text-align: center;
  margin: 12px 0 4px;
   /* subrayado highlighter */
  display: inline-block;
  background: linear-gradient(180deg, transparent 60%, var(--amarillo) 60% 92%, transparent 92%);
  padding: 0 16px;
}
.titulo-wrap { text-align: center; margin-bottom: 4px; }

.subtitulo {
  text-align: center;
  font-family: 'Patrick Hand', cursive;
  font-size: 1.15rem;
  color: var(--tinta-soft);
  margin: 0 0 26px;
}

/* Secciones de segundo nivel (Artículo, Posesivo, Numeral...) */
h2.seccion {
  font-family: 'Permanent Marker', cursive;
  font-size: 1.45rem;
  color: var(--azul);
  margin: 32px 0 10px;
  display: inline-block;
  padding: 4px 14px;
  background: var(--amarillo-bg);
  border-left: 5px solid var(--amarillo);
  letter-spacing: .5px;
}

/* Subsecciones de tercer nivel (Singular / Plural, Masc / Fem, etc.) */
h3.sub {
  font-family: 'Patrick Hand', cursive;
  font-size: 1.1rem;
  color: var(--rojo-deep);
  margin: 14px 0 8px;
}

/* Tablas */
table.fc {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 8px 0 18px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 14px;
  background: transparent;
}
table.fc th,
table.fc td {
  padding: 8px 10px;
  border: 1px solid var(--borde-celda);          /* gris cálido más suave */
  vertical-align: middle;
  background: var(--papel);
}
table.fc thead th {
  background: var(--tabla-cab);                  /* marrón cálido en lugar de negro puro */
  color: var(--tabla-cab-tx);
  font-family: 'Permanent Marker', cursive;
  font-weight: 400;
  font-size: 13.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
}
/* Cabecera de doble fila (típica en estas tablas) */
table.fc thead tr.banda th {
  background: var(--tabla-banda);                /* rojo terracota suave */
  color: var(--tabla-banda-tx);
  font-size: 12.5px;
}
table.fc tbody th {
  background: var(--rosa-cab);                   /* rosa más bajo, pastel */
  text-align: left;
  font-family: 'Patrick Hand', cursive;
  font-weight: 600;
  color: var(--tinta-soft);                      /* tinta más suave */
  font-size: 14.5px;
  white-space: nowrap;
}
table.fc tbody tr:nth-child(even) td { background: var(--papel-2); }
table.fc tbody tr:nth-child(even) th { background: var(--rosa-cab-2); }
table.fc td .formas {
  font-family: 'Crimson Pro', 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--tinta-soft);                      /* texto de formas más amable */
  font-size: 15px;
}
table.fc td.center, table.fc th.center { text-align: center; }
table.fc td.def {
  font-size: 13.5px;
  color: var(--tinta-soft);
  font-style: normal;
  background: var(--lila-bg);
}

/* Variante de tabla "ficha simple" (preposiciones, conjunciones) */
table.fc--simple thead th {
  background: var(--tabla-cabAzul);              /* azul suave en lugar de plano */
}
table.fc--simple tbody th {
  background: var(--azul-bg);
  color: var(--azul);
}
table.fc--simple tbody tr:nth-child(even) th { background: #c4d2e9; }
table.fc--simple tbody tr:nth-child(even) td { background: #f7faff; }

/* Variante "ejemplo en cursiva inline" */
.ej {
  font-family: 'Crimson Pro', 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--rojo-deep);
}

/* Caja de definición / advertencia */
.caja {
  background: var(--amarillo-bg);
  border-left: 5px solid var(--amarillo);
  padding: 12px 16px;
  margin: 14px 0;
  font-family: 'Patrick Hand', cursive;
  font-size: 1.05rem;
  color: var(--tinta);
  border-radius: 4px;
}
.caja b { color: var(--rojo-deep); font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .92em; text-transform: uppercase; letter-spacing: 1px; }
.caja--info { background: var(--azul-bg); border-left-color: var(--azul); }
.caja--ok { background: var(--verde-bg); border-left-color: var(--verde); }

/* ================================================================
   Navegación entre fichas — pestañas tipo marcadores de cuaderno
   ================================================================ */
.nav-fichas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 22px;
  padding: 0;
}
.nav-fichas a {
  flex: 1 1 auto;
  min-width: 90px;
  display: inline-block;
  text-align: center;
  font-family: 'Patrick Hand', cursive;
  font-size: 1.05rem;
  color: var(--tinta);
  background: var(--papel-2);
  border: 1.5px solid var(--tinta-tenue);
  border-bottom: 4px solid var(--tinta-tenue);
  padding: 7px 12px 5px;
  border-radius: 6px 6px 4px 4px;
  text-decoration: none;
  transition: transform .08s, background .12s, border-color .12s;
  position: relative;
  white-space: nowrap;
}
.nav-fichas a:hover {
  background: var(--amarillo-bg);
  border-bottom-color: var(--amarillo);
  transform: translateY(-1px);
}
.nav-fichas a.home {
  background: var(--papel-3);
  flex: 0 0 auto;
  font-size: 1.15rem;
  padding: 7px 14px 5px;
}
.nav-fichas a.home::before { content: "🏠 "; }
.nav-fichas a.activa {
  background: var(--tabla-banda);                /* mismo rojo suave de las tablas */
  color: var(--papel);
  border-color: #b5605c;
  border-bottom-color: #b5605c;
  font-weight: 600;
  pointer-events: none;
  cursor: default;
}
.nav-fichas .num {
  display: block;
  font-size: .72rem;
  font-family: 'Manrope', sans-serif;
  color: var(--tinta-tenue);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}
.nav-fichas a.activa .num { color: rgba(255,255,255,.85); }

/* Botones grandes anterior/siguiente al pie */
.nav-anterior-siguiente {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px dashed var(--tinta-tenue);
  flex-wrap: wrap;
}
.nav-anterior-siguiente a {
  font-family: 'Patrick Hand', cursive;
  font-size: 1.1rem;
  color: var(--tinta);
  background: var(--papel-2);
  border: 1.5px solid var(--tinta-tenue);
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .12s;
  max-width: 48%;
}
.nav-anterior-siguiente a:hover { background: var(--amarillo-bg); }
.nav-anterior-siguiente a.disabled { opacity: 0.35; pointer-events: none; }
.nav-anterior-siguiente a.next { margin-left: auto; }
.nav-anterior-siguiente .lbl {
  display: block;
  font-size: .72rem;
  color: var(--tinta-tenue);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.1;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
}
.nav-anterior-siguiente .tit { font-size: 1.15rem; color: var(--rojo-deep); font-weight: 600; }

/* No imprimir la navegación */
@media print {
  .nav-fichas, .nav-anterior-siguiente { display: none; }
}

/* Pie de página con la URL */
.pie {
  margin-top: 32px;
  padding-top: 14px;
  border-top: 1px dashed var(--tinta-tenue);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pie .url {
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  color: var(--rojo-deep);
  font-weight: 600;
}
.pie .url::before { content: "✏️ "; font-size: .9em; }
.pie .nota {
  font-family: 'Patrick Hand', cursive;
  color: var(--tinta-tenue);
  font-size: .95rem;
}

/* ════════════════════════════════════════════════════════════════
   PROTECCIÓN DE CONTENIDOS · Niveles 1, 2 y 3
   © Borja García Valiente — enrollateconlalengua.es
   ════════════════════════════════════════════════════════════════ */

/* Nivel 3 · Bloquear selección de texto */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input, textarea { -webkit-user-select: text; user-select: text; }

/* Bloquear arrastre de imágenes (refuerzo CSS + JS) */
img, svg {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}
a svg, button svg, .nav-fichas a svg, .nav-mover a svg { pointer-events: auto; }

/* Nivel 1 · Marca de agua fija inferior derecha */
body::before {
  content: "© Borja García Valiente · enrollateconlalengua.es";
  position: fixed;
  bottom: 8px;
  right: 14px;
  font-family: 'Patrick Hand', cursive;
  font-size: 12px;
  color: rgba(31, 24, 18, 0.45);
  background: rgba(255, 253, 246, 0.7);
  padding: 2px 8px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 9999;
}

/* Marca de agua diagonal grande tenue dentro de cada hoja */
.hoja {
  position: relative;
  isolation: isolate;
}
.hoja::before {
  content: "© enrollateconlalengua.es · uso reservado";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Permanent Marker', cursive;
  font-size: 84px;
  color: rgba(31, 24, 18, 0.045);
  transform: rotate(-28deg);
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
  overflow: hidden;
}
.hoja > * { position: relative; z-index: 1; }

/* Nivel 3 · Bloquear impresión */
@media print {
  body * { visibility: hidden !important; }
  body::after {
    content: "© Borja García Valiente — enrollateconlalengua.es\A\A Este material no se puede imprimir desde el navegador.\A Para ediciones imprimibles, contacta con el autor en enrollateconlalengua.es";
    white-space: pre-line;
    visibility: visible !important;
    display: block;
    position: fixed;
    top: 30%;
    left: 10%;
    right: 10%;
    font-family: serif;
    font-size: 16pt;
    line-height: 1.6;
    text-align: center;
    color: #000;
    background: #fff;
    padding: 30px;
    border: 2px solid #000;
  }
}