/* creador.css — Estilos comúns do Creador H5P de recursoseducativos.net (novembro de 2026) */

:root {
  --fondo: #f6f7f4;
  --papel: #ffffff;
  --texto: #2f3440;
  --suave: #6b7280;
  --liña: #e3e6e0;
  --verde: #5E8A12;
  --verde-escuro: #4a6e0e;
  --verde-claro: #eef4e2;
  --vermello: #b42318;
  --vermello-claro: #fdecea;
  --azul-claro: #eaf1fb;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
}

/* Todo vai dentro de .h5pc-app, para non tocar a cabeceira e o pé comúns da web */
body.h5pc-corpo { margin: 0; background: var(--fondo) !important; }
.h5pc-app { clear: both; background: var(--fondo); color: var(--texto); text-align: left;
  font: 15px/1.5 "ReNunito", system-ui, -apple-system, "Segoe UI", sans-serif; }
:where(.h5pc-app) *, :where(.h5pc-app) *::before, :where(.h5pc-app) *::after { box-sizing: border-box; }
:where(.h5pc-app) a { color: var(--verde-escuro); }   /* :where = sen peso, para que mande o estilo de cada compoñente */

/* Barra do creador (debaixo da barra de menú da web) */
.h5pc-barra { background: var(--papel); border-bottom: 1px solid var(--liña); }
.con-web .h5pc-barra { margin-top: 0; }
.h5pc-barra-in { max-width: 1280px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.h5pc-app .h5pc-marca { font-weight: 800; font-size: 1.05rem; color: var(--texto); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.h5pc-marca span { background: var(--verde); color: #fff; border-radius: 8px; padding: 2px 8px; font-size: .8rem; letter-spacing: .03em; }
.h5pc-barra nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.h5pc-app .h5pc-barra nav a { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--texto); display: inline-flex; align-items: center; gap: 6px; }
.h5pc-app .h5pc-barra nav a .h5pc-ico { flex: none; color: var(--verde-escuro); }
.h5pc-app .h5pc-barra nav a:hover, .h5pc-app .h5pc-barra nav a.on { background: var(--verde-claro); color: var(--verde-escuro); }

main.h5pc { max-width: 1280px; margin: 0 auto; padding: 24px 16px 64px; }
main.h5pc.estreito { max-width: 980px; }
h1.h5pc-titulo { font-size: 1.5rem; margin: 0 0 4px; }
.h5pc-sub { color: var(--suave); margin: 0 0 20px; }
h2.h5pc-seccion { font-size: 1.1rem; margin: 32px 0 12px; }

/* Botóns */
.h5pc-boton { display: inline-flex; align-items: center; gap: 6px; background: var(--verde); color: #fff; border: 0; border-radius: 999px;
  padding: 10px 20px; font: 700 15px/1.2 inherit; cursor: pointer; text-decoration: none; }
.h5pc-boton:hover { background: var(--verde-escuro); }
.h5pc-boton:disabled { opacity: .55; cursor: default; }
.h5pc-boton.secundario { background: var(--papel); color: var(--texto); box-shadow: inset 0 0 0 1px var(--liña); }
.h5pc-boton.secundario:hover { box-shadow: inset 0 0 0 1px var(--verde); color: var(--verde-escuro); }

/* Borrar: discreto, en vermello */
.h5pc-borrar { background: none; border: 0; padding: 0; font: inherit; color: var(--vermello); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.h5pc-borrar:hover { color: #7a1610; }

/* Ventá de descarga e pasos */
.h5pc-dialogo { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 16px;
  box-shadow: 0 20px 50px rgba(16, 24, 40, .25); color: var(--texto); }
.h5pc-dialogo::backdrop { background: rgba(30, 36, 44, .45); }
.h5pc-dialogo[open] { display: flex; flex-direction: column; }
.h5pc-dialogo-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--liña); }
.h5pc-dialogo-cab b { display: block; font-size: 1.1rem; }
.h5pc-dialogo-cab small { color: var(--suave); }
.h5pc-dialogo-pechar { border: 0; background: transparent; font-size: 1.2rem; line-height: 1; padding: 6px 8px; border-radius: 8px; cursor: pointer; color: var(--suave); }
.h5pc-dialogo-pechar:hover { background: var(--fondo); color: var(--texto); }
.h5pc-dialogo-corpo { padding: 16px 20px; overflow-y: auto; }
.h5pc-dialogo-pe { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--liña); background: var(--fondo); }
.h5pc-pasos { counter-reset: paso; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.h5pc-pasos li { counter-increment: paso; display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; }
.h5pc-pasos li::before { content: counter(paso); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--verde); color: #fff; font-weight: 800; font-size: .9rem; }
.h5pc-aviso-tipo { background: #fff3d6; border-radius: 10px; padding: 10px 14px; margin: 14px 0 0; }
.h5pc-nota { color: var(--suave); font-size: .9rem; margin: 14px 0 0; }

/* Avisos */
.h5pc-msx { border-radius: 12px; padding: 10px 14px; margin: 0 0 16px; }
.h5pc-msx.ok { background: var(--verde-claro); }
.h5pc-msx.erro { background: var(--vermello-claro); color: var(--vermello); }
.h5pc-msx.info { background: var(--azul-claro); }

/* Editor: formulario e vista previa */
.h5pc-editor-grella { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.h5pc-panel { background: var(--papel); border: 1px solid var(--liña); border-radius: 14px; box-shadow: var(--sombra); }
.h5pc-panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--liña); flex-wrap: wrap; }
.h5pc-panel-cab b { font-size: .95rem; }
.h5pc-panel-corpo { padding: 12px; }
.h5pc-vista { position: sticky; top: 16px; }
.h5pc-vista-baleira { color: var(--suave); text-align: center; padding: 48px 16px; }
.h5pc-accions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--liña); }
#h5pc-aviso { display: none; margin: 0; }

@media (max-width: 900px) {
  .h5pc-editor-grella { grid-template-columns: 1fr; }
  .h5pc-vista { position: static; }
}

/* Tarxetas de tipos e actividades */
.h5pc-grella { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.h5pc-tarxeta { background: var(--papel); border: 1px solid var(--liña); border-radius: 12px; padding: 12px 14px; text-decoration: none;
  color: var(--texto); display: flex; flex-direction: column; gap: 4px; box-shadow: var(--sombra); transition: border-color .12s, transform .12s; }
a.h5pc-tarxeta:hover { border-color: var(--verde); transform: translateY(-1px); }
.h5pc-tarxeta b { font-size: .98rem; }
.h5pc-tarxeta small { color: var(--suave); }
.h5pc-etiquetas { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.h5pc-etiqueta { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--fondo); color: var(--suave); }
.h5pc-etiqueta.nota { background: var(--verde-claro); color: var(--verde-escuro); }
.h5pc-etiqueta.av { background: #e6f0ff; color: #1d4f9c; }
.h5pc-etiqueta.aviso { background: #fff3d6; color: #8a5a00; }

/* Táboa de actividades */
.h5pc-taboa { width: 100%; border-collapse: collapse; background: var(--papel); border: 1px solid var(--liña); border-radius: 12px; overflow: hidden; }
.h5pc-taboa th, .h5pc-taboa td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--liña); vertical-align: middle; }
.h5pc-taboa th { background: var(--fondo); font-size: .85rem; color: var(--suave); font-weight: 600; }
.h5pc-taboa td.accions { white-space: nowrap; text-align: right; }
.h5pc-taboa td.accions a { margin-left: 10px; }
@media (max-width: 640px) { .ocultar-mobil { display: none; } }

/* Iconas dos tipos de actividade */
.h5pc-icona { width: 44px; height: 44px; flex: none; border-radius: 10px; object-fit: contain; }
.h5pc-icona.sen { background: var(--fondo); }
.h5pc-icona.peq { width: 26px; height: 26px; border-radius: 6px; vertical-align: middle; margin-right: 6px; }
.h5pc-icona.mini { width: 20px; height: 20px; border-radius: 5px; background: #fff; }

/* Compartir no banco (asistentes e editor) */
.h5pc-compartir { border: 1px solid #d5e6b8; background: linear-gradient(135deg, #f4f9ea, #ffffff); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; }
.h5pc-compartir-sw { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.h5pc-compartir-sw input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--verde); flex: none; }
.h5pc-compartir-sw b { display: block; font-size: .95rem; }
.h5pc-compartir-sw small { display: block; color: var(--suave); font-size: .82rem; }
.h5pc-compartir-campos { display: none; gap: 10px; margin-top: 12px; }
.h5pc-compartir:has(input[name=banco_publico]:checked) .h5pc-compartir-campos { display: grid; }
.h5pc-compartir-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; }
.h5pc-compartir-campos label > span { display: block; font-weight: 600; font-size: .85rem; margin-bottom: 3px; }
.h5pc-compartir-campos select, .h5pc-compartir-campos input[type=text], .h5pc-compartir-campos textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--liña); border-radius: 10px; font: inherit; font-size: .92rem; background: #fff; color: var(--texto); }
.h5pc-compartir-campos textarea { resize: vertical; min-height: 56px; }
.h5pc-compartir-campos select, .h5pc-compartir-campos input[type=text] { box-sizing: border-box; height: 40px; line-height: 1.2; margin: 0; }
.h5pc-compartir-campos select { -webkit-appearance: none; appearance: none; padding-right: 30px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23667085' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 11px center; }
.h5pc-compartir-campos textarea { box-sizing: border-box; }
.h5pc-compartir-campos small { color: var(--suave); font-size: .8rem; }
@media (max-width: 560px) { .h5pc-compartir-fila { grid-template-columns: 1fr; } }
.h5pc-etiqueta.publica { background: #e6f0ff; color: #1d4f9c; }
.h5pc-etiqueta.oculta { background: var(--vermello-claro); color: var(--vermello); }

/* Ventá de avisos */
.h5pc-motivos { display: grid; gap: 6px; margin: 0 0 12px; }
.h5pc-motivos label { display: flex; gap: 8px; align-items: center; font-size: .95rem; cursor: pointer; }
.h5pc-motivos input { accent-color: var(--verde); }
.h5pc-aviso-texto { width: 100%; padding: 8px 10px; border: 1px solid var(--liña); border-radius: 10px; font: inherit; resize: vertical; }
#h5pc-aviso-resposta { margin: 12px 0 0; }

/* Asistentes rápidos: campos, pestanas e vista previa (comúns) */
.h5pc-campo { display: block; margin: 0 0 16px; }
.h5pc-campo > span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.h5pc-campo small { display: block; color: var(--suave); font-size: .82rem; margin-top: 4px; }
.h5pc-campo input[type=text], .h5pc-campo input[type=number], .h5pc-campo textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--liña); border-radius: 10px; font: inherit; background: #fff; color: var(--texto); }
.h5pc-campo textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.h5pc-campo input:focus, .h5pc-campo textarea:focus { outline: 2px solid var(--verde); outline-offset: 0; border-color: transparent; }
.h5pc-paso { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--verde); color: #fff; font-size: .78rem; font-weight: 800; margin-right: 6px; }
.h5pc-opcions { display: grid; gap: 6px; margin: 4px 0 6px; }
.h5pc-opcions label { display: flex; gap: 8px; align-items: center; font-size: .92rem; }
.h5pc-opcions small { color: var(--suave); }
details.h5pc-mais { margin: 0 0 14px; }
details.h5pc-mais summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--verde-escuro); }
.h5pc-pestanas { display: flex; gap: 4px; flex-wrap: wrap; }
.h5pc-pestana { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--liña); background: #fff; cursor: pointer; font: 600 13px/1.2 inherit; color: var(--texto); }
.h5pc-pestana.on { background: var(--verde); border-color: var(--verde); color: #fff; }
.h5pc-pestana input { margin: 0; accent-color: #fff; }
#h5pc-vista { width: 100%; min-height: 200px; border: 0; display: block; }
#h5pc-estado-vista { font-size: .8rem; color: var(--suave); }
#h5pc-descricion { flex-basis: 100%; margin: 0; font-size: .86rem; color: var(--suave); }
.h5pc-intro-imaxe { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.h5pc-intro-imaxe img { max-width: 160px; max-height: 110px; border-radius: 10px; border: 1px solid var(--liña); background: #fff; object-fit: contain; }
.h5pc-intro-imaxe .h5pc-boton { padding: 8px 16px; font-size: 14px; }
#h5pc-intro-estado { font-size: .85rem; color: var(--suave); }
#h5pc-intro-estado.erro { color: var(--vermello); }
.h5pc-accions .h5pc-avanzada { margin-left: auto; font-size: .88rem; color: var(--suave); }
/* Enriba do botón Gardar: que actividade se vai gardar */
:where(.h5pc-app) .h5pc-gardaranse { margin: 0 16px 8px; font-size: .88rem; color: var(--suave); }
:where(.h5pc-app) .h5pc-gardaranse:empty { display: none; }
/* Iconas SVG pequenas (h5pc_svg): do tamaño e cor do texto */
:where(.h5pc-app) .h5pc-ico { width: 1.05em; height: 1.05em; vertical-align: -0.16em; flex: none; display: inline-block; }

/* Editor de texto con botóns (assets/texto_rico.js) */
.h5pc-rico { border: 1px solid var(--liña); border-radius: 10px; background: #fff; overflow: hidden; }
.h5pc-rico:focus-within { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(94, 138, 18, .12); }
.h5pc-rico-barra { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-bottom: 1px solid var(--liña); background: #f7f9f3; }
.h5pc-rico-barra button { display: inline-flex; align-items: center; gap: 5px; height: 30px; min-width: 30px; justify-content: center; padding: 0 7px; border: 1px solid transparent;
  border-radius: 7px; background: transparent; color: var(--texto); cursor: pointer; font: 600 .8rem/1 inherit; }
.h5pc-rico-barra button[hidden] { display: none; }
.h5pc-rico-barra button:hover { background: #fff; border-color: var(--liña); }
.h5pc-rico-barra button.on { background: #e3eecd; border-color: #b9d08c; color: var(--verde-escuro); }
.h5pc-rico-barra svg { width: 17px; height: 17px; flex: none; }
.h5pc-rico-barra .sep { width: 1px; background: var(--liña); margin: 4px 3px; }
.h5pc-rico-texto { position: relative; min-height: 84px; max-height: 340px; overflow-y: auto; padding: 8px 11px; outline: none; line-height: 1.45; }
.h5pc-rico-texto p { margin: 0 0 .55em; } .h5pc-rico-texto p:last-child { margin-bottom: 0; }
.h5pc-rico-texto ul, .h5pc-rico-texto ol { margin: 0 0 .55em; padding-left: 1.4em; }
.h5pc-rico-texto a { color: #0b62a4; text-decoration: underline; }
.h5pc-rico.baleiro .h5pc-rico-texto::before { content: attr(data-placeholder); color: #9aa294; pointer-events: none; position: absolute; }
.h5pc-rico-ligazon { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border-top: 1px solid var(--liña); background: #f7f9f3; }
.h5pc-rico-ligazon[hidden] { display: none; }
.h5pc-rico-ligazon input { flex: 1 1 200px; min-width: 0; padding: 7px 10px; border: 1px solid var(--liña); border-radius: 8px; font: inherit; }
.h5pc-rico-ligazon button { padding: 7px 12px; font-size: .85rem; }

.h5pc-nota-formato { color: #8a5a00 !important; }

/* Lista «As miñas actividades» (ventá flotante e actividades.php) */
.h5pc-etiqueta.rapido { background: #fff3d6; color: #6b4a00; }
.h5pc-taboa td.accions .h5pc-accions-fila { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.h5pc-taboa td.accions .h5pc-accion { margin: 0; display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--liña); background: #fff; color: var(--texto); font: inherit; font-size: .85rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: border-color .12s, background .12s, color .12s; }
.h5pc-taboa td.accions .h5pc-accion:hover { border-color: var(--verde); color: var(--verde-escuro); background: #f4f9ea; }
.h5pc-taboa td.accions .h5pc-accion.principal { background: var(--verde); border-color: var(--verde); color: #fff; }
.h5pc-taboa td.accions .h5pc-accion.principal:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); color: #fff; }
.h5pc-taboa td.accions .h5pc-accion.perigo { color: var(--vermello); }
.h5pc-taboa td.accions .h5pc-accion.perigo:hover { border-color: var(--vermello); background: var(--vermello-claro); color: var(--vermello); }

/* A icona da X dos diálogos non "rouba" o clic ao botón */
.h5pc-dialogo-pechar svg { pointer-events: none; }

/* Edición avanzada: volver ao asistente rápido */
.h5pc-msx.h5pc-volver-asistente { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.h5pc-msx.h5pc-volver-asistente > svg { width: 18px; height: 18px; flex: none; }
.h5pc-msx.h5pc-volver-asistente span { flex: 1 1 260px; }
.h5pc-msx.h5pc-volver-asistente .h5pc-boton { margin-left: auto; white-space: nowrap; }
.h5pc-msx.aviso { background: #fff3d6; color: #6b4a00; }
.h5pc-msx.aviso svg { width: 16px; height: 16px; vertical-align: -3px; }

/* As miñas actividades: título e, debaixo, as etiquetas (cada unha enteira, sen partirse); a icona, co tipo */
.h5pc-actividade-tipo { display: flex; align-items: flex-start; gap: 8px; }
.h5pc-actividade-tipo .h5pc-icona.peq { margin-right: 0; flex: none; }
.h5pc-actividade-tipo > span { min-width: 0; padding-top: 2px; }
td > .h5pc-etiquetas { margin-top: 4px; }
.h5pc-etiqueta { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }