/* Estilo de la pizarra: compartido por el TV y la vista previa del panel */
@font-face {
  font-family: 'Tiza';
  src: url('/fonts/patrick-hand-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tiza';
  src: url('/fonts/patrick-hand-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tipos de letra que puede elegir el maestro (incluidos en la carpeta, funcionan sin internet) */
@font-face { font-family: 'Escolar'; font-display: block; src: url('/fonts/andika-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Escolar'; font-display: block; src: url('/fonts/andika-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manuscrita'; font-display: block; src: url('/fonts/playpen-sans-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manuscrita'; font-display: block; src: url('/fonts/playpen-sans-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Redonda'; font-display: block; src: url('/fonts/nunito-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Redonda'; font-display: block; src: url('/fonts/nunito-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cursiva'; font-display: block; src: url('/fonts/caveat-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cursiva'; font-display: block; src: url('/fonts/caveat-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

.pizarra {
  --fondo: #1f4a2c; --marco: #7a4a1c; --tiza: #f3f1e8; --tenue: #b9d6a8; --acento: #f7d27a; --linea: #8fbf7a;
  position: relative; width: 100%; height: 100%; box-sizing: border-box;
  background: var(--fondo); color: var(--tiza);
  border: calc(var(--u) * 1.6) solid var(--marco);
  font-family: 'Tiza', 'Comic Sans MS', cursive;
  padding: calc(var(--u) * 1.8) calc(var(--u) * 3.2) calc(var(--u) * 2.2);
  display: flex; flex-direction: column; overflow: hidden;
  --u: 1vh;
}
.pizarra.blanca { --fondo: #fbfbf8; --marco: #b4b2a9; --tiza: #0c3b6e; --tenue: #6b6a64; --acento: #a32d2d; --linea: #85b7eb; }
.pizarra.negra  { --fondo: #1e1f1d; --marco: #4a4a46; --tiza: #f3f1e8; --tenue: #a8a69e; --acento: #f7d27a; --linea: #6e6d68; }

.pizarra .enc {
  display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--u) * 2);
  font-size: calc(var(--u) * 3.2); color: var(--tenue);
  border-bottom: 1px dashed var(--linea);
  padding-bottom: calc(var(--u) * 0.4); margin-bottom: calc(var(--u) * 1.6);
  flex: none; white-space: nowrap;
}
.pizarra .enc .mat { overflow: hidden; text-overflow: ellipsis; }
.pizarra .enc .fecha::first-letter { text-transform: uppercase; }

.pizarra .cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pizarra .titulo { text-decoration: underline; text-underline-offset: 0.15em; margin-bottom: 0.3em; flex: none; }
.pizarra .texto { white-space: pre-wrap; line-height: 1.35; overflow-wrap: anywhere; }
.pizarra .foto { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin-top: 0.4em; }
.pizarra .foto img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; background: #fff; }
.pizarra.con-foto .texto { flex: none; }

.pizarra .vacia {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--tenue); font-size: calc(var(--u) * 6);
}

/* Temporizador en el encabezado */
.pizarra .enc .reloj {
  color: var(--acento); font-size: calc(var(--u) * 4.4); line-height: 1;
  padding: 0 calc(var(--u) * 1.5); white-space: nowrap;
}
.pizarra .enc .reloj.poco { color: #ff9b8a; }
.pizarra .enc .reloj.fin { color: #ff9b8a; animation: parpadeo 1s steps(2, start) infinite; }
@keyframes parpadeo { to { visibility: hidden; } }

/* Dos columnas: el texto se reparte en 2 columnas de alto fijo */
.pizarra.dos:not(.con-foto) .texto {
  flex: 1; min-height: 0; column-count: 2; column-gap: calc(var(--u) * 5);
  column-fill: auto; column-rule: 1px dashed var(--linea); overflow: hidden;
}
/* Foto y texto lado a lado */
.pizarra .cuerpo.lado { flex-direction: row; gap: calc(var(--u) * 3); }
.pizarra .cuerpo.lado .col-texto { flex: 1 1 50%; min-width: 0; min-height: 0; overflow: hidden; }
.pizarra .cuerpo.lado .foto { flex: 1 1 50%; margin-top: 0; }

/* Tipo de letra del contenido (el encabezado siempre usa tiza) */
.pizarra.f-escolar .cuerpo { font-family: 'Escolar', 'Tiza', sans-serif; }
.pizarra.f-manuscrita .cuerpo { font-family: 'Manuscrita', 'Tiza', sans-serif; }
.pizarra.f-redonda .cuerpo { font-family: 'Redonda', 'Tiza', sans-serif; }
.pizarra.f-cursiva .cuerpo { font-family: 'Cursiva', 'Tiza', cursive; }
.pizarra.f-cursiva .texto { line-height: 1.25; }

/* Línea que se está leyendo o dictando */
.pizarra .lin { border-radius: .2em; transition: background-color .2s; }
.pizarra .lin.leyendo { background: rgba(247, 210, 122, .28); box-shadow: 0 0 0 .12em rgba(247, 210, 122, .28); }
.pizarra.blanca .lin.leyendo { background: rgba(250, 199, 117, .45); box-shadow: 0 0 0 .12em rgba(250, 199, 117, .45); }