/* La paleta cálida de AI-CUBE 365 (la de la web), en variables para que el resto la use. */
:root {
  --naranja: #ff7a3d;
  --salmon: #ffb69a;
  --crema: #ffe7d6;
  --amarillo: #ffd86b;
  --gris: #d3d3d3;
  --cacao: #5e4436;
  --papel: #f5f4f1;
  --texto: #2b211b;
  --fondo: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --texto: #f5eee8;
    --fondo: #241b16;
    --papel: #2f2520;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.5;
}

.cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 3px solid var(--naranja);
  background: var(--papel);
}

.marca strong { color: var(--naranja); }
.version { font-size: 0.85rem; opacity: 0.75; font-variant-numeric: tabular-nums; }

.contenido { max-width: 48rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.aviso {
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--amarillo);
  background: var(--papel);
}

a { color: inherit; }
.marca { text-decoration: none; }

.aviso-error { border-left-color: var(--naranja); }
.aviso ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }

/* La bandeja: una fila por publicación, con la portada en pequeño. */
.bandeja { list-style: none; margin: 0; padding: 0; }
.bandeja li + li { margin-top: 0.5rem; }
.pieza {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.5rem;
  border: 1px solid var(--gris);
  border-radius: 6px;
  text-decoration: none;
}
.pieza:hover { border-color: var(--naranja); }
.miniatura { flex: none; width: 108px; height: 135px; border-radius: 4px; }
.sin-dibujar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--papel);
  font-size: 0.8rem;
  opacity: 0.7;
}
.datos { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.datos .estado { align-self: flex-start; }
.nombre { font-weight: 600; overflow-wrap: anywhere; }
.detalle { font-size: 0.85rem; opacity: 0.75; }

/* El estado, siempre con la misma etiqueta y color en todo el panel. */
.estado {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: var(--papel);
  border: 1px solid var(--gris);
}
.estado-preparada, .estado-hecho { background: var(--crema); border-color: var(--salmon); color: var(--cacao); }
.estado-retenida, .estado-fallido { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.estado-en_buffer, .estado-programada, .estado-pendiente, .estado-en_curso { background: var(--amarillo); border-color: var(--amarillo); color: var(--cacao); }
.estado-publicada { background: var(--cacao); border-color: var(--cacao); color: #fff; }

/* Una publicación: sus láminas en rejilla, como se verán en el carrusel. */
.laminas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
.laminas img { width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--gris); }
.pie { white-space: pre-wrap; padding: 0.75rem 1rem; background: var(--papel); border-radius: 6px; }
.encargos { padding-left: 1.25rem; }
.encargos li { margin: 0.35rem 0; }
.encargos .error { font-size: 0.85rem; color: var(--naranja); }

.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-start; margin-top: 0.75rem; }
.acciones form { margin: 0; }
.acciones button { margin-top: 0; }
.acciones details { flex-basis: 100%; }
.acciones summary { cursor: pointer; color: var(--naranja); }
button.secundario { background: var(--papel); color: var(--texto); border: 1px solid var(--gris); }

button {
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 6px;
  background: var(--naranja);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

/* La navegación de la cabecera. */
.cabecera { flex-wrap: wrap; }
.navegacion { display: flex; gap: 1rem; margin-right: auto; margin-left: 1.5rem; }
.navegacion a { text-decoration: none; }
.navegacion a:hover { color: var(--naranja); }

/* Calendario y banco: tablas que se leen de un vistazo, también en el móvil. */
.calendario, .temas { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.92rem; }
.calendario th, .temas th { text-align: left; font-weight: 600; border-bottom: 2px solid var(--gris); padding: 0.4rem 0.5rem; }
.calendario td, .temas td { border-bottom: 1px solid var(--gris); padding: 0.45rem 0.5rem; vertical-align: top; }
.calendario tr.hueco td { opacity: 0.65; }
@media (max-width: 40rem) {
  .calendario thead, .temas thead { display: none; }
  .calendario tr, .temas tr { display: block; border-bottom: 1px solid var(--gris); padding: 0.4rem 0; }
  .calendario td, .temas td { display: block; border: 0; padding: 0.1rem 0.25rem; }
}

/* El tipo de cada tema, con su color: interna, externa, condicionada. */
.tipo { display: inline-block; padding: 0 0.45rem; border-radius: 4px; font-size: 0.75rem; border: 1px solid var(--gris); }
.tipo-interna { border-color: var(--salmon); color: var(--cacao); background: var(--crema); }
.tipo-externa { border-color: var(--amarillo); color: var(--cacao); background: #fff6d6; }
.tipo-condicionada { border-color: var(--cacao); color: #fff; background: var(--cacao); }
.estado-en_banco, .estado-descartado { background: var(--papel); border-color: var(--gris); color: inherit; }
.estado-planificado { background: var(--crema); border-color: var(--salmon); color: var(--cacao); }

.filtros { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; font-size: 0.9rem; }
.filtros a { text-decoration: none; opacity: 0.75; }
.filtros a.activo { opacity: 1; font-weight: 600; color: var(--naranja); }

.formulario { display: grid; gap: 0.6rem; max-width: 32rem; margin: 0.75rem 0; }
.formulario label { display: grid; gap: 0.2rem; font-size: 0.9rem; }
.formulario input, .formulario select, .formulario textarea {
  font: inherit; padding: 0.4rem 0.5rem; border: 1px solid var(--gris); border-radius: 4px;
  background: var(--fondo); color: var(--texto);
}
.formulario.en-linea { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; }
.formulario.en-linea button { margin-top: 0; }
.nuevo summary { cursor: pointer; color: var(--naranja); margin-top: 1rem; }
.ficha dt { font-weight: 600; margin-top: 0.75rem; }
.ficha dd { margin: 0.2rem 0 0; overflow-wrap: anywhere; }
@media (max-width: 40rem) {
  /* En el móvil la navegación baja a su propia línea, sin la sangría de al lado de la marca. */
  .navegacion { order: 3; width: 100%; margin-left: 0; }
}

/* Las láminas de un tema ya redactado, en pequeño; y la portada en el calendario. */
.laminas-tema { display: flex; flex-wrap: wrap; gap: 0.4rem; text-decoration: none; }
.laminas-tema img { width: 108px; height: auto; }
.calendario img.mini { float: left; width: 40px; height: auto; margin: 0 0.5rem 0.25rem 0; border-radius: 3px; }

/* Las pestañas de la configuración: enlaces, sin JavaScript. */
.pestanas { display: flex; gap: 0.25rem; border-bottom: 2px solid var(--gris); margin: 1rem 0; }
.pestanas a { padding: 0.45rem 0.9rem; text-decoration: none; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; }
.pestanas a.activa { border-color: var(--gris); background: var(--papel); font-weight: 600; color: var(--naranja); }
code { font-size: 0.9em; background: var(--papel); padding: 0 0.25rem; border-radius: 3px; }

/* El editor de una publicación: una caja por lámina. */
.editor fieldset { border: 1px solid var(--gris); border-radius: 6px; padding: 0.5rem 0.75rem 0.75rem; display: grid; gap: 0.5rem; }
.editor legend { font-weight: 600; padding: 0 0.25rem; }
/* Que el cuadro crezca con lo que lleva; donde no se entienda, se queda con su «rows». */
.editor textarea { field-sizing: content; min-height: 3lh; }

/* Lo que encuentran las búsquedas: titular, de dónde, el trozo con la frase marcada y qué hacer. */
.hallazgos { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.75rem; }
.hallazgos li { border: 1px solid var(--gris); border-radius: 6px; padding: 0.75rem; display: grid; gap: 0.35rem; }
.hallazgos li > a { font-weight: 600; }
.hallazgos blockquote { margin: 0; padding: 0.4rem 0.75rem; border-left: 3px solid var(--naranja); background: var(--papel); }
.hallazgos mark { background: none; color: inherit; font-weight: 700; text-decoration: underline var(--naranja) 2px; }
.hallazgos .acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Quién ha entrado, y salir. */
.quien { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; margin-right: 1rem; }
.quien form { margin: 0; }
.quien button { padding: 0.2rem 0.6rem; font-size: 0.85rem; }
/* Entrar y el alta: un formulario estrecho en el centro. */
.acceso { max-width: 26rem; margin: 2rem auto; }
.enlace-alta { font-family: ui-monospace, monospace; word-break: break-all; background: var(--papel); padding: 0.5rem 0.75rem; border-radius: 6px; }
/* Una casilla con su texto al lado, no debajo como los demás campos. */
.formulario label.casilla { display: flex; align-items: center; gap: 0.5rem; }
.formulario .casilla input { width: auto; margin: 0; }

/* Cada clave de servicio, en su bloque. */
.clave { border-top: 1px solid var(--gris); margin-top: 1.25rem; padding-top: 0.25rem; }